Meunangkeun lowdown dina bagian konci infrastruktur Bootstrap urang, kaasup pendekatan urang pikeun hadé, gancang, ngembangkeun web kuat.

HTML5 doctype

Bootstrap ngagunakeun elemen HTML tangtu jeung sipat CSS nu merlukeun pamakéan doctype HTML5. Lebetkeun éta dina awal sadaya proyék anjeun.

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

Mobile heula

Kalayan Bootstrap 2, kami nambihan gaya ramah sélulér pilihan pikeun aspék konci kerangka. Kalayan Bootstrap 3, kami parantos nyerat deui proyék janten mobile friendly ti mimiti. Gantina nambihan gaya sélulér pilihan, aranjeunna dipanggang langsung kana inti. Kanyataanna, Bootstrap nyaeta mobile munggaran . Gaya mobile munggaran tiasa dipendakan di sakumna perpustakaan sanés dina file anu misah.

Pikeun mastikeun rendering anu leres sareng zum touch, tambahkeun tag meta viewport kana file <head>.

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

Anjeun tiasa nganonaktipkeun kamampuan ngazum dina alat sélulér ku nambihan user-scalable=notag meta viewport. Ieu nganonaktipkeun zum, hartosna pangguna ngan ukur tiasa ngagulung, sareng nyababkeun situs anjeun karasaeun sapertos aplikasi asli. Gemblengna, kami henteu nyarankeun ieu dina unggal situs, janten ati-ati!

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

Tipografi sareng tautan

Bootstrap nyetél tampilan global dasar, tipografi, sareng gaya tautan. Sacara husus, urang:

Disetél background-color: #fff;dinabody
Anggo @font-family-base, @font-size-base, sareng @line-height-baseatribut salaku dasar tipografi urang
Setel warna link global via @link-colorjeung nerapkeun link underlines ngan dina:hover

Gaya ieu tiasa dipendakan dina scaffolding.less.

Normalize.css

Pikeun ningkat rendering cross-browser, kami nganggo Normalize.css , proyék ku Nicolas Gallagher sareng Jonathan Neal .

Wadahna

Bootstrap ngabutuhkeun unsur anu ngandung pikeun ngabungkus eusi situs sareng nempatkeun sistem grid kami. Anjeun tiasa milih salah sahiji tina dua wadah pikeun dianggo dina proyék anjeun. Catet yén, kusabab paddingsareng seueur deui, henteu aya wadah anu tiasa didamel.

Paké .containerpikeun wadahna lebar tetep responsif.

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

Paké .container-fluidpikeun wadahna rubak pinuh, ngawengku sakabéh rubak viewport Anjeun.

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

Bootstrap kalebet sistem grid cairan anu responsif sareng mobile anu cocog pikeun skala dugi ka 12 kolom nalika ukuran alat atanapi viewport naék. Éta kalebet kelas anu tos siap pikeun pilihan perenah anu gampang, ogé campuran anu kuat pikeun ngahasilkeun perenah semantik anu langkung seueur .

Bubuka

Sistem grid dipaké pikeun nyieun layouts kaca ngaliwatan runtuyan baris jeung kolom nu imah eusi Anjeun. Ieu kumaha sistem grid Bootstrap jalanna:

Baris kudu ditempatkeun dina .container(lebar tetep) atawa .container-fluid(lebar pinuh) pikeun alignment ditangtoskeun jeung padding.
Paké baris nyieun grup horizontal kolom.
Eusi kudu disimpen dina kolom, sarta ngan kolom bisa jadi barudak langsung tina barisan.
Kelas grid anu siap-siap sapertos .rowsareng .col-xs-4sayogi pikeun ngadamel tata letak grid gancang. Kirang mixins ogé tiasa dianggo pikeun perenah langkung semantik.
Kolom nyieun talang (celah antara eusi kolom) via padding. Éta padding ieu offset dina barisan pikeun kolom kahiji jeung panungtung via margin négatip on .rows.
Margin négatip nyaéta naha conto-conto di handap ieu kaluar. Ieu supados eusi dina kolom grid dijejeran ku eusi non-grid.
Kolom grid dijieun ku nangtukeun jumlah dua belas kolom sadia nu Anjeun hoyong bentang. Contona, tilu kolom sarua bakal ngagunakeun tilu .col-xs-4.
Lamun leuwih ti 12 kolom disimpen dina hiji baris, unggal grup kolom tambahan bakal, salaku hiji unit, mungkus kana garis anyar.
Kelas grid dilarapkeun ka alat nu rubak layar leuwih gede atawa sarua jeung ukuran breakpoint, sarta override kelas grid sasaran dina alat nu leuwih leutik. Ku alatan éta, contona, nerapkeun .col-md-*kelas naon waé kana unsur sanés ngan ukur mangaruhan gaya na dina alat sedeng tapi ogé dina alat anu ageung upami .col-lg-*kelas henteu aya.

Tingali kana conto pikeun nerapkeun prinsip ieu kana kode anjeun.

Patarosan média

Kami nganggo patarosan média di handap ieu dina file Kurang kami pikeun nyiptakeun titik putus konci dina sistem grid kami.

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

Urang aya kalana dilegakeun on queries média ieu ngawengku hiji max-widthngawatesan CSS ka set narrower alat.

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

Tingali kumaha aspék sistem grid Bootstrap tiasa dianggo dina sababaraha alat anu nganggo méja anu praktis.

	Alat leutik tambahan Telepon (<768px)	Alat leutik Tablet (≥768px)	Desktop alat sedeng (≥992px)	Alat ageung Desktops (≥1200px)
paripolah grid	Horizontal sepanjang waktos	Rubuh pikeun ngamimitian, horizontal luhureun breakpoints
Lebar wadahna	Euweuh (otomatis)	750px	970px	1170px
Awalan kelas	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# kolom	12
rubak kolom	Otomatis	~62px	~81px	~97px
Lebar talang	30px (15px dina unggal sisi kolom)
Nestable	Sumuhun
Offsets	Sumuhun
Susunan kolom	Sumuhun

Conto: Tumpuk-ka-horizontal

Ngagunakeun set tunggal .col-md-*kelas grid, Anjeun bisa nyieun sistem grid dasar nu dimimitian kaluar tumpuk dina alat nu bagerak jeung alat tablet (leuwih leutik rentang leutik) saméméh jadi horizontal dina desktop (sedeng) alat. Teundeun kolom grid dina sagala .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>

Contona: wadah cairan

Hurungkeun sagala perenah grid rubak tetep jadi perenah lebar pinuh ku cara ngarobah pangluarna anjeun .containerka .container-fluid.

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

Contona: Mobile jeung desktop

Naha anjeun henteu hoyong kolom anjeun ngan saukur tumpukan dina alat anu langkung alit? Anggo kelas grid alat leutik sareng sedeng tambahan ku nambihan .col-xs-* .col-md-*kana kolom anjeun. Tingali conto di handap pikeun ide anu langkung saé kumaha éta sadayana jalan.

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

Contona: Mobile, tablet, desktop

Bangunkeun conto sateuacana ku nyiptakeun perenah anu langkung dinamis sareng kuat sareng .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>

Conto: Bungkus kolom

Lamun leuwih ti 12 kolom disimpen dina hiji baris, unggal grup kolom tambahan bakal, salaku hiji unit, mungkus kana garis anyar.

.col-xs-9

.col-xs-4
Kusabab 9 + 4 = 13 > 12, div 4-kolom-lega ieu bakal dibungkus kana garis anyar salaku hiji unit contiguous.

.col-xs-6
Kolom saterusna nuluykeun sapanjang garis 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

