Jwenn detay sou pati enpòtan yo nan enfrastrikti Bootstrap la, ki gen ladan apwòch nou an nan pi bon, pi vit, pi fò devlopman entènèt.

HTML5 doctype

Bootstrap sèvi ak sèten eleman HTML ak pwopriyete CSS ki mande pou sèvi ak HTML5 doctype. Mete li nan kòmansman tout pwojè ou yo.

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

Mobil an premye

Avèk Bootstrap 2, nou te ajoute estil opsyonèl zanmitay mobil pou aspè kle nan fondasyon an. Avèk Bootstrap 3, nou te reekri pwojè a pou ka zanmi mobil depi nan kòmansman an. Olye pou yo ajoute sou estil mobil opsyonèl, yo ap kwit nan nwayo a. An reyalite, Bootstrap se mobil an premye . Ka premye estil mobil yo ka jwenn nan tout bibliyotèk la olye pou yo nan dosye separe.

Pou asire bon rann ak manyen rale, ajoute tag meta viewport la nan <head>.

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

Ou ka enfim kapasite zoom sou aparèy mobil lè w ajoute user-scalable=nonan tag meta viewport la. Sa a enfim zooming, sa vle di itilizatè yo sèlman kapab woulo liv, ak rezilta nan sit ou a santi yon ti jan plis tankou yon aplikasyon natif natal. An jeneral, nou pa rekòmande sa a sou chak sit, kidonk pran prekosyon!

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

Tipografi ak lyen

Bootstrap etabli ekspozisyon mondyal debaz, tipografi, ak estil lyen. Espesyalman, nou:

Mete background-color: #fff;sou labody
Sèvi ak @font-family-base, @font-size-base, ak @line-height-baseatribi yo kòm baz tipografik nou an
Mete koulè lyen mondyal la atravè @link-colorepi aplike souliye lyen sèlman sou:hover

Ou ka jwenn estil sa yo nan scaffolding.less.

Normalize.css

Pou amelyore rann kwa-navigatè, nou itilize Normalize.css , yon pwojè Nicolas Gallagher ak Jonathan Neal .

Kontenè

Bootstrap mande pou yon eleman ki genyen pou vlope sa ki nan sit la ak loje sistèm kadriyaj nou an. Ou ka chwazi youn nan de resipyan pou w itilize nan pwojè w yo. Remake byen ke, akòz paddingak plis ankò, ni veso a pa nistabl.

Itilize .containerpou yon veso ki reponn ak lajè fiks.

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

Itilize .container-fluidpou yon veso plen lajè, ki kouvri tout lajè fenèt ou a.

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

Bootstrap gen ladann yon sistèm kadriyaj premye likid ki reponn, mobil, ki ka balanse jiska 12 kolòn kòm gwosè aparèy la oswa Viewport ogmante. Li gen ladann klas predefini pou opsyon layout fasil, osi byen ke melanj pwisan pou jenere plis layout semantik .

Entwodiksyon

Sistèm kadriyaj yo itilize pou kreye layout paj atravè yon seri ranje ak kolòn ki loje kontni ou. Men ki jan sistèm kadriyaj Bootstrap la ap travay:

Ranje yo dwe mete nan yon .container(fiks-lajè) oswa .container-fluid(plen-lajè) pou bon aliyman ak padding.
Sèvi ak ranje pou kreye gwoup orizontal kolòn.
Kontni yo ta dwe mete nan kolòn, epi sèlman kolòn yo ka pitit imedya nan ranje.
Klas kadriyaj predefini tankou .rowepi .col-xs-4yo disponib pou fè byen vit layout kadriyaj. Mwens mixin yo ka itilize tou pou plis layout semantik.
Kolòn kreye goutyè (gaps ant kontni kolòn) atravè padding. Sa padding se konpanse nan ranje pou premye ak dènye kolòn nan maj negatif sou .rows.
Marge negatif la se rezon ki fè egzanp ki anba yo depase. Se konsa, kontni ki nan kolòn kadriyaj yo aliyen ak kontni ki pa kadriyaj.
Kolòn kadriyaj yo kreye lè yo espesifye kantite douz kolòn ki disponib ou vle span. Pa egzanp, twa kolòn egal ta itilize twa .col-xs-4.
Si plis pase 12 kolòn yo mete nan yon sèl ranje, chak gwoup kolòn siplemantè pral, kòm yon sèl inite, vlope sou yon nouvo liy.
Klas kadriyaj yo aplike pou aparèy ki gen lajè ekran ki pi gran pase oswa egal ak gwosè pwen rupture yo, epi pase klas griy ki vize sou aparèy ki pi piti yo. Se poutèt sa, pa egzanp, aplike nenpòt .col-md-*klas nan yon eleman pa pral sèlman afekte style li sou aparèy mwayen, men tou sou aparèy gwo si yon .col-lg-*klas pa prezan.

Gade nan egzanp yo pou aplike prensip sa yo nan kòd ou a.

Rekèt medya yo

Nou itilize demann medya sa yo nan dosye Less nou an pou kreye pwen rupture kle yo nan sistèm kadriyaj nou an.

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

Nou detanzantan elaji sou demann medya sa yo pou mete yon max-widthlimit CSS nan yon seri aparèy ki pi etwat.

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

Opsyon griyaj

Gade ki jan aspè nan sistèm kadriyaj Bootstrap la ap travay sou plizyè aparèy ak yon tab sou la men.

	Aparèy siplemantè ti Telefòn (<768px)	Ti aparèy tablèt (≥768px)	Aparèy mwayen Desktop (≥992px)	Gwo aparèy Desktop (≥1200px)
Konpòtman griyaj	Orizontal nan tout tan	Efondre pou kòmanse, orizontal pi wo a breakpoints
Lajè veso	Okenn (oto)	750 px	970 px	1170 px
Prefiks klas la	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# nan kolòn	12
Lajè kolòn	Oto	~62px	~81px	~97px
Lajè goutyè	30px (15px sou chak bò yon kolòn)
Nestable	Wi
Offsets	Wi
Kòmann kolòn	Wi

Egzanp: Stacked-to-orizontal

Sèvi ak yon sèl seri .col-md-*klas griy, ou ka kreye yon sistèm griy debaz ki kòmanse anpile sou aparèy mobil ak aparèy tablèt (anplis ti a ti seri) anvan ou vin orizontal sou aparèy Desktop (mwayen). Mete kolòn kadriyaj nan nenpòt .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>

Egzanp: veso likid

Vire nenpòt layout kadriyaj la lajè fiks nan yon layout plen lajè lè w chanje pi ekstèn .containerou an .container-fluid.

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

Egzanp: mobil ak Desktop

Ou pa vle kolòn ou yo tou senpleman pile nan pi piti aparèy? Sèvi ak klas siplemantè ti ak mwayen gri aparèy lè w ajoute .col-xs-* .col-md-*nan kolòn ou yo. Gade egzanp ki anba a pou yon pi bon lide sou kijan li fonksyone.

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

Egzanp: mobil, tablèt, Desktop

Bati sou egzanp anvan an pa kreye menm plis dinamik ak pi pwisan Layout ak .col-sm-*klas tablèt.

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

Egzanp: Anbalaj kolòn

Si plis pase 12 kolòn yo mete nan yon sèl ranje, chak gwoup kolòn siplemantè pral, kòm yon sèl inite, vlope sou yon nouvo liy.

.col-xs-9

.col-xs-4
Depi 9 + 4 = 13 > 12, div 4 kolòn-lajè sa a vin vlope sou yon nouvo liy kòm yon sèl inite kontigu.

