Genel

Daha iyi, daha hızlı, daha güçlü web geliştirme yaklaşımı içeren, Bootstrap altyapısının önemli parçalarına ulaşabilirsiniz.

HTML5 Belge Türü

Bootstrap, belirli HTML elementlerini ve CSS özelliklerini kullanır, bu da HTML5 doctypeyi kullanılmasını gerektirir. Bu yüzden tüm projelerin başına dahil edilir.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

Mobil Öncelik

Bootstrap 2 ile, kütüphanenin temel özellikleri için isteğe bağlı mobil uyumlu stiller eklendi. Bootstrap 3 ile, proje mobil uyumlu olması için baştan yazıldı. İsteğe bağlı mobil stilleri eklemek yerine, onları doğrudan çekirdeğin içine dahil ettik. Hatta, Bootstrap mobil önceliklidir.. Ayrı dosyalar yerine tüm kütüphane içerisinde mobil öncelikli stiller bulabilirsiniz.

Uygun render ve dokunmatik yakınlaştırma sağlamak için, "viewport" meta etiketini <head> arasına ekleyin.

<meta name="viewport" content="width=device-width, initial-scale=1">

Mobil cihazlarda yakınlaştırma özelliğini viewport meta etiketineuser-scalable=no ekleyerek devre dışı bırakabilirsiniz. Yakınlaştırma özelliğini devre dışı bırakarak ,kullanıcılara sadece kaydırma çubuğunu erişim imkanını sağlar ve bunun sonucunda sitenize biraz daha yerli uygulama hissi verirsiniz. Fakat biz bunu her site için önermiyoruz.!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Bootstrap setleri temel küresel ekranlar, tipografi, ve bağlantı stilleri içerir. Özellikle:

  • body üzerinde background-color: #fff; olarak ayarlayın.
  • Tipografinizin niteliklerini temel olarak @font-family-base, @font-size-base, ve @line-height-base olarak kullanın.
  • Küresel bağlantı rengini @link-color aracılığıyla ve uygulama linkinin altı çizili özelliğini sadece :hoverkomutu ile ayarlayabilirsiniz.

Bu stilleri scaffolding.less içinde bulabilirsiniz.

Normalize.css

Gelişmiş tarayıcılar arası çeviri için kullanılan Normalize.css, Nicolas Gallagher ve Jonathan Neal tarafından hazırlanmıştır.

Konteynerler

Bootstrap site içeriğini kaplayan ve bizim ızgara sistemini barındırmak bir içeren eleman gerektirir. Projelerinizde kullanmak için iki konteynerden birini seçebilirsiniz. Konteynerlerin iç içe kullanılabildiğini de unutmayın.

Duyarlı sabit genişlikli konteyner için .container kullanılır.

<div class="container">
  ...
</div>

Tam genişlik konteyner için, ekranınızın tüm genişliğini kapsayan .container-fluid kullanılır.

<div class="container-fluid">
  ...
</div>

Izgara sistemi

Bootstrap duyarlı, mobil öncelikli ızgara sistemi içerir, cihaz veya ekranın boyutu arttıkça 12 sütuna kadar uygun olarak ölçekler. Daha anlamsal düzenleri oluşturmak ve kolay düzen seçenekleri için öntanımlı sınıfların yanı sıra daha anlamsal düzenleri oluşturmaya izin veren güçlü katmalar içerir.

Tanıtım

Izgara sistemleri içeriğinizi barındıracak satır ve sütunları bir dizi sayfa düzenleri oluşturmak için kullanılır. Buradan ızgara sisteminin nasıl çalıştığını inceleyebilirsiniz:

  • Satırlar doğru hizalama ve dolgu için bir .container (fixed-width) veya .container-fluid (full-width) içine yerleştirilmelidir.
  • Yatay sütunların gruplandırılması için satırları kullanın.
  • İçerik, sütunların içerisinde yer almalı ve sadece sütunlar sıraların yakın çocukları olabilir.
  • Öntanımlı ızgara sınıfları .row ve .col-xs-4birbirine benzer hızlı ızgara düzenleri yapmak için kullanılabilir. Ayrıca daha fazla anlamlı yapı için Less kullanılabilir.
  • Sütunlar padding aracılığıyla boşluklar(sütun içeriğindeki boşluklar) oluşturur. Bu padding .row üzerindeki negatif tolerans aracılığıyla ilk ve son kolon için sıra içlerini dengeler.
  • Negatif tolerans aşağıdaki örnekleri dışa bombeli olma sebebidir. Ayrıca ızgara kolonlarının içerisindeli ızgara yapıda olmayan içerikleri sıralamaya yarar.
  • Izgara kolonları ölçmek istediğiniz 12 hazır kolonların belirli numaraları tarafından oluşturulur. Örneğin üç eşit kolon üç .col-xs-4 kullanılırdı.
  • Eğer 12 den fazla kolon tek bir sıra içerisinde konulursa her bir extra kolon tek bir birim olarak yeni bir satırda yer alır.
  • Izgara sınıfları cihazları ekran genişliğini kırılma noktasının boyutundan daha büyük veya eşit kabul eder ve daha kücük cihazlarda ızgara sınıfının üzerine yazmayı hedefler. Bu yüzden herhangi bir kabul edilen .col-md-* sınıfı bi element için orta cihazlar üzerinde stilize etme etkili olmayacaktır fakat büyük cihazlar üzerinde eğer .col-lg-* sınıf mevcut değilsede stilize etme etkili olmaz.

Bu kuralları kodunuzda uygulamak için örneklere bakalım.

Medya sorguları

Izgara sisteminde anahtar kesme noktaları oluşturmak için Less dosyalarımızı aşağıdaki medya sorguları ile kullanın.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Bazı durumlarda cihazların dar kümesine CSS sınırlandırması için max-width eklemek için bu medya sorguları genişletin.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Izgara seçenekleri

Kullanışlı bir tablo ile birden fazla cihaz arasında Bootstrap ızgara sistemi çalışmalarının nasıl çalıştığını görelim.

Ekstra Küçük Cihazlar Telefonlar (<768px) Küçük Cihazlar Tabletler (≥768px) Orta Cihazlar Masaüstü Bilgisayarlar (≥992px) Büyük Cihazlar Masaüstü Bilgisayarlar (≥1200px)
Grid behavior Her zaman yatay Yatay üzeri kesme noktalarını başlatmak için daraltılmış
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Column width Auto ~62px ~81px ~97px
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes

Örnek:

.col-md-* ızgara sınıflarının tekil düzenlemelerini kullanarak eski tablet ve mobil cihazlarınız üzerinde başlayan temel ızgara sistemi oluşturabilirsiniz. Herhangi bir .row içerisinde ızgara kolonları yerleştirin.

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Örnek: Fluid container

.container-fluid'i .container'a çevirerek herhangi bir sabitlenmiş geniş ızgara yapısını full geniş yapıya çevirebilirsiniz.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

Örnek: Mobil ve Masaüstü

Küçük cihazlar içindeki sütunlarınızda basit yığınlar istemiyormusunuz? Extra küçük ve orta cihazlar için .col-xs-* .col-md-* ızgara sınıflarını ekleyerek kullanabilirsiniz. Nasıl çalıştığı ile ilgili daha çok bilgiye sahip olmak için aşağıdaki örnekleri inceleyebilirsiniz.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Örnek: Telefon, tablet, masaüstü