Kalayan opat tingkatan grid anu sayogi, anjeun pasti bakal ngalaman masalah dimana, dina titik-titik putus-putus anu tangtu, kolom anjeun henteu jelas leres sabab hiji langkung jangkung tibatan anu sanés. Pikeun ngalereskeun éta, paké kombinasi a sareng kelas utilitas responsif.clearfix kami .

.col-xs-6 .col-sm-3
Ganti ukuran viewport Anjeun atawa pariksa kaluar dina telepon Anjeun pikeun 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>

Salian ngabersihan kolom dina titik putus responsif, anjeun panginten kedah ngareset offsets, push, atanapi pulls . Tempo ieu aksi dina conto grid .

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

Ngimbangkeun kolom

Pindahkeun kolom ka katuhu nganggo .col-md-offset-*kelas. Kelas ieu ningkatkeun margin kénca kolom ku *kolom. Contona, .col-md-offset-4ngalir .col-md-4ngaliwatan opat 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>

Anjeun oge bisa override offsets ti tiers grid handap kalawan .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>

Kolom nyarang

Pikeun nyarang eusi anjeun sareng grid standar, tambahkeun kolom anyar .rowsareng set dina .col-sm-*kolom anu tos aya .col-sm-*. Baris Nested kedah ngawengku sakumpulan kolom nu nambahan nepi ka 12 atawa kurang (teu diperlukeun nu make sakabeh 12 kolom sadia).

Tingkat 1: .col-sm-9

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

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

Susunan kolom

Gampang ngarobah urutan kolom grid diwangun-di urang .col-md-push-*jeung .col-md-pull-*kelas modifier.

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

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

Kirang campuran sareng variabel

Salian kelas grid prebuilt pikeun layouts gancang, Bootstrap ngawengku variabel kirang na mixins pikeun gancang generating basajan sorangan, perenah semantis.

Variabel

Variabel nangtukeun jumlah kolom, lebar talang, jeung titik query media di mana dimimitian kolom floating. Kami nganggo ieu pikeun ngahasilkeun kelas grid anu tos siap didokumentasikeun di luhur, ogé pikeun campuran khusus anu didaptarkeun di handap.

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

Campuran

Mixins dipaké ditéang jeung variabel grid keur ngahasilkeun CSS semantis pikeun kolom grid 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 pamakéan

Anjeun tiasa ngarobih variabel kana nilai khusus anjeun nyalira, atanapi ngan ukur nganggo mixin kalayan nilai standarna. Ieu conto ngagunakeun setélan standar pikeun nyieun tata perenah dua kolom kalayan sela antara.

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

lulugu

Kabéh lulugu HTML, <h1>ngaliwatan <h6>, sadia. .h1ngaliwatan .h6kelas oge sadia, pikeun nalika rék cocog styling font tina judul tapi tetep hayang téks anjeun dipintonkeun 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>

Jieun téks torek, sekundér dina sagala judul kalawan <small>tag generik atawa .smallkelas.

h1. Judul Bootstrap Téks sekundér

h2. Judul Bootstrap Téks sekundér

h3. Judul Bootstrap Téks sekundér

h4. Judul Bootstrap Téks sekundér

h5. Judul Bootstrap Téks sekundér

h6. Judul Bootstrap Téks sekundér

<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-sizenyaéta 14px , kalayan line-height1.428 . Ieu diterapkeun ka <body>sareng sadaya paragraf. Salaku tambahan, <p>(paragraf) nampi margin handap satengah jangkungna garis anu diitung (10px sacara standar).

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

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

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

<p>...</p>

Timbal awak salinan

Jieun paragraf nangtung kaluar ku nambahkeun .lead.

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

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

Diwangun ku Kurang

Skala tipografi dumasar kana dua Kurang variabel dina variabel.kurang : @font-size-basejeung @line-height-base. Anu kahiji nyaéta ukuran font dasar anu dianggo sapanjang sareng anu kadua nyaéta jangkungna garis dasar. Kami nganggo variabel-variabel sareng sababaraha math basajan pikeun nyiptakeun margin, paddings, sareng jangkung garis sadaya jinis kami sareng seueur deui. Sesuaikeun aranjeunna sareng Bootstrap adaptasi.

Unsur téks Inline

téks ditandaan

Pikeun nyorot hiji ngajalankeun téks alatan relevansi na dina konteks sejen, make <mark>tag.

Anjeun tiasa make tag tanda kasorotantéks.

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

téks dihapus

Pikeun nunjukkeun blok téks anu parantos dihapus nganggo <del>tag.

~~Baris téks ieu dimaksudkeun pikeun dianggap salaku téks dihapus.~~

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

téks Strikethrough

Pikeun nunjukkeun blok téks anu henteu relevan deui nganggo <s>tag.

~~Garis téks ieu dimaksudkeun pikeun dianggap henteu akurat deui.~~

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

téks diselapkeun

Pikeun nunjukkeun tambihan kana dokumén nganggo <ins>tag.

Garis téks ieu dimaksudkeun pikeun diperlakukeun salaku tambahan pikeun dokumén.

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

Téks anu digariskeun

Pikeun ngagariskeun téks nganggo <u>tag.

Garis téks ieu bakal ditingalikeun sakumaha anu digariskeun

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

Anggo tag tekenan standar HTML kalayan gaya anu ringan.

téks leutik

Pikeun de-emphasizing inline atawa blok téks, make <small>tag pikeun nyetel téks dina 85% ukuran indungna. elemen judul narima sorangan font-sizepikeun nested<small> .

Alternatipna anjeun tiasa nganggo unsur inline sareng .smallgaganti <small>.

Garis téks ieu dimaksudkeun pikeun diperlakukeun salaku citak anu saé.

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

Kandel

Pikeun ngantebkeun snippet téks kalayan beurat font anu langkung beurat.

Potongan téks di handap ieu didamel salaku téks kandel .

<strong>rendered as bold text</strong>

Miring

Pikeun nekenkeun snippet téks nganggo miring.

Potongan téks di handap ieu dijantenkeun salaku téks miring .

<em>rendered as italicized text</em>

elemen séjén

Ngarasa Luncat ngagunakeun <b>na <i>di HTML5. <b>dimaksudkeun pikeun nyorot kecap atawa frasa tanpa nepikeun pentingna tambahan bari <i>lolobana pikeun sora, istilah teknis, jsb.

Kelas alignment

Gampang realign téks kana komponén kalayan kelas alignment téks.

Téks dijajarkeun kénca.

Téks dijajarkeun tengah.

Téks anu dijajarkeun katuhu.

Téks anu dibenerkeun.

Taya bungkus téks.

<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

Transformasi téks dina komponén kalayan kelas kapitalisasi téks.

Aksara leutik.

Tulisan hurup ageung.

Tulisan huruf kapital.

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

Singgetan

Palaksanaan gaya <abbr>unsur HTML pikeun singketan sareng akronim pikeun nunjukkeun versi anu dilegakeun dina hover. Singketan sareng titleatribut ngagaduhan wates handap titik lampu sareng kursor pitulung dina hover, nyayogikeun kontéks tambahan dina hover sareng pikeun pangguna téknologi anu ngabantosan.

Singgetan dasar

Singketan tina kecap atribut nyaéta attr .

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

Initialisme

Tambahkeun .initialismka singketan pikeun ukuran font anu rada leutik.

HTML mangrupa hal pangalusna saprak sliced roti.

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

Alamat

Nampilkeun informasi kontak pikeun karuhun pangdeukeutna atawa sakabéh awak gawé. Simpen pormat ku mungkas sadaya garis sareng <br>.