.col-xs-6
Kolòn ki vin apre yo kontinye sou nouvo liy lan.

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

Reyajiste kolòn ki reponn

Avèk kat nivo kadriyaj ki disponib, ou gen pou w rankontre pwoblèm kote, nan sèten pwen, kolòn ou yo pa klè byen paske youn pi wo pase lòt la. Pou repare sa, sèvi ak yon konbinezon de yon .clearfixak klas sèvis piblik ki reponn nou yo .

.col-xs-6 .col-sm-3
Redimensionner fenèt ou oswa tcheke li sou telefòn ou pou yon egzanp.

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

Anplis netwayaj kolòn nan pwen rupture ki reponn, ou ka bezwen reset desantre, pouse, oswa rale . Gade sa an aksyon nan egzanp kadriyaj la .

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

Retire goutyè yo

Retire goutyè yo nan yon ranje ak kolòn li yo ak .row-no-guttersklas la.

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

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

.col-xs-6

<div class="row row-no-gutters">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Kolòn konpanse

Deplase kolòn sou bò dwat yo lè l sèvi avèk .col-md-offset-*klas yo. Klas sa yo ogmante maj gòch nan yon kolòn pa *kolòn. Pou egzanp, .col-md-offset-4deplase .col-md-4sou kat kolòn.

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

Ou kapab tou pase sou plas konpanse nan nivo gri ki pi ba yo ak .col-*-offset-0klas yo.

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

Kolòn nidifikasyon

Pou fè nich kontni ou a ak kadriyaj default la, ajoute yon nouvo .rowak seri .col-sm-*kolòn nan yon .col-sm-*kolòn ki deja egziste. Ranje anbrike yo ta dwe gen ladan yon seri kolòn ki ajoute jiska 12 oswa mwens (li pa oblije itilize tout 12 kolòn ki disponib).

Nivo 1: .col-sm-9

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

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

Kòmann kolòn

Fasil chanje lòd nan kolòn kadriyaj entegre nou yo .col-md-push-*ak .col-md-pull-*klas modifye yo.

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

.col-md-3 .col-md-pull-9

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

Mwens mixin ak varyab

Anplis klas griy prekonstwi pou layouts rapid, Bootstrap gen ladan mwens varyab ak mixin pou jenere byen vit pwòp senp, layout semantik ou.

Varyab

Varyab yo detèmine kantite kolòn yo, lajè goutyè a, ak pwen rechèch medya yo kote yo kòmanse kolòn k ap flote. Nou itilize sa yo pou jenere klas griy predefini dokimante pi wo a, osi byen ke pou mixin koutim ki nan lis anba a.

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

Mixins

Mixins yo itilize ansanm ak varyab kadriyaj yo pou jenere CSS semantik pou kolòn kadriyaj endividyèl yo.

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

Egzanp itilizasyon

Ou ka modifye varyab yo nan pwòp valè koutim ou, oswa jis itilize mixin yo ak valè default yo. Men yon egzanp lè w sèvi ak anviwònman default yo pou kreye yon layout de kolòn ak yon espas ant.

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

Tit

Tout tit HTML, <h1>jiska <h6>, yo disponib. .h1atravè .h6klas yo disponib tou, pou lè ou vle matche ak stil la font nan yon tit men ou toujou vle tèks ou a parèt nan liy.

h1. Bootstrap tit	Semibold 36px
h2. Bootstrap tit	Semibold 30px
h3. Bootstrap tit	Semibold 24px
h4. Bootstrap tit	Semibold 18px
h5. Bootstrap tit	Semibold 14px
h6. Bootstrap tit	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>

Kreye pi lejè, tèks segondè nan nenpòt tit ak yon <small>tag jenerik oswa .smallklas la.

h1. Bootstrap tit Segondè tèks

h2. Bootstrap tit Segondè tèks

h3. Bootstrap tit Segondè tèks

h4. Bootstrap tit Segondè tèks

h5. Bootstrap tit Segondè tèks

h6. Bootstrap tit Segondè tèks

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

Kopi kò

Defo global Bootstrap a font-sizese 14px , ak yon line-heightnan 1.428 . Sa a se aplike nan <body>ak tout paragraf yo. Anplis de sa, <p>(paragraf) resevwa yon maj anba nan mwatye wotè liy kalkile yo (10px pa default).

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

Cum sociis natoque penatibus ak magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Men, li pa gen okenn komodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Mecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Men, li pa gen okenn komodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Plon kò kopi

Fè yon paragraf parèt deyò lè w ajoute .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lè sa a, se pa yon bagay ki pa fasil.

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

Bati ak mwens

Echèl tipografik la baze sou de Less variables in variables.less : @font-size-baseand @line-height-base. Premye a se gwosè font de baz yo itilize nan tout e dezyèm lan se wotè liy debaz la. Nou itilize varyab sa yo ak kèk matematik senp pou kreye maj yo, paddings, ak liy-wotè nan tout kalite nou yo ak plis ankò. Customize yo epi Bootstrap adapte yo.

Eleman tèks inline

Tèks make

Pou mete aksan sou yon seri tèks akòz enpòtans li nan yon lòt kontèks, sèvi ak <mark>tag la.

Ou ka itilize tag mak la poumete aksan soutèks.

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

Efase tèks

Pou endike blòk tèks ki te efase itilize <del>tag la.

~~Liy tèks sa a fèt pou trete kòm tèks efase.~~

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

Tèks bare

Pou endike blòk tèks ki pa enpòtan ankò itilize <s>tag la.

~~Liy tèks sa a fèt pou trete kòm li pa egzat ankò.~~

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

Antre tèks

Pou endike adisyon nan dokiman an itilize <ins>tag la.

Liy tèks sa a vle di yo dwe trete kòm yon adisyon nan dokiman an.

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

Tèks souliye

Pou souliye tèks itilize <u>tag la.

Liy tèks sa a pral rann jan yo souliye

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

Sèvi ak etikèt default HTML anfaz ak estil ki lejè.

Ti tèks

Pou de-aksantye sou liy oswa blòk tèks, sèvi ak <small>etikèt la pou mete tèks nan 85% gwosè paran an. Eleman tit resevwa pwòp pa yo pou eleman font-sizeenbrike .<small>

Ou ka altènativman itilize yon eleman inline ak .smallnan plas nenpòt ki <small>.

Liy tèks sa a vle di ke yo dwe trete kòm bèl lèt.

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

Bold

Pou mete aksan sou yon ti bout tèks ak yon pwa ki pi lou.

Fragman tèks sa a ap rann kòm tèks fonse .

<strong>rendered as bold text</strong>

Italik

Pou mete aksan sou yon ti bout tèks ak italik.

Fragman tèks sa a ap rann kòm tèks italik .

<em>rendered as italicized text</em>

Eleman altène

Ou lib pou itilize <b>ak <i>nan HTML5. <b>se vle di yo mete aksan sou mo oswa fraz san yo pa transmèt plis enpòtans pandan y ap <i>se sitou pou vwa, tèm teknik, elatriye.

Klas aliyman

Fasil reyaliye tèks nan eleman ak klas aliyman tèks.

Tèks ki aliye agoch.

Sant aliye tèks.

Tèks ki aliyen dwat.

Tèks jistifye.

Pa gen tèks vlope.

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

Klas transfòmasyon

Transfòme tèks nan eleman ak klas lèt majiskil.

Tèks miniskil.

Tèks majiskil.

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