Bir önceki örnekte olduğu gibi tablet için daha güçlü ve dinamik olan .col-sm-* sınıflarını kullanarak oluşturabilirsiniz.

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Örnek: Sütun Kaydırma

Eğer 12 den fazla kolon tek bir satır içerisine konulursa her bir extra kolon tek bir birim olarak yeni bir satırda yer alır.

.col-xs-9
.col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-xs-6
Subsequent columns continue along the new line.
<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

Duyarlı sütun sıfırlama

Dört grup ızgara sınıfı yukarıda verildiği halde bazı sütunlar diğer sütunlardan daha yüksek görülebilir. Bu sorunu gidermek için .clearfix ve duyarlı yardımcı sınıfları bir arada kullanabilirsiniz.

.col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for an example.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

Duyarlı kesme noktaları ile kolon temizlemeye ek olarak reset offsets, pushes, or pulls sınıflarına ihtiyacınız olabilir. Bu eylemler için ızgara örneğine bakabilirsiniz.

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

Sütun netleştirme

Sütunları sağa taşımak için.col-md-offset-* sınıfını kullanabilirsiniz. Bu sınıflar ile bir veya * sütunların sol kenar boşluğu artırabilir . Örneğin, .col-md-offset-4 4 kolonun üzerine .col-md-4 taşır.

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

Sütunları iç içe geçirme

Varsayılan ızgara ile içeriğinize iç içe kolon eklemek için, yeni bir.row ekleyin. Ve varolan bir .col-sm-* içine .col-sm-* sütunu ekleyin. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

Level 1: .col-sm-9
Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6
<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Sütun sıralama

Yerleştirdiğiniz ızgara sütunlarınının yerlerini .col-md-push-* ve .col-md-pull-* değiştirici sınıfları ile kolayca değiştirebilirsiniz.

.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Less katmaları ve değişkenleri

Önceden oluşturulmuş ızgara sınıflarına ek olarak hızlı düzenleme için, Bootstrap basit, hızlı ve anlamsal düzenleri oluşturmak için kendi Less değişkenleri ve katmalarını içerir.

Değişkenler

Değişkenler, sütun sayısı, cilt payı genişliğini ve medya sorgu noktasını belirlemek için kullanılır. Aşağıda listelenen özel katma değişkenler ile de önceden tanımlanmış ızgara sınıfları oluşturmak için kullanabilirsiniz.

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

Katmalar

Katmalar, bireysel kılavuz sütunları için anlamsal CSS oluşturmakta kullanılır ve kılavuz değişkenleri ile birlikte kullanılır.

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();
  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}
// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);
  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);
  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}
// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);
  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}
// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);
  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}
// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

Örnek Kullanımı

Değişkenleri kendinize özel değiştirebilirsiniz, ya da sadece değişkenlerin varsayılan değerleri için kullanabilirsiniz.Buradaki örnekte varsayılan değerler ile arasında bir boşluk olacak şekilde iki sütun oluşturabilirsiniz.

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}
<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

Tipografi

Başlıklar

Tüm HTML başlıkları, <h1> <h6>, aracılığıyla kullanılabilir. Bir başlığın yazı tipi stilini değiştirmek istediğinizde .h1 .h6 sınıflarını kullanabilirsiniz.

h1. Bootstrap heading

Semibold 36px

h2. Bootstrap heading

Semibold 30px

h3. Bootstrap heading

Semibold 24px

h4. Bootstrap heading

Semibold 18px
h5. Bootstrap heading
Semibold 14px
h6. Bootstrap heading
Semibold 12px
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

Jenerik bir <small> etiketi veya .small sınıfı ile herhangi bir başlıkta daha hafif, orta metinler oluşturabilirsiniz.

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

Gövde Kopyası

Bootstrap'ın genel varsayılan font-size14px, ile line-height 1.428'dir. Bu uygulama tüm <body>'de ve tüm paragraflarda uygulanır. Ek olarak <p> paragrafların satır aralıkları 10 px'dir.

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Lead gövde kopyası

Bir paragrafa .lead ekleyerek öne alabilirsiniz.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">...</p>

Less kullanımı

Tiografik ölçek temelde ikideğişken kullanır variables.less: @font-size-base ve @line-height-base. İlk olarak yazı boyutu,ikincisi de satır yüksekliği.Bu değerleri bazı kolay marjinler ve temeller oluşturmak için ve satır yüksekllerini ayarlamak için kullanırız.

Satır içi metin öğeleri

İşaretli metin

Metni başka bir bağlamda önemi nedeniyle vurgulamak için <mark> etiketini kullanın.

You can use the mark tag to highlight text.

You can use the mark tag to <mark>highlight</mark> text.

Silinmiş metin

Silinmiş metin bloklarını göstermek için <del> etiketini kullanılır.

This line of text is meant to be treated as deleted text.

<del>This line of text is meant to be treated as deleted text.</del>

Üstü çizili metin

Üstü çizili metinleri belirtmek için <s> etiketini kullanılır.

This line of text is meant to be treated as no longer accurate.

<s>This line of text is meant to be treated as no longer accurate.</s>

Eklenen metin

Ek metin dökümanlarını belirtmek için <ins> etiketini kullanılır.

This line of text is meant to be treated as an addition to the document.

<ins>This line of text is meant to be treated as an addition to the document.</ins>

Altı çizili metin

Metnin altını çizmek için <u> etiketini kullanılır.

This line of text will render as underlined

<u>This line of text will render as underlined</u>

Hafif stilleriyle HTML'in varsayılan vurgu etiketlerinden yararlanabilirsiniz.

Küçük Metin

Metin blokları veya vurgulanan metinlerin %85 ni küçültmek için <small> etiketini kullanın. Başlık elemanlarını font-size ile iç içe olan <small> içine alarabilirsiniz.

You may alternatively use an inline element with .small in place of any <small>.

This line of text is meant to be treated as fine print.

<small>This line of text is meant to be treated as fine print.</small>

Kalın

Bir yazı parçası vurgulamak için kullanılır.

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

İtalik

Metnin bir kısmını italik olarak vurgalar.

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

Diğer öğeler

HTML5'te <b> ve <i>öğelerini kullanmaktan çekinmeyin. <b> ek bir önem taşıma olmadan kelime veya cümleleri vurgulamak içinken <i> ise çoğunlukla ses, teknik terimler, vb. gibi öğelerde kullanılır.

Hizalama sınıfları

Metin hizalama sınıfları ile bileşenleri kolayca yeniden hizalayın.

Sola hizalanmış metin.

Ortaya hizalanmış metin.

Sağa hizalanmış metin.

İki yana yaslı metin.

Kaymayan metin.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Dönüşüm dersleri

Metin bileşenlerini farklı sınıflara değiştimek için kullanılır.

Lowercased text.

Uppercased text.

Capitalized text.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Kısaltmalar

HTML'de kısaltmaları ve kısaltmalar üzerindeki vurguyu göstermek için <abbr> etiketi kullanılır. Kısaltmalar title özelliğine sahip elemente altı çizili ve üzerine gelindiğinde kullanıcılara yardımcı içerik sağlar.

Temel Kısaltma