Twitter, Nyarita
1355 Market Street, Suite 900
San Fransisco, CA 94103
P: (123) 456-7890

Ngaran lengkep
[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

Pikeun ngadugikeun blok eusi tina sumber anu sanés dina dokumén anjeun.

Blockquote standar

Bungkus <blockquote>sabudeureun sagala HTML salaku cutatan. Pikeun cutatan lempeng, kami nyarankeun 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

Parobahan gaya sareng eusi pikeun variasi saderhana dina standar <blockquote>.

Ngaran hiji sumber

Tambahkeun a <footer>pikeun ngaidentipikasi sumber. Bungkus nami karya sumber dina <cite>.

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

Batur kawentar dina Judul 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>

Pintonan alternatip

Tambahkeun .blockquote-reversepikeun blockquote kalawan eusi katuhu-Blok.

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

Batur kawentar dina Judul Sumber

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

Daptar

Teu diurut

Daptar item nu urutan teu eksplisit masalah.

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

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

Dititah

Daptar barang anu urutanna sacara eksplisit penting.

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

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

Teu gaya

Cabut wates standar list-stylesareng kénca dina daptar item (barudak saharita wungkul). Ieu ngan manglaku ka barudak langsung daptar item , hartina anjeun bakal kudu nambahan kelas pikeun sagala daptar nested ogé.

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

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

Baris

Teundeun sadaya item daptar dina garis tunggal display: inline-block;jeung sababaraha padding lampu.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Katerangan

Daptar istilah sareng déskripsi anu aya hubunganana.

Daptar pedaran: Daptar pedaran sampurna pikeun nangtukeun istilah.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida and eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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

Katerangan horisontal

Jieun istilah jeung déskripsi dina <dl>baris nepi sisi-demi-sisi. Dimimitian tumpuk sapertos standar <dl>s, tapi nalika navbar ngalegaan, kitu ogé ieu.

Daptar pedaran: Daptar pedaran sampurna pikeun nangtukeun istilah.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida and 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>

Pamotongan otomatis

Daptar déskripsi horisontal bakal motong istilah anu panjang teuing pikeun pas dina kolom kénca kalawan text-overflow. Dina viewports narrower, maranéhna bakal robah kana tata perenah tumpuk standar.

Baris

Bungkus snippét inline kode sareng <code>.

Contona, <section>kudu dibungkus sakumaha inline.

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

Input pamaké

Anggo <kbd>pikeun nunjukkeun input anu biasana diasupkeun ku keyboard.

Pikeun pindah diréktori, ketik cddituturkeun ku nami diréktori.
Pikeun ngédit setélan, pencét 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 dasar

Paké <pre>pikeun sababaraha baris kode. Pastikeun pikeun kabur sagala kurung sudut dina kode pikeun rendering ditangtoskeun.

<p>Conto téks di dieu...</p>

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

Anjeun tiasa opsional nambihan .pre-scrollablekelas, anu bakal nyetél jangkungna maksimal 350px sareng nyayogikeun scrollbar sumbu-y.

Variabel

Pikeun nunjukkeun variabel nganggo <var>tag.

y = m x + b

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

kaluaran sampel

Pikeun nunjukkeun blok kaluaran sampel tina program nganggo <samp>tag.

Téks ieu dimaksudkeun pikeun dianggap salaku kaluaran sampel tina program komputer.

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

conto dasar

Pikeun styling dasar - padding lampu sarta ngan dividers horizontal - tambahkeun kelas dasar .tablekana sagala <table>. Ieu sigana super kaleuleuwihan, tapi tinangtu pamakéan nyebar tabel pikeun plugins séjén kawas almenak jeung pickers tanggal, kami geus opted ngasingkeun gaya tabel custom urang.

Caption méja pilihan.
#	Nami payun	Nami pengker	Ngaran pamaké
1	Tandaan	Otto	@mdo
2	Yakub	Thornton	@gajih
3	Larry	manuk	@twitter

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

Jajaran belang

Paké .table-stripedpikeun nambahkeun zebra-striping kana sagala baris tabel dina <tbody>.

Kasaluyuan cross-browser

Tabel belang ditata nganggo :nth-childpamilih CSS, anu henteu sayogi dina Internet Explorer 8.

#	Nami payun	Nami pengker	Ngaran pamaké
1	Tandaan	Otto	@mdo
2	Yakub	Thornton	@gajih
3	Larry	manuk	@twitter

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

méja wates

Tambahkeun .table-borderedpikeun wates dina sagala sisi tabel sarta sél.

#	Nami payun	Nami pengker	Ngaran pamaké
1	Tandaan	Otto	@mdo
2	Yakub	Thornton	@gajih
3	Larry	manuk	@twitter

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

Baris ngalayang

Tambahkeun .table-hoverpikeun ngaktipkeun kaayaan hover dina baris tabel dina hiji <tbody>.

#	Nami payun	Nami pengker	Ngaran pamaké
1	Tandaan	Otto	@mdo
2	Yakub	Thornton	@gajih
3	Larry	manuk	@twitter

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

Méja kentel

Tambahkeun .table-condensedsangkan tabel leuwih kompak ku motong padding sél dina satengah.

#	Nami payun	Nami pengker	Ngaran pamaké
1	Tandaan	Otto	@mdo
2	Yakub	Thornton	@gajih
3	Larry Manuk		@twitter

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

Kelas kontekstual

Anggo kelas kontekstual pikeun ngawarnaan baris tabel atanapi sél individu.

Kelas	Katerangan
`.active`	Nerapkeun warna hover ka baris atawa sél nu tangtu
`.success`	Nunjukkeun hiji aksi suksés atawa positif
`.info`	Nunjukkeun parobahan informatif nétral atawa aksi
`.warning`	Nunjukkeun peringatan anu peryogi perhatian
`.danger`	Nunjukkeun tindakan bahaya atanapi berpotensi négatip

#	Judul kolom	Judul kolom	Judul kolom
1	eusi kolom	eusi kolom	eusi kolom
2	eusi kolom	eusi kolom	eusi kolom
3	eusi kolom	eusi kolom	eusi kolom
4	eusi kolom	eusi kolom	eusi kolom
5	eusi kolom	eusi kolom	eusi kolom
6	eusi kolom	eusi kolom	eusi kolom
7	eusi kolom	eusi kolom	eusi kolom
8	eusi kolom	eusi kolom	eusi kolom
9	eusi kolom	eusi kolom	eusi 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>

Nepikeun harti kana téknologi anu ngabantosan

Ngagunakeun warna pikeun nambahkeun harti kana baris tabel atawa sél individu ngan nyadiakeun indikasi visual, nu moal conveyed ka pamaké tina téhnologi pitulung - kayaning pamiarsa layar. Mastikeun yén informasi dilambangkeun ku warna boh atra tina eusi sorangan (téks katempo dina baris tabel relevan / sél), atawa kaasup ngaliwatan cara alternatif, kayaning téks tambahan disumputkeun jeung .sr-onlykelas.

tabél responsif

Jieun tabel responsif ku wrapping sagala .tabledi .table-responsivesangkan aranjeunna ngagulung horisontal dina alat leutik (dina 768px). Nalika ningali naon waé anu langkung ageung tibatan 768px lebar, anjeun moal ningali bédana dina tabel ieu.

Clipping nangtung / truncation

tabél responsif ngagunakeun overflow-y: hidden, nu klip kaluar sagala eusi nu mana saluareun edges handap atawa luhur tabél. Khususna, ieu tiasa motong ménu lungsur sareng widget pihak katilu anu sanés.

Firefox jeung fieldsets

Firefox gaduh sababaraha styling fieldset kagok ngalibatkeun widthnu interferes jeung tabel responsif. Ieu teu tiasa ditimpa tanpa hack khusus Firefox anu kami henteu nyayogikeun dina Bootstrap:

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

Kanggo inpo nu leuwih lengkep, baca ieu waleran tumpukan mudal .

#	Judul méja	Judul méja	Judul méja	Judul méja	Judul méja	Judul méja
1	Sél méja	Sél méja	Sél méja	Sél méja	Sél méja	Sél méja
2	Sél méja	Sél méja	Sél méja	Sél méja	Sél méja	Sél méja
3	Sél méja	Sél méja	Sél méja	Sél méja	Sél méja	Sél méja

#	Judul méja	Judul méja	Judul méja	Judul méja	Judul méja	Judul méja
1	Sél méja	Sél méja	Sél méja	Sél méja	Sél méja	Sél méja
2	Sél méja	Sél méja	Sél méja	Sél méja	Sél méja	Sél méja
3	Sél méja	Sél méja	Sél méja	Sél méja	Sél méja	Sél méja

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

conto dasar

Kadali formulir individu otomatis nampi sababaraha gaya global. Kabéh tékstual <input>, <textarea>, sarta <select>elemen kalawan .form-controldisetel ka width: 100%;sacara standar. Bungkus labél sareng kadali .form-grouppikeun jarak anu 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>

Ulah campur grup formulir jeung grup input

Ulah campur grup formulir langsung jeung grup input . Gantina, sayang grup input di jero grup formulir.

Bentuk inline

Tambihkeun .form-inlinekana formulir anjeun (anu henteu kedah janten <form>) pikeun kontrol blok kénca sareng blok inline. Ieu ngan lumaku pikeun formulir dina viewports nu lega sahenteuna 768px.

Bisa merlukeun lebar custom

Input sareng pilihan parantos width: 100%;dilarapkeun sacara standar dina Bootstrap. Dina bentuk inline, urang ngareset yén width: auto;sababaraha kadali tiasa cicing dina garis anu sami. Gumantung kana perenah anjeun, lebar custom tambahan bisa jadi diperlukeun.

Sok tambahkeun labél

Pamiarsa layar bakal gaduh masalah sareng formulir anjeun upami anjeun henteu ngalebetkeun labél pikeun unggal input. Pikeun bentuk inline ieu, anjeun tiasa nyumputkeun labél nganggo .sr-onlykelas. Aya deui metode alternatif pikeun nyayogikeun labél pikeun téknologi pitulung, sapertos aria-label, aria-labelledbyatanapi titleatribut. Upami teu aya anu aya, pamiarsa layar tiasa nganggo placeholderatribut, upami aya, tapi perhatikeun yén panggunaan placeholdersalaku gaganti pikeun metode panyiri anu sanés henteu disarankeun.

<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

Anggo kelas grid anu tos ditetepkeun Bootstrap pikeun nyaluyukeun labél sareng grup kontrol formulir dina perenah horizontal ku cara nambahkeun .form-horizontalkana formulir (anu teu kudu a <form>). Lakukeun sangkan robah .form-groups ka kalakuanana salaku baris grid, jadi teu 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>

Kadali anu dirojong

Conto kadali formulir standar dirojong dina tata perenah formulir conto.

Input

Paling umum kontrol formulir, widang input basis téks. Ngawengku pangrojong pikeun sadaya jinis HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, jeung color.

Jenis deklarasi diperlukeun

Input ngan bakal pinuh gaya upami aranjeunna typedinyatakeun leres.

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

Grup input

Pikeun nambahkeun teks atawa tombol terpadu saméméh jeung/atawa sanggeus sagala dumasar-téks <input>, pariksa kaluar komponén grup input .

Textarea

Kontrol bentuk anu ngadukung sababaraha baris téks. Robah rowsatribut sakumaha diperlukeun.

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

Kotak centang jeung radio

Kotak centang kanggo milih hiji atanapi sababaraha pilihan dina daptar, sedengkeun radio kanggo milih hiji pilihan tina seueur.

kotak centang ditumpurkeun jeung radio dirojong, tapi nyadiakeun kursor "teu-diijinkeun" dina hover indungna <label>, Anjeun bakal kedah nambahkeun .disabledkelas ka indungna .radio, .radio-inline, .checkbox, atawa .checkbox-inline.

Default (tumpuk)

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

Kotak centang inline sareng radio

Anggo kelas .checkbox-inlineatanapi .radio-inlinedina séri kotak centang atanapi radio pikeun kadali anu muncul dina garis anu sami.

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

Kotak centang sareng radio tanpa téks labél

Upami anjeun teu gaduh téks dina <label>, input diposisikan sakumaha anu anjeun ngarepkeun. Ayeuna ngan ukur tiasa dianggo dina kotak centang sareng radio non-inline. Inget pikeun tetep nyadiakeun sababaraha bentuk labél pikeun téknologi pitulung (contona, ngagunakeun 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

Catet yén seueur ménu pilihan asli — nyaéta dina Safari sareng Chrome — gaduh sudut anu buleud anu teu tiasa dirobih ku border-radiussipat.

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

Pikeun <select>kadali kalawan multipleatribut, sababaraha pilihan ditémbongkeun sacara standar.

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

Kontrol statik

Lamun anjeun kudu nempatkeun téks polos gigireun labél formulir dina formulir a, make .form-control-statickelas on 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>

kaayaan fokus

Urang nyabut gaya standar outlinedina sababaraha kadali formulir jeung nerapkeun box-shadowdina tempatna pikeun :focus.

`:focus`kaayaan demo

Input conto di luhur nganggo gaya khusus dina dokuméntasi kami pikeun nunjukkeun :focuskaayaan dina .form-control.

kaayaan ditumpurkeun

Tambahkeun disabledatribut boolean dina input pikeun nyegah interaksi pamaké. Input anu ditumpurkeun muncul langkung hampang sareng nambihan not-allowedkursor.

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

Fieldsets ditumpurkeun

Tambahkeun disabledatribut ka a <fieldset>nganonaktipkeun sakabeh kadali dina <fieldset>sakaligus.

Caveat ngeunaan fungsionalitas link tina`<a>`

Sacara standar, panyungsi bakal ngubaran sagala kadali formulir asli ( <input>, <select>sarta <button>elemen) di jero a <fieldset disabled>salaku ditumpurkeun, nyegah duanana keyboard jeung interaksi mouse on aranjeunna. Sanajan kitu, lamun formulir Anjeun ogé ngawengku <a ... class="btn btn-*">elemen, ieu ngan bakal dibéré gaya pointer-events: none. Salaku nyatet dina bagian ngeunaan kaayaan ditumpurkeun pikeun tombol (sarta husus dina sub-bagian pikeun elemen jangkar), sipat CSS ieu teu acan standarisasi tur teu dirojong pinuh di Opera 18 tur handap, atawa dina Internet Explorer 11, sarta meunang. 'T nyegah pamaké keyboard pikeun museurkeun atawa ngaktipkeun tumbu ieu. Janten aman, paké JavaScript khusus pikeun nganonaktipkeun tautan sapertos kitu.

Kasaluyuan cross-browser

Nalika Bootstrap bakal nerapkeun gaya ieu dina sadaya panyungsi, Internet Explorer 11 sareng di handap henteu ngadukung sapinuhna disabledatribut dina <fieldset>. Anggo JavaScript khusus pikeun nganonaktipkeun set lapangan dina panyungsi ieu.

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

kaayaan maca wungkul

Tambahkeun readonlyatribut boolean dina input pikeun nyegah modifikasi tina nilai input. Input ngan ukur dibaca sigana langkung hampang (sapertos input anu ditumpurkeun), tapi tetep kursor standar.

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

téks pitulung

Blok tingkat pitulung téks pikeun kadali formulir.

Ngaitkeun téks pitulung sareng kadali formulir

Pitulung téks kudu eksplisit pakait sareng kontrol formulir eta relates to make aria-describedbyatribut. Ieu bakal mastikeun yén téknologi pitulung - sapertos pamiarsa layar - bakal ngumumkeun téks pitulung ieu nalika pangguna museurkeun atanapi asup kana kadali.

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

Nagara validasi

Bootstrap kalebet gaya validasi pikeun kasalahan, peringatan, sareng kaayaan kasuksésan dina kadali formulir. Pikeun ngagunakeun, tambahkeun .has-warning, .has-error, atanapi .has-successkana unsur indungna. Sakur .control-label, .form-control, sareng .help-blockdina unsur éta bakal nampi gaya validasi.

Nepikeun kaayaan validasi ka téknologi anu ngabantosan sareng pangguna buta warna

Ngagunakeun gaya validasi ieu pikeun nuduhkeun kaayaan hiji kontrol formulir ukur nyadiakeun visual, indikasi dumasar-warna, nu moal conveyed ka pamaké téknologi mantuan - kayaning pamiarsa layar - atawa pamaké buta warna.

Pastikeun yén indikasi alternatif nagara ogé disayogikeun. Salaku conto, anjeun tiasa ngalebetkeun petunjuk ngeunaan kaayaan dina téks kontrol formulir <label>sorangan (sapertos kasus dina conto kode di handap ieu), kalebet Glyphicon (kalayan téks alternatif anu pas nganggo .sr-onlykelas - tingali conto Glyphicon ), atanapi ku cara nyayogikeun blok téks pitulung tambahan . Husus pikeun téknologi pitulung, kadali formulir teu valid ogé bisa ditugaskeun 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>

Kalayan ikon pilihan

Anjeun oge bisa nambahkeun ikon eupan balik pilihan kalawan tambahan .has-feedbackjeung ikon katuhu.

Ikon eupan balik ngan tiasa dianggo sareng <input class="form-control">unsur téks.

Ikon, labél, sareng grup input

Positioning manual ikon eupan balik diperlukeun pikeun inputs tanpa labél jeung grup input kalawan tambihan dina katuhu. Anjeun didorong pisan pikeun nyayogikeun labél pikeun sadaya input pikeun alesan aksés. Upami anjeun hoyong nyegah labél ditampilkeun, sumputkeun sareng .sr-onlykelas. Upami anjeun kedah ngalakukeun tanpa labél, saluyukeun topnilai ikon eupan balik. Pikeun grup input, saluyukeun rightnilai ka nilai piksel luyu gumantung kana rubak addon Anjeun.

Nepikeun hartos ikon kana téknologi anu ngabantosan

Pikeun mastikeun yén téknologi anu ngabantosan - sapertos pamiarsa layar - leres-leres ngémutan hartos ikon, téks disumputkeun tambahan kedah dilebetkeun kana .sr-onlykelas sareng sacara eksplisit dikaitkeun sareng kontrol formulir anu aya hubunganana sareng ngagunakeun aria-describedby. Alternatipna, pastikeun yén hartos (contona, kanyataan yén aya peringatan pikeun widang éntri téks tinangtu) ditepikeun dina sababaraha bentuk anu sanés, sapertos ngarobih téks anu aktual <label>pakait sareng kontrol formulir.

Sanajan conto di handap ieu geus disebutkeun kaayaan validasi kontrol formulir masing-masing dina <label>téks sorangan, téhnik di luhur (ngagunakeun .sr-onlytéks na aria-describedby) geus kaasup pikeun tujuan illustrative.

<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 pilihan dina bentuk horizontal sareng 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>

Ikon pilihan sareng `.sr-only`labél disumputkeun

Upami anjeun nganggo .sr-onlykelas pikeun nyumputkeun kontrol formulir <label>(tinimbang nganggo pilihan panyiri anu sanés, sapertos aria-labelatribut), Bootstrap bakal otomatis nyaluyukeun posisi ikon saatos parantos ditambahkeun.

<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

Atur jangkung ngagunakeun kelas kawas .input-lg, tur nyetel lebar ngagunakeun kelas kolom grid kawas .col-lg-*.

Ukuran jangkungna

Jieun kadali bentuk anu langkung jangkung atanapi langkung pondok anu cocog sareng 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 grup bentuk horisontal

Gancang ukuran labél jeung formulir kontrol dina .form-horizontalku nambahkeun .form-group-lgatawa .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 dina kolom grid, atanapi unsur indungna khusus, pikeun gampang ngalaksanakeun lebar anu dipikahoyong.

<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

Paké kelas tombol dina hiji <a>, <button>, atawa <input>elemen.

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

pamakéan kontéks-spésifik

Bari kelas tombol bisa dipaké dina <a>na <button>elemen, ngan <button>elemen anu dirojong dina nav na navbar komponén urang.

Tumbu akting salaku tombol

Lamun <a>elemen anu dipaké pikeun meta salaku tombol - triggering fungsionalitas di-kaca, tinimbang napigasi ka dokumen sejen atawa bagian dina kaca ayeuna - maranéhanana ogé kudu dibikeun hiji luyu role="button".

Rendering cross-browser

Salaku prakték panghadéna, kami nyarankeun pisan ngagunakeun <button>unsur sabisana pikeun mastikeun rendering cross-browser anu cocog.

Diantara hal séjén, aya bug dina Firefox <30 anu nyegah urang tina nyetel line-heighttina<input> dumasar-, ngabalukarkeun aranjeunna teu persis cocog jangkungna tombol sejenna dina Firefox.

Pilihan

Paké salah sahiji kelas tombol sadia pikeun gancang nyieun 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>

Nepikeun harti kana téknologi anu ngabantosan

Ngagunakeun warna pikeun nambahkeun harti kana tombol hijina nyadiakeun indikasi visual, nu moal conveyed ka pamaké tina téhnologi pitulung - kayaning pamiarsa layar. Mastikeun yén informasi dilambangkeun ku warna boh atra tina eusi sorangan (téks ditingali tina tombol), atawa kaasup ngaliwatan cara alternatif, kayaning téks tambahan disumputkeun jeung .sr-onlykelas.

Ukuran

Fancy tombol gedé atawa leutik? Tambahkeun .btn-lg, .btn-sm, atawa .btn-xspikeun 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>

Nyiptakeun tombol tingkat blok — anu ngalegaan lebar pinuh ku kolot — ku nambihan .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>

kaayaan aktip

Tombol bakal ditembongkeun dipencet (kalayan latar anu langkung poék, wates anu langkung poék, sareng kalangkang inset) nalika aktip. Pikeun <button>elemen, ieu dilakukeun via :active. Pikeun <a>elemen, éta dipigawé kalawan .active. Najan kitu, anjeun bisa make .activeon <button>s (jeung kaasup aria-pressed="true"atribut) mun anjeun kudu ngayakeun réplikasi kaayaan aktip programmatically.

Unsur tombol

Teu perlu pikeun nambahkeun :activesalaku pseudo-kelas, tapi lamun kudu maksakeun penampilan sarua, balik payun na nambahkeun .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

Tambahkeun .activekelas kana <a>tombol.

Tumbu primér Tumbu

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

kaayaan ditumpurkeun

Jieun tombol kasampak unclickable ku luntur aranjeunna deui kalawan opacity.

Unsur tombol

Tambahkeun disabledatribut kana <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>

Kasaluyuan cross-browser

Upami anjeun nambihan disabledatribut kana <button>, Internet Explorer 9 sareng di handap bakal ngajantenkeun téks abu-abu kalayan kalangkang téks anu jahat anu teu tiasa urang ngalereskeun.

Unsur jangkar

Tambahkeun .disabledkelas kana <a>tombol.

Tumbu primér Tumbu

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

Kami nganggo .disabledsalaku kelas utiliti di dieu, sami sareng .activekelas umum, janten henteu aya awalan anu diperyogikeun.

Patalina fungsi caveat

Kelas ieu ngagunakeun pointer-events: nonepikeun nyobaan nganonaktipkeun fungsionalitas link <a>s, tapi éta sipat CSS teu acan standarisasi tur teu dirojong pinuh dina Opera 18 tur handap, atawa dina Internet Explorer 11. Sajaba ti éta, sanajan dina browser nu ngalakukeun rojongan pointer-events: none, keyboard. navigasi tetep teu kapangaruhan, hartina pamaké keyboard sighted jeung pamaké téknologi pitulung bakal tetep bisa ngaktipkeun Tumbu ieu. Janten aman, paké JavaScript khusus pikeun nganonaktipkeun tautan sapertos kitu.

Gambar responsif

Gambar dina Bootstrap 3 tiasa didamel ramah-responsif ngalangkungan tambahan .img-responsivekelas. Ieu lumaku max-width: 100%;, height: auto;jeung display: block;ka gambar supados skala nicely ka unsur indungna.

Pikeun puseur gambar nu make .img-responsivekelas, make .center-blocktinimbang .text-center. Tingali bagian kelas pembantu pikeun langkung rinci ngeunaan .center-blockpamakean.

Gambar SVG sareng IE 8-10

Dina Internet Explorer 8-10, gambar SVG kalayan .img-responsiveukuranana teu saimbang. Pikeun ngalereskeun ieu, tambahkeun width: 100% \9;upami diperyogikeun. Bootstrap henteu nerapkeun ieu sacara otomatis sabab nyababkeun komplikasi kana format gambar anu sanés.

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

Wangun gambar

Tambihkeun kelas kana <img>unsur pikeun gampang ngagayakeun gambar dina proyék naon waé.

Kasaluyuan cross-browser

Émut yén Internet Explorer 8 kurang dukungan pikeun sudut anu buleud.

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

Warna kontekstual

Nepikeun harti ngaliwatan kelir kalawan sakeupeul kelas utiliti tekenan. Ieu ogé tiasa diterapkeun kana tautan sareng bakal poék dina hover sapertos gaya tautan standar kami.

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

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

Ngungkulan spésifisitas

Kadang-kadang kelas tekenan teu tiasa diterapkeun kusabab spésifisitas pamilih anu sanés. Dina kalolobaan kasus, hiji workaround cukup pikeun mungkus téks anjeun dina <span>kalawan kelas.

Nepikeun harti kana téknologi anu ngabantosan

Ngagunakeun warna pikeun nambahkeun harti ngan nyadiakeun indikasi visual, nu moal conveyed ka pamaké tina téhnologi mantuan - kayaning pamiarsa layar. Pastikeun yén inpormasi anu dilambangkeun ku warna écés tina eusina sorangan (warna kontekstual ngan ukur dianggo pikeun nguatkeun makna anu parantos aya dina téks/markup), atanapi kalebet ngalangkungan cara alternatif, sapertos téks tambahan disumputkeun sareng .sr-onlykelas . .

Latar kontekstual

Sarupa jeung kelas warna téks kontekstual, gampang nyetel latar tukang unsur pikeun sagala kelas kontekstual. Komponén jangkar bakal poék dina hover, sapertos kelas téks.

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

Ngungkulan spésifisitas

Kadang kelas latar kontekstual teu tiasa diterapkeun kusabab spésifisitas pamilih anu sanés. Dina sababaraha kasus, hiji workaround cukup pikeun mungkus eusi unsur anjeun dina <div>kalawan kelas.

Nepikeun harti kana téknologi anu ngabantosan

Salaku kalawan kelir kontekstual , pastikeun yén sagala harti conveyed ngaliwatan warna ogé conveyed dina format nu teu murni presentational.

Tutup ikon

Anggo ikon tutup umum pikeun ngaleungitkeun eusi sapertos modal sareng panggeuing.

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

Carets

Paké carets pikeun nunjukkeun pungsionalitas dropdown jeung arah. Catet yén caret standar bakal ngabalikeun otomatis dina ménu drop -up .

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

Gancang ngambang

Ngambang unsur ka kénca atawa ka katuhu jeung kelas. !importantkaasup pikeun ngahindarkeun masalah spésifisitas. Kelas ogé tiasa dianggo salaku 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 eusi puseur

Setel hiji unsur display: blockjeung puseur via margin. Sadia salaku mixin jeung 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 mupus floats ku nambahkeun .clearfix kana unsur indungna . Ngagunakeun micro clearfix sakumaha dipopulerkeun ku Nicolas Gallagher. Ogé bisa dipaké salaku mixin a.

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

Némbongkeun jeung nyumputkeun eusi

Maksakeun hiji unsur ditampilkeun atawa disumputkeun ( kaasup pikeun pamiarsa layar ) kalawan pamakéan .showsarta .hiddenkelas. Kelas ieu dianggo !importantpikeun nyegah konflik spésifisitas, sapertos ngambang gancang . Éta ngan sadia pikeun toggling tingkat blok. Éta ogé bisa dipaké salaku mixins.

.hidegeus sadia, tapi teu salawasna mangaruhan pamiarsa layar tur deprecated sakumaha v3.0.1. Paké .hiddenatawa .sr-onlygantina.

Saterusna, .invisiblebisa dipaké pikeun toggle ukur pisibilitas unsur, hartina na displayteu dirobah sarta unsur masih bisa mangaruhan aliran dokumen.

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

Pamaca layar sareng eusi navigasi keyboard

Sumputkeun unsur ka sadaya alat kajaba pamaca layar nganggo .sr-only. Gabungkeun .sr-onlysareng .sr-only-focusablepikeun nunjukkeun unsur deui nalika éta difokuskeun (contona ku pangguna ngan ukur keyboard). Diperlukeun pikeun nuturkeun prakték pangsaéna pikeun aksés . Ogé bisa dipaké salaku mixins.

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

ngagantian gambar

Anggo .text-hidekelas atanapi mixin pikeun ngabantosan eusi téks unsur sareng gambar latar.

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

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

Pikeun pangwangunan anu ramah-seluler anu langkung gancang, paké kelas utilitas ieu pikeun nunjukkeun sareng nyumputkeun eusi ku alat liwat pamundut média. Ogé kaasup kelas utiliti pikeun toggling eusi nalika dicitak.

Coba ngagunakeun ieu dina dasar kawates sarta ulah nyieun versi sagemblengna béda tina situs sarua. Gantina, make eta pikeun ngalengkepan presentasi unggal alat urang.

kelas sadia

Paké tunggal atawa kombinasi kelas sadia pikeun togling eusi sakuliah titik breakpoint view.

	Alat leutik tambahanTelepon (<768px)	Paranti leutikTablet (≥768px)	Paranti sedengDesktop (≥992px)	Paranti gedéDesktops (≥1200px)
`.visible-xs-*`	Katingali	Disumputkeun	Disumputkeun	Disumputkeun
`.visible-sm-*`	Disumputkeun	Katingali	Disumputkeun	Disumputkeun
`.visible-md-*`	Disumputkeun	Disumputkeun	Katingali	Disumputkeun
`.visible-lg-*`	Disumputkeun	Disumputkeun	Disumputkeun	Katingali
`.hidden-xs`	Disumputkeun	Katingali	Katingali	Katingali
`.hidden-sm`	Katingali	Disumputkeun	Katingali	Katingali
`.hidden-md`	Katingali	Katingali	Disumputkeun	Katingali
`.hidden-lg`	Katingali	Katingali	Katingali	Disumputkeun

Salaku v3.2.0, .visible-*-*kelas pikeun tiap breakpoint datangna dina tilu variasi, hiji keur unggal displaynilai sipat CSS dibéréndélkeun di handap.

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

Janten, pikeun xslayar anu langkung alit () contona, .visible-*-*kelas anu sayogi nyaéta: .visible-xs-block, .visible-xs-inline, sareng .visible-xs-inline-block.

The kelas .visible-xs, .visible-sm, .visible-md, sarta .visible-lgogé aya, tapi deprecated sakumaha tina v3.2.0 . Éta kira-kira sarua jeung .visible-*-block, iwal ku kasus husus tambahan pikeun toggling <table>elemen -related.

Kelas nyitak

Sarupa jeung kelas responsif biasa, make ieu pikeun toggling eusi pikeun citak.

Kelas	Pangotektak	Nyitak
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Disumputkeun	Katingali
`.hidden-print`	Katingali	Disumputkeun

Kelas .visible-printogé aya tapi deprecated sakumaha tina v3.2.0. Ieu kira sarua jeung .visible-print-block, iwal jeung kasus husus tambahan pikeun <table>elemen -related.

Kasus tés

Ganti ukuran panyungsi anjeun atanapi beban dina alat anu béda pikeun nguji kelas utilitas responsif.

Katingali dina...

Tanda centang héjo nunjukkeun yén unsur éta katingali dina viewport anjeun ayeuna.

Tambahan leutik ✔ Ditingali dina x-leutik

Leutik ✔ Katingali dina leutik

Sedeng ✔ Katingali dina sedeng

Gede ✔ Katingali dina ageung

Tambahan leutik jeung leutik ✔ Ditingali dina x-leutik sareng leutik

Sedeng jeung badag ✔ Katingali dina sedeng sareng ageung

Tambahan leutik sarta sedeng ✔ Ditingali dina x-leutik sareng sedeng

Leutik jeung gedé ✔ Katingali dina leutik sareng ageung

Tambahan leutik tur badag ✔ Ditingali dina x-leutik sareng ageung

Leutik jeung sedeng ✔ Katingali dina leutik sareng sedeng

Disumputkeun dina...

Di dieu, centang héjo ogé nunjukkeun yén unsur disumputkeun dina viewport anjeun ayeuna.

Tambahan leutik ✔ Disumputkeun dina x-leutik

Leutik ✔ Disumputkeun dina leutik

Sedeng ✔ Disumputkeun dina sedeng

Gede ✔ Disumputkeun dina badag

Tambahan leutik jeung leutik ✔ Disumputkeun dina x-leutik sareng leutik

Sedeng jeung badag ✔ Disumputkeun dina sedeng sareng ageung

Tambahan leutik sarta sedeng ✔ Disumputkeun dina x-leutik sareng sedeng

Leutik jeung gedé ✔ Disumputkeun dina leutik sareng ageung

Tambahan leutik tur badag ✔ Disumputkeun dina x-leutik sareng ageung

Leutik jeung sedeng ✔ Disumputkeun dina leutik sareng sedeng

CSS Bootstrap diwangun dina Less, preprocessor kalawan fungsionalitas tambahan kawas variabel, mixins, sarta fungsi pikeun compiling CSS. Anu hoyong nganggo sumberna Kirang file tinimbang file CSS anu disusun urang tiasa nganggo seueur variabel sareng campuran anu kami anggo sapanjang kerangka.

Variabel grid sareng mixin katutupan dina bagian sistem Grid .

Nyusun Bootstrap

Bootstrap tiasa dianggo sahenteuna dina dua cara: nganggo CSS anu disusun atanapi nganggo file Kurang sumber. Pikeun nyusun file Kurang, konsultasi bagian Ngamimitian pikeun kumaha nyetél lingkungan pangembangan anjeun pikeun ngajalankeun paréntah anu diperyogikeun.

Alat kompilasi pihak katilu tiasa dianggo sareng Bootstrap, tapi henteu dirojong ku tim inti kami.

Variabel

Variabel dipaké sapanjang sakabéh proyék salaku cara pikeun centralize sarta babagi nilai ilahar dipake kawas kelir, spasi, atawa tumpukan font. Pikeun ngarecahna lengkep, mangga tingali Customizer .

Warna-warna

Gampang ngagunakeun dua skéma warna: skala abu sareng semantik. Warna Grayscale nyadiakeun aksés gancang ka nuansa ilahar dipaké hideung bari semantik ngawengku rupa kelir ditugaskeun ka nilai kontekstual bermakna.

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

Paké salah sahiji variabel warna ieu sakumaha aranjeunna atanapi reassign aranjeunna kana variabel leuwih bermakna pikeun proyék Anjeun.

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

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

Parancah

Sakeupeul variabel pikeun gancang ngaropéa elemen konci tina rorongkong situs anjeun.

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

Tumbu

Gampang gaya tautan anjeun nganggo warna anu pas kalayan ngan ukur hiji 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;
  }
}