Abreviyasyon yo

Enplemantasyon stilize nan <abbr>eleman HTML pou abrevyasyon ak akwonim yo montre vèsyon an elaji sou hover. Abreviyasyon ki gen yon titleatribi yo gen yon fwontyè anba limyè pwentiye ak yon kurseur èd sou hover, bay kontèks adisyonèl sou hover ak itilizatè teknoloji asistans.

Abreviyasyon de baz

Yon abrevyasyon mo atribi se attr .

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

Inisyalis

Ajoute .initialismnan yon abrevyasyon pou yon ti kras pi piti gwosè font.

HTML se pi bon bagay depi tranche pen.

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

Adrès

Prezante enfòmasyon kontak pou zansèt ki pi pre a oswa tout kò travay la. Konsève fòma lè w fini tout liy yo ak <br>.

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

Non konplè
[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

Pou site blòk kontni ki soti nan yon lòt sous nan dokiman w la.

Default blockquote

Anvlope <blockquote>nenpòt HTML kòm quote la. Pou quotes dwat, nou rekòmande yon <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>

Opsyon Blockquote

Style ak chanjman kontni pou varyasyon senp sou yon estanda <blockquote>.

Bay non yon sous

Ajoute yon <footer>pou idantifye sous la. Mete non travay sous la nan <cite>.

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

Yon moun ki pi popilè nan Tit Sous

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

Ekspozisyon altène

Ajoute .blockquote-reversepou yon blockquote ak kontni dwat-aliyen.

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

Yon moun ki pi popilè nan Tit Sous

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

Lis

San lòd

Yon lis atik nan ki lòd la pa klèman enpòtan.

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

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

Kòmande

Yon lis atik nan ki lòd la fè klèman enpòtan.

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

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

Unstyled

Retire defo a list-styleak maj gòch sou atik lis (timoun imedya sèlman). Sa a sèlman aplike pou atik imedya lis timoun yo , sa vle di w ap bezwen ajoute klas la pou nenpòt lis enbrike tou.

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

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

Nan liy

Mete tout atik lis yo sou yon sèl liy ak display: inline-block;kèk limyè padding.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Deskripsyon

Yon lis tèm ak deskripsyon ki asosye yo.

Lis deskripsyon yo: Yon lis deskripsyon pafè pou defini tèm.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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

Orizontal deskripsyon

Fè tèm ak deskripsyon nan <dl>liy kòt a kòt. Kòmanse anpile tankou default <dl>s, men lè navbar la elaji, se konsa fè sa yo.

Lis deskripsyon yo: Yon lis deskripsyon pafè pou defini tèm.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ak cursus commodo, torttor mauris condimentum nibh, ut fermentum massa jis pou chita amet risus.

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

Oto-tronke

Lis deskripsyon orizontal yo pral tronpe tèm ki twò long pou antre nan kolòn gòch la ak text-overflow. Nan vi ki pi etwat yo, yo pral chanje nan Layout default anpile.

Nan liy

Anvlope fragman nan kòd ak <code>.

Pou egzanp, <section>yo ta dwe vlope kòm inline.

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

Antre itilizatè

Sèvi ak la <kbd>pou endike opinyon ki tipikman antre atravè klavye.

Pou chanje repèrtwar, tape cdki te swiv pa non anyè a.
Pou modifye paramèt yo, peze 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>

Blòk debaz

Itilize <pre>pou plizyè liy kòd. Asire ou ke ou chape anba nenpòt parantèz ang nan kòd la pou rann apwopriye.

<p>Egzanp tèks isit la...</p>

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

Opsyonèlman, ou ka ajoute .pre-scrollableklas la, ki pral mete yon wotè maksimòm de 350px epi bay yon ba defile aks y.

Varyab

Pou endike varyab itilize <var>tag la.

y = m x + b

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

Egzanp pwodiksyon an

Pou endike pwodiksyon echantiyon blòk soti nan yon pwogram itilize <samp>tag la.

Tèks sa a vle di yo dwe trete kòm rezilta echantiyon nan yon pwogram òdinatè.

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

Egzanp de baz

Pou manier debaz - padding limyè ak divizyon orizontal sèlman - ajoute klas debaz la .tablenan nenpòt <table>. Li ka sanble super redondants, men bay itilizasyon tab yo toupatou pou lòt grefon tankou kalandriye ak chwazi dat, nou te chwazi izole estil tab koutim nou yo.

Si ou vle tab tab.
#	Premye Non	Siyati	Non itilizatè
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry	Zwazo a	@twitter

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

Ranje trase

Sèvi ak .table-stripedpou ajoute zebra-striping nan nenpòt ranje tab nan <tbody>.

Konpatibilite kwa-navigatè

Tablo trase yo style atravè :nth-childseleksyon CSS la, ki pa disponib nan Internet Explorer 8.

#	Premye Non	Siyati	Non itilizatè
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry	Zwazo a	@twitter

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

Borded tab la

Ajoute .table-borderedpou fwontyè sou tout kote tab la ak selil yo.

#	Premye Non	Siyati	Non itilizatè
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry	Zwazo a	@twitter

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

Hover ranje

Ajoute .table-hoverpou pèmèt yon eta hover sou ranje tab nan yon <tbody>.

#	Premye Non	Siyati	Non itilizatè
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry	Zwazo a	@twitter

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

Tablo kondanse

Ajoute .table-condensedpou fè tab yo plis kontra enfòmèl ant pa koupe selil padding an mwatye.

#	Premye Non	Siyati	Non itilizatè
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry zwazo a		@twitter

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

Klas kontèks yo

Sèvi ak klas kontèks pou koulè ranje tab oswa selil endividyèl yo.

Klas	Deskripsyon
`.active`	Aplike koulè hover nan yon ranje oswa selil patikilye
`.success`	Endike yon aksyon siksè oswa pozitif
`.info`	Endike yon chanjman enfòmatif net oswa aksyon
`.warning`	Endike yon avètisman ki ta ka bezwen atansyon
`.danger`	Endike yon aksyon danjere oswa potansyèlman negatif

#	Tit kolòn	Tit kolòn	Tit kolòn
1	Kontni kolòn	Kontni kolòn	Kontni kolòn
2	Kontni kolòn	Kontni kolòn	Kontni kolòn
3	Kontni kolòn	Kontni kolòn	Kontni kolòn
4	Kontni kolòn	Kontni kolòn	Kontni kolòn
5	Kontni kolòn	Kontni kolòn	Kontni kolòn
6	Kontni kolòn	Kontni kolòn	Kontni kolòn
7	Kontni kolòn	Kontni kolòn	Kontni kolòn
8	Kontni kolòn	Kontni kolòn	Kontni kolòn
9	Kontni kolòn	Kontni kolòn	Kontni kolòn

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

Transmèt siyifikasyon nan teknoloji asistans

Sèvi ak koulè pou ajoute siyifikasyon nan yon ranje tab oswa selil endividyèl sèlman bay yon endikasyon vizyèl, ki pa pral transmèt bay itilizatè teknoloji asistans - tankou lektè ekran. Asire w ke enfòmasyon ki endike nan koulè a se swa evidan nan kontni an li menm (tèks la vizib nan ranje/selil tablo ki enpòtan), oswa yo enkli nan mwayen altènatif, tankou tèks adisyonèl kache ak .sr-onlyklas la.

Tab reponn

Kreye tab ki reponn lè w vlope nenpòt .tablenan .table-responsivepou fè yo woule orizontal sou ti aparèy (anba 768px). Lè w ap gade nenpòt bagay ki pi gwo pase 768px lajè, ou p ap wè okenn diferans nan tablo sa yo.

Koupe vètikal/tronke

Tablo ki reponn yo sèvi ak overflow-y: hidden, ki koupe nenpòt kontni ki ale pi lwen pase kwen anba oswa anwo tab la. An patikilye, sa a ka koupe meni dropdown ak lòt widgets twazyèm pati.

Firefox ak fieldsets

Firefox gen kèk stil fieldset gòch ki enplike widthki entèfere ak tab la reponn. Sa a pa ka ranplase san yon Hack espesifik pou Firefox ke nou pa bay nan Bootstrap:

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

Pou plis enfòmasyon, li repons Stack Overflow sa a .

#	Tit tab la	Tit tab la	Tit tab la	Tit tab la	Tit tab la	Tit tab la
1	Selil tab la	Selil tab la	Selil tab la	Selil tab la	Selil tab la	Selil tab la
2	Selil tab la	Selil tab la	Selil tab la	Selil tab la	Selil tab la	Selil tab la
3	Selil tab la	Selil tab la	Selil tab la	Selil tab la	Selil tab la	Selil tab la

#	Tit tab la	Tit tab la	Tit tab la	Tit tab la	Tit tab la	Tit tab la
1	Selil tab la	Selil tab la	Selil tab la	Selil tab la	Selil tab la	Selil tab la
2	Selil tab la	Selil tab la	Selil tab la	Selil tab la	Selil tab la	Selil tab la
3	Selil tab la	Selil tab la	Selil tab la	Selil tab la	Selil tab la	Selil tab la

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

Egzanp de baz

Kontwòl fòm endividyèl otomatikman resevwa kèk style mondyal. Tout tèks <input>, <textarea>, ak <select>eleman ak .form-controlyo mete nan width: 100%;pa default. Anvlope etikèt ak kontwòl yo .form-grouppou pi gwo espas.

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

Pa melanje gwoup fòm ak gwoup opinyon

Pa melanje gwoup fòm dirèkteman ak gwoup antre yo . Olye de sa, nich gwoup la antre anndan gwoup fòm lan.

Inline fòm

Ajoute .form-inlinenan fòm ou a (ki pa dwe yon <form>) pou kontwole bò gòch ak aliye-blòk. Sa a sèlman aplike nan fòm ki nan fenèt ki gen omwen 768 px lajè.

Ka mande pou lajè koutim

Antre ak seleksyon yo te width: 100%;aplike pa default nan Bootstrap. Nan fòm inline, nou reset sa a width: auto;pou plizyè kontwòl ka abite sou menm liy lan. Tou depan de layout ou a, yo ka mande plis lajè koutim.

Toujou ajoute etikèt

Lektè ekran yo pral gen pwoblèm ak fòm ou yo si ou pa mete yon etikèt pou chak opinyon. Pou fòm enline sa yo, ou ka kache etikèt yo lè l sèvi avèk .sr-onlyklas la. Gen lòt metòd altènatif pou bay yon etikèt pou teknoloji asistans, tankou aria-label, aria-labelledbyoswa titleatribi. Si okenn nan sa yo pa prezan, lektè ekran yo ka itilize placeholderatribi a, si yo prezan, men sonje ke itilizasyon placeholderkòm yon ranplasman pou lòt metòd etikèt yo pa konseye.

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

Fòm orizontal

Sèvi ak klas kadriyaj predefini Bootstrap yo pou fè aliman etikèt ak gwoup kontwòl fòm yo nan yon layout orizontal lè w ajoute .form-horizontalnan fòm nan (ki pa oblije yon <form>). Lè w fè sa, chanje .form-groupyo konpòte yo kòm ranje kadriyaj, kidonk pa bezwen .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>

Kontwòl sipòte

Egzanp kontwòl fòm estanda sipòte nan yon layout fòm egzanp.

Antre

Ki pi komen kontwòl fòm, tèks ki baze sou jaden D '. Gen ladann sipò pou tout kalite HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, ak color.

Kalite deklarasyon obligatwa

Antre yo pral sèlman konplètman style si yo typebyen deklare.

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

Antre gwoup yo

Pou ajoute tèks entegre oswa bouton anvan ak/oswa apre nenpòt ki baze sou tèks <input>, tcheke eleman gwoup la antre .

Textarea

Kontwòl fòm ki sipòte plizyè liy tèks. Chanje rowsatribi jan sa nesesè.

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

Case ak radyo

Bwat yo se pou chwazi youn oswa plizyè opsyon nan yon lis, pandan y ap radyo yo se pou chwazi yon opsyon nan plizyè.

Yo sipòte kaz ak radyo ki andikape yo, men pou bay yon kurseur "ki pa pèmèt" sou glise paran an <label>, w ap bezwen ajoute .disabledklas la nan paran an .radio, .radio-inline, .checkbox, oswa .checkbox-inline.

Default (anpille)

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

Bwat aliye ak radyo

Sèvi ak klas yo .checkbox-inlineoswa .radio-inlinesou yon seri kaz oswa radyo pou kontwòl ki parèt sou menm liy lan.

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

Bwat ak radyo san tèks etikèt

Si ou pa gen okenn tèks nan <label>, opinyon an pozisyone jan ou ta espere. Kounye a travay sèlman sou kaz ak radyo ki pa aliye. Sonje toujou bay kèk fòm etikèt pou teknoloji asistans (pa egzanp, lè l sèvi avèk 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>

Chwazi

Remake byen ke anpil meni natif natal chwazi-savwa nan Safari ak Chrome-gen kwen awondi ki pa ka modifye atravè border-radiuspwopriyete.

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

Pou <select>kontwòl ak multipleatribi a, opsyon miltip yo montre pa default.

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

Kontwòl estatik

Lè ou bezwen mete tèks klè akote yon etikèt fòm nan yon fòm, sèvi ak .form-control-staticklas la sou yon <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>

Konsantre eta

Nou retire estil default outlineyo sou kèk kontwòl fòm epi aplike yon box-shadownan plas li pou :focus.

Demo `:focus`eta a

Antre egzanp pi wo a itilize estil koutim nan dokiman nou an pou demontre :focuseta a sou yon .form-control.

Eta andikape

Ajoute disabledatribi boolean an sou yon opinyon pou anpeche entèraksyon itilizatè yo. Antre ki andikape parèt pi lejè epi ajoute yon not-allowedkurseur.

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

Fieldsets andikape

Ajoute disabledatribi a nan yon <fieldset>pou enfim tout kontwòl yo nan <fieldset>yon fwa.

Opozisyon sou fonksyonalite lyen nan`<a>`

Pa default, navigatè yo pral trete tout kontwòl fòm natif natal ( <input>, <select>ak <button>eleman) andedan yon <fieldset disabled>kòm andikape, anpeche tou de entèraksyon klavye ak sourit sou yo. Sepandan, si fòm ou a gen ladan tou <a ... class="btn btn-*">eleman, yo pral sèlman bay sa yo yon style nan pointer-events: none. Jan yo note sa nan seksyon sou eta andikape pou bouton yo (e espesyalman nan sou-seksyon pou eleman jete lank), pwopriyete CSS sa a poko estandadize epi li pa konplètman sipòte nan Opera 18 ak pi ba a, oswa nan Internet Explorer 11, epi li te genyen. pa anpeche itilizatè klavye yo kapab konsantre oswa aktive lyen sa yo. Se konsa, yo dwe an sekirite, sèvi ak JavaScript koutim pou enfim lyen sa yo.

Konpatibilite kwa-navigatè

Pandan ke Bootstrap pral aplike estil sa yo nan tout navigatè, Internet Explorer 11 ak anba a pa konplètman sipòte disabledatribi a sou yon <fieldset>. Sèvi ak JavaScript koutim pou enfim fieldset nan navigatè sa yo.

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

Leta sèlman

Ajoute readonlyatribi boolean an sou yon opinyon pou anpeche modifikasyon valè opinyon an. Antre lekti sèlman parèt pi lejè (menm jan ak entrain andikape), men kenbe kurseur estanda a.

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

Ede tèks

Blòk nivo èd tèks pou kontwòl fòm.

Asosye tèks èd ak kontwòl fòm

Tèks èd yo ta dwe asosye klèman ak kontwòl fòm li gen rapò ak lè l sèvi avèk aria-describedbyatribi a. Sa a pral asire ke teknoloji asistans - tankou lektè ekran - pral anonse tèks èd sa a lè itilizatè a konsantre oswa antre nan kontwòl la.

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

Validasyon eta yo

Bootstrap gen ladan estil validation pou erè, avètisman, ak eta siksè sou kontwòl fòm. Pou itilize, ajoute .has-warning, .has-error, oswa .has-successnan eleman paran an. Nenpòt .control-label, .form-control, ak .help-blocknan eleman sa a pral resevwa estil validation yo.

Transmèt eta validation bay teknoloji asistans ak itilizatè daltonòm

Sèvi ak estil validation sa yo pou endike eta yon kontwòl fòm bay sèlman yon endikasyon vizyèl, ki baze sou koulè, ki pa pral transmèt bay itilizatè teknoloji asistans - tankou lektè ekran - oswa itilizatè daltonòm.

Asire w ke yo bay yon lòt endikasyon leta tou. Pa egzanp, ou ka mete yon sijesyon sou eta nan <label>tèks kontwòl fòm nan li menm (tankou se ka a nan egzanp kòd sa a), enkli yon Glyphicon (ak tèks altènatif apwopriye lè l sèvi avèk .sr-onlyklas la - gade egzanp Glyphicon yo ), oswa lè w bay yon blòk tèks èd adisyonèl . Espesyalman pou teknoloji asistans yo, yo ka bay kontwòl fòm ki pa valab tou yon aria-invalid="true"atribi.

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

Avèk ikon si ou vle

Ou kapab tou ajoute ikon fidbak si ou vle ak adisyon a .has-feedbackak icon dwat la.

Ikon Feedback travay sèlman ak <input class="form-control">eleman tèks yo.

Ikon, etikèt, ak gwoup opinyon

Manyèl pwezante nan ikon fidbak obligatwa pou antre san yon etikèt ak pou gwoup opinyon ak yon adisyon sou bò dwat la. Nou ankouraje w anpil pou bay etikèt pou tout antre pou rezon aksè. Si ou vle anpeche etikèt yo parèt, kache yo ak .sr-onlyklas la. Si ou dwe fè san yo pa etikèt, ajiste topvalè a nan icon nan fidbak. Pou gwoup opinyon, ajiste rightvalè a nan yon valè pixel ki apwopriye selon lajè addon ou a.

Transmèt siyifikasyon icon nan teknoloji asistans

Pou asire ke teknoloji asistans yo - tankou lektè ekran - kòrèkteman transmèt siyifikasyon an nan yon ikòn, yo ta dwe enkli lòt tèks kache nan .sr-onlyklas la epi yo dwe asosye klèman ak kontwòl fòm li gen rapò ak lè l sèvi avèk aria-describedby. Altènativman, asire w ke siyifikasyon an (pa egzanp, lefèt ke gen yon avètisman pou yon jaden antre tèks patikilye) transmèt nan kèk lòt fòm, tankou chanje tèks aktyèl la <label>ki asosye ak kontwòl fòm lan.

Malgre ke egzanp sa yo deja mansyone eta validation nan kontwòl fòm respektif yo nan <label>tèks la li menm, teknik ki anwo a (itilize .sr-onlytèks ak aria-describedby) yo te enkli pou rezon ilistrasyon.

<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 opsyonèl nan fòm orizontal ak 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 si ou vle ak `.sr-only`etikèt kache

Si w itilize .sr-onlyklas la pou kache yon kontwòl fòm <label>(olye ke w sèvi ak lòt opsyon etikèt, tankou aria-labelatribi a), Bootstrap pral otomatikman ajiste pozisyon icon nan yon fwa yo te ajoute li.

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

Kontwole gwosè

Mete wotè lè l sèvi avèk klas tankou .input-lg, epi mete lajè lè l sèvi avèk klas kolòn kadriyaj tankou .col-lg-*.

Wotè gwosè

Kreye kontwòl fòm ki pi wo oswa pi kout ki matche ak gwosè bouton.

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

Gwosè gwoup fòm orizontal

Byen vit gwosè etikèt ak fòm kontwòl nan .form-horizontalajoute .form-group-lgoswa .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>

Dimansyon kolòn

Vlope antre nan kolòn kadriyaj, oswa nenpòt eleman paran koutim, pou aplike fasil lajè vle.

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

Sèvi ak klas bouton yo sou yon <a>, <button>, oswa <input>eleman.

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

Itilizasyon kontèks espesifik

Pandan ke klas bouton yo ka itilize sou <a>ak <button>eleman, se sèlman <button>eleman ki sipòte nan konpozan nav ak navbar nou yo.

Lyen ki aji kòm bouton

Si <a>yo itilize eleman yo pou yo aji kòm bouton - deklanche fonksyonalite nan paj, olye ke navige nan yon lòt dokiman oswa seksyon nan paj aktyèl la - yo ta dwe tou bay yon role="button".

Rann kwa-navigatè

Kòm yon pi bon pratik, nou rekòmande anpil itilize <button>eleman nan chak fwa sa posib asire matche kwa-navigatè rann.

Pami lòt bagay, gen yon ensèk nan Firefox <30 ki anpeche nou mete bouton line-heightki <input>baze sou yo, sa ki lakòz yo pa egzakteman matche ak wotè lòt bouton sou Firefox.

Opsyon

Sèvi ak nenpòt nan klas bouton ki disponib yo byen vit kreye yon bouton style.

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

Transmèt siyifikasyon nan teknoloji asistans

Sèvi ak koulè pou ajoute siyifikasyon nan yon bouton sèlman bay yon endikasyon vizyèl, ki pa pral transmèt bay itilizatè teknoloji asistans - tankou lektè ekran. Asire w ke enfòmasyon ki endike nan koulè a se swa evidan nan kontni an li menm (tèks la vizib nan bouton an), oswa yo enkli nan mwayen altènatif, tankou tèks adisyonèl kache ak .sr-onlyklas la.

Gwosè

Anpenpan bouton ki pi gwo oswa pi piti? Ajoute .btn-lg, .btn-sm, oswa .btn-xspou gwosè adisyonèl.

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

Kreye bouton nivo blòk - sa yo ki kouvri tout lajè yon paran - lè w ajoute .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>

Eta aktif

Bouton yo ap parèt peze (avèk yon background ki pi fonse, yon fwontyè ki pi fonse, ak yon lonbraj insérer) lè yo aktif. Pou <button>eleman, sa a se fè atravè :active. Pou <a>eleman, li fè ak .active. Sepandan, ou ka itilize .activesou <button>s (epi enkli aria-pressed="true"atribi a) si ou bezwen repwodui eta aktif la pwogramasyon.

Eleman bouton

Pa bezwen ajoute :activekòm li se yon pseudo-klas, men si ou bezwen fòse menm aparans la, ale pi devan epi ajoute .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>

Eleman jete lank

Ajoute .activeklas la nan <a>bouton.

Prensipal lyen Link

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

Eta andikape

Fè bouton yo parèt unclickable pa fennen yo tounen ak opacity.

Eleman bouton

Ajoute disabledatribi a nan <button>bouton.

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

Konpatibilite kwa-navigatè

Si ou ajoute disabledatribi a nan yon <button>, Internet Explorer 9 ak pi ba a pral rann tèks gri ak yon lonbraj tèks anbarasan ke nou pa ka ranje.

Eleman jete lank

Ajoute .disabledklas la nan <a>bouton.

Prensipal lyen Link

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

Nou itilize .disabledkòm yon klas sèvis piblik isit la, menm jan ak klas la komen .active, kidonk pa gen okenn prefiks obligatwa.

Lyen fonksyonalite opozisyon

Klas sa a itilize pointer-events: nonepou eseye enfim fonksyonalite lyen nan <a>s, men pwopriyete CSS sa a poko ofisyèl epi li pa konplètman sipòte nan Opera 18 ak pi ba a, oswa nan Internet Explorer 11. Anplis de sa, menm nan navigatè ki sipòte pointer-events: noneklavye. navigasyon rete pa afekte, sa vle di itilizatè klavye ki wè ak itilizatè teknoloji asistans yo ap toujou kapab aktive lyen sa yo. Se konsa, yo dwe an sekirite, sèvi ak JavaScript koutim pou enfim lyen sa yo.

Imaj reponn

Imaj nan Bootstrap 3 yo ka fè zanmitay repons atravè adisyon nan .img-responsiveklas la. Sa a aplike max-width: 100%;, height: auto;ak display: block;imaj la pou ke li balanse joliman nan eleman paran an.

Pou santre imaj ki sèvi ak .img-responsiveklas la, sèvi ak .center-blockolye de .text-center. Gade seksyon klas asistan yo pou plis detay sou .center-blockitilizasyon.

Imaj SVG ak IE 8-10

Nan Internet Explorer 8-10, imaj SVG yo .img-responsivegen yon gwosè disproporsyonèl. Pou repare sa a, ajoute width: 100% \9;kote sa nesesè. Bootstrap pa aplike sa otomatikman paske li lakòz konplikasyon nan lòt fòma imaj.

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

Fòm imaj

Ajoute klas nan yon <img>eleman fasilman style imaj nan nenpòt pwojè.

Konpatibilite kwa-navigatè

Kenbe nan tèt ou ke Internet Explorer 8 manke sipò pou kwen awondi.

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

Koulè kontèks

Transmèt siyifikasyon atravè koulè ak yon ti ponyen klas itilite anfaz. Sa yo ka aplike tou nan lyen epi yo pral fè nwa sou hover jis tankou estil lyen default nou an.

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

Nullam id dolor id nibh ultricies vehicula ut id elit.

Men, li pa gen okenn bagay ki konfòm, li pa gen okenn bagay ki pa fasil pou li.

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

Fè fas ak espesifik

Pafwa klas anfaz pa ka aplike akòz espesifik nan yon lòt seleksyon. Nan pifò ka yo, yon solisyon ase se vlope tèks ou nan yon <span>ak klas la.

Transmèt siyifikasyon nan teknoloji asistans

Sèvi ak koulè pou ajoute siyifikasyon sèlman bay yon endikasyon vizyèl, ki pa pral transmèt bay itilizatè teknoloji asistans - tankou lektè ekran. Asire w ke enfòmasyon ki endike nan koulè a swa evidan nan kontni an li menm (koulè kontèks yo itilize sèlman pou ranfòse siyifikasyon ki deja prezan nan tèks la/marke), oswa yo enkli atravè lòt mwayen, tankou tèks adisyonèl kache ak .sr-onlyklas la . .

Orijin kontèks

Menm jan ak klas koulè tèks kontèks yo, fasilman mete background nan yon eleman nan nenpòt klas kontèks. Konpozan Anchor yo pral fè nwa sou hover, menm jan ak klas tèks yo.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Men, li pa gen okenn bagay ki konfòm, li pa gen okenn bagay ki pa fasil pou li.

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

Fè fas ak espesifik

Pafwa klas background kontèks pa ka aplike akòz espesifik nan yon lòt seleksyon. Nan kèk ka, yon solisyon ase se vlope kontni eleman ou a nan yon <div>ak klas la.

Transmèt siyifikasyon nan teknoloji asistans

Menm jan ak koulè kontèks , asire ke nenpòt siyifikasyon transmèt atravè koulè yo transmèt tou nan yon fòma ki pa piman prezantasyon.

Fèmen icon

Sèvi ak jenerik ikòn fèmen pou ranvwaye kontni tankou modal ak alèt.

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

Carets

Sèvi ak kolèt pou endike fonksyonalite ak direksyon dropdown. Remake byen ke caret default la ap ranvèse otomatikman nan meni dropup yo .

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

Quick flote

Flote yon eleman a goch oswa adwat ak yon klas. !importantenkli pou evite pwoblèm espesifik. Klas yo ka itilize tou kòm mixin.

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

Sant blòk kontni

Mete yon eleman nan display: blockak sant atravè margin. Disponib kòm yon mixin ak klas.

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

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

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

Clearfix

Fasil klè floats lè w ajoute .clearfix nan eleman paran an . Itilize mikwo clearfix jan Nicolas Gallagher te popularize. Kapab tou itilize kòm yon mixin.

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

Montre ak kache kontni

Fòse yon eleman yo dwe montre oswa kache ( ki gen ladan pou lektè ekran ) ak itilizasyon .showak .hiddenklas yo. Klas sa yo itilize !importantpou evite konfli espesifik, menm jan ak flote rapid yo . Yo disponib sèlman pou baskil nivo blòk. Yo kapab tou itilize kòm mixin.

.hidedisponib, men li pa toujou afekte lektè ekran yo epi li demode apati v3.0.1 . Sèvi .hiddenak .sr-onlypito.

Anplis de sa, .invisibleyo ka itilize sèlman vizibilite yon eleman, sa vle di li displaypa modifye epi eleman an ka toujou afekte koule nan dokiman an.

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

Lektè ekran ak kontni navigasyon klavye

Kache yon eleman nan tout aparèy eksepte lektè ekran ki gen .sr-only. Konbine .sr-onlyak .sr-only-focusablepou montre eleman an ankò lè li konsantre (egzanp pa yon itilizatè klavye sèlman). Li nesesè pou swiv meyè pratik aksesiblite yo . Kapab itilize tou kòm mixin.

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

Ranplasman imaj

Sèvi ak .text-hideklas la oswa melanje pou ede ranplase kontni tèks yon eleman ak yon imaj background.

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

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

Pou yon devlopman ki pi rapid zanmitay mobil, sèvi ak klas sèvis piblik sa yo pou montre ak kache kontni pa aparèy atravè rechèch medya yo. Yo enkli tou klas sèvis piblik pou chanje kontni lè enprime.

Eseye sèvi ak sa yo sou yon baz limite epi evite kreye vèsyon totalman diferan nan menm sit la. Olye de sa, sèvi ak yo pou konplete prezantasyon chak aparèy.

Klas ki disponib

Sèvi ak yon sèl oswa yon konbinezon de klas ki disponib yo pou chanje kontni atravè pwen pant vi yo.

	Aparèy siplemantè pitiTelefòn (<768px)	Ti aparèyTablèt (≥768px)	Aparèy mwayenDesktop (≥992px)	Gwo aparèyDesktop (≥1200px)
`.visible-xs-*`	Vizib	Kache	Kache	Kache
`.visible-sm-*`	Kache	Vizib	Kache	Kache
`.visible-md-*`	Kache	Kache	Vizib	Kache
`.visible-lg-*`	Kache	Kache	Kache	Vizib
`.hidden-xs`	Kache	Vizib	Vizib	Vizib
`.hidden-sm`	Vizib	Kache	Vizib	Vizib
`.hidden-md`	Vizib	Vizib	Kache	Vizib
`.hidden-lg`	Vizib	Vizib	Vizib	Kache

Apati v3.2.0, .visible-*-*klas yo pou chak breakpoint vini nan twa varyasyon, youn pou chak displayvalè pwopriyete CSS ki nan lis anba a.

Gwoup klas yo	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

xsKidonk, pou ti ekran siplemantè ( ) pa egzanp, klas ki disponib .visible-*-*yo se: .visible-xs-block, .visible-xs-inline, ak .visible-xs-inline-block.

Klas yo .visible-xs, .visible-sm, .visible-md, ak .visible-lgegziste tou, men yo obsolète apati v3.2.0 . Yo apeprè ekivalan a .visible-*-block, eksepte ak ka espesyal adisyonèl pou <table>eleman ki gen rapò ak baskil.

Klas enprime

Menm jan ak klas repons regilye yo, sèvi ak sa yo pou chanje kontni pou enprime.

Klas	Navigatè	Enprime
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Kache	Vizib
`.hidden-print`	Vizib	Kache

Klas la .visible-printegziste tou men li depreche apati v3.2.0. Li se apeprè ekivalan a .visible-print-block, eksepte ak ka espesyal adisyonèl pou <table>eleman ki gen rapò.

Ka tès yo

Redimansyone navigatè w la oswa chaje sou diferan aparèy pou teste klas sèvis piblik ki reponn yo.

Vizib sou...

Mark vèt yo endike eleman an vizib nan fenèt ou ye kounye a.

Siplemantè piti ✔ Vizib sou x-ti

Ti ✔ Vizib sou ti

Mwayen ✔ Vizib sou mwayen

Gwo ✔ Vizib sou gwo

Siplemantè piti ak piti ✔ Vizib sou x-ti ak piti

Mwayen ak gwo ✔ Vizib sou mwayen ak gwo

Siplemantè ti ak mwayen ✔ Vizib sou x-ti ak mwayen

Ti ak gwo ✔ Vizib sou ti ak gwo

Siplemantè piti ak gwo ✔ Vizib sou x-ti ak gwo

Ti ak mwayen ✔ Vizib sou ti ak mwayen

Kache sou...

Isit la, mak vèt yo endike tou eleman an kache nan fenèt ou ye kounye a.

Siplemantè piti ✔ Kache sou x-ti

Ti ✔ Hidden on small

Mwayen ✔ Hidden on medium

Large ✔ Kache sou gwo

Siplemantè piti ak piti ✔ Hidden on x-small and small

Medium and large ✔ Kache sou mwayen ak gwo

Siplemantè ti ak mwayen ✔ Hidden on x-small and medium

Small and large ✔ Kache sou ti ak gwo

Extra small and large ✔ Kache sou x-ti ak gwo

Ti ak mwayen ✔ Hidden on small and medium

CSS Bootstrap la bati sou Less, yon preproseseur ak fonksyonalite adisyonèl tankou varyab, mixin, ak fonksyon pou konpile CSS. Moun k ap chèche sèvi ak sous la mwens dosye olye pou yo konpile dosye CSS nou yo ka sèvi ak plizyè varyab ak mixin nou itilize nan tout kad la.

Varyab kadriyaj ak mixin yo kouvri nan seksyon sistèm Grid la .

Konpile Bootstrap

Bootstrap ka itilize nan omwen de fason: avèk CSS konpile a oswa ak sous la mwens dosye. Pou konpile Fichye Mwens yo, konsilte seksyon Kòmanse pou konnen kijan pou konfigirasyon anviwònman devlopman ou pou kouri kòmandman ki nesesè yo.

Zouti konpilasyon twazyèm pati yo ka travay avèk Bootstrap, men ekip prensipal nou an pa sipòte yo.

Varyab

Varyab yo itilize nan tout pwojè a kòm yon fason pou santralize ak pataje valè souvan itilize tankou koulè, espas, oswa pil font. Pou yon pann konplè, tanpri gade Customizer la .

Koulè

Fasil sèvi ak de plan koulè: gri ak semantik. Koulè gri bay aksè rapid nan tout koulè nwa yo souvan itilize pandan semantik gen ladan divès koulè ki asiyen nan valè kontèks ki gen sans.

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

Sèvi ak nenpòt nan varyab koulè sa yo jan yo ye oswa reassigner yo nan varyab ki gen plis sans pou pwojè ou a.

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

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

Echafodaj

Yon ti ponyen varyab pou byen vit personnalisation eleman kle nan eskèlèt sit ou a.

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

Lyen

Fasil style lyen ou yo ak koulè a dwat ak yon sèl valè.

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

Remake byen ke @link-hover-colorsèvi ak yon fonksyon, yon lòt zouti awizom ki soti nan Less, pou kreye otomatikman koulè dwat hover. Ou ka itilize darken, lighten, saturate, ak desaturate.

Tipografi

Fasil mete tipografi ou, gwosè tèks, dirijan, ak plis ankò ak kèk varyab rapid. Bootstrap sèvi ak sa yo tou pou bay mixin tipografik fasil.

@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

De varyab rapid pou pèrsonalize kote ak non fichye ikon ou yo.

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

Eleman

Konpozan atravè Bootstrap sèvi ak kèk varyab default pou mete valè komen. Isit la yo se pi souvan itilize yo.

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

Machann melanje

Mixin machann yo se mixin pou ede sipòte plizyè navigatè lè yo enkli tout prefiks machann ki enpòtan nan CSS ou konpile.

Bwat-gwosè

Reyajiste modèl bwat konpozan ou yo ak yon sèl mixin. Pou yon kontèks, gade atik itil sa a soti nan Mozilla .

Mixin la demode apati v3.2.0 , ak entwodiksyon Autoprefixer. Pou prezève konpatibilite bak, Bootstrap ap kontinye sèvi ak mixin anndan an jiskaske Bootstrap v4.

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

Kwen awondi

Jodi a tout navigatè modèn yo sipòte pwopriyete a ki pa prefiks border-radius. Kòm sa yo, pa gen okenn .border-radius()mixin, men Bootstrap gen ladan rakoursi pou byen vit awondi de kwen sou yon bò patikilye nan yon objè.

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

Bwat (Drop) lonbraj

Si odyans sib ou a ap itilize dènye ak pi gwo navigatè ak aparèy, asire w ke ou jis itilize box-shadowpwopriyete a poukont li. Si ou bezwen sipò pou pi gran Android (pre-v4) ak iOS aparèy (pre-iOS 5), sèvi ak mixin depreche a pou ranmase sa ki nesesè yo.-webkit prefiks ki nesesè yo.

Mixin la demode apati v3.1.0 , paske Bootstrap pa ofisyèlman sipòte platfòm demode ki pa sipòte pwopriyete estanda a. Pou prezève konpatibilite bak, Bootstrap ap kontinye sèvi ak mixin anndan an jiskaske Bootstrap v4.

Asire ou ke ou sèvi ak rgba()koulè nan lonbraj bwat ou a pou yo melanje kòm san pwoblèm ke posib ak orijin.

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

Tranzisyon

Plizyè melanj pou fleksibilite. Mete tout enfòmasyon tranzisyon yo ak youn, oswa presize yon delè separe ak dire jan sa nesesè.

Mixin yo depreche apati v3.2.0, ak entwodiksyon Autoprefixer. Pou prezève konpatibilite bak, Bootstrap ap kontinye itilize mixin yo anndan jiskaske 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;
}

Transfòmasyon

Wotasyon, echèl, tradwi (deplase), oswa twonpe nenpòt objè.

Mixin yo depreche apati v3.2.0, ak entwodiksyon Autoprefixer. Pou prezève konpatibilite bak, Bootstrap ap kontinye itilize mixin yo anndan jiskaske 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;
}

