Daha iyi, daha hızlı ve daha güçlü web geliştirme yaklaşımımız da dahil olmak üzere Bootstrap altyapısının temel parçaları hakkında bilgi edinin.

HTML5 doküman türü

Bootstrap, HTML5 doktipinin kullanılmasını gerektiren belirli HTML öğelerini ve CSS özelliklerini kullanır. Tüm projelerinizin başına ekleyin.

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

Önce mobil

Bootstrap 2 ile çerçevenin önemli yönleri için isteğe bağlı mobil uyumlu stiller ekledik. Bootstrap 3 ile projeyi baştan itibaren mobil uyumlu olacak şekilde yeniden yazdık. İsteğe bağlı mobil stiller eklemek yerine, doğrudan çekirdek haline getirilirler. Aslında Bootstrap önce mobildir . Mobil ilk stiller, ayrı dosyalar yerine kitaplığın tamamında bulunabilir.

Düzgün görüntü oluşturma ve dokunarak yakınlaştırma sağlamak için görünüm alanı meta etiketini<head> .

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

user-scalable=noGörünüm alanı meta etiketine ekleyerek mobil cihazlarda yakınlaştırma özelliklerini devre dışı bırakabilirsiniz . Bu, yakınlaştırmayı devre dışı bırakır, yani kullanıcılar yalnızca kaydırma yapabilir ve sitenizin biraz daha yerel bir uygulama gibi hissetmesine neden olur. Genel olarak, bunu her sitede önermiyoruz, bu yüzden dikkatli olun!

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

Tipografi ve bağlantılar

Bootstrap, temel genel görüntüleme, tipografi ve bağlantı stillerini ayarlar. Özellikle, biz:

background-color: #fff;üzerine ayarlabody
Tipografik tabanımız olarak @font-family-base, @font-size-baseve niteliklerini kullanın@line-height-base
Genel bağlantı rengini şununla ayarlayın @link-colorve bağlantı alt çizgilerini yalnızca:hover

Bu stiller içinde bulunabilir scaffolding.less.

Normalize.css

Gelişmiş tarayıcılar arası işleme için, Nicolas Gallagher ve Jonathan Neal'ın bir projesi olan Normalize.css kullanıyoruz .

Konteynerler

Bootstrap, site içeriğini sarmak ve ızgara sistemimizi barındırmak için bir kapsayıcı öğe gerektirir. Projelerinizde kullanmak üzere iki kapsayıcıdan birini seçebilirsiniz. ve daha fazlası nedeniyle padding, hiçbir kapsayıcının yuvalanabilir olmadığını unutmayın.

.containerDuyarlı sabit genişlikte bir kap için kullanın .

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

.container-fluidGörünümünüzün tüm genişliğini kapsayan tam genişlikte bir kap için kullanın .

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

Bootstrap, aygıt veya görüntü alanı boyutu arttıkça uygun şekilde 12 sütuna kadar ölçeklenen, duyarlı, mobil bir ilk akışkan ızgara sistemi içerir. Kolay yerleşim seçenekleri için önceden tanımlanmış sınıfların yanı sıra daha semantik düzenler oluşturmak için güçlü karışımlar içerir .

giriiş

Izgara sistemleri, içeriğinizi barındıran bir dizi satır ve sütun aracılığıyla sayfa düzenleri oluşturmak için kullanılır. Bootstrap ızgara sistemi şu şekilde çalışır:

.containerDoğru hizalama ve dolgu için satırlar (sabit genişlik) veya .container-fluid(tam genişlik) içinde yerleştirilmelidir .
Yatay sütun grupları oluşturmak için satırları kullanın.
İçerik sütunlara yerleştirilmelidir ve yalnızca sütunlar satırların hemen alt öğeleri olabilir.
.rowIzgara düzenlerini hızlı bir şekilde yapmak için ve gibi önceden tanımlanmış ızgara sınıfları .col-xs-4mevcuttur. Daha fazla anlamsal düzen için daha az karışım da kullanılabilir.
Sütunlar aracılığıyla oluklar (sütun içeriği arasındaki boşluklar) oluşturur padding. Bu dolgu, s üzerindeki negatif kenar boşluğu ile ilk ve son sütun için satırlarda dengelenir .row.
Negatif marj, aşağıdaki örneklerin eksik olmasının nedenidir. Bu, ızgara sütunlarındaki içeriğin ızgara dışı içerikle sıralanması içindir.
Izgara sütunları, yaymak istediğiniz mevcut on iki sütunun sayısı belirtilerek oluşturulur. Örneğin, üç eşit sütun, üç kullanır .col-xs-4.
Tek bir satıra 12'den fazla sütun yerleştirilirse, her bir ekstra sütun grubu bir birim olarak yeni bir satıra sarılır.
Izgara sınıfları, ekran genişlikleri kesme noktası boyutlarına eşit veya daha büyük olan cihazlara uygulanır ve daha küçük cihazları hedefleyen ızgara sınıflarını geçersiz kılar. Bu nedenle, örneğin .col-md-*bir öğeye herhangi bir sınıfın uygulanması, yalnızca orta cihazlarda değil, aynı zamanda bir .col-lg-*sınıf yoksa büyük cihazlarda da stilini etkiler.

Bu ilkeleri kodunuza uygulamak için örneklere bakın.

Medya sorguları

Izgara sistemimizde anahtar kesme noktalarını oluşturmak için Less dosyalarımızda aşağıdaki medya sorgularını kullanıyoruz.