Catet yén @link-hover-colorngagunakeun fungsi, alat anu sanés ti Less, pikeun otomatis nyiptakeun warna hover anu leres. Anjeun tiasa make darken, lighten, saturate, jeung desaturate.

Tipografi

Gampang nyetél typeface anjeun, ukuran téks, ngarah, sareng seueur deui kalayan sababaraha variabel gancang. Bootstrap ngagunakeun ieu ogé pikeun nyayogikeun campuran tipografi anu 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;

Ikon

Dua variabel gancang pikeun ngaropéa lokasi sareng nami file ikon anjeun.

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

Komponén

Komponén sapanjang Bootstrap ngagunakeun sababaraha variabel standar pikeun netepkeun nilai umum. Di dieu nu paling ilahar dipake.

@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

Mixins vendor mangrupakeun mixins pikeun mantuan ngarojong sababaraha panyungsi ku kaasup sagala awalan vendor relevan dina CSS disusun Anjeun.

Ukuran kotak

Reset modél kotak komponén anjeun sareng mixin tunggal. Pikeun konteks, tingali artikel mantuan ieu ti Mozilla .

Mixin ieu deprecated sakumaha tina v3.2.0, kalawan bubuka Autoprefixer. Pikeun ngajaga kompatibilitas mundur, Bootstrap bakal terus nganggo mixin sacara internal dugi ka Bootstrap v4.

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