Animasyon

Yon sèl mixin pou itilize tout pwopriyete animasyon CSS3 nan yon deklarasyon ak lòt mixin pou pwopriyete endividyèl yo.

Mixin yo depreche apati v3.2.0, ak entwodiksyon Autoprefixer. Pou prezève konpatibilite bak, Bootstrap ap kontinye itilize mixin yo anndan jiskaske 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;
}

Opakite

Mete opakite a pou tout navigatè epi bay yon filtersekou pou IE8.

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

Tèks anplasman

Bay kontèks pou kontwòl fòm nan chak jaden.

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

Kolòn

Jenere kolòn atravè CSS nan yon sèl eleman.

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

Gradyan

Fasil vire nenpòt de koulè nan yon gradyan background. Jwenn plis avanse epi mete yon direksyon, sèvi ak twa koulè, oswa itilize yon gradyan radial. Avèk yon sèl mixin ou jwenn tout sentaks prefiks ou pral bezwen.

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

Ou kapab tou presize ang yon estanda de koulè, gradyan lineyè:

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

Si ou bezwen yon gradyan style kwafè-bande, sa a fasil tou. Jis presize yon sèl koulè epi nou pral kouvri yon bann translusid blan.

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

Leve ante a epi sèvi ak twa koulè olye. Mete premye koulè a, dezyèm koulè a, dezyèm koulè a sispann (yon valè pousantaj tankou 25%), ak twazyèm koulè a ak melanj sa yo:

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