/* 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) { ... }

Zaman zaman bu medya sorgularını, max-widthCSS'yi daha dar bir cihaz grubuyla sınırlamak için içerecek şekilde genişletiriz.

@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 tabloyla Bootstrap ızgara sisteminin birçok cihazda nasıl çalıştığını görün.

	Ekstra küçük cihazlar Telefonlar (<768px)	Küçük cihazlar Tabletler (≥768px)	Orta boy cihazlar Masaüstü bilgisayarlar (≥992px)	Büyük cihazlar Masaüstü bilgisayarlar (≥1200 piksel)
ızgara davranışı	Her zaman yatay	Başlamak için daraltılmış, kesme noktalarının üzerinde yatay
Konteyner genişliği	Yok (otomatik)	750 piksel	970 piksel	1170 piksel
sınıf öneki	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# sütun	12
Sütun genişliği	Oto	~62 piksel	~81 piksel	~97 piksel
oluk genişliği	30 piksel (bir sütunun her iki tarafında 15 piksel)
iç içe	Evet
Ofsetler	Evet
Sütun sıralaması	Evet

Örnek: Yığından yataya

Tek bir .col-md-*ızgara sınıfı kümesi kullanarak, masaüstü (orta) cihazlarda yatay hale gelmeden önce mobil cihazlarda ve tablet cihazlarda (ekstra küçükten küçüğe kadar) yığın halinde başlayan temel bir ızgara sistemi oluşturabilirsiniz. Izgara sütunlarını herhangi birine yerleştirin .row.

.col-md-1

.col-md-8

.col-md-4

.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: Sıvı kabı

Herhangi bir sabit genişlikli ızgara düzenini , en dıştakinizi .container..container-fluid

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

Örnek: Mobil ve masaüstü

Sütunlarınızın yalnızca daha küçük cihazlarda yığılmasını istemiyor musunuz? .col-xs-* .col-md-*Sütunlarınıza ekleyerek ekstra küçük ve orta cihaz ızgara sınıflarını kullanın. Her şeyin nasıl çalıştığına dair daha iyi bir fikir için aşağıdaki örneğe bakın.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.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: Mobil, tablet, masaüstü

.col-sm-*Tablet sınıflarıyla daha da dinamik ve güçlü düzenler oluşturarak önceki örneği geliştirin .

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-md-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 sarma

Tek bir satıra 12'den fazla sütun yerleştirilirse, her bir ekstra sütun grubu bir birim olarak yeni bir satıra sarılır.

.col-xs-9

.col-xs-4
9 + 4 = 13 > 12 olduğundan, bu 4 sütun genişliğindeki div, tek bir bitişik birim olarak yeni bir satıra sarılır.

.col-xs-6
Sonraki sütunlar yeni satır boyunca devam eder.

<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ırlamaları

Mevcut dört ızgara katmanıyla, belirli kesme noktalarında, biri diğerinden daha uzun olduğu için sütunlarınızın tam olarak netleşmediği sorunlarla karşılaşmanız gerekir. .clearfixBunu düzeltmek için a ve duyarlı yardımcı program sınıflarımızın bir kombinasyonunu kullanın .

.col-xs-6 .col-sm-3 Görünümünüzü yeniden
boyutlandırın veya bir örnek için telefonunuzda kontrol edin.

.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ında sütun temizlemeye ek olarak, ofsetleri, itmeleri veya çekmeleri sıfırlamanız gerekebilir . Bunu ızgara örneğinde çalışırken görün .

<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>

olukları kaldır

Olukları bir satırdan çıkarın ve .row-no-gutterssınıfla birlikte sütunları.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

<div class="row row-no-gutters">
  <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>
<div class="row row-no-gutters">
  <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>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Sütunları dengeleme

.col-md-offset-*Sınıfları kullanarak sütunları sağa taşıyın . Bu sınıflar, bir sütunun sol kenar boşluğunu *sütunlar kadar artırır. Örneğin, dört sütun üzerinde .col-md-offset-4hareket eder ..col-md-4

.col-md-4

.col-md-4 .col-md-offset-4

.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>

Ayrıca, .col-*-offset-0sınıflarla alt ızgara katmanlarından ofsetleri geçersiz kılabilirsiniz.

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

İç içe sütunlar

İçeriğinizi varsayılan ızgarayla iç içe yerleştirmek için mevcut bir sütuna yeni .rowve bir dizi sütun ekleyin . İç içe satırlar, toplam 12 veya daha az sütun içeren bir dizi sütun içermelidir (mevcut 12 sütunun tümünü kullanmanız gerekmez)..col-sm-*.col-sm-*

Seviye 1: .col-sm-9

Seviye 2: .col-xs-8 .col-sm-6

Seviye 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ıralaması

Yerleşik ızgara sütunlarımızın sırasını .col-md-push-*ve .col-md-pull-*değiştirici sınıflarla kolayca değiştirin.

.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>

Daha az karışım ve değişken

Hızlı mizanpajlar için önceden oluşturulmuş ızgara sınıflarına ek olarak , Bootstrap, kendi basit, anlamsal mizanpajlarınızı hızla oluşturmak için Daha Az değişken ve karışım içerir.

Değişkenler

Değişkenler, sütun sayısını, cilt payı genişliğini ve kayan sütunların başlayacağı ortam sorgu noktasını belirler. Bunları, yukarıda belgelenen önceden tanımlanmış ızgara sınıflarını ve ayrıca aşağıda listelenen özel karışımları oluşturmak için kullanırız.

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

karışımlar

Karışımlar, bireysel ızgara sütunları için anlamsal CSS oluşturmak için ızgara değişkenleriyle 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 kendi özel değerlerinize göre değiştirebilir veya karışımları varsayılan değerleriyle kullanabilirsiniz. Burada, aralarında boşluk olan iki sütunlu bir düzen oluşturmak için varsayılan ayarların kullanılmasına bir örnek verilmiştir.

.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>

Başlıklar

Tüm HTML başlıkları, <h1>aracılığıyla <h6>kullanılabilir. Bir başlığın yazı tipi stilini eşleştirmek istediğinizde, ancak yine de metninizin satır içinde görüntülenmesini istediğinizde, sınıflar .h1aracılığıyla da mevcuttur..h6

h1. Önyükleme başlığı	yarım kalın 36 piksel
h2. Önyükleme başlığı	yarım kalın 30 piksel
h3. Önyükleme başlığı	Yarım Kalın 24 piksel
h4. Önyükleme başlığı	yarım kalın 18 piksel
h5. Önyükleme başlığı	yarım kalın 14 piksel
h6. Önyükleme başlığı	yarım kalın 12 piksel

<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>

<small>Genel bir etiket veya .smallsınıf ile herhangi bir başlıkta daha hafif, ikincil metin oluşturun .

h1. Önyükleme başlığı İkincil metin

h2. Önyükleme başlığı İkincil metin

h3. Önyükleme başlığı İkincil metin

h4. Önyükleme başlığı İkincil metin

h5. Önyükleme başlığı İkincil metin

h6. Önyükleme başlığı İkincil metin

<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>

Vücut kopya

Bootstrap'in genel varsayılanı font-size, 1.428 ile 14 pikseldirline-height . Bu, ve tüm paragraflara uygulanır. Ek olarak, (paragraflar) hesaplanan satır yüksekliğinin yarısı kadar bir alt kenar boşluğu alır (varsayılan olarak 10 piksel).<body><p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus ve magnis doğumdan uzak montes, nascetur ridiculus mus. Nullam kimliği dolor kimliği nibh ultricies vehicula.

Cum sociis natoque penatibus ve magnis doğumdan uzak 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, eget metus'ta elit olmayan porta gravida. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Müşteri adayı kopyası

Ekleyerek bir paragrafın öne çıkmasını sağlayın .lead.

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

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

Daha Az ile Oluşturuldu

Tipografik ölçek, değişkenlerde iki Less değişkenini temel alır : @font-size-baseve @line-height-base. Birincisi, baştan sona kullanılan temel yazı tipi boyutu ve ikincisi, temel satır yüksekliğidir. Tüm türümüzün ve daha fazlasının kenar boşluklarını, dolgularını ve satır yüksekliklerini oluşturmak için bu değişkenleri ve bazı basit matematiği kullanırız. Bunları özelleştirin ve Bootstrap uyarlanır.

Satır içi metin öğeleri

işaretli metin

Başka bir bağlamdaki alaka düzeyi nedeniyle bir metin akışını vurgulamak için <mark>etiketi kullanın.

için işaret etiketini kullanabilirsiniz.vurgulamakMetin.

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

Silinen metin

Silinen metin bloklarını belirtmek için <del>etiketi kullanın.

~~Bu metin satırının silinmiş metin olarak ele alınması amaçlanmıştır.~~

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

üstü çizili metin

Artık alakalı olmayan metin bloklarını belirtmek için <s>etiketi kullanın.

~~Bu metin satırının artık doğru olmadığı kabul edilmelidir.~~

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

Eklenen metin

Belgeye yapılan eklemeleri belirtmek için <ins>etiketi kullanın.

Bu metin satırı, belgeye ek olarak ele alınmalıdır.

<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>etiketi kullanın.

Bu metin satırı altı çizili olarak işlenecek

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

Hafif stillerle HTML'nin varsayılan vurgu etiketlerini kullanın.

Küçük metin

Satır içi veya metin bloklarının vurgusunu <small>kaldırmak için, metni ebeveyn boyutunun %85'ine ayarlamak için etiketi kullanın. font-sizeBaşlık öğeleri , iç içe öğeler için kendi öğelerini alır <small>.

Alternatif olarak .small, herhangi birinin yerine bir satır içi öğe kullanabilirsiniz <small>.

Bu metin satırı, ince baskı olarak ele alınmalıdır.

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

Gözü pek

Daha ağır bir yazı tipi ağırlığına sahip bir metin parçacığını vurgulamak için.

Aşağıdaki metin parçası, kalın metin olarak işlenir .

<strong>rendered as bold text</strong>

italik

Bir metin parçasını italik olarak vurgulamak için.

Aşağıdaki metin parçacığı, italik metin olarak işlenir .

<em>rendered as italicized text</em>

alternatif elemanlar

<b>HTML5'te kullanmaktan çekinmeyin <i>. çoğunlukla ses, teknik terimler vb. için <b>ek bir önem taşımadan kelimeleri veya cümleleri vurgulamak içindir .<i>

hizalama sınıfları

Metin hizalama sınıflarıyla metni bileşenlere kolayca yeniden hizalayın.

Sola hizalanmış metin.

Ortaya hizalanmış metin.

Sağa hizalanmış metin.

Gerekçeli metin.

Sarma metni yok.

<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 sınıfları

Metin büyük harf sınıfları ile bileşenlerdeki metni dönüştürün.

Küçük harfli metin.

Büyük harfli metin.

Büyük harfle yazılmış metin.

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

Kısaltmalar

<abbr>Fareyle üzerine gelindiğinde genişletilmiş sürümü göstermek için kısaltmalar ve kısaltmalar için HTML öğesinin stilize uygulaması . Özniteliği olan kısaltmalar title, vurgulu ve yardımcı teknolojilerin kullanıcılarına ek bağlam sağlayan, hafif noktalı bir alt kenarlığa ve vurgulu üzerinde bir yardım imlecine sahiptir.

Temel kısaltma

Öznitelik kelimesinin kısaltması attr'dir .

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

kısaltma

.initialismBiraz daha küçük yazı tipi boyutu için bir kısaltma ekleyin .

HTML , dilimlenmiş ekmekten sonraki en iyi şeydir.

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

adresler

En yakın ata veya tüm çalışma grubu için iletişim bilgilerini sunun. Tüm satırları ile sonlandırarak biçimlendirmeyi koruyun <br>.

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
S: (123) 456-7890

Tam Ad
[email protected]

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

blok alıntılar

Belgenizdeki başka bir kaynaktan içerik bloklarını alıntılamak için.

Varsayılan blok alıntı

Alıntı olarak <blockquote>herhangi bir HTML'yi sarın . Düz alıntılar için bir <p>.

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Bir ante tamsayı pozu.

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

Blok alıntı seçenekleri

Bir standartta basit varyasyonlar için stil ve içerik değişiklikleri <blockquote>.

Bir kaynağı adlandırma

<footer>Kaynağı tanımlamak için bir ekleyin . Kaynak çalışmanın adını içine sarın <cite>.

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Bir ante tamsayı pozu.

Kaynak Başlığında ünlü biri

<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 ekranlar

.blockquote-reverseSağa hizalanmış içeriğe sahip bir blok alıntı ekleyin .

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Bir ante tamsayı pozu.

Kaynak Başlığında ünlü biri

<blockquote class="blockquote-reverse">
  ...
</blockquote>

Listeler

sırasız

Sıralamanın açıkça önemli olmadığı öğelerin listesi .

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Massa'da tamsayı molestie lorem
Pretium nisl aliquet'te facilisis
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 ilmi

<ul>
  <li>...</li>
</ul>

sipariş edildi

Sıralamanın açıkça önemli olduğu öğelerin listesi .

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Massa'da tamsayı molestie lorem
Pretium nisl aliquet'te facilisis
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor ilmi

<ol>
  <li>...</li>
</ol>

tarzsız

Liste öğelerindeki varsayılan list-styleve sol kenar boşluğunu kaldırın (yalnızca anlık çocuklar). Bu, yalnızca acil alt liste öğeleri için geçerlidir , yani sınıfı iç içe geçmiş listeler için de eklemeniz gerekir.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Massa'da tamsayı molestie lorem
Pretium nisl aliquet'te facilisis
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 ilmi

<ul class="list-unstyled">
  <li>...</li>
</ul>

Çizgide

display: inline-block;Tüm liste öğelerini hafif dolgulu tek bir satıra yerleştirin .

lorem ipsum
Phasellus iaculis
boş volutpat

<ul class="list-inline">
  <li>...</li>
</ul>

Tanım

İlişkili açıklamalarıyla birlikte terimlerin listesi.

Açıklama listeleri: Bir açıklama listesi, terimleri tanımlamak için mükemmeldir.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id, eget metus'ta elit olmayan porta gravida.
Malesuada limanı: Etiam porta sem maleuada magna mollis euismod.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Yatay açıklama

Terimleri ve açıklamaları <dl>yan yana sıralayın. Varsayılan s gibi yığılmış <dl>olarak başlar, ancak gezinme çubuğu genişlediğinde, bunları da yapın.

Açıklama listeleri: Bir açıklama listesi, terimleri tanımlamak için mükemmeldir.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id, eget metus'ta elit olmayan porta gravida.
Malesuada limanı: Etiam porta sem maleuada 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 kesme

Yatay açıklama listeleri, sol sütuna sığmayacak kadar uzun terimleri kısaltır text-overflow. Daha dar görünümlerde, varsayılan yığılmış düzene dönüşeceklerdir.

Çizgide

Satır içi kod parçacıklarını ile sarın <code>.

Örneğin, <section>satır içi olarak sarılmalıdır.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Kullanıcı girişi

<kbd>Tipik olarak klavye ile girilen girişi belirtmek için kullanın .

Dizinleri değiştirmek cdiçin dizinin adını ve ardından yazın.
Ayarları düzenlemek için ctrl + ,

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

<pre>Birden çok kod satırı için kullanın . Doğru işleme için koddaki herhangi bir açılı ayraçtan kaçındığınızdan emin olun.

<p>Örnek metin burada...</p>

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

.pre-scrollableİsteğe bağlı olarak , maksimum yüksekliği 350 piksel ayarlayacak ve bir y ekseni kaydırma çubuğu sağlayacak sınıfı ekleyebilirsiniz .

Değişkenler

Değişkenleri belirtmek için <var>etiketi kullanın.

y = mx + b _

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

Örnek çıktı

Bir programdan blok örnek çıktısını belirtmek için <samp>etiketi kullanın.

Bu metnin bir bilgisayar programından örnek çıktı olarak ele alınması amaçlanmıştır.

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

Temel örnek

Temel stil için (hafif dolgu ve yalnızca yatay bölücüler) temel sınıfı .tableherhangi bir <table>. Çok gereksiz görünebilir, ancak takvimler ve tarih seçiciler gibi diğer eklentiler için tabloların yaygın kullanımı göz önüne alındığında, özel tablo stillerimizi ayırmayı seçtik.

İsteğe bağlı tablo başlığı.
#	İlk adı	Soy isim	Kullanıcı adı
1	İşaret	Otto	@mdo
2	Yakup	Thornton	@yağ
3	Larry	kuş	@twitter

<table class="table">
  ...
</table>

Çizgili satırlar

.table-stripediçindeki herhangi bir tablo satırına zebra çizgileri eklemek için kullanın <tbody>.

Tarayıcılar arası uyumluluk

:nth-childÇizgili tablolar , Internet Explorer 8'de bulunmayan CSS seçici aracılığıyla biçimlendirilir .

#	İlk adı	Soy isim	Kullanıcı adı
1	İşaret	Otto	@mdo
2	Yakup	Thornton	@yağ
3	Larry	kuş	@twitter

<table class="table table-striped">
  ...
</table>

bordürlü masa

.table-borderedTablonun ve hücrelerin her tarafında kenarlıklar ekleyin .

#	İlk adı	Soy isim	Kullanıcı adı
1	İşaret	Otto	@mdo
2	Yakup	Thornton	@yağ
3	Larry	kuş	@twitter

<table class="table table-bordered">
  ...
</table>

Satırların üzerine gelin

.table-hoveriçindeki tablo satırlarında fareyle üzerine gelme durumunu etkinleştirmek için ekleyin <tbody>.

#	İlk adı	Soy isim	Kullanıcı adı
1	İşaret	Otto	@mdo
2	Yakup	Thornton	@yağ
3	Larry	kuş	@twitter

<table class="table table-hover">
  ...
</table>

yoğun tablo

.table-condensedHücre dolgusunu yarıya indirerek tabloları daha kompakt hale getirmek için ekleyin .

#	İlk adı	Soy isim	Kullanıcı adı
1	İşaret	Otto	@mdo
2	Yakup	Thornton	@yağ
3	Kuş Larry		@twitter

<table class="table table-condensed">
  ...
</table>

bağlamsal sınıflar

Tablo satırlarını veya tek tek hücreleri renklendirmek için bağlamsal sınıfları kullanın.

Sınıf	Tanım
`.active`	Fareyle üzerine gelme rengini belirli bir satıra veya hücreye uygular
`.success`	Başarılı veya olumlu bir eylemi gösterir
`.info`	Tarafsız, bilgilendirici bir değişiklik veya eylemi belirtir
`.warning`	Dikkat edilmesi gerekebilecek bir uyarıyı belirtir
`.danger`	Tehlikeli veya potansiyel olarak olumsuz bir eylemi belirtir

#	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ı teknolojilere anlam taşıma

Bir tablo satırına veya tek tek hücreye anlam eklemek için rengin kullanılması, yalnızca ekran okuyucular gibi yardımcı teknolojilerin kullanıcılarına iletilmeyecek olan görsel bir gösterge sağlar. Renkle gösterilen bilgilerin ya içeriğin kendisinden (ilgili tablo satırında/hücresinde görünen metin) ya da .sr-onlysınıfa gizlenmiş ek metin gibi alternatif yollarla dahil edildiğinden emin olun.

Duyarlı tablolar

Küçük cihazlarda (768 pikselin altında) yatay olarak kaydırmalarını sağlamak için herhangi .tablebirini kaydırarak duyarlı tablolar oluşturun . .table-responsive768 pikselden daha büyük bir genişlikte görüntülerken, bu tablolarda herhangi bir fark görmezsiniz.

Dikey kırpma/kesme

Duyarlı tablolar overflow-y: hidden, tablonun alt veya üst kenarlarının ötesine geçen herhangi bir içeriği kesen öğesini kullanır. Özellikle, bu, açılır menüleri ve diğer üçüncü taraf widget'larını kırpabilir.

Firefox ve alan kümeleri

widthFirefox, duyarlı tabloya müdahale eden bazı garip alan seti stillerine sahiptir . Bu, Bootstrap'te sağlamadığımız Firefox'a özgü bir hack olmadan geçersiz kılınamaz :

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

Daha fazla bilgi için bu Yığın Taşması yanıtını okuyun .

#	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>

Temel örnek

Bireysel form kontrolleri otomatik olarak bazı genel stiller alır. Tüm metinsel <input>, <textarea>ve <select>öğeleri varsayılan .form-contrololarak ayarlanmıştır . Optimum aralık için width: 100%;etiketleri ve kontrolleri sarın ..form-group

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="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>

Form gruplarını giriş gruplarıyla karıştırmayın

Form gruplarını doğrudan girdi gruplarıyla karıştırmayın . Bunun yerine giriş grubunu form grubunun içine yerleştirin.

satır içi formu

Sola hizalanmış ve satır içi blok denetimleri için formunuza ekleyin .form-inline(bir olması gerekmez ). Bu, yalnızca en az 768 piksel genişliğindeki görünüm alanlarındaki formlar için geçerlidir.<form>

Özel genişlikler gerektirebilir

Girişler ve seçimler width: 100%;, Bootstrap'ta varsayılan olarak uygulanmıştır. Satır içi formlarda, width: auto;aynı satırda birden fazla kontrolün bulunabilmesi için bunu sıfırladık. Düzeninize bağlı olarak, ek özel genişlikler gerekebilir.

Her zaman etiket ekle

Her giriş için bir etiket eklemezseniz, ekran okuyucular formlarınızda sorun yaşar. .sr-onlyBu satır içi formlar için sınıfı kullanarak etiketleri gizleyebilirsiniz . aria-label, aria-labelledbyveya titleözniteliği gibi yardımcı teknolojiler için bir etiket sağlamanın başka alternatif yöntemleri de vardır . placeholderBunların hiçbiri yoksa, ekran okuyucular , varsa , özniteliği kullanmaya başvurabilir , ancak placeholderdiğer etiketleme yöntemlerinin yerine kullanılmasının önerilmediğini unutmayın.

<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="[email protected]">
  </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="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>

<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

Forma ekleyerek .form-horizontal(bir olması gerekmez <form>) etiketleri ve form kontrol gruplarını yatay bir düzende hizalamak için Bootstrap'in önceden tanımlanmış ızgara sınıflarını kullanın. Bunu yapmak .form-group, s'yi ızgara satırları gibi davranacak şekilde değiştirir, dolayısıyla .row.

<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

Örnek form düzeninde desteklenen standart form kontrol örnekleri.

Girişler

En yaygın form denetimi, metin tabanlı giriş alanları. Tüm HTML5 türleri için destek içerir : text, password, datetime, datetime-local, date, month, time, week, number, email, url, searchve tel.color

Tip beyanı gerekli

Girdiler, yalnızca typeuygun şekilde bildirilirse tam olarak biçimlendirilir.

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

Giriş grupları

Herhangi bir metin tabanlı <input>' den önce ve/veya sonra entegre metin veya düğmeler eklemek için giriş grubu bileşenine bakın .

metin alanı

Birden çok metin satırını destekleyen form kontrolü. rowsÖzelliği gerektiği gibi değiştirin .

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

Onay kutuları ve radyolar

Onay kutuları bir listedeki bir veya birkaç seçeneği seçmek içindir, radyolar ise birçok seçenek arasından birini seçmek içindir.

Devre dışı bırakılmış onay kutuları ve radyolar desteklenir, ancak ebeveyn öğesinin üzerine gelindiğinde "izin verilmeyen" bir imleç sağlamak için sınıfı üst öğeye , , veya <label>öğesine eklemeniz gerekir ..disabled.radio.radio-inline.checkbox.checkbox-inline

Varsayılan (yığılmış)

<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>

Satır içi onay kutuları ve radyolar

Aynı satırda görünen kontroller için bir dizi onay kutusundaki veya radyolardaki .checkbox-inlineveya sınıflarını kullanın ..radio-inline

<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>

Etiket metni olmayan onay kutuları ve radyolar

içinde metin yoksa <label>, girdi beklediğiniz gibi konumlandırılır. Şu anda yalnızca satır içi olmayan onay kutuları ve radyolarda çalışır. Yardımcı teknolojiler için bir tür etiket sağlamayı unutmayın (örneğin, kullanarak aria-label).

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

seçer

Safari ve Chrome gibi birçok yerel seçim menüsünün, özellikler aracılığıyla değiştirilemeyen yuvarlatılmış köşelere sahip olduğunu unutmayın border-radius.

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

Özniteliğe sahip <select>kontroller için multiple, varsayılan olarak birden çok seçenek gösterilir.

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

Statik kontrol

Bir form içindeki form etiketinin yanına düz metin yerleştirmeniz gerektiğinde, .form-control-staticsınıfı bir <p>.

<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 protected]</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>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</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

outlineBazı form denetimlerinde varsayılan stilleri kaldırır ve box-shadowyerine a uygularız :focus.

Demo `:focus`durumu

Yukarıdaki örnek girdi, :focusdurumu bir .form-control.

Engelli durumu

disabledKullanıcı etkileşimlerini önlemek için bir girdiye boolean niteliğini ekleyin . Devre dışı bırakılan girişler daha açık görünür ve bir not-allowedimleç ekler.

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

Devre dışı bırakılmış alan kümeleri

İçindeki tüm kontrolleri bir kerede devre dışı bırakmak için disabledözniteliği a'ya ekleyin .<fieldset><fieldset>

Bağlantı işlevi hakkında uyarı`<a>`

Varsayılan olarak, tarayıcılar a içindeki tüm yerel form denetimlerini ( <input>ve öğelerini) devre dışı olarak değerlendirerek, üzerlerinde <select>hem klavye hem de fare etkileşimlerini engeller. Ancak, formunuz öğeler de içeriyorsa, bunlara yalnızca . Düğmeler için devre dışı durumla ilgili bölümde (ve özellikle bağlantı öğelerinin alt bölümünde) belirtildiği gibi, bu CSS özelliği henüz standartlaştırılmamıştır ve Opera 18 ve altı ya da Internet Explorer 11'de tam olarak desteklenmemektedir ve kazanılmıştır. Klavye kullanıcılarının bu bağlantılara odaklanmasını veya etkinleştirmesini engellemeyin. Güvende olmak için, bu tür bağlantıları devre dışı bırakmak için özel JavaScript kullanın.<button><fieldset disabled><a ... class="btn btn-*">pointer-events: none

Tarayıcılar arası uyumluluk

Bootstrap bu stilleri tüm tarayıcılarda uygularken, Internet Explorer 11 ve altı disabled, bir <fieldset>. Bu tarayıcılarda alan kümesini devre dışı 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 durum

readonlyGirdinin değerinin değiştirilmesini önlemek için bir girdiye boolean niteliğini ekleyin . Salt okunur girişler daha açık görünür (tıpkı devre dışı bırakılmış girişler gibi), ancak standart imleci korur.

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

Yardım Metni

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

Yardım metnini form kontrolleriyle ilişkilendirme

Yardım metni, özniteliği kullanmakla ilgili olduğu form denetimiyle açıkça ilişkilendirilmelidir aria-describedby. Bu, ekran okuyucular gibi yardımcı teknolojilerin, kullanıcı odaklandığında veya kontrole girdiğinde bu yardım metnini duyurmasını sağlayacaktır.

<label 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>

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-errorveya ekleyin . .has-successHerhangi bir .control-label, .form-control, ve .help-blockbu öğe içindeki doğrulama stillerini alır.

Doğrulama durumunu yardımcı teknolojilere ve renk körü kullanıcılara iletme

Bir form denetiminin durumunu belirtmek için bu doğrulama stillerinin kullanılması, yalnızca yardımcı teknolojilerin (ekran okuyucular gibi) kullanıcılarına veya renk körü kullanıcılara iletilmeyecek olan görsel, renk tabanlı bir gösterge sağlar.

Alternatif bir durum göstergesinin de sağlandığından emin olun. Örneğin, form denetiminin <label>metnine durum hakkında bir ipucu ekleyebilir (aşağıdaki kod örneğinde olduğu gibi), bir Glyphicon.sr-only ( sınıfı kullanarak uygun alternatif metinle - Glyphicon örneklerine bakın ) veya bir ek yardım metin bloğu. aria-invalid="true"Özellikle yardımcı teknolojiler için geçersiz form kontrollerine bir öznitelik de 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" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</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ı simgelerle

Ayrıca, .has-feedbackve sağ simgesinin eklenmesiyle isteğe bağlı geri bildirim simgeleri de ekleyebilirsiniz.

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

Simgeler, etiketler ve giriş grupları

Etiketsiz girişler ve sağda eklenti bulunan giriş grupları için geri bildirim simgelerinin manuel olarak konumlandırılması gerekir . Erişilebilirlik nedenleriyle tüm girdiler için etiket sağlamanız şiddetle tavsiye edilir. Etiketlerin görüntülenmesini engellemek istiyorsanız, bunları .sr-onlysınıfla gizleyin. Etiketler olmadan yapmanız gerekiyorsa top, geri bildirim simgesinin değerini ayarlayın. Giriş grupları için, righteklentinizin genişliğine bağlı olarak değeri uygun bir piksel değerine ayarlayın.

Simgenin anlamını yardımcı teknolojilere aktarma

Ekran okuyucular gibi yardımcı teknolojilerin bir simgenin anlamını doğru bir şekilde iletmesini sağlamak için, .sr-onlysınıfa ek gizli metin dahil edilmeli ve kullanımıyla ilgili form denetimiyle açıkça ilişkilendirilmelidir aria-describedby. <label>Alternatif olarak, anlamın (örneğin, belirli bir metin giriş alanı için bir uyarı olduğu gerçeği), form denetimiyle ilişkili fiili metnin değiştirilmesi gibi başka bir biçimde iletildiğinden emin olun .

Aşağıdaki örnekler, metnin kendisinde ilgili form kontrollerinin geçerlilik durumundan zaten bahsetmesine rağmen, <label>yukarıdaki teknik ( .sr-onlymetin ve kullanılarak aria-describedby) açıklama amacıyla dahil edilmiştir.

<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>

Yatay ve satır içi formlarda isteğe bağlı simgeler

<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>

<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>

Gizli `.sr-only`etiketli isteğe bağlı simgeler

.sr-onlySınıfı bir form denetimini gizlemek için kullanırsanız <label>(öznitelik gibi diğer etiketleme seçeneklerini kullanmak yerine aria-label), Bootstrap, eklendikten sonra simgenin konumunu otomatik olarak ayarlar.

<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>

Kontrol boyutlandırma

Gibi sınıfları kullanarak yükseklikleri ayarlayın .input-lgve gibi ızgara sütun sınıflarını kullanarak genişlikleri ayarlayın .col-lg-*.

Yükseklik boyutlandırma

Düğme boyutlarıyla eşleşen daha uzun veya daha kısa form denetimleri 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 grubu boyutları

veya .form-horizontalekleyerek etiketleri hızla boyutlandırın ve içindeki denetimleri oluşturun ..form-group-lg.form-group-sm

<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

İstenilen genişlikleri kolayca zorlamak için girdileri ızgara sütunlarına veya herhangi bir özel üst öğeye sarın.

<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>

Düğme etiketleri

<a>Bir , <button>, veya <input>öğesinde düğme sınıflarını kullanın .

<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">

Bağlama özel kullanım

<a>Düğme sınıfları ve öğelerinde kullanılabilirken, gezinme ve gezinme çubuğu bileşenlerimizde <button>yalnızca öğeler desteklenir.<button>

Düğme görevi gören bağlantılar

Öğeler, geçerli sayfadaki başka bir belgeye veya bölüme gitmek yerine sayfa içi işlevselliği tetikleyen düğmeler olarak kullanılıyorsa , <a>bunlara ayrıca uygun bir role="button".

Çapraz tarayıcı oluşturma

En iyi uygulama olarak, tarayıcılar arası işlemenin eşleşmesini sağlamak için mümkün olduğunda öğeyi kullanmanızı şiddetle tavsiye ederiz .<button>

Diğer şeylerin yanı sıra, Firefox <30'da of- based butonlarını ayarlamamızı engelleyen ve onların Firefox'taki diğer düğmelerin yüksekliğiyle tam olarak eşleşmemesine neden olan bir hata var.line-height<input>

Seçenekler

Stil sahibi bir düğmeyi hızlı bir şekilde oluşturmak için mevcut düğme 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ı teknolojilere anlam taşıma

Bir düğmeye anlam eklemek için rengin kullanılması, yalnızca ekran okuyucular gibi yardımcı teknolojilerin kullanıcılarına iletilmeyecek olan görsel bir gösterge sağlar. Renkle gösterilen bilgilerin ya içeriğin kendisinden (düğmenin görünen metni) ya da .sr-onlysınıfla gizlenmiş ek metin gibi alternatif yollarla dahil edildiğinden emin olun.

Boyutlar

Daha büyük veya daha küçük düğmeler mi istiyorsunuz? Ek boyutlar için .btn-lg, .btn-smveya ekleyin ..btn-xs

<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>

Ekleyerek, bir ebeveynin tüm genişliğini kapsayan blok düzeyinde düğmeler oluşturun .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>

aktif durum

Etkin olduğunda, düğmeler basılı olarak (daha koyu bir arka plan, daha koyu kenarlık ve iç gölge ile) görünecektir. <button>Öğeler için bu, aracılığıyla yapılır :active. <a>Öğeler için , ile yapılır .active. Ancak, etkin durumu programlı olarak çoğaltmanız gerekirse , .activeon <button>s öğesini kullanabilir (ve özniteliği dahil edebilirsiniz ).aria-pressed="true"

Düğme öğesi

:activeSözde sınıf olduğu için eklemeye gerek yok , ancak aynı görünümü zorlamanız gerekiyorsa, devam edin ve .active.

<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 elemanı

Düğmelere .activesınıfı ekleyin .<a>

Birincil bağlantı Bağlantı

<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>

Engelli durumu

Düğmeleri yeniden soldurarak düğmelerin tıklanamaz görünmesini sağlayın opacity.

Düğme öğesi

disabledÖzelliği <button>düğmelere 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>

Tarayıcılar arası uyumluluk

disabledÖzniteliği a öğesine eklerseniz <button>, Internet Explorer 9 ve altı, düzeltemeyeceğimiz kötü bir metin gölgesiyle metni griye dönüştürür.

çapa elemanı

Düğmelere .disabledsınıfı ekleyin .<a>

Birincil bağlantı Bağlantı

<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>

.disabledBurada ortak sınıfa benzer bir yardımcı sınıf olarak kullanıyoruz .active, bu nedenle ön ek gerekmez.

Bağlantı işlevi uyarısı

Bu sınıf pointer-events: none, s'nin bağlantı işlevini devre dışı bırakmak için kullanılır <a>, ancak bu CSS özelliği henüz standartlaştırılmamıştır ve Opera 18 ve altı sürümlerinde veya Internet Explorer 11'de tam olarak desteklenmemektedir. Ayrıca, klavyeyi destekleyen tarayıcılarda bile pointer-events: none, klavye . Navigasyon etkilenmeden kalır, yani görme yetisine sahip klavye kullanıcıları ve yardımcı teknolojilerin kullanıcıları bu bağlantıları etkinleştirmeye devam edebilir. Güvende olmak için, bu tür bağlantıları devre dışı bırakmak için özel JavaScript kullanın.

Duyarlı görüntüler

.img-responsiveBootstrap 3'teki görüntüler, sınıfın eklenmesiyle duyarlı hale getirilebilir . Bu max-width: 100%;, ana öğeye güzel bir şekilde ölçeklenmesi için görüntüye height: auto;uygulanır .display: block;

.img-responsiveSınıfı kullanan görüntüleri .center-blockortalamak için yerine kullanın .text-center. Kullanım hakkında daha fazla ayrıntı için yardımcı sınıflar bölümüne bakın.center-block .

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

Internet Explorer 8-10'da, SVG görüntüleri .img-responsiveorantısız şekilde boyutlandırılmıştır. Bunu düzeltmek için width: 100% \9;gerektiğinde ekleyin. Bootstrap bunu otomatik olarak uygulamaz çünkü diğer görüntü formatlarında karışıklığa neden olur.

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

Görüntü şekilleri

<img>Herhangi bir projede görüntüleri kolayca stillendirmek için bir öğeye sınıflar ekleyin .

Tarayıcılar arası uyumluluk

Internet Explorer 8'in yuvarlatılmış köşeleri desteklemediğini unutmayın.

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

bağlamsal renkler

Bir avuç vurgu yardımcı sınıfıyla anlamı renkle iletin. Bunlar ayrıca bağlantılara da uygulanabilir ve tıpkı varsayılan bağlantı stillerimiz gibi üzerine gelindiğinde kararır.

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

Nullam kimliği dolor kimliği 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 maleuada 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>

Spesifiklikle başa çıkmak

Bazen vurgu sınıfları, başka bir seçicinin özgüllüğü nedeniyle uygulanamaz. Çoğu durumda, metninizi <span>sınıfla birlikte sarmak yeterli bir geçici çözümdür.

Yardımcı teknolojilere anlam taşıma

Renkleri anlam eklemek için kullanmak yalnızca görsel bir gösterge sağlar ve ekran okuyucular gibi yardımcı teknolojilerin kullanıcılarına iletilmez. Renkle gösterilen bilgilerin ya içeriğin kendisinden açıkça anlaşıldığından (bağlamsal renkler yalnızca metinde/işaretlemede zaten mevcut olan anlamı güçlendirmek için kullanılır) ya da .sr-onlysınıfla gizlenmiş ek metin gibi alternatif yollarla dahil edildiğinden emin olun. .

bağlamsal arka planlar

Bağlamsal metin renk sınıflarına benzer şekilde, bir öğenin arka planını herhangi bir bağlamsal sınıfa kolayca ayarlayın. Bağlantı bileşenleri, tıpkı metin sınıfları gibi, üzerine gelindiğinde kararacaktır.

Nullam kimliği dolor kimliği 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 maleuada 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>

Spesifiklikle başa çıkmak

Bazen, başka bir seçicinin özgüllüğü nedeniyle bağlamsal arka plan sınıfları uygulanamaz. Bazı durumlarda, öğenizin içeriğini <div>sınıfla birlikte sarmak yeterli bir geçici çözümdür.

Yardımcı teknolojilere anlam taşıma

Bağlamsal renklerde olduğu gibi , renk aracılığıyla aktarılan herhangi bir anlamın da tamamen sunuma yönelik olmayan bir biçimde aktarıldığından emin olun.

Kapat simgesi

Modeller ve uyarılar gibi içerikleri kapatmak için genel kapat simgesini kullanın.

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

şapkalar

Açılan işlevi ve yönü belirtmek için şapka kullanın. Varsayılan düzeltme işaretinin, açılır menülerde otomatik olarak tersine döneceğini unutmayın .

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

Hızlı yüzer

Bir öğeyi bir sınıfla sola veya sağa kaydırın. !importantözgüllük sorunlarından kaçınmak için dahil edilmiştir. Sınıflar ayrıca karışımlar 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();
}

Orta içerik blokları

Bir öğeyi ayarlayın display: blockve ile ortalayın margin. Mixin ve class olarak mevcuttur.

<div class="center-block">...</div>

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

düzeltme

Ana öğeyefloat ekleyerek s'yi kolayca temizleyin . Nicolas Gallagher tarafından popüler hale getirilen mikro düzeltmeyi kullanır . Karışım olarak da kullanılabilir..clearfix

<!-- 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();
}

İçeriği gösterme ve gizleme

ve sınıflarının kullanımıyla bir öğeyi ( ekran okuyucular dahil ) gösterilmeye veya gizlenmeye zorlayın . Bu sınıflar , tıpkı hızlı kayan noktalar gibi, özgüllük çakışmalarını önlemek için kullanılır . Yalnızca blok düzeyinde geçiş için kullanılabilirler. Ayrıca karışım olarak da kullanılabilirler..show.hidden!important

.hidekullanılabilir, ancak ekran okuyucuları her zaman etkilemez ve v3.0.1'den itibaren kullanımdan kaldırılmıştır . .hiddenBunun yerine veya kullanın .sr-only.

Ayrıca, .invisibleyalnızca bir öğenin görünürlüğünü değiştirmek için kullanılabilir, yani displaydeğiştirilmez ve öğe yine de belgenin akışını etkileyebilir.

<div class="show">...</div>
<div class="hidden">...</div>

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

Ekran okuyucu ve klavye gezinme içeriği

Bir öğeyi ekran okuyucular hariç tüm cihazlara gizleyin .sr-only. Öğeyi odaklandığında tekrar göstermek için .sr-onlyile birleştirin (örneğin, yalnızca klavye kullanan bir kullanıcı tarafından). Erişilebilirlikle ilgili en iyi uygulamaları.sr-only-focusable izlemek için gereklidir . Karışım 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();
}

Görüntü değiştirme

.text-hideBir öğenin metin içeriğini bir arka plan görüntüsüyle değiştirmeye yardımcı olması için sınıfı veya karışımı kullanın.

<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
  .text-hide();
}

Daha hızlı mobil uyumlu geliştirme için, medya sorgusu aracılığıyla içeriği cihaza göre göstermek ve gizlemek için bu yardımcı program sınıflarını kullanın. Ayrıca, yazdırıldığında içeriği değiştirmek için yardımcı program sınıfları da dahildir.

Bunları sınırlı bir şekilde kullanmaya çalışın ve aynı sitenin tamamen farklı sürümlerini oluşturmaktan kaçının. Bunun yerine, bunları her cihazın sunumunu tamamlamak için kullanın.

Mevcut sınıflar

İçeriği görünüm alanı kesme noktaları arasında değiştirmek için tek veya mevcut sınıfların bir kombinasyonunu kullanın.

	Ekstra küçük cihazlarTelefonlar (<768 piksel)	Küçük cihazlarTabletler (≥768 piksel)	Orta boy cihazlarMasaüstü (≥992px)	Büyük cihazlarMasaüstü (≥1200 piksel)
`.visible-xs-*`	Gözle görülür	Gizlenmiş	Gizlenmiş	Gizlenmiş
`.visible-sm-*`	Gizlenmiş	Gözle görülür	Gizlenmiş	Gizlenmiş
`.visible-md-*`	Gizlenmiş	Gizlenmiş	Gözle görülür	Gizlenmiş
`.visible-lg-*`	Gizlenmiş	Gizlenmiş	Gizlenmiş	Gözle görülür
`.hidden-xs`	Gizlenmiş	Gözle görülür	Gözle görülür	Gözle görülür
`.hidden-sm`	Gözle görülür	Gizlenmiş	Gözle görülür	Gözle görülür
`.hidden-md`	Gözle görülür	Gözle görülür	Gizlenmiş	Gözle görülür
`.hidden-lg`	Gözle görülür	Gözle görülür	Gözle görülür	Gizlenmiş

v3.2.0'dan itibaren, her kesme noktası için sınıflar, aşağıda listelenen her CSS özellik değeri .visible-*-*için bir tane olmak üzere üç varyasyonda gelir .display

Sınıflar grubu	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

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

.visible-xs, .visible-sm, .visible-mdve sınıfları .visible-lgda mevcuttur, ancak v3.2.0'dan itibaren kullanımdan kaldırılmıştır . Geçişle ilgili öğeler .visible-*-blockiçin ek özel durumlar dışında, yaklaşık olarak eşdeğerdirler .<table>

Yazdırma sınıfları

Normal duyarlı sınıflara benzer şekilde, bunları yazdırma için içeriği değiştirmek için kullanın.

sınıflar	Tarayıcı	Yazdır
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Gizlenmiş	Gözle görülür
`.hidden-print`	Gözle görülür	Gizlenmiş

Sınıf .visible-printda mevcuttur ancak v3.2.0'dan itibaren kullanımdan kaldırılmıştır . İlgili öğeler .visible-print-blockiçin ek özel durumlar dışında , yaklaşık olarak eşdeğerdir .<table>

Test durumları

Duyarlı yardımcı program sınıflarını test etmek için tarayıcınızı yeniden boyutlandırın veya farklı cihazlara yükleyin.

Şu tarihte görünür...

Yeşil onay işaretleri, öğenin mevcut görünümünüzde görünür olduğunu gösterir .

Çok küçük ✔ x-small'da görünür

Küçük ✔ Küçük üzerinde görünür

Orta ✔ Ortamda görünür

Büyük ✔ Büyük ekranda görünür

Ekstra küçük ve küçük ✔ x-small ve small üzerinde görünür

Orta ve büyük ✔ Orta ve büyük boylarda görünür

Ekstra küçük ve orta ✔ x-küçük ve orta boyda görünür

Küçük ve büyük ✔ Küçük ve büyük üzerinde görünür

Ekstra küçük ve büyük ✔ x-small ve büyük üzerinde görünür

Küçük ve orta ✔ Küçük ve orta boyda görünür

Gizli...

Burada yeşil onay işaretleri, öğenin geçerli görünüm alanınızda gizlendiğini de gösterir.

Çok küçük ✔ x-small'da gizli

Küçük ✔ Küçükte gizli

Orta ✔ Ortamda gizli

Büyük ✔ Büyükte gizli

Ekstra küçük ve küçük ✔ x-small ve small üzerinde gizli

Orta ve büyük ✔ Orta ve büyük boylarda gizli

Ekstra küçük ve orta ✔ x-küçük ve orta boyda gizli

Küçük ve büyük ✔ Küçük ve büyük üzerinde gizli

Ekstra küçük ve büyük ✔ x-small ve büyük üzerinde gizli

Küçük ve orta ✔ Küçük ve orta boyda gizli

Bootstrap'ın CSS'si, CSS'yi derlemek için değişkenler, karışımlar ve işlevler gibi ek işlevlere sahip bir ön işlemci olan Less üzerine kurulmuştur. Derlenmiş CSS dosyalarımız yerine kaynak Less dosyalarını kullanmak isteyenler, çerçeve boyunca kullandığımız çok sayıda değişken ve karışımdan yararlanabilir.

Izgara değişkenleri ve karışımları , Izgara sistemi bölümünde ele alınmaktadır .

Bootstrap Derleme

Bootstrap en az iki şekilde kullanılabilir: derlenmiş CSS ile veya kaynak Less dosyaları ile. Daha az dosyayı derlemek için , gerekli komutları çalıştırmak için geliştirme ortamınızı nasıl kuracağınıza ilişkin Başlarken bölümüne bakın .

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

Değişkenler

Değişkenler, renkler, boşluklar veya yazı tipi yığınları gibi yaygın olarak kullanılan değerleri merkezileştirmenin ve paylaşmanın bir yolu olarak tüm proje boyunca kullanılır. Tam bir döküm için lütfen Özelleştirici'ye bakın .

Renkler

İki renk şemasından kolayca yararlanın: gri tonlamalı ve anlamsal. Gri tonlamalı renkler, yaygın olarak kullanılan siyah tonlarına hızlı erişim sağlarken, anlamsal, anlamlı bağlamsal değerlere atanan çeşitli renkleri içerir.

@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;

Bu renk değişkenlerinden herhangi birini olduğu gibi kullanın veya projeniz için daha anlamlı değişkenlere yeniden atayı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

Sitenizin iskeletinin temel öğelerini hızla özelleştirmek için bir avuç değişken.

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

Bağlantılar

Bağlantılarınızı tek bir değerle doğru renkle kolayca şekillendirin.

// 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;
  }
}

@link-hover-colorDoğru vurgulu rengi otomatik olarak oluşturmak için Less'ten başka bir harika araç olan bir işlev kullandığını unutmayın . darken, lighten, saturateve kullanabilirsiniz desaturate.

tipografi

Birkaç hızlı değişkenle yazı tipinizi, metin boyutunu, satır aralığını ve daha fazlasını kolayca ayarlayın. Bootstrap, kolay tipografik karışımlar sağlamak için bunlardan da yararlanı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

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

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

Bileşenler

Bootstrap genelindeki bileşenler, ortak değerleri ayarlamak için bazı varsayılan değişkenleri kullanır. İşte en sık kullanılanlar.

@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ı karışımları

Satıcı karışımları, derlenmiş CSS'nize tüm ilgili satıcı öneklerini dahil ederek birden çok tarayıcıyı desteklemeye yardımcı olan karışımlardır.

kutu boyutlandırma

Bileşenlerinizin kutu modelini tek bir karışımla sıfırlayın. Bağlam için Mozilla'dan bu faydalı makaleye bakın .

Karıştırma, Autoprefixer'ın kullanıma sunulmasıyla v3.2.0'dan itibaren kullanımdan kaldırılmıştır . Geriye dönük uyumluluğu korumak için Bootstrap, Bootstrap v4'e kadar karışımı dahili olarak 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 ön eksiz border-radiusözelliği desteklemektedir. Bu nedenle, karıştırma yoktur .border-radius(), ancak Bootstrap, bir nesnenin belirli bir tarafında iki köşeyi hızlı bir şekilde 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;
}

Kutu (Bırak) gölgeleri

Hedef kitleniz en yeni ve en iyi tarayıcıları ve cihazları kullanıyorsa, box-shadowmülkü kendi başına kullandığınızdan emin olun. Daha eski Android (v4 öncesi) ve iOS cihazları (iOS 5 öncesi) için desteğe ihtiyacınız varsa , gerekli öneki almak için kullanımdan kaldırılan karışımı kullanın.-webkit

Bootstrap, standart özelliği desteklemeyen eski platformları resmi olarak desteklemediğinden karışım, v3.1.0'dan itibaren kullanımdan kaldırılmıştır . Geriye dönük uyumluluğu korumak için Bootstrap, Bootstrap v4'e kadar karışımı dahili olarak kullanmaya devam edecektir.

Kutu gölgelerinizde renkleri kullandığınızdan emin olun, rgba()böylece arka planlarla mümkün olduğunca sorunsuz bir şekilde karışırlar.

.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 çoklu karışımlar. Tüm geçiş bilgilerini bir ile ayarlayın veya gerektiği gibi ayrı bir gecikme ve süre belirtin.

Karışımlar, Autoprefixer'ın kullanıma sunulmasıyla v3.2.0'dan itibaren kullanımdan kaldırılmıştır. Geriye dönük uyumluluğu korumak için Bootstrap, Bootstrap v4'e kadar karışımları dahili olarak 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

Herhangi bir nesneyi döndürün, ölçekleyin, çevirin (taşıyın) veya eğriltin.

.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

Tek bir bildirimde CSS3'ün tüm animasyon özelliklerini kullanmak için tek bir karışım ve bireysel özellikler için diğer karışımlar.

.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;
}

opaklık

Tüm tarayıcılar için opaklığı ayarlayın ve filterIE8 için bir geri dönüş sağlayın.

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

Yer tutucu metin

Her alandaki form kontrolleri için bağlam sağlayın.

.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

Tek bir öğe içinde CSS aracılığıyla sütunlar oluşturun.

.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

Herhangi iki rengi kolayca arka plan gradyanına dönüştürün. Daha fazla ilerleyin ve bir yön belirleyin, üç renk kullanın veya bir radyal gradyan kullanın. Tek bir mixin ile ihtiyacınız olan tüm ön ekli sözdizimlerini elde edersiniz.

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

Standart iki renkli doğrusal degradenin açısını da belirtebilirsiniz:

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

Berber-şerit stili bir degradeye ihtiyacınız varsa, bu da kolaydır. Sadece tek bir renk belirtin, biz de yarı saydam beyaz bir şerit kaplayalım.

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

Ante'yi yükseltin ve bunun yerine üç renk kullanın. Birinci rengi, ikinci rengi, ikinci rengin renk durağını (%25 gibi bir yüzde değeri) ve üçüncü rengi aşağıdaki karışımlarla ayarlayın:

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

Önüne bak! Bir degradeyi kaldırmanız filtergerekirse, eklemiş olabileceğiniz IE'ye özgü tüm öğeleri kaldırdığınızdan emin olun. Bunu .reset-filter()yanında mixin kullanarak yapabilirsiniz background-image: none;.

Yardımcı karışımlar

Yardımcı program karışımları, belirli bir hedefe veya göreve ulaşmak için aksi takdirde alakasız CSS özelliklerini birleştiren karışımlardır.

düzeltme

class="clearfix"Herhangi bir öğeye eklemeyi unutun ve bunun yerine .clearfix()uygun olan yerde karışımı ekleyin. Nicolas Gallagher'ın mikro düzeltmesini kullanır .

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

// Usage
.container {
  .clearfix();
}

yatay merkezleme

Herhangi bir öğeyi üst öğesinde hızla ortalayın. Gerektirir widthveya max-widthayarlanması gerekir.

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

Boyutlandırma yardımcıları

Bir nesnenin boyutlarını daha kolay belirtin.

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

Yeniden boyutlandırılabilir metin alanları

Herhangi bir metin alanı veya başka bir öğe için yeniden boyutlandırma seçeneklerini kolayca yapılandırın. Normal tarayıcı davranışına ( both) varsayılandır.

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

Metin kesiliyor

Tek bir karıştırma ile metni üç nokta ile kolayca kısaltın. Olmak veya seviye olmak için öğe gerektirir .blockinline-block

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

retina görüntüleri

İki görüntü yolu ve @1x görüntü boyutları belirtin, Bootstrap bir @2x ortam sorgusu sağlayacaktır. Sunulacak çok sayıda görüntünüz varsa, retina görüntü CSS'nizi tek bir ortam sorgusunda manuel olarak 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);
}

Bootstrap, Less üzerine kurulu olsa da, resmi bir Sass bağlantı noktasına da sahiptir . Bunu ayrı bir GitHub deposunda tutuyoruz ve güncellemeleri bir dönüştürme komut dosyasıyla işliyoruz.

Neler dahil

Sass portunun ayrı bir reposu olduğundan ve biraz farklı bir kitleye hizmet ettiğinden, projenin içeriği ana Bootstrap projesinden büyük ölçüde farklıdır. Bu, Sass bağlantı noktasının mümkün olduğunca çok sayıda Sass tabanlı sistemle uyumlu olmasını sağlar.

Yol	Tanım
`lib/`	Ruby gem kodu (Sass konfigürasyonu, Rails ve Compass entegrasyonları)
`tasks/`	Dönüştürücü komut dosyaları (yukarı akış Less'i Sass'a çevirme)
`test/`	derleme testleri
`templates/`	Pusula paketi bildirimi
`vendor/assets/`	Sass, JavaScript ve yazı tipi dosyaları
`Rakefile`	Komisyon ve dönüştürme gibi dahili görevler

Bu dosyaları çalışırken görmek için Sass bağlantı noktasının GitHub deposunu ziyaret edin .

Kurulum

Bootstrap for Sass'ın nasıl kurulacağı ve kullanılacağı hakkında bilgi için GitHub deposu benioku dosyasına bakın . En güncel kaynaktır ve Rails, Compass ve standart Sass projeleriyle kullanım için bilgiler içerir.

Sass için Önyükleme

CSS

genel bakış

HTML5 doküman türü

Önce mobil

Tipografi ve bağlantılar

Normalize.css

Konteynerler

ızgara sistemi

giriiş

Medya sorguları

Izgara seçenekleri

Örnek: Yığından yataya

Örnek: Sıvı kabı

Örnek: Mobil ve masaüstü

Örnek: Mobil, tablet, masaüstü

Örnek: Sütun sarma

Duyarlı sütun sıfırlamaları

olukları kaldır

Sütunları dengeleme

İç içe sütunlar

Sütun sıralaması

Daha az karışım ve değişken

Değişkenler

karışımlar

Örnek kullanım

tipografi

Başlıklar

h1. Önyükleme başlığı

h2. Önyükleme başlığı

h3. Önyükleme başlığı

h4. Önyükleme başlığı

h5. Önyükleme başlığı

h6. Önyükleme başlığı

h1. Önyükleme başlığı İkincil metin

h2. Önyükleme başlığı İkincil metin

h3. Önyükleme başlığı İkincil metin

h4. Önyükleme başlığı İkincil metin

h5. Önyükleme başlığı İkincil metin

h6. Önyükleme başlığı İkincil metin

Vücut kopya

Müşteri adayı kopyası

Daha Az ile Oluşturuldu

Satır içi metin öğeleri

işaretli metin

Silinen metin

üstü çizili metin

Eklenen metin

altı çizili metin

Küçük metin

Gözü pek

italik

alternatif elemanlar

hizalama sınıfları

Dönüşüm sınıfları

Kısaltmalar

Temel kısaltma

kısaltma

adresler

blok alıntılar

Varsayılan blok alıntı

Blok alıntı seçenekleri

Bir kaynağı adlandırma

alternatif ekranlar

Listeler

sırasız

sipariş edildi

tarzsız

Çizgide

Tanım

Yatay açıklama

Otomatik kesme

kod

Çizgide

Kullanıcı girişi

Temel blok

Değişkenler

Örnek çıktı

Tablolar

Temel örnek

Çizgili satırlar

Demo `:focus`durumu

Bağlantı işlevi hakkında uyarı`<a>`

Gizli `.sr-only`etiketli isteğe bağlı simgeler