attr kelime özniteliği bir kısaltmadır.

<abbr title="attribute">attr</abbr>

Kısaltma

Biraz daha küçük bir yazı tipi boyutu için .initialism ekleyebilirsiniz.

HTML is the best thing since sliced bread.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

Adresler

Tüm satırları, formatı korumak için <br> ile sonlandırın.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@example.com
<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

Bloklar

Alıntı bloklarının başka kaynak dökümandan alındığını belirtir.

Varsayılan Blok

HTML sayfasındaki herhangi bir alıntının etrafına düz tırnak için <p> etiketini kullanmanızı öneririz.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Blok seçenekleri

Stil ve içerik değişikleri için standart <blockquote> kullanırlar.

Bir kaynak adlandırma

Kaynağın tanımlanması için <footer> etiketini ekleyin. Kaynak eser adı için <cite> etiketini ekleyin.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Alternatif görüntüler

Sağa hizalanmış içerik için .blockquote-reverse ekleyin.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote class="blockquote-reverse">
  ...
</blockquote>

Listeler

Sırasız

Öğelerin liste sırası farketmeksizin,

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul>
  <li>...</li>
</ul>

Sıralı

Öğelerin sırası ile listenlenmesi için,

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol>
  <li>...</li>
</ol>

Stillendirilmemiş