Tèt leve! Si ou ta dwe janm bezwen retire yon gradyan, asire w ke ou retire nenpòt ki espesifik IE filterou ka ajoute. Ou ka fè sa lè w itilize .reset-filter()mixin la ansanm background-image: none;.

Mixin sèvis piblik

Mixin sèvis piblik yo se mixin ki konbine pwopriyete CSS otreman ki pa gen rapò pou reyalize yon objektif oswa yon travay espesifik.

Clearfix

Bliye ajoute class="clearfix"nan nenpòt eleman epi olye ajoute .clearfix()mixin a kote sa apwopriye. Sèvi ak mikwo clearfix ki soti nan Nicolas Gallagher .

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

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

Santral orizontal

Byen vit santre nenpòt eleman nan paran li. Egzije widthoswa max-widthyo dwe mete.

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

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

Gwosè moun k ap ede yo

Espesifye dimansyon yon objè pi fasil.

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

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

Redimensionnable zòn tèks yo

Fasil konfigirasyon opsyon redimansyon yo pou nenpòt ki zòn tèks, oswa nenpòt lòt eleman. Defo nan konpòtman nòmal navigatè ( both).

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

Tronke tèks

Fasil tronpe tèks ak yon elips ak yon sèl mixin. Mande eleman yo dwe blockoswa inline-blocknivo.

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

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