juru buleud

Kiwari, sadaya panyungsi modéren ngadukung border-radiussipat non-prefixed. Sapertos kitu, teu aya .border-radius()mixin, tapi Bootstrap kalebet potong kompas pikeun gancang ngurilingan dua sudut dina sisi tinangtu hiji obyék.

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

Upami pamirsa targét anjeun nganggo panyungsi sareng alat anu pangahirna sareng pangageungna, pastikeun anjeun ngan ukur nganggo box-shadowharta éta nyalira. Upami anjeun peryogi pangrojong pikeun Android anu langkung lami (pre-v4) sareng alat ios (pre-iOS 5), paké mixin anu teu dianggo pikeun nyandak -webkitawalan anu diperyogikeun.

Mixin ieu deprecated sakumaha tina v3.1.0, saprak Bootstrap teu resmi ngarojong platform luntur nu teu ngarojong sipat baku. Pikeun ngajaga kasaluyuan mundur, Bootstrap bakal terus nganggo mixin sacara internal dugi ka Bootstrap v4.

Pastikeun anjeun nganggo rgba()warna dina kalangkang kotak anjeun supados tiasa nyampur sabisa mungkin sareng latar.

.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

Sababaraha mixins pikeun kalenturan. Setel sadaya inpormasi transisi sareng hiji, atanapi tangtoskeun jeda sareng durasi anu misah upami diperyogikeun.