Varsayılan liste öğelerinde sol kenar boşluğu kaldırılmıştır (sadece child'larda). Bu yalnızca child'ların liste öğeleri için de geçerlidir. Herhangi bir iç içe liste için sınıf eklemek gerekir

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul class="list-unstyled">
  <li>...</li>
</ul>

Satır içi

Ekranda tek bir satırda tüm liste öğeleri yerleştirmek ve hafif dolgu eklemek için display: inline-block; ekleyin.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="list-inline">
  <li>...</li>
</ul>

Açıklama

Listelerin açıklamaları için kullanılır.

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Yatay Açıklama

Satırdaki terim ve açıklamaları <dl> ile yan yana yapabilirsiniz. Varsayılanında üst üste yığılmış gibi görünür. Fakat navbar genişledikçe <dl>nin bu durumu ortadan kalkar.

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Otomatik kısaltma

Yatay açıklama listeleri sol sütuna sığmayacak kadar uzun terimleri text-overflow ile keser. Daha dar pencerelerde, üst üste düzeninde varsayılan olarak değişecektir.

Kod

Satır içi

<code> ile satır içindeki kod parçacıklarını sarabilirsiniz.

Örneğin, <section> code ile sarılmalıdır.
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Kullanıcı Girişi

Genellikle klavye ile olan girişleri göstermek için <kbd> kullanılır.

Dizinler arası geçiş için cd kullanın.
Ayarları düzenlemek için ctrl + , tuşlarına basın.
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Temel Blok

Çoklu satır kodları için <pre> kullanabilirsiniz. Bu etiket ile yazdığınız kodlar render edilmeden yazdığınız biçimde görüntülenecektir.

<p>Burası örnek metin...</p>
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

İsteğe bağlı olarak e .pre-scrollable ekleyebilirsiniz . Maksimum 350px yüksekliğine kadar ayarlanır ve bir y ekseni kaydırma çubuğu sağlayar.

Değişkenler

Değişkenlerin kullanımını göstermek için <var> etiketi kullanılır.

y = mx + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Örnek çıktı

Programın kullanımını gösteren örnek bloklar için <samp> etiketi kullanılır.

This text is meant to be treated as sample output from a computer program.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Tablolar

temel örnek

Temel stiller-hafif dolgular için ve sadece yatay sınıflar için .table ekleyin. <table>'lar gereksiz gibi görünebilir, ancak tabloların yaygın kullanımı, diğer eklentileri, takvimleri ve tarih seçicileri gibi göz önüne alındığında, özel tablo stillerini ayırmayı tercih ediyoruz.

Optional table caption.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table">
  ...
</table>

Şeritli satırlar

Herhangi bir tabloya zebra şeritleme satır eklemek için <tbody> etiketinin içinde .table-striped etiketini kullanın.

Çapraz tarayıcı uyumluluğu

Çizgili tablolar :nth-child tarzınadaki CSS'ler seçer.Fakat Internet Explorer 8'da kullanılamaz.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-striped">
  ...
</table>

Tablo Kenarlıkları

Tablo ve hücre sınırlarını belirten çizgiler için .table-bordered etiketini ekleyin.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-bordered">
  ...
</table>

Hover rows

Tablo üzerinde satırların üzerine gelindiğinde aktif hale getimek için <tbody> içine .table-hover etiketini ekleyin.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-hover">
  ...
</table>

Özet Tablo

Tablonun hücrelerini biraz daha küçültmek ve özetlerini yapmak için .table-condensed ekleyin.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-condensed">
  ...
</table>

İçeriksel sınıflar

Tablo satırları veya bireysel hücrelerin renklendirmek için içeriksel sınıfları kullanın..

Sınıf Açıklama
.active Belirli bir satır ya da hücreye vurgulu rengi uygular.
.success Başarılı ya da pozitif eylemi gösterir.
.info Nötr bilgilendirici bir değişiklik veya eylemi belirtir.
.warning Dikkat gerekebilir bir uyarı gösterir.
.danger Tehlikeli veya olumsuz eylem gösterir.
# Sütun başlığı Sütun başlığı Sütun başlığı
1 Sütun içeriği Sütun içeriği Sütun içeriği
2 Sütun içeriği Sütun içeriği Sütun içeriği
3 Sütun içeriği Sütun içeriği Sütun içeriği
4 Sütun içeriği Sütun içeriği Sütun içeriği
5 Sütun içeriği Sütun içeriği Sütun içeriği
6 Sütun içeriği Sütun içeriği Sütun içeriği
7 Sütun içeriği Sütun içeriği Sütun içeriği
8 Sütun içeriği Sütun içeriği Sütun içeriği
9 Sütun içeriği Sütun içeriği Sütun içeriği
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

Yardımcı teknolojilerin taşıdığı anlam

Ekran okuyucular gibi bir tablo satır ya da bireysel hücreye anlam katmak için renk kullanımı görsel bir gösterge sağlar kullanıcılar için yardımcı teknolojiler bir ifade etmeyecektir.

Duyarlı tablolar

768px altında yatay olarak kaydırmalı ,duyarlı tablo oluşturmak için .table içinde .table-responsive 768px den daha büyük görünümlerde kaydırmalı tabloları göremezsiniz.

Dikey kırpma/kesme

Tablonun alt veya üst kenarlarında herhangi bir içerik tablonun ötesinde gidebilir. Özellikle bunlar açılan menüler ve 3. parti widgetlerdir. Bunun için duyarlı tablolar overflow-y: hidden etiketini kullanır.

Firefox ve alan kümeleri

Firefox'da bazı garip genişlik stilleri içeren alanlar vardır.Bu alanlara duyarlı tablolar ile müdahale ediliyor.Bunu da Firefox için Bootstrap geçersiz kılmıyor.

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

Daha fazla bilgi için, yığın taşması cevaplarını okuyabilrsiniz.

# Tablo başlığı Tablo başlığı Tablo başlığı Tablo başlığı Tablo başlığı Tablo başlığı
1 Tablo hücresi Tablo hücresi Tablo hücresi Tablo hücresi Tablo hücresi Tablo hücresi
2 Tablo hücresi Tablo hücresi Tablo hücresi Tablo hücresi Tablo hücresi Tablo hücresi
3 Tablo hücresi Tablo hücresi Tablo hücresi Tablo hücresi Tablo hücresi Tablo hücresi
# Tablo başlığı Tablo başlığı Tablo başlığı Tablo başlığı Tablo başlığı Tablo başlığı
1 Tablo hücresi Tablo hücresi Tablo hücresi Tablo hücresi Tablo hücresi Tablo hücresi
2 Tablo hücresi Tablo hücresi Tablo hücresi Tablo hücresi Tablo hücresi Tablo hücresi
3 Tablo hücresi Tablo hücresi Tablo hücresi Tablo hücresi Tablo hücresi Tablo hücresi
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Formlar

Temel örnek

Bireysel form denetimleri otomatik olarak bazı küresel stiller alırlar. Tüm metinler <input>, <textarea>, and <select> elemenleri ile .form-control kullanıldığına genişlik varsayılan olarak width: 100%; olur. Optimum aralık için .form-group etiketini kullanın.

Burada örnek blok düzeyi yardım metni.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Giriş grupları form grupları ile karışmaz.

Giriş grupları form gruplarının içine karıştırılmaz. Bunun yerine, form grubu içinde giriş grubunu kullanın.

Satıriçi form

Sola hizalı ve satıriçi-block kontrolleri için .form-inline etiketini ekleyin. (bir <form>içerisinde olmak zorunda değildir) Bu uygulama sadece 768px genişliğine kadar olan görünümlerde geçerlidir.

Özel genişlikler gerektirebilir

IBootstarp'ta girişlerde genişlik varsayılan olarak width: 100%; olarak gelir. Biz bu genişliği width: auto; etiketi ile resetliyoruz.Böylece birden çok kontroller aynı hat üzerinde bulunabiliyor. Düzene bağlı olarak ek özel genişlikler gerekebilir.

Her zaman etiketleri ekleyin

Her giriş için bir etiket yoksa ekran okuyucuların formlarında sorun olabilir. Satır içi formları için, kullandığınız etiketleri .sr-only sınıfı ile gizleyebilirsiniz. Yardımcı teknolojiler için bir etiket sağlayan başka alternatif yöntemler vardır aria-label, aria-labelledby veya title niteliğidir. Bunların hiçbiri mevcut değilse, ekran okuyucular kullanarak placeholder niteliği çare olabilir, placeholder diğer etiketleme yöntemlerine yedek olarak tavsiye edilmez.

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>
$
.00
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

Yatay form

Yatay düzende etiket ve form denetimleri grupları hizalamak için .form-horizontal ızgara sınıflarını kullanın. to the form (bir <form> ile kullanılmak zorunda değildir). Böylece .form-group'lar .row'un ızgara satırları gibi davranırlar.

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

Desteklenen kontroller

Standart form denetimleri örnek form düzenini destekler.

Girişler

Netin tabanlı giriş alanları, en sık kullanılan form denetimidir Tüm HTML5 türlerin: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, ve color etiketlerini destekler.

Tür beyanı gereklidir

Girişlerin type özelliği düzgün beyan edilmelidir.

<input type="text" class="form-control" placeholder="Text input">

Giriş grupları

Herhangi bir metin tabanlı öncesi ve / veya sonrasında entegre metin veya düğmeleri eklemek için <input>, giriş grup bileşenine göz atın.

Text alanı

Birden fazla metin satırını destekleyen form denetimi. Gerekirse rows niteliğini değiştirir.

<textarea class="form-control" rows="3"></textarea>

Onay Kutuları ve radyo butonlar

Onay kutuları, birçok seçenekten birini seçmek için , radyo butonları ise liste halinde bir veya birkaç seçeneği seçmek içindir.

Bir onay kutusu veya radyo buton ile disabled niteliği ile uygun biçimde stillendirilebilir. Aynı zamanda <label> özelliği sayesinde kullanıcı onay kutusu veya radyo butonu üzerine geldiğinde izin verilmiyor("not-allowed") işareti çıkarmak için .disabled etiketini kullanabilirsiniz. Bu işlemi.radio, .radio-inline, .checkbox, .checkbox-inline, veya <fieldset> sınıflarınız içinde kullanabilirsiniz.

Default (stacked)


<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

Onay kutularını ve radyo butonların satır içinde kullanımı

.checkbox-inline veya .radio-inline sınıfları bir dizi onay kutuları veya radyo butonlar aynı satırda görünen denetimler için kullanın.


<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

Onay kutuları ve radyo butonların etiket metni olmadan kullanımı

Bu nesnelerde <label>, yani metin kısmı olmadan sadece istenen checkbox ve radio kullanılmalıdır. Şu anda sadece satır içi olmayan onay kutuları ve radyo butonlarda çalışır. Hala bazı form etiketlerinin yardımcı teknolojiler ile sağlandığını unutmayın (Örneğin, aria-label) kullanımı.

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">Selects
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

Açılır listeler

Not: birçok açılır liste kullanılan arayüze yani Safari ve Chrome için border-radius özellikleri yuvarlatılmıştır.

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<select> kontrolünün multiple niteliği ile, birden çok seçenek seçme işlemi varsayılan olarak gösterilmiştir.

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Statik kontrol

Form kontrollerinde kullanılan bir nesnedir. Genellikle sabit veri girişlerinde uygulanır ve kullanmanız gereken sınıf .form-control-static ve <p> sınıflarıdır.

email@example.com

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

email@example.com

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">email@example.com</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

Odak durumu

Varsayılan outline stilleri üzerinde bazı form denetimleri kaldırmak için onun yerine box-shadow özelliği :focus sınıfı kullanılır.

Demo :focus durumu

Yukarıdaki örnekte girişi göstermek için özel stilleri kullanır. .form-control'ün :focus durumu.

Devre dışı durumunda

Kullanıcı etkileşimlerini önlemek için disabled boolean girdi özniteliğini ekleyin. Engelli girişler daha açık görünür ve bunu belirtmek için izinli değil(not-allowed) imleci ekleyin.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Devre dışı alan kümeleri

Aynı alan kümeleri içinde tüm denetimleri devre dışı bırakmak için <fieldset>'in içinde birdisabled özelliği ekleyin.

<a>'nın Bağlantı işlevselliği hakkında Uyarı

Varsayılan olarak, tarayıcılar tüm yerel form denetimlerini(<input>, <select> ve <button> elementleri) bir <fieldset disabled> içinde devre dışı olarak onların üzerindeki klavye ve fare etkileşimleri engelleyerek işler. Ancak formunuz <a ... class="btn btn-*"> elementlerini içeriyorsa, yanlızca pointer-events: nonestilini verecektir. Düğmelerin devre dışı durumuhakkındaki bölümde belirtildiği gibi(özellikle alt bölümünde bulunan bağlantı öğeleri için), bu CSS özelliği henüz standart değil. opera 18 ve altında veya IE11 de tamamen desteklenmemektedir ,ve klavye kullanıcılarının odaklanabilmesini ve bu linkleri aktifleştirebilmesini engellemeyecektir.Bu yüzden güvenli olmak için bu gibi bağlantıları devredışı bırakmak için özel Javascriptler kullanın.

Çapraz tarayıcı uyumluluğu

Bootstrap bu stilleri tüm tarayıcılarda uygulanıyor iken Internet Explorer 11 ve altında <fieldset>'in disabled özelliğini tam olarak desteklemez. Bu tarayıcılarda fieldset ‘i devredışı bırakmak için özel JavaScript kullanın.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Salt okunur durumu

Girdi değerinin değişimini önlemek için girdiye readonly özelliğini ekleyin. Salt okunur girdileri daha açık görünür (tıpkı devre dışı girdiler gibi), ancak standart imleci korur.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Doğrulama Durumları

Bootstrap, form denetimlerinde hata, uyarı ve başarı durumları için doğrulama stilleri içerir. Kullanmak için üst öğeye .has-warning, .has-error, veya .has-success ekleyin. O öğe içindeki herhangi bir .control-label, .form-control, ve .help-block doğrulama stilleri alacaktır.

Doğrulama durumunu yardımcı teknolojiler ve renk körü kullanıcılar içindir.

Form denetim durumunu belirtmek için bu doğrulama stilleri kullanmak yalnızca görsel, renk tabanlı bulgu sağlar ki bu da ekran okuyucuları gibi yardımcı teknoloji kullanıcılarına veya renk körü kullanıcılarına iletilemeyecektir.

Alternatif bir bulgu da sağlandığından emin olun. Örneğin (aşağıdaki kod örneğinde olduğu gibi) <label> ’in form denetiminde metnin kendisinin durumu hakkında bir ipucu ekleyebilir, bir Glyphicon (uygun alternatif metin ile .sr-only sınıfını kullanarak Glyphicon örneklerini inceleyebilir), veya ek yardım metni bloğu sağlayabilirsiniz. Özellikle yardımcı teknolojileri için, geçersiz form denetimleri de aria-invalid="true" özelliği atanabilir.

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

İsteğe bağlı ikonlar

Ayrıca .has-feedback ile isteğe bağlı geri bildirim simgeleri ve sağ simge ekleyebilirsiniz.

Geri bildirim simgeleri yalnızca metin öğeleri <input class="form-control"> ile çalışır.

İkonlar, etiketleri ve giriş grupları

Geri bildirim simgelerinim el ile konumlandırılması sağda eklentisi olan giriş grupları için ve etiketsiz girdiler için gereklidir. Erişilebilirlik nedeniyle tüm girdileri etiket sağlamanız önerilir. Etiketlerin görüntülenmesini engellemek isterseniz .sr-only sınıfı ile onları gizleyin. Eğer etiketsiz yapacaksanız geri bildirim simgesinin değerini top olacak şekilde ayarlayın. Eklentinizin genişliğine bağlı olarak right değerini uygun bir piksel değerine ayarlayın.

İkonların anlamını yardımcı teknolojilere iletme

Ekran okuyucu gibi– yardımcı teknolojilerin simgenin anlamını düzgün bir şekilde ilettiğinden emin olmak için .sr-only sınıfı ile ek gizli metin eklenmeli ve aria-describedby. kullanımıyla ilgili form denetimi ile ilişkilendirilmelidir. Alternatif olarak, anlamın (örneğin, belirli metin giriş alanı için bir uyarı vardır.) form denetimiyle ilişkilendirilmiş gerçek metnin değişimi <label> gibi bir diğer forma aktarıldığından emin olun.

Aşağıdaki örnekler, zaten <label>metin kendisinde onların anılan sıraya göre form denetimlerinin doğrulama durumundan bahsetmesine rağmen yukarıdaki teknik( .sr-only metnini ve aria-describedby kullanan) görsel amaçlar için eklenmiştir.

(success)
(warning)
(error)
@
(success)
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

Optional icons in horizontal and inline forms

(success)
@
(success)
<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>
(success)

@
(success)
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

Optional icons with hidden .sr-only labels

If you use the .sr-only class to hide a form control's <label> (rather than using other labelling options, such as the aria-label attribute), Bootstrap will automatically adjust the position of the icon once it's been added.

(success)
@
(success)
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

Denetim boyutlandırma

Yükseklikleri .input-lg, sınıfını kullanarak ve kılavuz sütun genişlikleri .col-lg-* sınıfını kullanarak ayarlayın.

Yükseklik Boyutlandırma

Düğme boyutlarına uyan uzun veya daha kısa form denetimlerini oluşturun.

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

Yatay form grup boyutları

Hızlı boyut etiketleri ve form denetimleri içinde .form-horizontal .form-group-lg veya .form-group-sm ekleyerek boyutlandırma yapabilirsiniz.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

Sütun boyutlandırma

Izgara sütunların içindeki Wrap girişlerinde ya da herhangi bir özel ana elemanda, kolayca istenen genişlikleri uygulamakta kullanılır.

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

Yardım metni

Form denetimleri için blok düzeyinde yardım metni.

Yardım metnini form denetimleri ile ilişkilendirme

Yardım metni açıkça aria-describedby özniteliğini kullanarak ilişkili form denetimi ile ilişkili olmalıdır. Bu kullanıcı odaklı veya denetime girdiği – ekran okuyucu gibi – bu yardımcı teknolojiler yardım metni sağlayacaktır.

A block of help text that breaks onto a new line and may extend beyond one line.
<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

Butonlar

Buton etiketleri

Buton etiketlerini <a>, <button>, veya <input> elemanları ile kullanabilirsiniz.

Link
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

İçeriğe özgü kullanım

Buton sınıfları <a> ve <button> öğeleri üzerinde kullanılabiliyorken, gezinme ve gezinti çubuğu bileşenleri içinde yalnızca <button> öğeleri desteklenir.

Buton gibi davranan linkler

Eğer<a> öğeleri buton olarak davranması için kullanılacaksa (geçerli sayfa içinde başka bir belge veya bölüme köprü kurmanın yerine sayfa işlevselliği tetikler.) uygun bir role="button" verilmelidir..

Çapraz tarayıcı işleme

En iyi yöntem olarak, mümkün olduğunda çapraz tarayıcı işleme eşlemesinden emin olmak için <button> elemanını ne zaman mümkünse kullanmanızı öneririz.

Diğer şeyler arasında Firefox 3.0 altında bir hata vardır ki bu da bizim <input> tabanlı butonların line-height'lerini ayalamamızı engellemekte bu da Firefox’da diğer butonların yüksekliğinin tam olarak uymamasına neden olmaktadır.

Seçenekler

Hızlıca tasarımlı bir buton yaratmak için mevcut buton sınıflarından herhangi birini kullanın.

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

Yardımcı teknolojiler anlam taşıma

Bir butona anlam katmak için renkleri kullanmak yalnızca görsel bir belirti sağlar ki bu da yardımcı teknoloji kullanıcılarına iletilemeyecektir. Renk ile belirtilen bilgilerin ya içeriğin kendisinden açık (butonun görünür metini) ya da .sr-only sınıfı ile ek gizli metinler gibi alternatif yolları içerdiğinden emin olun.

Boyutlar

Süslü daha büyük veya daha küçük butonlar? Ek boyutlar için .btn-lg, .btn-sm, veya .btn-xs ekleyin.

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

Etkin durum

Butonlar etkin iken basılı( daha koyu arka plan, koyu kenarlık ve ilave gölgeli) görünür. <button> öğeleri için bu işlem :active aracılığıyla yapılır. <a> elemanı için, .active kullanılamaz. Ancak, etkin duruma programlı olarak tekrarlamak ihtiyacı duyuyorsan <button>larda .active ve aria-pressed="true" özelliğini ekle i kullanabilirsin.

Buton öğesi

:active sanal sınıf olduğu için eklemeye gerek yoktur. Aynı görünüme mecbur kalırsanız devam edin ve .active ekleyin.

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

Çapa öğesi

<a> Butonlarına .active sınıfı ekleyin.

Primary link Link

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

Devredışı durumu

opacityile renklerini soldurarak butonları tıklanamaz görünümde yapabilirsiniz.

Buton öğesi

<button> öğesine disabled özniteliğini ekleyin.

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

Çapraz tarayıcı uyumluluğu

Bir <button>a disabled özelliği eklerseniz, Internet Explorer 9 ve altı düzeltilemeyen berbat bir metin-gölgesi ile grimetin işler..

Çapa öğesi

<a>butonlarına .disabled sınıfını ekleyin.

Primary link Link

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

.disabled'ı buradayaygın .activesınıfına benzer yardımcı sınıf olarak kullandık bu yüzden herhangi bir öneki gerekli değildir.

Bağlantı işlevsellik uyarısı

Bu sınıf <a>ların, bağlanti işlevselliğini devredışı bırakmayı denemek için pointer-events: noneı kullanır. Ama bu CSS özelliği henüz standart değildir ve Opera 18 ve altı sürümlerde veya Internet Explorer 11 tam olarak desteklenmemektedir.pointer-events: none, destekleyen tarayıcılarda bile klavye gezintisi etkilenmemiş kalır bu da görüşlü klavye kullanıcıları ve yardımcı teknoloji kullanıcıları bu bağlantıları aktifleştirebileceği anlamına gelir. Bu yüzden emin olmak için bu gibi bağlantıları devre dışı bırakmak için özel JavaScript kodları kullanın.

Görüntüler

Mobil uyumlu görüntüler

Bootstrap 3’de görüntüler .img-responsive sınıfının eklenmesiyle mobil uyumlu yapılabilir. Bu, görüntüye max-width: 100%;, height: auto; ve display: block; güzelce üst öğeye ölçeklendirebilsin diye uygular.

.img-responsive sınıfını kullanan görüntüleri ortalamak için .text-center yerine .center-block kullanın. .center-block kullanımı hakkında daha fazla bilgi için yardımcı sınıflar bölümüne bkz.

SVG görüntüleri ve IE 8-10

Internet Explorer 8-10’da .img-responsive li SVG görüntüleri orantısız bir şekilde boyutlandırılır. Bu sorunu gidermek için gerektiğinde width: 100% \9; ekleyin. Bootstrap diğer görüntü formatlarıyla komplikasyonlara neden olduğu için bunu otomatik olarak uygulamaz.

<img src="..." class="img-responsive" alt="Responsive image">

Görüntü şekilleri

herhangi bir projede bir <img> öğesine kolaylıkla şekil vermek için sınıfları ekleyin.

Çapraz tarayıcı uyumluluğu

Internet Explorer 8 köşeleri yuvarlatılmış desteğinden yoksun olduğunu göz önünde bulundurun.

A generic square placeholder image with rounded corners A generic square placeholder image where only the portion within the circle circumscribed about said square is visible A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Yardımcı sınıflar

Bağlamsal renkler

Anlamı bir avuç vurgu yardımcı program sınıfları ile renkler aracılığıyla iletin. Bu bağlantılar için de uygulanabilir ve varsayılan bağlantı stilleri gibi vurgulu biçimde koyulaştıracaktır.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

Özgüllük ile ilgili

Bazen vurgu sınıfları bir seçici özgüllüğü nedeniyle uygulanamaz. Çoğu durumda, yeterli bir çözüm bir <span> sınıf ile metninizin sarmalanmasıdır.

Yardımcı teknolojiler anlam taşıma

Anlam eklemek için renk kullanmak yalnızca görsel bir belirti sağlar ki bu ekran okuyucuları gibi yardımcı teknolojiler kullanıcılara iletilemeyecektir. Renk ile belirtilen bilgilerin ya içeriğin kendisinden açık olduğuna(içeriksel renkleri yalnızca metin/biçimlendirme içinde mevcut olan anlamı güçlendirmek için kullanılır) ya da .sr-only sınıfı ile ek gizli metin gibi alternatif yollarla elde edildiğinden emin olun.

Kavramsal arka planlar

İçeriğe dayalı metin renk sınıflarına benzer bir şekilde, herhangi bir bağlamsal sınıfına kolayca bir öğenin arka planını ayarlayın. Bağlantı bileşenleri metin sınıfları gibi vurgulu olarak koyulaşacaktır.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

Özgüllük ile ilgili

Bazen bağlamsal arka plan sınıfları bir seçici özgüllüğü nedeniyle uygulanamaz. Bazı durumlarda, yeterli bir çözüm, öğenin içeriğinin <div> sınıfı ile sarmalanmasıdır.

Yardımcı teknolojiler anlam taşıma

Bağlamsal renkler ile, renk iletilen herhangi bir anlam tamamen tanıtımı olmayan bir formatta da iletilebilir.

Kapat simgesi

Kipler ve uyarılar gibi serbest bırakan içerik için genel kapat simgesini kullanın.

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

Düzeltme işaretleri

Düzeltme işaretlerini aşağı açılan menü işlevselliği ve yönünü belirtmek için kullanın. Not: Varsayılan düzeltme işareti dropup menüler otomatik olarak tersine çevirir.

<span class="caret"></span>

Hızlı dolaşma

Bir öğeyi sola veya sağa ile bir sınıf dolaştırın. !important özgüllük sorunları önlemek için bulunur. Sınıflar, mixins olarak da kullanılabilir..

<div class="pull-left">...</div>
<div class="pull-right">...</div>
// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}
// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

Gezinti çubuklarında kullanım için değil

Yardımcı program sınıfları ile gezinti çubuklarında bileşenleri hizalamak için .navbar-left veya .navbar-right kullanın. Ayrıntılı bilgi için gezinti çubuğu dokümanlarına bakın.

Merkezi içerik blokları

Bir öğeyi display: block'a ve margin. aracılığıyla merkeze ayarlayın. Bir mixin ve sınıf olarak kullanılabilir.

<div class="center-block">...</div>
// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
// Usage as a mixin
.element {
  .center-block();
}

Clearfix

floatları üst öğeye .clearfix ekleyerek kolayca temizleyin. Mikro clearfix Nicolas Gallagher tarafından yaygınlaştırıldığı gibi kullanır. Mixin olarak da kullanılabilir.

<!-- Usage as a class -->
<div class="clearfix">...</div>
// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}
// Usage as a mixin
.element {
  .clearfix();
}

Gösterme ve içerik gizleme

Bir öğenin .show ve .hidden sınıflarının kullanımı ile gösterilir veya gizlenir.(ekran okuyucular için de dahil olmak üzere) Bu sınıflar hızlı dolaşmadaki gibi özgüllük çatışmaları önlemek için !important i kullanırlar. Bunlar sadece blok düzeyi geçiş için kullanılabilir. Onlar da mixins kullanılabilir.

.hide kullanılabilir, ancak bu her zaman ekran okuyucuları etkilemez ve v3.0.1’de önerilmemektedir. Bunun yerine .hidden veya .sr-only kullanın.

Ayrıca, .invisible yalnızca öğenin görünürlüğünü değiştirmek için kullanılabilir ki bu da display i değiştirilmediği anlamına gelir ve öğe hala belge akışını etkileyebilir.

<div class="show">...</div>
<div class="hidden">...</div>
// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}
.invisible {
  visibility: hidden;
}
// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

Ekran okuyucu ve klavye gezinti içeriği

.sr-only ile bir öğeyi ekran okuyucuları hariç tüm cihazlar gizleyin. Odaklandığı zaman (örneğin yalnızca klavye kullanıcı tarafından) öğeyi yeniden göstermek için.sr-only ile .sr-only-focusablebirleştirin. Aşağıdaki erişilebilirlik için en iyi yöntemler için gerekli. Mixins olarak da kullanılabilir.

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

Resim değiştirme

bir arka plan görüntüsü ile bir öğenin metin içeriği değiştirmesine yardım etmek için .text-hide sınıfını veya mixin kullanın.

<h1 class="text-hide">Custom heading</h1>
// Usage as a mixin
.heading {
  .text-hide();
}

Duyarlı hizmet programları

Daha hızlı mobil dostu gelişimi için aygıt yolu ile medya sorgu tarafından içerik gizleyerek bu yardımcı program sınıfları kullanın. Ayrıca yazdırıldığında içeriğin işaretini değiştirmek için yardımcı program sınıfları bulunmaktadır.

Sınırlı olarak bu kullanabilir ve aynı sitenin tamamen farklı sürümlerini oluşturmayı önlemek için deneyin.

Kullanılabilir sınıfları

Bir tek veya birlikte kullanılabilir sınıfları içerik görüntüleme çerçevesinin kesme noktaları arasında geçiş için kullanın.

Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
.visible-xs-* Visible
.visible-sm-* Visible
.visible-md-* Visible
.visible-lg-* Visible
.hidden-xs Visible Visible Visible
.hidden-sm Visible Visible Visible
.hidden-md Visible Visible Visible
.hidden-lg Visible Visible Visible

v3.2.0'deki gibi, .visible-*-* sınıfları için üç varyasyon gelir, her özellik değerinin display CSS'i aşağıda sıralanmıştır.

Group of classes CSS display
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

Yani, ekstra küçük (xs) Örneğin, kullanılabilir ekranlar için .visible-*-* sınıfları şunlardır: .visible-xs-block, .visible-xs-inline, ve .visible-xs-inline-block.

The classes .visible-xs, .visible-sm, .visible-md, and .visible-lg also exist, but are deprecated as of v3.2.0. They are approximately equivalent to .visible-*-block, except with additional special cases for toggling <table>-related elements.

Yazdırma sınıfları

Benzer şekilde normal duyarlı sınıfları baskı ve içerik geçişi kullanın.

Classes Browser Print
.visible-print-block
.visible-print-inline
.visible-print-inline-block
Visible
.hidden-print Visible

The class .visible-print also exists but is deprecated as of v3.2.0. It is approximately equivalent to .visible-print-block, except with additional special cases for <table>-related elements.

Test cases

Resize your browser or load on different devices to test the responsive utility classes.

Görünür...

Yeşil onay işaretleri ,elementi mevcut ekranlarında görünür olduğunu gösterir .

✔ Visible on x-small
✔ Visible on small
Medium ✔ Visible on medium
✔ Visible on large
✔ Visible on x-small and small
✔ Visible on medium and large
✔ Visible on x-small and medium
✔ Visible on small and large
✔ Visible on x-small and large
✔ Visible on small and medium

Gizli...

Burada, yeşil onay işaretli öğe gizlenir, geçerli görüntüleme çerçevesinin içinde de gösterilir.

✔ Hidden on x-small
✔ Hidden on small
Medium ✔ Hidden on medium
✔ Hidden on large
✔ Hidden on x-small and small
✔ Hidden on medium and large
✔ Hidden on x-small and medium
✔ Hidden on small and large
✔ Hidden on x-small and large
✔ Hidden on small and medium

Less Kullanımı

Bootstrap, CSS derlemek için değişkenler, Mixins ve fonksiyonları gibi ek işlevselliği ile önişlemci üzerine inşa edilmiştir.Isteyen çerçeve boyunca daha az dosya kullanmak için bizim derlemiş olduğumuz CSS dosyalarını kaynak Az dosyalar olarak kullanabilir.

Izgara sistemi bölümünde tablo değişkenleri ve mixins kap vardır.

Bootstrap Derlenmesi

Bootstrap’ı en az iki yolu ile kullanabilirsiniz: derlenmiş CSS ile veya daha az kaynak dosya ile. Daha az dosya derlemek için geliştirme ortamında gerekli komutları çalıştırmak için nasıl başlanır bölümüne bakınız.

Üçüncü parti derleme araçları Bootstrap ile çalışabilir, ancak çekirdek ekibimiz tarafından desteklenmez.

Değişkenler

Değişkenler merkezileştirmek için bir yol olarak tüm proje boyunca kullanılır ve hisse değerleri renkleri, boşluk veya yazı yığınları gibi yaygın olarak kullanılır. Tam bir dökümü için Customizer konusuna bakın.

Renkler

Kolayca iki renk şemalarından faydalanılabilinir: Gri tonlama ve semantik. Gri tonlu renkler genellikle hızlı erişim sağlarken semantik ise anlamlı bağlamsal değerlere atanmış çeşitli renklerde bulunur.

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee
@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

Projenize daha anlamlı değişkenlere atamak için bu renk değişkenlerin herhangi birini kullanın..

// Use as-is
.masthead {
  background-color: @brand-primary;
}
// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

İskele

Site iskeletinizin temel unsurlarını özelleştirmek için bir avuç değişken..

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

Tek bir değerle, doğru renk ile kolayca bağlantı stili.

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);
// Usage
a {
  color: @link-color;
  text-decoration: none;
  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

Note that the @link-hover-color uses a function, another awesome tool from Less, to automagically create the right hover color. You can use darken, lighten, saturate, and desaturate.

Tipografi

Yazı, metin boyutu, satır aralığı ve birkaç daha hızlı değişkenleri kolayca ayarlayın. Bootstrap kolay tipografik katmalar temin etmek de bu kullanır.

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;
@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

Simgeler

Dosya adını ve konumunu özelleştirmek için iki hızlı değişken simgeleri.

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

Bileşenler

Bileşenleri önyükleme boyunca bazı varsayılan değişkenleri ortak değerlere ayarlamak için kullanın. Burada en yaygın olarak kullanılır.

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;
@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;
@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;
@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;
@line-height-large:              1.33;
@line-height-small:              1.5;
@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;
@component-active-color:         #fff;
@component-active-bg:            @brand-primary;
@caret-width-base:               4px;
@caret-width-large:              5px;

Satıcı mixins

Satıcı mixins, mixins içinde derlenmiş tüm CSS’le ilgili satıcı önekleri dahil olmak üzere birden çok tarayıcı desteği yardımcı olmak için vardır.

Kutu boyutlandırma

Tek mixin ile kutu model bileşenlerini sıfırlayabilirsiniz.Bağlanmak için Mozilla yardımcı makaleye bakın.

Mixin Autoprefixer tanıtımıyla, v3.2.0 önerilmemektedir Geriye dönük uyumluluğu korumak için Bootstrap v4 kadar mixin kullanmaya devam edecektir.

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

Yuvarlatılmış köşeler

Bugün tüm modern tarayıcılar border-radius özelliğini desteklemez ancak Bootstrap bir nesnenin belirli bir tarafında köşeyi yuvarlamak için kısayollar içerir

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
  border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
  border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
  border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
  border-top-left-radius: @radius;
}