Imaj retin

Espesifye de chemen imaj ak dimansyon imaj @1x yo, epi Bootstrap pral bay yon rechèch medya @2x. Si ou gen anpil imaj pou sèvi, konsidere ekri CSS imaj retin ou manyèlman nan yon sèl requête medya.

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

Pandan ke Bootstrap bati sou Less, li gen tou yon pò ofisyèl Sass . Nou kenbe li nan yon depo GitHub separe epi nou okipe mizajou ak yon script konvèsyon.

Ki sa ki enkli

Depi pò Sass la gen yon repo separe epi sèvi yon odyans yon ti kras diferan, sa ki nan pwojè a diferan anpil ak pwojè prensipal Bootstrap la. Sa a asire pò Sass la konpatib ak anpil sistèm ki baze sou Sass ke posib.

Chemen	Deskripsyon
`lib/`	Ruby gem kòd (konfigirasyon Sass, entegrasyon ray ak konpa)
`tasks/`	Scripts konvètè (vire en Less to Sass)
`test/`	Tès konpilasyon
`templates/`	Manifest pake konpa
`vendor/assets/`	Sass, JavaScript, ak dosye font
`Rakefile`	Travay entèn, tankou rato ak konvèti

Vizite depo GitHub pò Sass la pou wè dosye sa yo an aksyon.