The mixins nu deprecated sakumaha tina v3.2.0, kalawan bubuka Autoprefixer. Pikeun ngawétkeun kompatibilitas mundur, Bootstrap bakal terus nganggo mixin sacara internal dugi ka 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, tarjamahkeun (pindah), atanapi skew objék naon waé.

The mixins nu deprecated sakumaha tina v3.2.0, kalawan bubuka Autoprefixer. Pikeun ngawétkeun kompatibilitas mundur, Bootstrap bakal terus nganggo mixin sacara internal dugi ka 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

A mixin tunggal pikeun ngagunakeun sakabéh CSS3 sipat animasi dina hiji deklarasi jeung mixins séjén pikeun sipat individu.

The mixins nu deprecated sakumaha tina v3.2.0, kalawan bubuka Autoprefixer. Pikeun ngawétkeun kompatibilitas mundur, Bootstrap bakal terus nganggo mixin sacara internal dugi ka 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

Atur opacity pikeun sakabéh panyungsi sarta nyadiakeun filterfallback pikeun IE8.

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

Téks placeholder

Nyadiakeun kontéks pikeun kadali formulir dina unggal widang.

.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

Ngahasilkeun kolom via CSS dina hiji 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;
}

Gradién

Gampang ngarobah mana wae dua warna kana gradién latar. Janten langkung maju sareng setel arah, nganggo tilu warna, atanapi nganggo gradién radial. Kalayan hiji mixin anjeun nampi sadaya sintaksis anu anjeun peryogikeun.

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

