Entuk lowdown babagan prasarana utama Bootstrap, kalebu pendekatan kanggo pangembangan web sing luwih apik, luwih cepet, lan kuwat.

HTML5 doctype

Bootstrap nggunakake unsur HTML lan properti CSS tartamtu sing mbutuhake doctype HTML5. Kalebu ing wiwitan kabeh proyek sampeyan.

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

Mobile pisanan

Kanthi Bootstrap 2, kita nambahake gaya loropaken seluler opsional kanggo aspek kunci kerangka. Kanthi Bootstrap 3, kita wis nulis maneh proyek kasebut dadi seluler loropaken wiwit wiwitan. Tinimbang nambahake gaya seluler opsional, padha dipanggang langsung menyang inti. Nyatane, Bootstrap iku seluler pisanan . Gaya pisanan seluler bisa ditemokake ing kabeh perpustakaan tinimbang ing file sing kapisah.

Kanggo mesthekake rendering sing tepat lan zooming tutul, tambahake tag meta viewport menyang <head>.

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

Sampeyan bisa mateni kemampuan zoom ing piranti seluler kanthi nambahake user-scalable=notag meta viewport. Iki mateni zoom, tegese pangguna mung bisa nggulung, lan nyebabake situs sampeyan rumangsa kaya aplikasi asli. Sakabèhé, kita ora nyaranake iki ing saben situs, supaya ati-ati!

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

Tipografi lan pranala

Bootstrap nyetel tampilan global dhasar, tipografi, lan gaya link. Khusus, kita:

Setel background-color: #fff;ingbody
Gunakake @font-family-base, @font-size-base, lan @line-height-baseatribut minangka basis tipografi kita
Setel werna link global liwat @link-colorlan aplikasi link underlines mung ing:hover

Gaya iki bisa ditemokake ing scaffolding.less.

Normalize.css

Kanggo rendering lintas-browser sing luwih apik, kita nggunakake Normalize.css , proyek dening Nicolas Gallagher lan Jonathan Neal .

Wadhah

Bootstrap mbutuhake unsur sing ngemot kanggo mbungkus isi situs lan ngemot sistem kothak kita. Sampeyan bisa milih salah siji saka rong wadhah kanggo digunakake ing proyek sampeyan. Elinga, amarga paddinglan liya-liyane, ora ana wadah sing bisa dipasang.

Gunakake .containerkanggo wadhah jembar tetep responsif.

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

Gunakake .container-fluidkanggo wadhah sing ambane lengkap, kanthi jembar kabeh area tampilan sampeyan.

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

Bootstrap kalebu responsif, mobile pisanan sistem kothak cairan sing jumbuh skala nganti 12 kolom nalika piranti utawa viewport ukuran mundhak. Iki kalebu kelas sing wis ditemtokake kanggo pilihan tata letak sing gampang, uga campuran sing kuat kanggo nggawe tata letak semantik sing luwih akeh .

Pambuka

Sistem kothak digunakake kanggo nggawe tata letak kaca liwat seri baris lan kolom sing ngemot isi sampeyan. Mangkene cara kerja sistem kothak Bootstrap:

Baris kudu diselehake ing .container(tetep-jembaré) utawa .container-fluid(full-jembaré) kanggo alignment lan padding sing tepat.
Gunakake baris kanggo nggawe klompok horisontal kolom.
Isi kudu diselehake ing kolom, lan mung kolom bisa dadi anak langsung saka baris.
Kelas kothak sing wis ditemtokake kaya .rowlan .col-xs-4kasedhiya kanggo nggawe tata letak kothak kanthi cepet. Campuran sing kurang uga bisa digunakake kanggo tata letak semantik.
Kolom nggawe talang (gap antarane isi kolom) liwat padding. Padding kasebut diimbangi ing baris kanggo kolom pisanan lan pungkasan liwat wates negatif ing .rows.
Margin negatif kok conto ing ngisor iki outdented. Iku supaya isi ing kolom kothak baris munggah karo isi non-grid.
Kolom kisi digawe kanthi nemtokake jumlah rolas kolom sing kasedhiya sing pengin dikepengini. Contone, telung kolom sing padha bakal nggunakake telung .col-xs-4.
Yen luwih saka 12 kolom diselehake ing baris siji, saben klompok kolom ekstra bakal, minangka siji unit, mbungkus menyang baris anyar.
Kelas kothak ditrapake kanggo piranti sing ambane layar luwih gedhe utawa padha karo ukuran breakpoint, lan ngganti kelas kothak sing ditargetake ing piranti sing luwih cilik. Mula, contone, aplikasi .col-md-*kelas apa wae menyang unsur ora mung bakal mengaruhi gaya ing piranti medium nanging uga ing piranti gedhe yen .col-lg-*kelas ora ana.

Deleng conto kanggo ngetrapake prinsip kasebut ing kode sampeyan.

Pitakonan media

Kita nggunakake pitakon media ing ngisor iki ing file Kurang kanggo nggawe breakpoints tombol ing sistem kothak kita.

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

Kita sok-sok nggedhekake pitakon media kasebut kanggo nyakup max-widthwatesan CSS menyang piranti sing luwih sempit.

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

Pilihan kothak

Delengen carane aspèk sistem kothak Bootstrap bisa digunakake ing pirang-pirang piranti kanthi meja sing praktis.

	Piranti ekstra cilik Telpon (<768px)	Piranti cilik Tablet (≥768px)	Desktop piranti medium (≥992px)	Piranti gedhe Desktop (≥1200px)
Prilaku grid	Horisontal ing kabeh wektu	Ambruk kanggo miwiti, horisontal ndhuwur breakpoints
Jembaré wadhah	Ora ana (otomatis)	750px	970px	1170px
Ater-ater kelas	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# kolom	12
Jembaré kolom	Auto	~62px	~81px	~97px
Jembaré talang	30px (15px ing saben sisih kolom)
Nestable	ya wis
Offsets	ya wis
Urutan kolom	ya wis

Tuladha: Stacked-to-horizontal

Nggunakake sakumpulan .col-md-*kelas kothak siji, sampeyan bisa nggawe sistem kothak dhasar sing diwiwiti ditumpuk ing piranti seluler lan piranti tablet (sawetara cilik nganti cilik) sadurunge dadi horisontal ing piranti desktop (sedheng). Selehake kolom kothak ing sembarang .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>

Tuladha: Wadah cairan

Ganti tata letak kothak kanthi jembar tetep dadi tata letak jembar kanthi ngganti paling njaba .containermenyang .container-fluid.

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

Tuladha: Mobile lan desktop

Ora pengin kolom sampeyan mung tumpukan ing piranti sing luwih cilik? Gunakake kelas kothak piranti cilik lan medium ekstra kanthi nambahake .col-xs-* .col-md-*kolom sampeyan. Deleng conto ing ngisor iki kanggo ide sing luwih apik babagan cara kerjane.

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

Tuladha: Mobile, tablet, desktop

Gawe conto sadurunge kanthi nggawe tata letak sing luwih dinamis lan kuat karo .col-sm-*kelas tablet.

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

Tuladha: Bungkus kolom

Yen luwih saka 12 kolom diselehake ing baris siji, saben klompok kolom ekstra bakal, minangka siji unit, mbungkus menyang baris anyar.

.col-xs-9

.col-xs-4
Wiwit 9 + 4 = 13 > 12, div 4-kolom-sudhut iki bakal kebungkus menyang baris anyar minangka siji unit contiguous.