(Gölge) kutusu

Hedef kitleniz en son ve en büyük tarayıcıları ve aygıtları kullanıyorsa, sadece box-shadow özelliğini kullandığınızdan emin olun. Eğer eski Android (pre-v4) ve iOS cihazları (pre-iOS 5) desteği gerekiyorsa,-webkit önekinin kullanımı önerilmemektedir.

Bootstrap resmen eski platformların standart özelliğini desteklemiyor.Aynı zamanda v3.1.0’da kullanım dışı. Geriye dönük uyumluluğu korumak için önyükleme dahil mixin Bootstrap v4’e kadar kullanmaya devam edecek.

Bu yüzden arka planı mümkün olduğu kadar kesintisiz harmanlayın.Gölge kutularında rgba() renklerini kullanırken emin olun.

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

Geçişler

Esneklik için birden çok mixins. Tüm geçiş bilgilerini ayarlayabilir veya gerektiğinde gecikme süresini belirtir.

Mixins Autoprefixer v3.2.0'da önerilmemektedir Geriye dönük uyumluluğu korumak için v4 kadar mixins kullanmaya devam edecektir.

.transition(@transition) {
  -webkit-transition: @transition;
  transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
  transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
  transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
  transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
  transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
  -moz-transition: -moz-transform @transition;
  -o-transition: -o-transform @transition;
  transition: transform @transition;
}