Anjeun oge bisa nangtukeun sudut standar dua-warna, gradién linier:

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

Upami anjeun peryogi gradién gaya barber-stripe, éta ogé gampang. Sebutkeun hiji warna tunggal sareng kami bakal overlay belang bodas tembus.

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

Nepi Ante sarta ngagunakeun tilu kelir gantina. Atur warna kahiji, warna kadua, warna warna kadua eureun (nilai persentase kawas 25%), jeung warna katilu jeung mixins ieu:

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

Mastaka tegak! Upami anjeun kedah ngahapus gradién, pastikeun pikeun ngahapus IE khusus anu filteranjeun parantos nambihan. Anjeun tiasa ngalakukeun éta ku ngagunakeun .reset-filter()mixin barengan background-image: none;.

Utiliti mixins

Utiliti mixins mangrupakeun mixins nu ngagabungkeun sipat CSS disebutkeun teu patali pikeun ngahontal tujuan husus atawa tugas.

Clearfix

Poho nambihan class="clearfix"kana unsur naon waé sareng tambahkeun .clearfix()mixin dimana waé. Ngagunakeun micro clearfix ti Nicolas Gallagher .

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

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

Puseur horisontal

Gancang pusatkeun unsur naon waé dina indungna. Merlukeun widthatawa max-widthkudu diatur.

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

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

