Embedded Files
Bootstrap etiketlerin ve rozetlerin uygulanmasını öğreneceğiz. Bootstrap, duyarlı web siteleri ve web uygulamaları oluşturmak için ücretsiz ve açık kaynaklı bir araç koleksiyonudur. Bootstrap, duyarlı web siteleri yapmak için farklı türde sınıflar kullanır. Ek bilgileri belirtmek için önyükleme etiketleri ve rozetleri kullanılır. Rozetler, göreli yazı tipi boyutlandırması kullanılarak doğrudan üst öğenin boyutuyla eşleşecek şekilde ölçeklenir. Etiketler, bağlantı veya metin hakkında ek bilgi verir.
BOOTSTRAP BADGES
Bootstrap Rozetler, bir göstergeyi görüntülemek veya bir sayı saymak için kullanılan basit ve temel bileşenlerdir. Bu, diğer şeylerin yanı sıra posta sayısı ve uyarı amaçları için oldukça kullanışlıdır. Rozetler, daha yuvarlak köşelere sahip olmaları dışında etiketlerle aynıdır. Rozetler, göreli yazı tipi boyutlandırması ve em birimleri kullanılarak doğrudan üst öğenin boyutuyla eşleşecek şekilde ölçeklenir. Bunlar, önceden tanımlanmış bir ".badge" sınıfı kullanılarak kullanılabilir.
--- Bootstrap badges kullanılan 8 farklı etiket türü ---
badge-primary: Öğenin önemini vurgulayan mavi renkli bir arka plan eklemek için kullanılır.
badge-info: Bir elemente açık mavi zemin rengi ekleyerek bazı bilgileri temsil etmek için kullanılır.
badge-success: Bir elemente yeşil arka plan rengi kullanılarak başarıyı veya olumlu eylemi temsil etmek için kullanılır.
badge-danger: Bir elemente kırmızı zemin rengi kullanılarak tehlikeyi veya olumsuz eylemi belirtmek için kullanılır.
badge-warning: Bir elemana sarı zemin rengi kullanılarak uyarı veya olumsuz eylem belirtmek için kullanılır.
badge-secondary: Bir öğeye gri arka plan rengi kullanılarak bilgi vermeyen veya ikincil eylemi temsil etmek için kullanılır.
badge-light: Bir elemana şeffaf arka plan rengini göstermek için kullanılır.
badge-dark: Bir elemana koyu gri zemin rengini temsil etmek için kullanılır.
-- ÖRNEK --
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<h2>Bootstrap Badge Example</h2>
<button type="button" class="btn btn-danger">
Danger <span class="badge">10</span>
</button>
<button type="button" class="btn btn-success">
Success <span class="badge">12</span>
</button>
<button type="button" class="btn btn-warning">
Warning <span class="badge">20</span>
</button>
<button type="button" class="btn btn-primary">
Warning <span class="badge">25</span>
</button>
<button type="button" class="btn btn-info">
Warning <span class="badge">6</span>
</button>
</div>
</body>
</html>
Not: button tıklandığında açılan <a> etiketini kullanarak rozetlere eklenmiş diğer web sitelerine bağlantılar da ekleyebilirsiniz.
BOOTSTRAP LABELS
Bootstrap Label sınıfı, weblerindeki sayfa bağlantıları veya metinlerle ilgili uyarılar, sayılar, güncellemeler ve ipuçları gibi önemli ek ayrıntılar farklı bir biçim sağlayan tanımlanmış bir sınıftır. ayrıca web sayfalarındaki içerikler stiller ekler.
- Bootstrap Labels'de kullanılan 6 etiket türü -
label-default: Bu bir öğe için başka bir etiket kullanılmadığında kullanılan varsayılan etikettir.
label-primary:Bu etiket, bir öğeye mavi renk ekleyerek bazı önemli etiketleri temsil etmek için kullanılır.
label-success: Bu etiket, bir öğeye yeşil rengi ekleyerek başarıyı veya bazı olumlu eylem etiketlerini temsil etmek için kullanılır.
label-info: Bu etiket, bir öğeye açık mavi rengi ekleyerek bilgilendirici bir etiketi belirtmek için kullanılır.
label-warning: Bu etiket, bir öğeye sarı rengi ekleyerek bir uyarı veya olumsuz eylem etiketini belirtmek için kullanılır.
label-danger: Bu etiket, bir öğeye kırmızı rengi ekleyerek tehlike veya olumsuz eylem etiketini belirtmek için kullanılır.
✓ Sınıf kapsayıcılı HTML gövdesine <div> etiketini ekleyin.
Html gövdesinde .label sınıfıyla <span> etiketini bildirin.
Etiketlere arka plan rengi eklemek için .label-success, .label-primary, .label-danger, sınıflar gibi farklı etiketler eklenir ✓
--ÖRNEK--
<h1>Example Heading <span class = "label label-default">Label</span></h1>
<h2>Example Heading <span class =" label label-default">Label</span></h2>
<h3>Example Heading <span class = "label label-default">Label</span></h3>
<h4>Example Heading <span class = "label label-default">Label</span></h4>
--ÖRNEK--
<span class = "label label-default">Default Label</span>
<span class = "label label-primary">Primary Label</span>
<span class = "label label-success">Success Label</span>
<span class = "label label-info">Info Label</span>
<span class = "label label-warning">Warning Label</span>
<span class = "label label-danger">Danger Label</span>
HAZIRLAYAN = AHMET ŞİMŞEK / 22430070047
Page updated
Report abuse