Dönüşümler

Döndürmek, ölçeklendirmek, çevrilemek (taşıma) veya herhangi bir nesneyi eğriltmek için kullanılır.

Mixins Autoprefixer v3.2.0'da önerilmemektedir Geriye dönük uyumluluğu korumak için v4 kadar mixins kullanmaya devam edecektir.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
      transform: translate3d(@x, @y, @z);
}
.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

Animasyonlar

Bir tek mixin CSS3'ın animasyon özelliklerini ve diğer mixins bireysel özelliklerini kullanmak için uygulanır.

Mixins Autoprefixer v3.2.0'da önerilmemektedir Geriye dönük uyumluluğu korumak için v4 kadar mixins kullanmaya devam edecektir.

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

Saydamlık

Tüm tarayıcıların saydamlığını ayarlamak için ve IE8’ filter falback sağlamak için kullanılır.

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

Yer tutucu metin

Form denetimleri içindeki her alan için bağlam sağlar.

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

Sütunlar

CSS ile sütun içinde tek bir öğe oluşturur.

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
  -moz-column-width: @width;
  column-width: @width;
  -webkit-column-count: @count;
  -moz-column-count: @count;
  column-count: @count;
  -webkit-column-gap: @gap;
  -moz-column-gap: @gap;
  column-gap: @gap;
}