Pembantu ukuran

Sebutkeun diménsi hiji obyék leuwih gampang.

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

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

Textarea tiasa ukuranana

Gampang ngonpigurasikeun pilihan ukuran pikeun naon waé textarea, atanapi unsur sanésna. Defaults kana kabiasaan browser normal ( both).

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

Ngurangan téks

Gampang truncate téks nganggo elipsis sareng mixin tunggal. Merlukeun unsur janten blockatanapi inline-blocktingkat.

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

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

Gambar rétina

Sebutkeun dua jalur gambar sareng dimensi gambar @1x, sareng Bootstrap bakal nyayogikeun pamundut média @2x. Upami anjeun ngagaduhan seueur gambar pikeun dilayanan, pertimbangkeun nyerat gambar rétina CSS anjeun sacara manual dina pamundut média tunggal.

.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 diwangun dina Kurang, éta ogé ngagaduhan port Sass resmi . Kami ngajaga éta dina gudang GitHub anu misah sareng nanganan apdet nganggo naskah konvérsi.

Naon kaasup

Kusabab port Sass gaduh repo anu misah sareng ngalayanan pamiarsa anu rada béda, eusi proyék éta bénten pisan sareng proyék Bootstrap utama. Ieu mastikeun port Sass cocog sareng saloba sistem dumasar-Sass-gancang.

jalur	Katerangan
`lib/`	Kode permata Ruby (konfigurasi Sass, Rel sareng integrasi Kompas)
`tasks/`	Aksara konverter (ngarobah hulu Kurang jadi Sass)
`test/`	tés kompilasi
`templates/`	Manifes pakét kompas
`vendor/assets/`	Sass, JavaScript, sareng file font
`Rakefile`	Tugas internal, sapertos rake sareng ngarobih

Nganjang ka gudang GitHub port Sass pikeun ningali file ieu dina aksi.

Pamasangan

Kanggo inpormasi ngeunaan cara masang sareng nganggo Bootstrap pikeun Sass, konsultasi ka Repositori GitHub readme . Ieu mangrupikeun sumber anu paling énggal sareng kalebet inpormasi pikeun dianggo sareng Rails, Compass, sareng proyék Sass standar.

Bootstrap pikeun Sass

CSS

Ihtisar

HTML5 doctype

Mobile heula

Tipografi sareng tautan

Normalize.css

Wadahna

Sistim grid

Bubuka

Patarosan média

Pilihan grid

Conto: Tumpuk-ka-horizontal

Contona: wadah cairan

Contona: Mobile jeung desktop

Contona: Mobile, tablet, desktop

Conto: Bungkus kolom

Reset kolom responsif

Ngimbangkeun kolom

Kolom nyarang

Susunan kolom

Kirang campuran sareng variabel

Variabel

Campuran

Conto pamakéan

Tipografi

lulugu

h1. Judul Bootstrap

h2. Judul Bootstrap

h3. Judul Bootstrap

h4. Judul Bootstrap

h5. Judul Bootstrap

h6. Judul Bootstrap

h1. Judul Bootstrap Téks sekundér

h2. Judul Bootstrap Téks sekundér

h3. Judul Bootstrap Téks sekundér

h4. Judul Bootstrap Téks sekundér

h5. Judul Bootstrap Téks sekundér

h6. Judul Bootstrap Téks sekundér

Salinan awak

Timbal awak salinan

Diwangun ku Kurang

Unsur téks Inline

téks ditandaan

téks dihapus

téks Strikethrough

téks diselapkeun

Téks anu digariskeun

téks leutik

Kandel

Miring

elemen séjén

Kelas alignment

Kelas transformasi

Singgetan

Singgetan dasar

Initialisme

Alamat

Blockquotes

Blockquote standar

Pilihan blockquote

Ngaran hiji sumber

Pintonan alternatip

Daptar

Teu diurut

Dititah

Teu gaya

Baris

Katerangan

Katerangan horisontal

Pamotongan otomatis

Kodeu

Baris

Input pamaké

Blok dasar

Variabel

kaluaran sampel

tabél

conto dasar

Jajaran belang

Kasaluyuan cross-browser

`:focus`kaayaan demo

Caveat ngeunaan fungsionalitas link tina`<a>`

Ikon pilihan sareng `.sr-only`labél disumputkeun