Enstalasyon

Pou enfòmasyon sou fason pou enstale epi sèvi ak Bootstrap pou Sass, konsilte GitHub repository readme . Li se sous ki pi ajou epi li gen ladann enfòmasyon pou itilize ak Rails, Compass, ak pwojè estanda Sass.

Bootstrap pou Sass

CSS

Apèsi sou lekòl la

HTML5 doctype

Mobil an premye

Tipografi ak lyen

Normalize.css

Kontenè

Sistèm griyaj

Entwodiksyon

Rekèt medya yo

Opsyon griyaj

Egzanp: Stacked-to-orizontal

Egzanp: veso likid

Egzanp: mobil ak Desktop

Egzanp: mobil, tablèt, Desktop

Egzanp: Anbalaj kolòn

Reyajiste kolòn ki reponn

Retire goutyè yo

Kolòn konpanse

Kolòn nidifikasyon

Kòmann kolòn

Mwens mixin ak varyab

Varyab

Mixins

Egzanp itilizasyon

Tipografi

Tit

h1. Bootstrap tit

h2. Bootstrap tit

h3. Bootstrap tit

h4. Bootstrap tit

h5. Bootstrap tit

h6. Bootstrap tit

h1. Bootstrap tit Segondè tèks

h2. Bootstrap tit Segondè tèks

h3. Bootstrap tit Segondè tèks

h4. Bootstrap tit Segondè tèks

h5. Bootstrap tit Segondè tèks

h6. Bootstrap tit Segondè tèks

Kopi kò

Plon kò kopi

Bati ak mwens

Eleman tèks inline

Tèks make

Efase tèks

Tèks bare

Antre tèks

Tèks souliye

Ti tèks

Bold

Italik

Eleman altène

Klas aliyman

Klas transfòmasyon

Abreviyasyon yo

Abreviyasyon de baz

Inisyalis

Adrès

Blockquotes

Default blockquote

Opsyon Blockquote

Bay non yon sous

Ekspozisyon altène

Lis

San lòd

Kòmande

Unstyled

Nan liy

Deskripsyon

Orizontal deskripsyon

Oto-tronke

Kòd

Nan liy

Antre itilizatè

Blòk debaz

Varyab

Egzanp pwodiksyon an

Tablo

Egzanp de baz

Ranje trase

Demo `:focus`eta a

Opozisyon sou fonksyonalite lyen nan`<a>`

Ikon si ou vle ak `.sr-only`etikèt kache