.col-xs-6
Kolom sakteruse terus ing baris anyar.

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

Reset kolom responsif

Kanthi papat undakan kothak kasedhiya, sampeyan bakal nemoni masalah ing ngendi, ing breakpoints tartamtu, kolom sampeyan ora jelas amarga siji luwih dhuwur tinimbang liyane. Kanggo ndandani iku, gunakake kombinasi a .clearfixlan kelas sarana responsif .

.col-xs-6 .col-sm-3
Owahi ukuran viewport utawa priksa ing telpon kanggo conto.

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

Saliyane ngresiki kolom ing breakpoints responsif, sampeyan bisa uga kudu ngreset offset, push, utawa narik . Deleng tumindak iki ing conto kothak .

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

Mbusak talang

Copot talang saka baris lan kolom karo .row-no-gutterskelas.

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

Ngimbangi kolom

Pindhah kolom menyang tengen nggunakake .col-md-offset-*kelas. Kelas iki nambah wates kiwa kolom kanthi *kolom. Contone, .col-md-offset-4gerakane .col-md-4liwat papat kolom.

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

Sampeyan uga bisa ngganti offset saka undakan kothak ngisor karo .col-*-offset-0kelas.

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

Nesting kolom

Kanggo nyelehake konten sampeyan nganggo kothak gawan, tambahake kolom anyar .rowlan set .col-sm-*ing .col-sm-*kolom sing wis ana. Baris sing disusun kudu kalebu sakumpulan kolom sing nambah nganti 12 utawa kurang (ora perlu nggunakake kabeh 12 kolom sing kasedhiya).

Level 1: .col-sm-9

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

Level 2: .col-xs-4 .col-sm-6

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

Urutan kolom

Ganti urutan kolom kothak sing dibangun kanthi gampang .col-md-push-*lan .col-md-pull-*kelas modifier.

.col-md-9 .col-md-push-3

.col-md-3 .col-md-narik-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>

Kurang campuran lan variabel

Saliyane kelas kothak prebuilt kanggo tata letak cepet, Bootstrap kalebu Kurang variabel lan mixins kanggo cepet ngasilaken prasaja, tata letak semantik dhewe.

Variabel

Variabel nemtokake jumlah kolom, ambane talang, lan titik pitakon media kanggo miwiti kolom ngambang. Iki digunakake kanggo ngasilake kelas kothak sing wis ditemtokake sing didokumentasikake ing ndhuwur, uga kanggo campuran khusus sing kapacak ing ngisor iki.

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

Campuran

Mixin digunakake bebarengan karo variabel kothak kanggo ngasilake CSS semantik kanggo kolom kothak individu.

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

Conto panggunaan

Sampeyan bisa ngowahi variabel menyang nilai khusus, utawa mung nggunakake mixin kanthi nilai standar. Iki conto nggunakake setelan gawan kanggo nggawe tata letak loro-kolom karo longkangan antarane.

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

Judhul

Kabeh judhul HTML, <h1>liwat <h6>, kasedhiya. .h1liwat .h6kelas uga kasedhiya, kanggo nalika sampeyan pengin cocog gaya font saka judhul nanging isih pengin teks ditampilake inline.

h1. Judul Bootstrap	Semibold 36px
h2. Judul Bootstrap	Semibold 30px
h3. Judul Bootstrap	Semibold 24px
h4. Judul Bootstrap	Semibold 18px
h5. Judul Bootstrap	Semibold 14px
h6. Judul Bootstrap	Semibold 12px

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

Gawe teks sekunder sing luwih entheng ing judhul apa wae kanthi <small>tag umum utawa .smallkelas.

h1. Judul Bootstrap Teks sekunder

h2. Judul Bootstrap Teks sekunder

h3. Judul Bootstrap Teks sekunder

h4. Judul Bootstrap Teks sekunder

h5. Judul Bootstrap Teks sekunder

h6. Judul Bootstrap Teks sekunder

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

Salinan awak

Standar global Bootstrap font-sizeyaiku 14px , kanthi line-heightukuran 1.428 . Iki ditrapake kanggo <body>lan kabeh paragraf. Kajaba iku, <p>(paragraf) nampa wates ngisor setengah dhuwur garis sing diwilang (10px minangka standar).

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

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

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

<p>...</p>

Timbal awak salinan

Gawea paragraf kanthi nambahake .lead.

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

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

Dibangun karo Kurang

Skala tipografi adhedhasar rong variabel Kurang ing variabel.kurang : @font-size-baselan @line-height-base. Sing pertama yaiku ukuran font dhasar sing digunakake ing saindenging lan sing nomer loro yaiku dhuwur garis dhasar. Kita nggunakake variabel kasebut lan sawetara matematika sing gampang kanggo nggawe wates, bantalan, lan dhuwur garis kabeh jinis kita lan liya-liyane. Kustomisasi lan adaptasi Bootstrap.

Unsur teks inline

Teks sing ditandhani

Kanggo nyorot teks amarga relevansi ing konteks liyane, gunakake <mark>tag.

Sampeyan bisa nggunakake tandha tandha kanggosorotteks.

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

Teks sing wis dibusak

Kanggo nuduhake blok teks sing wis dibusak, gunakake <del>tag.

~~Baris teks iki kudu dianggep minangka teks sing wis dibusak.~~

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

Teks Strikethrough

Kanggo nuduhake pamblokiran teks sing ora ana gandhengane, gunakake <s>tag.

~~Baris teks iki kudu dianggep ora akurat maneh.~~

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

Teks sing disisipake

Kanggo nuduhake tambahan ing dokumen nggunakake <ins>tag.

Baris teks iki kudu dianggep minangka tambahan kanggo dokumen kasebut.

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

Teks sing digaris ngisor

Kanggo nggaris teks nggunakake <u>tag.

Baris teks iki bakal ditampilake minangka garis ngisor

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

Gunakake tag emphasis standar HTML kanthi gaya entheng.

Teks cilik

Kanggo de-emphasizing inline utawa pamblokiran teks, gunakake <small>tag kanggo nyetel teks ing 85% ukuran induk. unsur judhul nampa dhewe font-sizekanggo unsur nested <small>.

Sampeyan bisa uga nggunakake unsur inline kanthi ngganti .smallsembarang <small>.

Baris teks iki kudu dianggep minangka cetakan sing apik.

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

Kandel

Kanggo nandheske potongan teks kanthi bobot font sing luwih abot.

Cuplikan teks ing ngisor iki diwenehi teks kandel .

<strong>rendered as bold text</strong>

Miring

Kanggo nandheske cuplikan teks kanthi miring.

Cuplikan teks ing ngisor iki diterjemahake minangka teks miring .

<em>rendered as italicized text</em>

unsur sulih

Bebas bae kanggo nggunakake <b>lan <i>ing HTML5. <b>tegese kanggo nyorot tembung utawa frase tanpa menehi wigati tambahan nalika <i>biasane kanggo swara, istilah teknis, lsp.

Kelas Alignment

Gampang nyelarasake teks menyang komponen kanthi kelas keselarasan teks.

Teks sejajar kiwa.

Teks selaras tengah.

Teks sejajar tengen.

Teks sing dibenerake.

Ora bungkus teks.

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

Kelas transformasi

Ngowahi teks dadi komponen kanthi kelas kapitalisasi teks.

Aksara cilik.

Tulisan gedhe.

Kapitalisasi teks.

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

Singkatan