Gradyanlar

Arka plan gradyan içine herhangi iki rengi kolayca çevirmek için kullanılır. Daha gelişmiş bir yönünü ayarlayabilirsiniz, üç renk kullanın, veya radyal degrade kullanın. Tek bir mixin ile ihtiyacınız olan tüm önekli sözdizimlerini alabilirsiniz.

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

You can also specify the angle of a standard two-color, linear gradient:

#gradient > .directional(#333; #000; 45deg);

If you need a barber-stripe style gradient, that's easy, too. Just specify a single color and we'll overlay a translucent white stripe.

#gradient > .striped(#333; 45deg);

Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a percentage value like 25%), and the third color with these mixins:

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

Heads up! Should you ever need to remove a gradient, be sure to remove any IE-specific filter you may have added. You can do that by using the .reset-filter() mixin alongside background-image: none;.

Yardımcı Katmalar

Yardımcı Katmalar belirli bir hedefe ya da görevi başarmak için başka alakasız CSS özelliklerini birleştiren Katmalardır.

Clearfix

Herhangi bir elemana class="clearfix" eklenmesi unutulduğunda .clearfix() uygun olduğu durumlarda eklenir. Kullanımı için Nicolas Gallagher'dan micro clearfix'a bakınız.

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}
// Usage
.container {
  .clearfix();
}