Implementasi gaya saka <abbr>unsur HTML kanggo singkatan lan akronim kanggo nuduhake versi ditambahi ing hover. Singkatan karo titleatribut duwe wates ngisor titik cahya lan kursor bantuan nalika hover, nyedhiyakake konteks tambahan babagan hover lan kanggo pangguna teknologi asisten.

Singkatan dhasar

Singkatan saka tembung atribut yaiku attr .

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

Initialisme

Tambah .initialismmenyang singkatan kanggo ukuran font sing rada cilik.

HTML minangka sing paling apik wiwit roti irisan.

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

Alamat

Saiki informasi kontak kanggo leluhur paling cedhak utawa kabeh awak karya. Simpen format kanthi mungkasi kabeh baris nganggo <br>.

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

Jeneng Lengkap
[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>

Blockquotes

Kanggo ngutip blok konten saka sumber liya ing dokumen sampeyan.

Blockquote standar

Bungkus HTML<blockquote> apa wae minangka kutipan. Kanggo kuotasi terus, disaranake a .<p>

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

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

Pilihan Blockquote

Gaya lan isi owah-owahan kanggo variasi prasaja ing standar <blockquote>.

Jeneng sumber

Tambah a <footer>kanggo ngenali sumber. Bungkus jeneng karya sumber ing <cite>.

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

Wong sing misuwur ing Judhul Sumber

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

Tampilan sulih

Tambah .blockquote-reversekanggo blockquote kanthi isi sing didadekake tengen.

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

Wong sing misuwur ing Judhul Sumber

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

Dhaptar

Ora ditata

Dhaptar item sing urutan ora penting banget.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem lan massa
Facilisis ing pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat ing
Faucibus porta lacus fringilla vel
Aenean lungguh amet erat nunc
Eget porttitor lorem

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

dhawuh

Dhaptar item sing urutan kasebut pancen penting.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem lan massa
Facilisis ing pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean lungguh amet erat nunc
Eget porttitor lorem

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

Tanpa gaya

Mbusak wates gawan list-stylelan kiwa ing dhaptar item (mung anak langsung). Iki mung ditrapake kanggo item dhaptar bocah langsung , tegese sampeyan uga kudu nambah kelas kanggo dhaptar bersarang.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem lan massa
Facilisis ing pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat ing
Faucibus porta lacus fringilla vel
Aenean lungguh amet erat nunc
Eget porttitor lorem

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

Inline

Selehake kabeh item dhaptar ing baris siji karo display: inline-block;lan sawetara padding cahya.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Katrangan

Dhaptar istilah kanthi katrangan sing gegandhengan.

Dhaptar katrangan: Dhaptar deskripsi sampurna kanggo nemtokake istilah.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida lan eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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

Deskripsi horisontal

Nggawe istilah lan katrangan ing <dl>baris sisih-by-side. Diwiwiti dibandhingke kaya standar <dl>s, nanging nalika navbar ngembangaken, supaya iki.

Dhaptar katrangan: Dhaptar deskripsi sampurna kanggo nemtokake istilah.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida lan eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Pemotongan otomatis

Dhaptar deskripsi horisontal bakal ngilangi istilah sing dawa banget kanggo pas ing kolom kiwa nganggo text-overflow. Ing tampilan sing luwih sempit, dheweke bakal ganti menyang tata letak tumpukan standar.

Inline

Bungkus potongan kode inline nganggo <code>.

Contone, <section>kudu dibungkus minangka inline.

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

Input pangguna

Gunakake <kbd>kanggo nuduhake input sing biasane dilebokake liwat keyboard.

Kanggo ngalih direktori, ketik cdbanjur jeneng direktori.
Kanggo ngowahi setelan, penet 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>

Blok dhasar

Gunakake <pre>kanggo sawetara baris kode. Aja manawa kanggo uwal sembarang kurung amba ing kode kanggo Rendering tepat.

<p>Conto teks ing kene...</p>

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

Sampeyan bisa nambah opsional.pre-scrollable , sing bakal nyetel dhuwur maksimal 350px lan menehi scrollbar sumbu-y.

Variabel

Kanggo nuduhake variabel nggunakake <var>tag.

y = m x + b

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

Output sampel

Kanggo nuduhake pamblokiran sampel output saka program nggunakake <samp>tag.

Teks iki dimaksudaké kanggo dianggep minangka conto output saka program komputer.

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

Tuladha dhasar

Kanggo gaya dhasar - bantalan cahya lan mung pembagi horisontal - tambahake kelas dasar .tablemenyang sembarang <table>. Bisa uga katon super keluwih, nanging amarga nggunakake tabel sing nyebar kanggo plugin liyane kaya tanggalan lan pemilih tanggal, kita wis milih kanggo ngisolasi gaya meja khusus.

Caption tabel opsional.
#	Jeneng pisanan	Jeneng mburi	Jeneng panganggo
1	Tandhani	Otto	@mdo
2	Yakub	Thornton	@lemak
3	Larry	si Manuk	@twitter

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

Larik belang

Gunakake .table-stripedkanggo nambah zebra-striping menyang sembarang baris tabel ing <tbody>.

Kompatibilitas lintas-browser

Tabel belang ditata liwat :nth-childpamilih CSS, sing ora kasedhiya ing Internet Explorer 8.

#	Jeneng pisanan	Jeneng mburi	Jeneng panganggo
1	Tandhani	Otto	@mdo
2	Yakub	Thornton	@lemak
3	Larry	si Manuk	@twitter

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

Tabel wewatesan

Tambah .table-borderedkanggo wates ing kabeh pinggir meja lan sel.

#	Jeneng pisanan	Jeneng mburi	Jeneng panganggo
1	Tandhani	Otto	@mdo
2	Yakub	Thornton	@lemak
3	Larry	si Manuk	@twitter

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

Ngisor baris

Tambah .table-hoverkanggo ngaktifake status hover ing baris tabel ing a <tbody>.

#	Jeneng pisanan	Jeneng mburi	Jeneng panganggo
1	Tandhani	Otto	@mdo
2	Yakub	Thornton	@lemak
3	Larry	si Manuk	@twitter

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

Tabel kondensasi

Tambah .table-condensedkanggo nggawe tabel luwih kompak kanthi ngethok lapisan sel dadi setengah.

#	Jeneng pisanan	Jeneng mburi	Jeneng panganggo
1	Tandhani	Otto	@mdo
2	Yakub	Thornton	@lemak
3	Larry Manuk		@twitter

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

Kelas kontekstual

Gunakake kelas kontekstual kanggo warna baris tabel utawa sel individu.

kelas	Katrangan
`.active`	Nerapake warna hover menyang baris utawa sel tartamtu
`.success`	Nuduhake tumindak sing sukses utawa positif
`.info`	Nuduhake owah-owahan informatif netral utawa tumindak
`.warning`	Nuduhake bebaya sing mbutuhake perhatian
`.danger`	Nuduhake tumindak mbebayani utawa duweni potensi negatif

#	judhul kolom	judhul kolom	judhul kolom
1	Isi kolom	Isi kolom	Isi kolom
2	Isi kolom	Isi kolom	Isi kolom
3	Isi kolom	Isi kolom	Isi kolom
4	Isi kolom	Isi kolom	Isi kolom
5	Isi kolom	Isi kolom	Isi kolom
6	Isi kolom	Isi kolom	Isi kolom
7	Isi kolom	Isi kolom	Isi kolom
8	Isi kolom	Isi kolom	Isi kolom
9	Isi kolom	Isi kolom	Isi kolom

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

Nuduhake makna kanggo teknologi assistive

Nggunakake warna kanggo nambah makna ing baris tabel utawa sel individu mung menehi indikasi visual, sing ora bakal dikirim menyang pangguna teknologi bantu - kayata pembaca layar. Priksa manawa informasi sing dituduhake kanthi warna katon jelas saka isi kasebut (teks sing katon ing baris/sel tabel sing cocog), utawa kalebu liwat cara alternatif, kayata teks tambahan sing didhelikake karo .sr-onlykelas.

Tabel responsif

Gawe tabel responsif kanthi nglebokake apa .tablewae .table-responsivesupaya bisa nggulung kanthi horisontal ing piranti cilik (nganti 768px). Nalika ndeleng apa wae sing luwih gedhe tinimbang 768px, sampeyan ora bakal bisa ndeleng prabédan ing tabel kasebut.

Kliping / pemotongan vertikal

Tabel responsif nggunakake overflow-y: hidden, sing ngethok konten sing ngluwihi sisih ngisor utawa ndhuwur meja. Utamane, iki bisa ngilangi menu gulung mudhun lan widget pihak katelu liyane.

Firefox lan fieldsets

Firefox duwe sawetara gaya fieldset kikuk widthsing ngganggu tabel responsif. Iki ora bisa diganti tanpa hack khusus Firefox sing ora diwenehake ing Bootstrap:

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

Kanggo informasi luwih lengkap, waca jawaban Stack Overflow iki .

#	Tabel judhul	Tabel judhul	Tabel judhul	Tabel judhul	Tabel judhul	Tabel judhul
1	sel meja	sel meja	sel meja	sel meja	sel meja	sel meja
2	sel meja	sel meja	sel meja	sel meja	sel meja	sel meja
3	sel meja	sel meja	sel meja	sel meja	sel meja	sel meja

#	Tabel judhul	Tabel judhul	Tabel judhul	Tabel judhul	Tabel judhul	Tabel judhul
1	sel meja	sel meja	sel meja	sel meja	sel meja	sel meja
2	sel meja	sel meja	sel meja	sel meja	sel meja	sel meja
3	sel meja	sel meja	sel meja	sel meja	sel meja	sel meja

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Tuladha dhasar

Kontrol wangun individu kanthi otomatis nampa sawetara gaya global. Kabeh tekstual <input>, <textarea>, lan <select>unsur karo .form-controldisetel width: 100%;minangka standar. Bungkus label lan kontrol .form-groupkanggo spasi paling optimal.

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

Aja nyampur grup wangun karo grup input

Aja nyampur grup wangun langsung karo grup input . Nanging, pasang grup input ing grup formulir.

Formulir inline

Tambah .form-inlineing formulir sampeyan (sing ora kudu a <form>) kanggo kontrol blok kiwa lan blok inline. Iki mung ditrapake kanggo formulir ing viewport sing ambane paling sethithik 768px.

Bisa uga mbutuhake jembar khusus

Input lan pilihan wis width: 100%;ditrapake kanthi standar ing Bootstrap. Ing wangun inline, kita ngreset width: auto;supaya sawetara kontrol bisa manggon ing baris sing padha. Gumantung saka tata letak sampeyan, jembar khusus tambahan bisa uga dibutuhake.

Tansah nambah label

Pembaca layar bakal duwe masalah karo formulir sampeyan yen sampeyan ora kalebu label kanggo saben input. Kanggo formulir inline iki, sampeyan bisa ndhelikake label nggunakake .sr-onlykelas. Ana cara alternatif liyane kanggo nyedhiyakake label kanggo teknologi bantu, kayata aria-label, aria-labelledbyutawa titleatribut. Yen ora ana sing ana, pembaca layar bisa nggunakake placeholderatribut kasebut, yen ana, nanging elinga yen nggunakake placeholderminangka panggantos kanggo metode label liyane ora dianjurake.

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

Bentuk horisontal

Gunakake kelas kothak sing wis ditemtokake Bootstrap kanggo nyelarasake label lan klompok kontrol formulir ing tata letak horisontal kanthi nambahake .form-horizontalformulir kasebut (sing ora kudu dadi <form>). Nglakoni owah-owahan supaya .form-grouptumindak minangka baris kothak, dadi ora perlu .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>

Kontrol sing didhukung

Conto kontrol wangun standar sing didhukung ing conto tata letak formulir.

Input

Kontrol formulir sing paling umum, kolom input basis teks. Kalebu dhukungan kanggo kabeh jinis HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, lan color.

Ketik deklarasi dibutuhake

Input mung bakal ditata kanthi lengkap yen typediumumake kanthi bener.

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

Klompok input

Kanggo nambah teks utawa tombol terpadu sadurunge lan/utawa sawise adhedhasar teks <input>, priksa komponen grup input .

Textarea

Kontrol formulir sing ndhukung pirang-pirang baris teks. Ganti rowsatribut yen perlu.

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

Kothak lan radio

Kothak centhang kanggo milih siji utawa sawetara opsi ing dhaptar, dene radio kanggo milih siji opsi saka akeh.

kothak centhang lan radio dipatèni didhukung, nanging kanggo nyedhiyani kursor "ora diijini" ing hover saka wong tuwa <label>, sampeyan kudu nambah .disabledkelas kanggo wong tuwa .radio, .radio-inline, .checkbox, utawa .checkbox-inline.

Default (ditumpuk)

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

Kothak lan radio inline

Gunakake .checkbox-inlineutawa .radio-inlinekelas ing seri kothak utawa radio kanggo kontrol sing katon ing baris sing padha.

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

Kothak lan radio tanpa teks label

Yen sampeyan ora duwe teks ing <label>, input dipanggonke kaya sing dikarepake. Saiki mung dianggo ing kothak centhang non-inline lan radio. Elinga yen isih menehi sawetara wujud label kanggo teknologi bantu (contone, nggunakake 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>

Milih

Elinga yen akeh menu pilihan asli - yaiku ing Safari lan Chrome - duwe sudhut bunder sing ora bisa diowahi liwat border-radiusproperti.

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

Kanggo <select>kontrol karo multipleatribut, macem-macem opsi ditampilake minangka standar.

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

Kontrol statis

Yen sampeyan kudu nyelehake teks kosong ing jejere label formulir ing formulir, gunakake .form-control-statickelas ing a <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>

Status fokus

Kita mbusak gaya gawan outlineing sawetara kontrol wangun lan aplikasi box-shadowing panggonan kanggo :focus.

`:focus`negara demo

Input conto ing ndhuwur nggunakake gaya khusus ing dokumentasi kita kanggo nduduhake :focusnegara ing .form-control.

negara dipatèni

Tambah disabledatribut boolean ing input kanggo nyegah interaksi pangguna. Input sing dipateni katon luwih entheng lan nambah not-allowedkursor.

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

Fieldset dipatèni

Tambah disabledatribut menyang a <fieldset>kanggo mateni kabeh kontrol ing <fieldset>bebarengan.

Caveat babagan fungsi link saka`<a>`

Kanthi gawan, browser bakal nganggep kabeh kontrol wangun asli ( <input>, <select>lan <button>unsur) ing njero <fieldset disabled>minangka dipatèni, nyegah interaksi keyboard lan mouse. Nanging, yen formulir sampeyan uga kalebu <a ... class="btn btn-*">unsur, iki mung bakal diwenehi gaya pointer-events: none. Kaya sing kacathet ing bagean babagan status cacat kanggo tombol (lan khusus ing sub-bagean kanggo unsur anchor), properti CSS iki durung standar lan durung didhukung kanthi lengkap ing Opera 18 lan ngisor, utawa ing Internet Explorer 11, lan menang. 't nyegah pangguna keyboard supaya bisa fokus utawa ngaktifake tautan kasebut. Supaya aman, gunakake JavaScript khusus kanggo mateni tautan kasebut.

Kompatibilitas lintas-browser

Nalika Bootstrap bakal ngetrapake gaya kasebut ing kabeh browser, Internet Explorer 11 lan ing ngisor iki ora ndhukung disabledatribut kasebut kanthi lengkap <fieldset>. Gunakake JavaScript khusus kanggo mateni set lapangan ing browser kasebut.

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

Negara mung diwaca

Tambah readonlyatribut boolean ing input kanggo nyegah modifikasi nilai input. Input mung diwaca katon luwih entheng (kaya input sing dipateni), nanging tetep kursor standar.

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

Teks bantuan

Blok teks bantuan tingkat kanggo kontrol formulir.

Nggayutake teks pitulung karo kontrol formulir

Teks pitulung kudu digandhengake kanthi jelas karo kontrol formulir sing ana gandhengane karo nggunakake aria-describedbyatribut kasebut. Iki bakal mesthekake yen teknologi pitulung - kayata pembaca layar - bakal ngumumake teks bantuan iki nalika pangguna fokus utawa mlebu kontrol.

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

Negara validasi

Bootstrap kalebu gaya validasi kanggo kesalahan, peringatan, lan status sukses ing kontrol formulir. Kanggo nggunakake, nambah .has-warning, .has-error, utawa .has-successmenyang unsur induk. Sembarang .control-label, .form-control, lan .help-blocking unsur kasebut bakal nampa gaya validasi.

Nyedhiyakake status validasi menyang teknologi pitulung lan pangguna buta warna

Nggunakake gaya validasi iki kanggo nunjukake kahanan kontrol formulir mung menehi indikasi visual adhedhasar warna, sing ora bakal dikirim menyang pangguna teknologi bantu - kayata pembaca layar - utawa pangguna buta warna.

Priksa manawa indikasi alternatif negara uga diwenehake. Contone, sampeyan bisa nyakup pitunjuk babagan negara ing <label>teks kontrol formulir dhewe (kaya ing conto kode ing ngisor iki), kalebu Glyphicon (kanthi teks alternatif sing cocog nggunakake .sr-onlykelas - deleng conto Glyphicon ), utawa kanthi menehi pamblokiran teks bantuan tambahan . Khusus kanggo teknologi pitulung, kontrol formulir sing ora bener uga bisa diwenehi aria-invalid="true"atribut.

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

Kanthi lambang opsional

Sampeyan uga bisa nambah lambang saran opsional kanthi tambahan .has-feedbacklan lambang tengen.

Ikon umpan balik mung bisa digunakake karo <input class="form-control">unsur teks.

Ikon, label, lan grup input

Posisi manual lambang umpan balik dibutuhake kanggo input tanpa label lan kanggo grup input kanthi tambahan ing sisih tengen. Sampeyan dianjurake banget kanggo nyedhiyakake label kanggo kabeh input amarga alasan aksesibilitas. Yen sampeyan pengin nyegah label supaya ora ditampilake, ndhelikake karo .sr-onlykelas. Yen sampeyan kudu nindakake tanpa label, atur topnilai lambang umpan balik. Kanggo grup input, atur rightnilai kasebut menyang nilai piksel sing cocog gumantung saka ambane addon sampeyan.

Nemtokake makna lambang kanggo teknologi bantu

Kanggo mesthekake yen teknologi assistive - kayata pembaca layar - kanthi bener ngirimake makna lambang, teks tambahan sing didhelikake kudu dilebokake ing .sr-onlykelas lan digandhengake kanthi jelas karo kontrol formulir sing ana gandhengane karo nggunakake aria-describedby. Utawa, mesthekake yen makna (contone, kasunyatan sing ana bebaya kanggo kolom entri teks tartamtu) disampekake ing sawetara wangun liyane, kayata ngganti teks saka nyata sing <label>digandhengake karo kontrol formulir.

Sanajan conto-conto ing ngisor iki wis nyebataken status validasi kontrol wangun masing-masing ing <label>teks kasebut, teknik ing ndhuwur (nganggo .sr-onlyteks lan aria-describedby) wis kalebu kanggo tujuan ilustrasi.

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

Ikon opsional ing wangun horisontal lan inline

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

`.sr-only`Ikon opsional kanthi label sing didhelikake

Yen sampeyan nggunakake .sr-onlykelas kanggo ndhelikake kontrol formulir <label>(tinimbang nggunakake opsi label liyane, kayata aria-labelatribut), Bootstrap bakal kanthi otomatis nyetel posisi lambang yen wis ditambahake.

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

Setel dhuwur nggunakake kelas kaya .input-lg, lan nyetel jembar nggunakake kothak kolom kelas kaya .col-lg-*.

Ukuran dhuwur

Nggawe kontrol wangun sing luwih dhuwur utawa luwih cendhek sing cocog karo ukuran tombol.

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

Ukuran klompok wangun horisontal

Cepet ukuran label lan wangun kontrol ing .form-horizontalkanthi nambah .form-group-lgutawa .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>

Ukuran kolom

Bungkus input ing kolom kothak, utawa unsur induk khusus, supaya gampang ngetrapake jembar sing dikarepake.

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

Tag tombol

Gunakake kelas tombol ing <a>, <button>, utawa <input>unsur.

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

Panggunaan khusus konteks

Nalika kelas tombol bisa digunakake <a>lan <button>unsur, mung <button>unsur sing didhukung ing komponen nav lan navbar kita.

Link tumindak minangka tombol

Yen <a>unsur digunakake kanggo tumindak minangka tombol - micu fungsionalitas ing kaca, tinimbang navigasi menyang dokumen utawa bagean liyane ing kaca saiki - uga kudu diwenehi role="button".

Rendering lintas-browser

Minangka praktik paling apik, kita banget nyaranake nggunakake <button>unsur kasebut kapan wae kanggo mesthekake rendering lintas-browser sing cocog.

Antarane liyane, ana bug ing Firefox <30 sing ngalangi kita nyetel tombol line-heightbasis <input>, nyebabake ora cocog karo dhuwur tombol liyane ing Firefox.

Pilihan

Gunakake sembarang kelas tombol kasedhiya kanggo cepet nggawe tombol gaya.

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

Nuduhake makna kanggo teknologi assistive

Nggunakake warna kanggo nambah makna tombol mung menehi indikasi visual, sing ora bakal dikirim menyang pangguna teknologi bantu - kayata pembaca layar. Priksa manawa informasi sing dituduhake kanthi warna katon jelas saka isi kasebut (teks tombol sing katon), utawa kalebu liwat cara alternatif, kayata teks tambahan sing didhelikake karo .sr-onlykelas.

Ukuran

Apik tombol luwih gedhe utawa luwih cilik? Tambah .btn-lg, .btn-sm, utawa .btn-xskanggo ukuran tambahan.

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

Nggawe tombol tingkat pemblokiran-sing ukurane jembare wong tuwa- kanthi nambahake .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>

Status aktif

Tombol bakal katon dipencet (kanthi latar mburi sing luwih peteng, wates sing luwih peteng, lan bayangan inset) nalika aktif. Kanggo <button>unsur, iki ditindakake liwat :active. Kanggo <a>unsur, wis rampung karo .active. Nanging, sampeyan bisa nggunakake .activeing <button>s (lan kalebu aria-pressed="true"atribut) yen sampeyan kudu nurun status aktif programmatically.

Elemen tombol

Ora perlu kanggo nambah :activeminangka pseudo-kelas, nanging yen sampeyan kudu meksa katon padha, go ahead lan nambah .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>

Unsur jangkar

Tambah .activekelas kanggo <a>tombol.

pranala utami Link

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

negara dipatèni

Nggawe tombol katon ora bisa diklik kanthi ngilangi maneh nganggo opacity.

Elemen tombol

Tambah disabledatribut menyang <button>tombol.

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

Kompatibilitas lintas-browser

Yen sampeyan nambahakedisabled atribut menyang <button>, Internet Explorer 9 lan ngisor bakal nggawe teks dadi abu-abu kanthi bayangan teks sing ora bisa didandani.

Unsur jangkar

Tambah .disabledkelas kanggo <a>tombol.

pranala utami Link

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

Kita digunakake .disabledminangka kelas sarana ing kene, padha karo .activekelas umum, mula ora perlu prefiks.

Kaveat fungsi link

Kelas iki digunakake pointer-events: nonekanggo nyoba kanggo mateni fungsi link saka <a>s, nanging sing properti CSS durung standar lan ora kebak didhukung ing Opera 18 lan ngisor, utawa ing Internet Explorer 11. Kajaba iku, malah ing browser sing ndhukung pointer-events: none, keyboard. pandhu arah tetep ora kena pengaruh, tegese pangguna keyboard sing katon lan pangguna teknologi bantu isih bisa ngaktifake tautan kasebut. Supaya aman, gunakake JavaScript khusus kanggo mateni tautan kasebut.

Gambar responsif

Gambar ing Bootstrap 3 bisa digawe responsif-loropaken liwat tambahan saka .img-responsivekelas. Iki ditrapake max-width: 100%;, height: auto;lan display: block;kanggo gambar supaya timbangan apik kanggo unsur induk.

Kanggo gambar tengah sing nggunakake .img-responsivekelas, gunakake .center-blocktinimbang .text-center. Deleng bagean kelas helper kanggo rincian liyane babagan .center-blockpanggunaan.

Gambar SVG lan IE 8-10

Ing Internet Explorer 8-10, gambar SVG kanthi .img-responsiveukuran ora proporsional. Kanggo ndandani iki, tambahake width: 100% \9;yen perlu. Bootstrap ora ngetrapake iki kanthi otomatis amarga nyebabake komplikasi kanggo format gambar liyane.

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

Wangun gambar

Tambah kelas menyang <img>unsur supaya gambar gampang gaya ing proyek apa wae.

Kompatibilitas lintas-browser

Elinga yen Internet Explorer 8 ora duwe dhukungan kanggo sudhut bunder.

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

Warna kontekstual

Nerangake makna liwat werna kanthi sawetara kelas sarana emphasis. Iki bisa uga ditrapake kanggo tautan lan bakal dadi peteng nalika hover kaya gaya tautan standar kita.

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

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

Dealing with specificity

Kadhangkala kelas emphasis ora bisa ditrapake amarga spesifik saka pamilih liyane. Umume kasus, solusi sing cukup yaiku mbungkus teks sampeyan <span>karo kelas.

Nuduhake makna kanggo teknologi assistive

Nggunakake warna kanggo nambah makna mung menehi indikasi visual, sing ora bakal dikirim menyang pangguna teknologi bantu - kayata pembaca layar. Priksa manawa informasi sing dituduhake kanthi warna katon jelas saka isi kasebut (werna kontekstual mung digunakake kanggo nguatake makna sing wis ana ing teks/markup), utawa kalebu liwat cara alternatif, kayata teks tambahan sing didhelikake karo .sr-onlykelas . .

Latar mburi kontekstual

Kaya karo kelas warna teks kontekstual, gampang nyetel latar mburi unsur menyang kelas kontekstual apa wae. Komponen jangkar bakal dadi peteng nalika hover, kaya kelas teks.

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

Dealing with specificity

Kadhangkala kelas latar mburi kontekstual ora bisa ditrapake amarga kekhususan pamilih liyane. Ing sawetara kasus, solusi sing cukup yaiku mbungkus konten unsur sampeyan <div>ing kelas.

Nuduhake makna kanggo teknologi assistive

Kaya warna kontekstual , priksa manawa makna apa wae sing diwedharake liwat warna uga diandharake ing format sing ora mung presentasi.

Tutup lambang

Gunakake lambang cedhak umum kanggo ngilangi konten kaya modal lan tandha.

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

Carets

Gunakake carets kanggo nuduhake fungsi gulung mudhun lan arah. Elinga yen caret gawan bakal mbalikke kanthi otomatis ing menu drop -up .

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

Cepet ngambang

Ngambang unsur ing ngiwa utawa nengen karo kelas.!importantkalebu kanggo ngindhari masalah spesifik. Kelas uga bisa digunakake minangka campuran.

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

Blok isi tengah

Setel unsur menyang display: blocklan tengah liwat margin. Kasedhiya minangka mixin lan kelas.

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

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

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

Clearfix

Gampang mbusak floats kanthi nambahake .clearfix unsur induk . Nggunakake micro clearfix kaya sing dipopulerkan dening Nicolas Gallagher. Bisa uga digunakake minangka campuran.

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

Nuduhake lan ndhelikake isi

Meksa unsur ditampilake utawa didhelikake ( kalebu kanggo nonton layar ) karo nggunakake .showlan .hiddenkelas. Kelas kasebut digunakake !importantkanggo ngindhari konflik spesifik, kaya ngambang cepet . Padha mung kasedhiya kanggo toggling tingkat blok. Padha uga bisa digunakake minangka mixins.

.hidekasedhiya, nanging ora tansah mengaruhi nonton layar lan wis ora ana ing v3.0.1 . Gunakake .hiddenutawa .sr-onlytinimbang.

Salajengipun, .invisiblemung bisa digunakake kanggo ngalih visibilitas unsur, tegese displayora diowahi lan unsur kasebut isih bisa mengaruhi aliran dokumen kasebut.

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

Konten pandhu arah layar maca lan keyboard

Singidaken unsur menyang kabeh piranti kajaba maca layar nganggo .sr-only. Gabung .sr-onlykaro .sr-only-focusablekanggo nuduhake unsur maneh nalika lagi fokus (contone dening pangguna keyboard-mung). Diperlukan kanggo ngetutake praktik paling apik aksesibilitas . Bisa uga digunakake minangka campuran.

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

Panggantos gambar

Gunakake .text-hidekelas utawa mixin kanggo ngganti konten teks unsur kanthi gambar latar mburi.

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

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

Kanggo pangembangan seluler sing luwih cepet, gunakake kelas utilitas iki kanggo nuduhake lan ndhelikake konten miturut piranti liwat pitakon media. Uga kalebu kelas sarana kanggo ngowahi isi nalika dicithak.

Coba gunakake iki kanthi winates lan aja nggawe versi sing beda-beda saka situs sing padha. Nanging, gunakake kanggo nglengkapi presentasi saben piranti.

Kelas kasedhiya

Gunakake siji utawa kombinasi saka kelas sing kasedhiya kanggo ngowahi isi ing titik breakpoint viewport.

	Piranti ekstra cilikTelpon (<768px)	Piranti cilikTablet (≥768px)	Piranti mediumDesktop (≥992px)	Piranti gedheDesktop (≥1200px)
`.visible-xs-*`	Katon	didhelikake	didhelikake	didhelikake
`.visible-sm-*`	didhelikake	Katon	didhelikake	didhelikake
`.visible-md-*`	didhelikake	didhelikake	Katon	didhelikake
`.visible-lg-*`	didhelikake	didhelikake	didhelikake	Katon
`.hidden-xs`	didhelikake	Katon	Katon	Katon
`.hidden-sm`	Katon	didhelikake	Katon	Katon
`.hidden-md`	Katon	Katon	didhelikake	Katon
`.hidden-lg`	Katon	Katon	Katon	didhelikake

Ing v3.2.0, .visible-*-*kelas kanggo saben breakpoint ana telung variasi, siji kanggo saben displaynilai properti CSS sing kapacak ing ngisor iki.

Klompok kelas	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Dadi, kanggo layar ekstra cilik ( xs) contone, .visible-*-*kelas sing kasedhiya yaiku: .visible-xs-block, .visible-xs-inline, lan .visible-xs-inline-block.

Kelas .visible-xs, .visible-sm, .visible-md, lan .visible-lguga ana, nanging ora digunakake minangka v3.2.0 . Padha kira-kira padha karo .visible-*-block, kajaba karo kasus khusus tambahan kanggo <table>unsur-related toggling.

Kelas print

Kaya karo kelas responsif biasa, gunakake iki kanggo ngowahi isi kanggo dicithak.

Kelas	Browser	Print
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	didhelikake	Katon
`.hidden-print`	Katon	didhelikake

Kelas kasebut .visible-printuga ana nanging ora digunakake wiwit v3.2.0. Iku kira-kira padha karo .visible-print-block, kajaba karo kasus khusus tambahan kanggo <table>unsur -related.

Kasus tes

Ganti ukuran browser utawa mbukak ing piranti beda kanggo nyoba kelas sarana responsif.

Katon ing...

Centhang ijo nuduhake unsur katon ing viewport sampeyan saiki.

Ekstra cilik ✔ Katon ing x-cilik

Cilik ✔ Katon ing cilik

Sedheng ✔ Katon ing medium

Gedhe ✔ Katon ing gedhe

Ekstra cilik lan cilik ✔ Katon ing x-cilik lan cilik

Sedheng lan gedhe ✔ Katon ing medium lan gedhe

Ekstra cilik lan medium ✔ Katon ing x-cilik lan medium

Cilik lan gedhe ✔ Katon ing cilik lan gedhe

Ekstra cilik lan gedhe ✔ Katon ing x-cilik lan gedhe

Cilik lan medium ✔ Katon ing cilik lan medium

Didhelikake ing ...

Ing kene, centhang ijo uga nuduhake unsur sing didhelikake ing viewport sampeyan saiki.

Ekstra cilik ✔ Didhelikake ing x-cilik

Cilik ✔ Hidden on small

Sedheng ✔ Hidden on medium

Large ✔ Didhelikake ing gedhe

Ekstra cilik lan cilik ✔ Hidden on x-small and small

Medium and large ✔ Didhelikake ing medium lan gedhe

Ekstra cilik lan medium ✔ Hidden on x-small and medium

Small and large ✔ Didhelikake ing cilik lan gedhe

Extra small and large ✔ Didhelikake ing x-cilik lan gedhe

Cilik lan medium ✔ Hidden on small and medium

CSS Bootstrap dibangun ing Kurang, preprocessor kanthi fungsi tambahan kaya variabel, campuran, lan fungsi kanggo kompilasi CSS. Sing pengin nggunakake sumber Kurang file tinimbang file CSS sing dikompilasi bisa nggunakake macem-macem variabel lan campuran sing digunakake ing saindhenging kerangka.

Variabel kothak lan campuran dijangkepi ing bagean sistem Grid .

Nglumpukake Bootstrap

Bootstrap bisa digunakake ing paling ora rong cara: karo CSS kompilasi utawa karo sumber Kurang file. Kanggo ngumpulake file Kurang, goleki bagean Miwiti babagan carane nyiyapake lingkungan pangembangan kanggo mbukak printah sing dibutuhake.

Piranti kompilasi pihak katelu bisa digunakake karo Bootstrap, nanging ora didhukung dening tim inti kita.

Variabel

Variabel digunakake ing kabeh proyek minangka cara kanggo sentralisasi lan nuduhake nilai sing umum digunakake kaya warna, spasi, utawa tumpukan font. Kanggo rincian lengkap, deleng Customizer .

werna-werna

Gampang nggunakake rong skema warna: skala abu-abu lan semantik. Werna grayscale nyedhiyakake akses cepet menyang werna ireng sing umum digunakake nalika semantik kalebu macem-macem werna sing ditugasake kanggo nilai kontekstual sing migunani.

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

Gunakake variabel warna apa wae sing ana utawa ganti maneh menyang variabel sing luwih migunani kanggo proyek sampeyan.

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

Perancah

Sawetara variabel kanggo ngatur unsur-unsur kunci kerangka situs sampeyan kanthi cepet.

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

Pranala

Gaya pranala sampeyan kanthi gampang nganggo warna sing pas kanthi mung siji nilai.

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

Elinga yen @link-hover-colornggunakake fungsi, alat liyane apik tenan saka Kurang, kanggo otomatis nggawe werna hover tengen. Sampeyan bisa nggunakake darken, lighten, saturatelan desaturate.

Tipografi

Setel jinis huruf, ukuran teks, anjog, lan liya-liyane kanthi gampang kanthi sawetara variabel cepet. Bootstrap uga nggunakake iki kanggo nyedhiyakake campuran tipografi sing gampang.

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

lambang

Loro variabel cepet kanggo ngatur lokasi lan jeneng file lambang sampeyan.

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

Komponen

Komponen ing Bootstrap nggunakake sawetara variabel standar kanggo nyetel nilai umum. Kene sing paling umum digunakake.

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

Campuran vendor

Campuran vendor minangka campuran kanggo mbantu ndhukung macem-macem browser kanthi nyakup kabeh prefiks vendor sing relevan ing CSS sing dikompilasi.

Ukuran kothak

Reset model kothak komponen karo mixin siji. Kanggo konteks, waca artikel migunani iki saka Mozilla .

Mixin ora digunakake wiwit v3.2.0, kanthi introduksi Autoprefixer. Kanggo njaga kompatibilitas mundur, Bootstrap bakal terus nggunakake mixin internal nganti Bootstrap v4.

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

sudhut bunder

Saiki kabeh browser modern ndhukung border-radiusproperti non-prefixed. Dadi, ora ana .border-radius()mixin, nanging Bootstrap kalebu trabasan kanggo cepet ngubengi rong sudhut ing sisih tartamtu saka obyek.

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

Box (Drop) bayangan

Yen target pamirsa nggunakake browser lan piranti paling anyar lan paling anyar, mesthine mung nggunakake box-shadowproperti kasebut dhewe. Yen sampeyan mbutuhake dhukungan kanggo piranti Android lawas (pra-v4) lan iOS (pra-iOS 5), gunakake mixin-webkit sing ora digunakake kanggo njupuk awalan sing dibutuhake .

Mixin wis ora digunakake minangka v3.1.0 , amarga Bootstrap ora resmi ndhukung platform lawas sing ora ndhukung properti standar. Kanggo njaga kompatibilitas mundur, Bootstrap bakal terus nggunakake mixin internal nganti Bootstrap v4.

Pesthekake nggunakake rgba()werna ing bayangan kothak supaya bisa digabungake kanthi mulus karo latar mburi.

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

Transisi

Multiple mixins kanggo keluwesan. Setel kabeh informasi transisi nganggo siji, utawa nemtokake wektu tundha lan durasi sing kapisah yen perlu.

Mixin ora digunakake wiwit v3.2.0, kanthi introduksi Autoprefixer. Kanggo njaga kompatibilitas mundur, Bootstrap bakal terus nggunakake campuran internal nganti Bootstrap v4.

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

Transformasi

Puter, skala, terjemahake (pindhah), utawa skew obyek apa wae.

Mixin ora digunakake wiwit v3.2.0, kanthi introduksi Autoprefixer. Kanggo njaga kompatibilitas mundur, Bootstrap bakal terus nggunakake campuran internal nganti Bootstrap v4.

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

Animasi

Campuran siji kanggo nggunakake kabeh properti animasi CSS3 ing siji deklarasi lan campuran liyane kanggo properti individu.

Mixin ora digunakake wiwit v3.2.0, kanthi introduksi Autoprefixer. Kanggo njaga kompatibilitas mundur, Bootstrap bakal terus nggunakake campuran internal nganti Bootstrap v4.

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

Opacity

Setel opacity kanggo kabeh browser lan wenehake filtermundur kanggo IE8.

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

Teks placeholder

Nyedhiyani konteks kanggo kontrol formulir ing saben lapangan.

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

Kolom

Nggawe kolom liwat CSS ing siji unsur.

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

Gradien

Gampang ngowahi rong warna dadi gradien latar mburi. Luwih maju lan atur arah, gunakake telung warna, utawa gunakake gradien radial. Kanthi mixin siji sampeyan entuk kabeh sintaks prefix sing dibutuhake.

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

Sampeyan uga bisa nemtokake amba saka rong werna standar, gradien linear:

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

Yen sampeyan butuh gradien gaya barber-stripe, uga gampang. Mung nemtokake siji werna lan kita bakal overlay belang putih tembus.

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

Nganti ante lan nggunakake telung werna tinimbang. Setel werna pisanan, werna kapindho, werna mandheg warna kapindho (nilai persentase kaya 25%), lan werna katelu kanthi campuran iki:

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

Kepala munggah! Yen sampeyan kudu mbusak gradien, manawa kanggo mbusak sembarang IE-spesifik filtersing bisa ditambahake. Sampeyan bisa nindakake kanthi nggunakake .reset-filter()mixin bebarengan background-image: none;.

Campuran Utilitas

Mixin utilitas minangka campuran sing nggabungake sifat CSS sing ora ana hubungane kanggo nggayuh tujuan utawa tugas tartamtu.

Clearfix

Lali nambahake class="clearfix"unsur apa wae lan tambahake .clearfix()mixin yen cocog. Nggunakake micro clearfix saka Nicolas Gallagher .

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

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

Pusat horisontal

Cepet pusatake unsur apa wae ing induke. Mbutuhake widthutawa max-widthdisetel.

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

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

Pembantu ukuran

Nemtokake dimensi obyek kanthi luwih gampang.

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

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

Area teks sing bisa diowahi ukurane

Gampang ngatur opsi ngowahi ukuran kanggo sembarang textarea, utawa unsur liyane. Default kanggo prilaku browser normal ( both).

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

Ngilangi teks

Cut teks kanthi gampang nganggo elipsis kanthi campuran siji. Mbutuhake unsur dadi blockutawa inline-blocklevel.

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

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

Gambar retina

Nemtokake rong jalur gambar lan dimensi gambar @1x, lan Bootstrap bakal menehi pitakon media @2x. Yen sampeyan duwe akeh gambar sing kudu dilayani, coba nulis CSS gambar retina kanthi manual ing query media siji.

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

Nalika Bootstrap dibangun ing Kurang, uga duwe port Sass resmi . Kita njaga ing repositori GitHub sing kapisah lan nangani nganyari nganggo skrip konversi.

Apa sing kalebu

Wiwit port Sass duwe repo sing kapisah lan nglayani pamirsa sing rada beda, isi proyek kasebut beda banget karo proyek Bootstrap utama. Iki njamin port Sass minangka kompatibel karo akeh sistem basis Sass sabisa.

Path	Katrangan
`lib/`	Kode permata Ruby (konfigurasi Sass, integrasi Rails lan Kompas)
`tasks/`	Skrip konverter (ngowahi hulu Kurang dadi Sass)
`test/`	Tes kompilasi
`templates/`	Manifes paket kompas
`vendor/assets/`	Sass, JavaScript, lan file font
`Rakefile`	Tugas internal, kayata rake lan ngowahi

Dolan maring repositori GitHub port Sass kanggo ndeleng file kasebut tumindak.

Instalasi

Kanggo informasi babagan carane nginstal lan nggunakake Bootstrap kanggo Sass, deleng repositori GitHub readme . Iki minangka sumber paling anyar lan kalebu informasi sing bisa digunakake karo proyek Rails, Kompas, lan Sass standar.

Bootstrap kanggo Sass

CSS

Ringkesan

HTML5 doctype

Mobile pisanan

Tipografi lan pranala

Normalize.css

Wadhah

Sistem grid

Pambuka

Pitakonan media

Pilihan kothak

Tuladha: Stacked-to-horizontal

Tuladha: Wadah cairan

Tuladha: Mobile lan desktop

Tuladha: Mobile, tablet, desktop

Tuladha: Bungkus kolom

Reset kolom responsif

Mbusak talang

Ngimbangi kolom

Nesting kolom

Urutan kolom

Kurang campuran lan variabel

Variabel

Campuran

Conto panggunaan

Tipografi

Judhul

h1. Judul Bootstrap

h2. Judul Bootstrap

h3. Judul Bootstrap

h4. Judul Bootstrap

h5. Judul Bootstrap

h6. Judul Bootstrap

h1. Judul Bootstrap Teks sekunder

h2. Judul Bootstrap Teks sekunder

h3. Judul Bootstrap Teks sekunder

h4. Judul Bootstrap Teks sekunder

h5. Judul Bootstrap Teks sekunder

h6. Judul Bootstrap Teks sekunder

Salinan awak

Timbal awak salinan

Dibangun karo Kurang

Unsur teks inline

Teks sing ditandhani

Teks sing wis dibusak

Teks Strikethrough

Teks sing disisipake

Teks sing digaris ngisor

Teks cilik

Kandel

Miring

unsur sulih

Kelas Alignment

Kelas transformasi

Singkatan

Singkatan dhasar

Initialisme

Alamat

Blockquotes

Blockquote standar

Pilihan Blockquote

Jeneng sumber

Tampilan sulih

Dhaptar

Ora ditata

dhawuh

Tanpa gaya

Inline

Katrangan

Deskripsi horisontal

Pemotongan otomatis

Kode

Inline

Input pangguna

Blok dhasar

Variabel

Output sampel

Tabel

Tuladha dhasar

Larik belang

`:focus`negara demo

Caveat babagan fungsi link saka`<a>`

`.sr-only`Ikon opsional kanthi label sing didhelikake