Yatay Merkezleme

Ana eleman içindeki herhangi bir öğyi hızla ortalamak için kullanılır. width veya max-width'in ayarlanması gerekebilir.

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
// Usage
.container {
  width: 940px;
  .center-block();
}

Yardımcıları Boyutlandırma

Daha kolay nesnelerin boyutlarını belirlemek için kullanılır.

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

Boyutlandırılabilir textarea'lar

Kolay bir metin bölgesi veya başka bir eleman için boyutlandırma seçeneklerini yapılandırmak için kullanılır. Normal tarayıcı davranışı Varsayılan (both)'dur.

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

Metnin kesilmesi

Tek mixin ile üç nokta ile metin kolayca kesilir. block veya inline-block seviyesindeki elemanları gerektirir.

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

Retinal resimler

İki görüntü yolları ve @ 1x görüntü boyutlarını belirleyin, ve Bootstrap bir @ 2x medya sorgu sağlayacaktır. Eğer hizmet etmek için birçok görüntü varsa, tek bir medya sorguda elle retina görüntü CSS yazmayı düşünün.

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");
  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}
// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

Sass Kullanımı

Bootstrap Less üzerine inşa edilirken, aynı zamanda bir Resmi Sass Noktası vardır. Biz ayrı bir GitHub depo muhafaza ve dönüşüm scripti ile güncellemeleri işleyemekteyiz.

Neler içerir?

Sass noktasının ayrı bir repo işlemi var ve biraz daha farklı bir kitleye hizmet vermekte, projenin içeriği, ana Bootstrap projesinden önemli ölçüde farklıdır. Bu Sass noktası mümkün olduğu kadar çok Sass bazlı sistemlerde uyumlu çalışır.

Yol Açıklama
lib/ Ruby gem code (Sass yapılandırması Rails ve Compass entegrasyonları)
tasks/ Converter scripts (turning upstream Less to Sass)
test/ Compilation tests
templates/ Compass package manifest
vendor/assets/ Sass, JavaScript, and font files
Rakefile Internal tasks, such as rake and convert

Sass portlarının GitHub deposundaki dosyalarını görüntülemek için ziyaret edin .

Kurulum

Kurulum ve Sass için Bootstrap'in nasıl kullanılacağı hakkında bilgi için GitHub benioku deposuna danışabilirsiniz. Bu güncellenmiş kaynak, Raylar, pusulalar ve standart Sass projeleri kullanımına ilişkin bilgiler içerir.

Sass için Bootstrap