Alao ny ambany indrindra amin'ireo singa fototra amin'ny fotodrafitrasa Bootstrap, ao anatin'izany ny fomba fiasantsika amin'ny fampivoarana tranonkala tsara kokoa, haingana kokoa, matanjaka kokoa.

HTML5 doctype

Bootstrap dia mampiasa singa HTML sy fananana CSS sasany izay mitaky ny fampiasana ny HTML5 doctype. Ampidiro any am-piandohan'ny tetikasanao rehetra izany.

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

Mobile aloha

Miaraka amin'ny Bootstrap 2, dia nampiana fomba fiantsoana finday azo isafidianana ho an'ny lafiny fototra amin'ny rafitra. Miaraka amin'ny Bootstrap 3, naverina nanoratra ny tetikasa izahay mba ho sariaka amin'ny finday hatrany am-piandohana. Raha tokony hampidirina amin'ny fomba finday azo atao, dia arotsaka ao anaty fotony izy ireo. Raha ny marina, Bootstrap no finday voalohany . Ny endrika voalohany amin'ny finday dia hita manerana ny tranomboky manontolo fa tsy amin'ny rakitra misaraka.

Mba hiantohana ny famandrihana araka ny tokony ho izy sy ny zooming mikasika, ampio ny meta tag viewport amin'ny <head>.

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

Azonao atao ny manafoana ny fahaiza-manao zoom amin'ny fitaovana finday amin'ny alalan'ny fanampiana user-scalable=nony meta tag viewport. Izany dia manakana ny zooming, midika izany fa ny mpampiasa dia tsy afaka mivezivezy fotsiny, ary mahatonga ny tranokalanao ho toy ny fampiharana teratany. Amin'ny ankapobeny, tsy manoro izany amin'ny tranokala rehetra izahay, koa mitandrema!

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

Typography sy rohy

Ny Bootstrap dia mametraka ny seho eran-tany fototra, ny typography ary ny fomba rohy. Manokana, izahay:

Apetraka background-color: #fff;amin'nybody
Ampiasao ny @font-family-base, @font-size-base, ary @line-height-baseny toetra ho fototry ny typografika
Mametraha lokon'ny rohy maneran-tany amin'ny alalan'ny @link-colorary ampiharo amin'ny tsipika mitsipitsipika rohy ihany:hover

Ireo fomba ireo dia azo jerena ao anaty scaffolding.less.

Normalize.css

Ho an'ny famandrihana amin'ny navigateur tsaratsara kokoa dia mampiasa Normalize.css , tetikasa nataon'i Nicolas Gallagher sy Jonathan Neal izahay .

fitoeran

Ny Bootstrap dia mila singa misy mba hamehezana ny votoatin'ny tranokala sy hipetrahanay ny rafitra grid. Azonao atao ny misafidy iray amin'ireo kaontenera roa hampiasaina amin'ny tetikasanao. Mariho fa, noho ny paddingsy ny maro hafa, dia tsy misy fitoeran-javatra azo nestable.

Ampiasaina .containerho an'ny fitoeran-javatra misy sakany raikitra.

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

Ampiasao .container-fluidamin'ny fitoeran-javatra mivelatra feno, mandrakotra ny sakan'ny seranan-tsambonao manontolo.

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

Ny Bootstrap dia misy rafi-pamokarana ranon-tsolika voalohany mandray andraikitra, izay mizana araka ny tokony ho izy hatramin'ny tsanganana 12 rehefa mitombo ny haben'ny fitaovana na ny seranan-tsambo. Tafiditra ao anatin'izany ireo kilasy efa voafaritra mialoha ho an'ny safidy fandrindrana mora, ary koa fifangaroan-kery matanjaka amin'ny famoronana lamina semantika kokoa .

Sava lalana

Ny rafitra Grid dia ampiasaina amin'ny famoronana fandrafetana pejy amin'ny alàlan'ny andian-tsipika sy tsanganana izay mametraka ny atiny. Ity ny fomba fiasan'ny rafitra grid Bootstrap:

Ny andalana dia tsy maintsy apetraka ao anatin'ny .container(fixed-width) na .container-fluid(full-width) ho an'ny fampifanarahana tsara sy ny padding.
Mampiasà tsipika mba hamoronana vondrona marindrano misy tsanganana.
Ny votoatiny dia tokony hapetraka ao anatin'ny tsanganana, ary ny tsanganana ihany no mety ho zanaky ny andalana avy hatrany.
Ny kilasin'ny grid efa voafaritra mialoha .rowdia .col-xs-4azo atao amin'ny fanaovana lamina haingana. Ny mixins kely kokoa dia azo ampiasaina amin'ny famolavolana semantika bebe kokoa.
Ny tsanganana dia mamorona tatatra (ny elanelana misy eo amin'ny votoatin'ny tsanganana) amin'ny alàlan'ny padding. Io padding io dia apetraka amin'ny andalana ho an'ny tsanganana voalohany sy farany amin'ny alàlan'ny sisiny ratsy eo amin'ny .rows.
Ny sisiny négatif no mahatonga ny ohatra etsy ambany ho lany daty. Izany no mahatonga ny votoaty ao anatin'ny tsanganana grid dia milahatra amin'ny votoaty tsy grid.
Ny tsanganana Grid dia noforonina amin'ny alalan'ny famaritana ny isan'ny tsanganana roa ambin'ny folo misy tianao haleha. Ohatra, tsanganana telo mitovy dia hampiasa telo .col-xs-4.
Raha tsanganana mihoatra ny 12 no apetraka ao anatin'ny andalana iray, ny vondrona tsirairay misy tsanganana fanampiny dia, amin'ny maha singa iray, dia mifono tsipika vaovao.
Mihatra amin'ny fitaovana manana sakan'ny efijery lehibe kokoa na mitovy amin'ny haben'ny teboka tapaka ny kilasy Grid, ary manafoana ny kilasin'ny grid mikendry fitaovana kely kokoa. Noho izany, ohatra, ny fampiasana .col-md-*kilasy iray amin'ny singa iray dia tsy hisy fiantraikany amin'ny famolavolana azy amin'ny fitaovana antonony ihany fa amin'ny fitaovana lehibe koa raha tsy misy .col-lg-*kilasy.

Jereo ireo ohatra amin'ny fampiharana ireo fitsipika ireo amin'ny codeo.

Fanontaniana media

Mampiasa ireto fanontaniana fampitam-baovao manaraka ireto izahay ao amin'ny Less files mba hamoronana ireo teboka fiatoana lehibe ao amin'ny rafitra grid.

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

Manitatra tsindraindray ireo fanontanian'ny media ireo izahay mba hampidirana ny max-widthhamerana ny CSS amin'ny fitaovana tery kokoa.

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

Grid safidy

Jereo ny fomba fiasan'ny rafitra grid Bootstrap amin'ny fitaovana maro miaraka amin'ny latabatra azo ampiasaina.

	Fitaovana kely fanampiny Phone (<768px)	Fitaovana kely Tablets (≥768px)	Desktop fitaovana antonony (≥992px)	Fitaovana lehibe Desktop (≥1200px)
Fihetsika Grid	Marindrano amin'ny fotoana rehetra	Nirodana hanomboka, mitsivalana eo ambonin'ny teboka tapaka
Sakan'ny kaontenera	Tsy misy (auto)	750px	970px	1170px
Prefix kilasy	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# tsanganana	12
Sakan'ny tsanganana	fiara	~62px	~81px	~97px
Sakan'ny tatatra	30px (15px amin'ny lafiny tsirairay amin'ny tsanganana)
Nestable	ENY
maivana	ENY
Filaharana tsanganana	ENY

Ohatra: Stacked-to-horizontal

Amin'ny fampiasana kilasin-tsarimihetsika tokana .col-md-*, azonao atao ny mamorona rafitra rindrankajy fototra izay manomboka mivondrona amin'ny fitaovana finday sy ny takelaka (ilay kely fanampiny ka hatramin'ny kely) alohan'ny hahatongavanao mitsivalana eo amin'ny fitaovana desktop (medium). Asio tsanganana grid amin'ny .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>

Ohatra: fitoeran-drano

Avadika ho fisehon'ny sakan'ny rehetra amin'ny alalan'ny fanovana ny ivelany ivelany .containerho .container-fluid.

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

Ohatra: Mobile sy desktop

Tsy tianao ve ny hametraka ny tsangananao amin'ny fitaovana kely kokoa? Ampiasao ny kilasin'ny fitaovana kely sy salantsalany fanampiny amin'ny fanampiana .col-xs-* .col-md-*ny tsangananao. Jereo ny ohatra etsy ambany raha te hahalala tsara kokoa ny fomba fiasan'izy rehetra.

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

Ohatra: Mobile, tablette, desktop

Amboary amin'ny ohatra teo aloha amin'ny alàlan'ny famoronana drafitra mavitrika sy mahery kokoa miaraka amin'ny .col-sm-*kilasy tablette.

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

Ohatra: Famonosana tsanganana

Raha tsanganana mihoatra ny 12 no apetraka ao anatin'ny andalana iray, ny vondrona tsirairay misy tsanganana fanampiny dia, amin'ny maha singa iray, dia mifono tsipika vaovao.

.col-xs-9

.col-xs-4
Hatramin'ny 9 + 4 = 13 > 12, ity div misy tsanganana 4 ity dia mifamatotra amin'ny tsipika vaovao ho singa iray mifanakaiky.

.col-xs-6
Mitohy manaraka ny tsipika vaovao ny tsanganana manaraka.

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

Famerenana ny tsanganana mandray andraikitra

Miaraka amin'ireo andalana efatra misy ny grids dia tsy maintsy miatrika olana ianao izay, amin'ny toerana tapaka sasany, ny tsangananao dia tsy mazava tsara satria ny iray dia lava kokoa noho ny iray. Mba hamahana an'izany dia ampiasao ny fitambaran'ny a .clearfixsy ny kilasin'ny utility responsive .

.col-xs-6 .col-sm-3 Ovay ny haben'ny efitranonao
na jereo amin'ny findainao ho ohatra.

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

Ho fanampin'ny famafazana tsanganana amin'ny toerana fiatoana mamaly, mety mila averinao indray ny offset, fanosehana, na fisintonana . Jereo ity hetsika ity ao amin'ny ohatra 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>

tsanganana offset

Alefaso miankavanana ny tsanganana amin'ny fampiasana .col-md-offset-*kilasy. Ireo kilasy ireo dia mampitombo ny sisiny havia amin'ny tsanganana amin'ny *tsanganana. Ohatra, .col-md-offset-4mihetsika .col-md-4mihoatra ny tsanganana efatra.

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

Azonao atao koa ny manafoana ny offset avy amin'ny ambaratonga ambany ambany miaraka amin'ny .col-*-offset-0kilasy.

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

Andry fanatobiana

Mba hanakanana ny atiny amin'ny rindran-damina mahazatra, ampio tsanganana vaovao .rowsy andiana .col-sm-*tsanganana iray ao anatin'ny .col-sm-*tsanganana efa misy. Ny andalana voatokana dia tokony ahitana andiana tsanganana miampy 12 na latsaka (tsy voatery hampiasa ny tsanganana 12 rehetra misy ianao).

Ambaratonga 1: .col-sm-9

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

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

Filaharana tsanganana

Ovay mora foana ny filaharan'ireo tsanganana an-tsarimihetsika misy antsika miaraka amin'ny .col-md-push-*kilasy .col-md-pull-*modifier.

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

Vitsy kokoa ny mixins sy variables

Ho fanampin'ny kilasin'ny grids efa vita mialoha ho an'ny fandrindrana haingana, ny Bootstrap dia misy fari-pahalalana kely kokoa sy fifangaroana ho an'ny famoronana haingana ny drafitrao tsotra sy semantika.

hiovaova

Ny miovaova dia mamaritra ny isan'ny tsanganana, ny sakan'ny tatatra ary ny toerana fangataham-baovao hanombohana tsanganana mitsingevana. Ampiasainay ireo mba hamoronana ireo kilasy efa voafaritra mialoha voarakitra etsy ambony, ary koa ho an'ireo mixins mahazatra voatanisa etsy ambany.

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

Mixins

Ny mixins dia ampiasaina miaraka amin'ny fari-piainan'ny grid mba hamoronana CSS semantika ho an'ny tsanganana tsirairay.

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

Fampiasana ohatra

Azonao atao ny manova ny fari-piainana amin'ny soatoavinao manokana, na mampiasa fotsiny ny mixins miaraka amin'ny sanda mahazatra azy. Ity misy ohatra iray amin'ny fampiasana ny firafitry ny default mba hamoronana lamina misy tsanganana roa misy elanelana eo anelanelany.

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

Lohateny

Ny lohateny HTML rehetra, <h1>amin'ny alàlan'ny <h6>, dia misy. .h1amin'ny alalan'ny .h6kilasy dia misy ihany koa, satria rehefa te hampifanaraka ny endri-tsoratra amin'ny lohateny iray ianao nefa mbola tianao haseho an-tsipika ny lahatsoratrao.

h1. Lohatenin'ny bootstrap	Semibold 36px
h2. Lohatenin'ny bootstrap	Semibold 30px
h3. Lohatenin'ny bootstrap	Semibold 24px
h4. Lohatenin'ny bootstrap	Semibold 18px
h5. Lohatenin'ny bootstrap	Semibold 14px
h6. Lohatenin'ny 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>

Mamorona lahatsoratra maivana kokoa sy faharoa amin'ny lohateny rehetra misy <small>marika na .smallkilasy.

h1. Lohateny Bootstrap Lahatsoratra faharoa

h2. Lohateny Bootstrap Lahatsoratra faharoa

h3. Lohateny Bootstrap Lahatsoratra faharoa

h4. Lohateny Bootstrap Lahatsoratra faharoa

h5. Lohateny Bootstrap Lahatsoratra faharoa

h6. Lohateny Bootstrap Lahatsoratra faharoa

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

Kopia vatana

Ny default manerantany an'ny Bootstrap font-sizedia 14px , miaraka line-heightamin'ny 1.428 . Izany dia mihatra amin'ny <body>and paragrafy rehetra. Ho fanampin'izany, <p>(fehintsoratra) dia mahazo sisiny ambany amin'ny antsasaky ny haavon'ny tsipika voatanisa (10px amin'ny alàlan'ny default).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Tsy misy 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>

Dika mitovy amin'ny vatana

Manaova fehintsoratra miavaka amin'ny fanampiana .lead.

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

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

Namboarina tamin'ny Less

Ny mari-pamantarana typografika dia mifototra amin'ny fari-pitsipika roa Less amin'ny variables.less : @font-size-baseary @line-height-base. Ny voalohany dia ny haben'ny endri-tsoratra ampiasaina manerana ary ny faharoa dia ny haavon'ny tsipika fototra. Mampiasa ireo fari-pahalalana sy matematika tsotra ireo izahay mba hamoronana ny sisiny, ny padding, ary ny haavon'ny tsipika amin'ny karazan-tsika rehetra sy ny maro hafa. Amboary izy ireo ary mampifanaraka ny Bootstrap.

Singa lahatsoratra an-tsoratra

Lahatsoratra voamarika

Mba hanasongadinana andian-dahatsoratra noho ny maha-zava-dehibe azy amin'ny toe-javatra hafa, ampiasao ny <mark>tag.

Azonao atao ny mampiasa ny marika marika tonisongadinalahatsoratra.

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

Lahatsoratra voafafa

Mba hanondroana andian-tsoratra voafafa dia ampiasao ny <del>tag.

~~Ity andalana lahatsoratra ity dia natao ho raisina ho lahatsoratra voafafa.~~

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

Lahatsoratra notapahana

Raha manondro andian-dahatsoratra tsy misy dikany intsony dia ampiasao ny <s>marika.

~~Ity andalana lahatsoratra ity dia natao ho raisina ho tsy marina intsony.~~

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

Ampidirina lahatsoratra

Mba hanondroana fanampiny amin'ny antontan-taratasy dia ampiasao ny <ins>tag.

Ity andalana lahatsoratra ity dia natao ho raisina ho fanampin'ny antontan-taratasy.

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

Lahatsoratra misy tsipitsipika

Mba hanitsiana lahatsoratra dia ampiasao ny <u>tag.

Ity andalana amin'ny lahatsoratra ity dia hadika toy ny misy tsipihina

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

Ampiasao ny mari-pamantarana manan-danja amin'ny HTML miaraka amin'ny fomba maivana.

Lahatsoratra kely

Mba hanamafisana ny tsipika an-tsoratra na andian-tsoratra, ampiasao ny <small>marika mba hametrahana lahatsoratra amin'ny 85% ny haben'ny ray aman-dreny. Ny singa lohateniny dia mahazo ny azy manokana font-sizeho an'ny singa misy akany <small>.

Azonao atao koa ny mampiasa singa inline miaraka .smallamin'ny solon'ny <small>.

Ity andalana lahatsoratra ity dia natao ho raisina ho printy tsara.

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

Sahisahy

Mba hanamafisana sombin-tsoratra misy lanja mavesatra kokoa.

Nadika ho lahatsoratra mibaribary ity sombin-tsoratra manaraka ity .

<strong>rendered as bold text</strong>

nampiana

Mba hanamafisana sombin-tsoratra misy sora-mandry.

Ity sombin-tsoratra manaraka ity dia nadika ho lahatsoratra miorim-paka .

<em>rendered as italicized text</em>

Singa mifandimby

Aza misalasala mampiasa <b>sy <i>amin'ny HTML5. <b>dia natao hanasongadinana teny na andian-teny nefa tsy mampita zava-dehibe fanampiny fa <i>indrindra amin'ny feo, teny teknika, sns.

Kilasy fampifanarahana

Ampifanaraho mora amin'ny singa miaraka amin'ny kilasy fampifanarahana lahatsoratra.

Lahatsoratra milahatra ankavia.

Lahatsoratra mirindra afovoany.

Lahatsoratra mirindra tsara.

Lahatsoratra voamarina.

Tsy misy lahatsoratra fonosina.

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

Kilasy fanovana

Ovay ny lahatsoratra amin'ny singa miaraka amin'ny kilasy fanaovana sora-baventy.

Lahatsoratra kely.

Lahatsoratra lehibe.

Lahatsoratra misy renisoratra.

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

fanafohezan-teny

Fampiharana ny <abbr>singa HTML ho an'ny fanafohezana sy fanafohezana mba hampisehoana ny dikan-teny miitatra amin'ny hover. Ny fanafohezana miaraka amin'ny titletoetra dia manana sisiny ambany misy teboka maivana ary cursor fanampiana eo amin'ny fantson-drano, manome teny manodidina fanampiny momba ny hover sy ho an'ireo mpampiasa ny teknolojia manampy.

Fanafohezana fototra

Ny fanafohezana ny teny hoe attribute dia attr .

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

Initialism

Ampio .initialismamin'ny fanafohezana ny haben'ny endritsoratra kely kokoa.

HTML no zavatra tsara indrindra hatramin'ny mofo voatetika.

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

adiresy

Asehoy ny mombamomba ny fifandraisana ho an'ny razana akaiky indrindra na ny vondron'asa manontolo. Tehirizo ny format amin'ny famaranana ny andalana rehetra amin'ny <br>.

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

Anarana feno
[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

Raha mitanisa votoaty avy amin'ny loharano hafa ao anatin'ny antontan-taratasinao.

Default blockquote

Fenoy <blockquote>ny HTML rehetra ho toy ny teny nindramina. Ho an'ny teny fohy dia manoro hevitra izahay <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>

Safidy blockquote

Fiovana fomba sy atiny ho an'ny fiovaovana tsotra amin'ny fenitra <blockquote>.

Fanononana loharano

Ampio a <footer>ho famantarana ny loharano. Fonosy amin'ny <cite>.

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

Olona malaza amin'ny Lohateny Loharano

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

Fampisehoana mifandimby

Ampio .blockquote-reverseho blockquote misy atiny mirindra tsara.

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

Olona malaza amin'ny Lohateny Loharano

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

Lisitra

Tsy voalamina

Lisitry ny singa izay tsy misy dikany mazava ny filaharana.

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

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

baiko

Lisitry ny zavatra misy ny filaharana manan-danja mazava .

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem sy massa
Facilisis in 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

Esory ny list-stylesisin-tany sy ny sisiny havia amin'ny lisitra (ankizy avy hatrany ihany). Ity dia mihatra amin'ny lisitry ny lisitry ny ankizy eo no ho eo ihany , midika izany fa mila manampy ny kilasy ho an'ny lisitra misy akany ihany koa ianao.

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

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

Milahatra

Apetraho eo amin'ny tsipika tokana miaraka display: inline-block;amin'ny padding maivana ny singa rehetra.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Description

Lisitry ny teny miaraka amin'ny famaritana azy.

Lisitry ny famaritana: Ny lisitry ny famaritana dia tonga lafatra amin'ny famaritana ny teny.
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>

Famaritana marindrano

Manaova teny sy famaritana amin'ny <dl>filaharana mifanila. Manomboka amin'ny stacked toy ny default <dl>s, fa rehefa mivelatra ny navbar, dia ataovy izany.

Lisitry ny famaritana: Ny lisitry ny famaritana dia tonga lafatra amin'ny famaritana ny teny.
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>

Auto-tanety

Ny lisitr'ireo famaritana marindrano dia hanapaka ny teny lava loatra ka tsy ho tafiditra ao amin'ny tsanganana havia miaraka amin'ny text-overflow. Amin'ny toerana fijerena tery kokoa dia hiova ho amin'ny fisehon'ny stacked default izy ireo.

Milahatra

Fonosy sombin-kaody an-tsipika miaraka amin'ny <code>.

Ohatra, <section>tokony hofonosina toy ny inline.

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

Fampidirana mpampiasa

Ampiasao ny <kbd>manondro ny fampidirana izay matetika ampidirina amin'ny alalan'ny fitendry.

Raha te hanova lahatahiry dia soraty cdarahin'ny anaran'ny lahatahiry.
Raha hanova ny fanovana dia tsindrio 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>

Boky fototra

Ampiasao <pre>amin'ny andalana maromaro maromaro. Aza hadino ny mandositra ny brackets amin'ny zoro amin'ny kaody mba handikana araka ny tokony ho izy.

<p>Santionany lahatsoratra eto...</p>

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

Azonao atao ihany koa ny manampy ny .pre-scrollablekilasy, izay hametraka ny haavon'ny 350px ambony indrindra ary hanome scrollbar y-axis.

hiovaova

Ho an'ny fanondro ny fari-piainana dia ampiasao ny <var>tag.

y = m x + b

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

Santionany vokatra

Mba hanondroana blocs santionany vokatra avy amin'ny programa dia ampiasao ny <samp>tag.

Ity lahatsoratra ity dia natao ho raisina ho santionany vokatra avy amin'ny programa informatika.

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

Ohatra fototra

Ho an'ny styling fototra — padding maivana ary mpizara marindrano fotsiny — ampio ny kilasy fototra .tableamin'ny <table>. Mety ho toa tafahoatra loatra izany, saingy noho ny fampiasana tabilao miely patrana ho an'ny plugins hafa toy ny kalandrie sy ny fakana daty, dia nisafidy ny hanasaraka ny fomba latabatra mahazatra izahay.

Caption latabatra azo atao.
#	Fanampin'anarana	Anarana	Anaran'ny mpampiasa
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry	ny Vorona	@twitter

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

Mitsipika mitsipika

Ampiasao .table-stripedmba hanampiana zebra-striping amin'ny andalana latabatra ao anatin'ny <tbody>.

Mifanaraka amin'ny navigateur

Ny latabatra miolakolaka dia asiana endrika amin'ny alalan'ny :nth-childCSS selector, izay tsy hita ao amin'ny Internet Explorer 8.

#	Fanampin'anarana	Anarana	Anaran'ny mpampiasa
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry	ny Vorona	@twitter

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

latabatra misy sisin-tany

Ampio .table-borderedny sisin-tany amin'ny lafiny rehetra amin'ny latabatra sy ny sela.

#	Fanampin'anarana	Anarana	Anaran'ny mpampiasa
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry	ny Vorona	@twitter

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

Manangana andalana

Ampio .table-hovermba ahafahan'ny toetry ny hover amin'ny andalana latabatra ao anatin'ny <tbody>.

#	Fanampin'anarana	Anarana	Anaran'ny mpampiasa
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry	ny Vorona	@twitter

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

latabatra mivohitra

Ampio .table-condensedmba hahatonga ny latabatra ho mirindra kokoa amin'ny alalan'ny fanapahana ny padding sela ho antsasany.

#	Fanampin'anarana	Anarana	Anaran'ny mpampiasa
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry the Bird		@twitter

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

Kilasy ara-tantara

Mampiasà kilasy contextual handokoana ny andalana latabatra na ny sela tsirairay.

KILASY	Description
`.active`	Mampihatra ny loko hover amin'ny andalana na sela manokana
`.success`	Manondro hetsika mahomby na tsara
`.info`	Manondro fiovana na hetsika tsy miandany amin'ny fampahafantarana
`.warning`	Manondro fampitandremana mety mila fitandremana
`.danger`	Manondro hetsika mampidi-doza na mety ho ratsy

#	Lohatenin'ny tsanganana	Lohatenin'ny tsanganana	Lohatenin'ny tsanganana
1	Ny votoatin'ny tsanganana	Ny votoatin'ny tsanganana	Ny votoatin'ny tsanganana
2	Ny votoatin'ny tsanganana	Ny votoatin'ny tsanganana	Ny votoatin'ny tsanganana
3	Ny votoatin'ny tsanganana	Ny votoatin'ny tsanganana	Ny votoatin'ny tsanganana
4	Ny votoatin'ny tsanganana	Ny votoatin'ny tsanganana	Ny votoatin'ny tsanganana
5	Ny votoatin'ny tsanganana	Ny votoatin'ny tsanganana	Ny votoatin'ny tsanganana
6	Ny votoatin'ny tsanganana	Ny votoatin'ny tsanganana	Ny votoatin'ny tsanganana
7	Ny votoatin'ny tsanganana	Ny votoatin'ny tsanganana	Ny votoatin'ny tsanganana
8	Ny votoatin'ny tsanganana	Ny votoatin'ny tsanganana	Ny votoatin'ny tsanganana
9	Ny votoatin'ny tsanganana	Ny votoatin'ny tsanganana	Ny votoatin'ny tsanganana

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

Fampitaovana ny dikan'ny teknôlôjia manampy

Ny fampiasana loko hanampiana dikany amin'ny laharan-databatra na ny sela tsirairay dia manome famantarana hita maso ihany, izay tsy hampitaina amin'ireo mpampiasa teknolojia manampy - toy ny mpamaky efijery. Ataovy azo antoka fa ny fampahalalana voatondro amin'ny loko dia na miharihary avy amin'ny atiny (ny soratra hita ao amin'ny andalana/sehatra latabatra mifandraika), na ampidirina amin'ny fomba hafa, toy ny lahatsoratra fanampiny miafina miaraka amin'ny .sr-onlykilasy.

Tabilao mandray andraikitra

Mamorona tabilao mandray andraikitra amin'ny famenoana izay rehetra.table mba .table-responsivehahatonga azy ireo hivezivezy mitsivalana amin'ny fitaovana kely (latsaky ny 768px). Rehefa mijery zavatra lehibe kokoa noho ny 768px ny sakany dia tsy hahita fahasamihafana amin'ireo tabilao ireo ianao.

Fampitahana mitsangana/famoahana

Mampiasa overflow-y: hidden, izay manaisotra ny atiny rehetra mihoatra ny sisiny ambany na ambony amin'ny latabatra ny latabatra mandray andraikitra. Amin'ny ankapobeny, ity dia afaka manapaka ny menio midina sy ny widgets an'ny antoko fahatelo.

Firefox sy fieldsets

Firefox dia manana styling fieldset hafahafa widthizay manelingelina ny latabatra mandray andraikitra. Tsy azo ovaina izany raha tsy misy hack manokana amin'ny Firefox izay tsy omenay ao amin'ny Bootstrap:

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

Raha mila fanazavana fanampiny dia vakio ity valiny Stack Overflow ity .

#	Lohatenin'ny latabatra	Lohatenin'ny latabatra	Lohatenin'ny latabatra	Lohatenin'ny latabatra	Lohatenin'ny latabatra	Lohatenin'ny latabatra
1	Efitra latabatra	Efitra latabatra	Efitra latabatra	Efitra latabatra	Efitra latabatra	Efitra latabatra
2	Efitra latabatra	Efitra latabatra	Efitra latabatra	Efitra latabatra	Efitra latabatra	Efitra latabatra
3	Efitra latabatra	Efitra latabatra	Efitra latabatra	Efitra latabatra	Efitra latabatra	Efitra latabatra

#	Lohatenin'ny latabatra	Lohatenin'ny latabatra	Lohatenin'ny latabatra	Lohatenin'ny latabatra	Lohatenin'ny latabatra	Lohatenin'ny latabatra
1	Efitra latabatra	Efitra latabatra	Efitra latabatra	Efitra latabatra	Efitra latabatra	Efitra latabatra
2	Efitra latabatra	Efitra latabatra	Efitra latabatra	Efitra latabatra	Efitra latabatra	Efitra latabatra
3	Efitra latabatra	Efitra latabatra	Efitra latabatra	Efitra latabatra	Efitra latabatra	Efitra latabatra

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

Ohatra fototra

Ny fanaraha-maso ny endrika tsirairay dia mahazo styling manerantany. Ny soratra <input>, <textarea>, ary ny <select>singa rehetra misy .form-controldia apetraka width: 100%;amin'ny default. Fenoy ny etikety sy ny fanaraha-maso .form-groupmba hahazoana elanelana tsara indrindra.

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

Aza afangaro vondrona vondrona amin'ny vondrona fampidirana

Aza afangaro mivantana amin'ny vondrona fampidirana . Alefaso kosa ny vondrona fampidirana ao anatin'ny vondrona endrika.

Endrika inline

Ampio .form-inlineamin'ny endrikao (izay tsy voatery ho a <form>) ho an'ny fanaraha-maso mirindra ankavia sy an-tsipika. Ity dia mihatra amin'ny endrika ao anatin'ny efitrano fijerena izay 768px farafahakeliny ny sakany.

Mety mitaky sakany manokana

width: 100%;Nampiharina tamin'ny alàlan'ny default ao amin'ny Bootstrap ny fampidirana sy ny safidy. Ao anatin'ny endrika inline dia averinay izany mba width: auto;ahafahan'ny fanaraha-maso maro mipetraka amin'ny andalana iray ihany. Miankina amin'ny fandrafetanao, mety mila sakany manokana fanampiny.

Ampio etikety foana

Ny mpamaky efijery dia hanana olana amin'ny endrikao raha tsy mampiditra marika ho an'ny fidirana rehetra ianao. Ho an'ireo endrika an-tsoratra ireo dia azonao atao ny manafina ireo etikety amin'ny fampiasana ny .sr-onlykilasy. Misy fomba hafa hafa amin'ny fanomezana marika ho an'ny teknolojia manampy, toy ny aria-label, aria-labelledbyna titletoetra. Raha tsy misy ny iray amin'ireo, dia mety hampiasa ilay placeholdertoetra ny mpamaky efijery, raha misy, saingy mariho fa tsy soso-kevitra ny fampiasana placeholderho solon'ny fomba fametahana marika hafa.

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

endrika marindrano

Ampiasao ny kilasin'ny grid efa voafaritra mialoha an'i Bootstrap mba hampifanaraka ireo etikety sy vondrona fanaraha-maso amin'ny endrika mitsivalana amin'ny alàlan'ny fanampiana .form-horizontalny endrika (izay tsy voatery ho <form>). Ny fanaovana izany dia manova .form-groupny fitondran-tena ho toy ny andalana grid, ka tsy mila .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>

Fanaraha-maso tohanana

Ohatra amin'ny fanaraha-mason'ny endrika manara-penitra tohanana amin'ny fandrafetana endrika ohatra.

Inputs

Fanaraha-maso endrika mahazatra indrindra, sehatra fampidirana mifototra amin'ny lahatsoratra. Ahitana fanohanana ny karazana HTML5 rehetra: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, ary color.

Karazana fanambarana ilaina

Ny fampidirana dia ho voalamina tanteraka raha toa ka ambara araka ny typetokony ho izy.

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

Vondrona fampidirana

Raha te hampiditra lahatsoratra na bokotra mitambatra mialoha sy/na aorian'izay mifototra amin'ny lahatsoratra <input>, jereo ny singa vondrona fampidirana .

Textarea

Fanaraha-maso endrika izay manohana andalana lahatsoratra maro. Ovay rowsny toetra raha ilaina.

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

Boxes sy radios

Ny boaty dia natao hisafidianana safidy iray na maromaro ao anaty lisitra, raha ny radio kosa dia natao hisafidianana safidy iray amin'ny maro.

Tohanana ny boaty fisavana sy ny radio kilemaina, fa raha te-hanome cursor "tsy azo ekena" eo amin'ny fantson'ny ray aman-dreny <label>, dia mila ampidirinao amin'ny .disabledray aman-dreny ny kilasy .radio, .radio-inline, .checkbox, na .checkbox-inline.

Default (mifantina)

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

Boaty sy radio an-tserasera

Ampiasao ny kilasy .checkbox-inlinena .radio-inlineamin'ny andian-tsarimihetsika na radio ho an'ny fanaraha-maso izay miseho amin'ny andalana mitovy.

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

Boaty sy radio tsy misy soratra

Raha tsy manana lahatsoratra ao anatin'ny <label>, dia apetraka araka ny nantenainao ny fidirana. Amin'izao fotoana izao dia tsy miasa afa-tsy amin'ny boaty fisaka tsy an-tserasera sy radio. Tsarovy fa mbola manome endrika marika ho an'ny teknolojia manampy (ohatra, ny fampiasana 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>

Mifantina

Mariho fa maro ny menio voafantina teratany - izany hoe ao amin'ny Safari sy Chrome - manana zoro boribory izay tsy azo ovaina amin'ny alàlan'ny border-radiusfananana.

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

Ho an'ny <select>fanaraha-maso miaraka amin'ny multipletoetra, safidy maro no aseho amin'ny alàlan'ny default.

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

Fanaraha-maso static

Rehefa mila mametraka lahatsoratra tsotra eo akaikin'ny etikety amin'ny endrika ianao dia ampiasao ny .form-control-statickilasy amin'ny <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>

Fanjakana mifantoka

Esorinay ny outlinefomba fanao mahazatra amin'ny fifehezana endrika sasany ary ampiharo box-shadowamin'ny toerany ny :focus.

Demo `:focus`fanjakana

Ny fampidirana ohatra etsy ambony dia mampiasa fomba fanao ao amin'ny antontan-taratasintsika mba hanehoana ny :focusfanjakana amin'ny .form-control.

Fanjakana kilemaina

Ampio ny disabledtoetra boolean amin'ny fampidirana iray mba hisorohana ny fifandraisan'ny mpampiasa. Ny fampidirana kilemaina dia miseho maivana kokoa ary manampy not-allowedcursor.

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

Sehatra saha kilemaina

Ampio ny disabledtoetra amin'ny a <fieldset>hanalana ny fanaraha-maso rehetra ao anatin'ny <fieldset>indray mandeha.

Fanamarihana momba ny fampandehanana rohy amin'ny`<a>`

Amin'ny alàlan'ny default, ny mpitety tranonkala dia hitondra ny fanaraha-maso ny endriky ny teratany rehetra ( <input>, <select>sy ny <button>singa) ao anatin'ny ho <fieldset disabled>toy ny kilemaina, manakana ny fifandraisan'ny klavier sy ny totozy eo aminy. Na izany aza, raha misy <a ... class="btn btn-*">singa ihany koa ny endrikao, dia homena style of pointer-events: none. Araka ny nomarihina tao amin'ny fizarana momba ny toetry ny kilema ho an'ny bokotra (ary indrindra indrindra ao amin'ny fizarana ho an'ny singa vatofantsika), ity fananana CSS ity dia tsy mbola manara-penitra ary tsy tohana tanteraka ao amin'ny Opera 18 sy ambany, na ao amin'ny Internet Explorer 11, ary nandresy. 't manakana ny mpampiasa klavier tsy ho afaka hifantoka na hampavitrika ireo rohy ireo. Noho izany, mba ho azo antoka, mampiasa JavaScript manokana hanaisotra ny rohy toy izany.

Mifanaraka amin'ny navigateur

Raha hampihatra ireo fomba ireo amin'ny navigateur rehetra i Bootstrap, ny Internet Explorer 11 sy ambany dia tsy manohana tanteraka ny disabledtoetra amin'ny <fieldset>. Mampiasà JavaScript manokana hanesorana ny saha ao amin'ireo mpitety tranonkala ireo.

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

Fanjakana vakiana fotsiny

Ampio ny readonlytoetra boolean amin'ny fampidirana iray mba hisorohana ny fanovana ny sandan'ny fampidirana. Ny fampidirana vakiana fotsiny dia toa maivana kokoa (tahaka ny fampidirana kilemaina), saingy tazony ny cursor mahazatra.

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

Lahatsoratra fanampiana

Sakanana lahatsoratra fanampiana ambaratonga ho an'ny fifehezana endrika.

Mampifandray ny lahatsoratra fanampiana amin'ny fifehezana endrika

Ny lahatsoratra fanampiana dia tokony ampifandraisina mazava amin'ny fifehezana endrika mifandraika amin'ny fampiasana ilay aria-describedbytoetra. Izany dia hiantoka fa ny teknolojia manampy - toy ny mpamaky efijery - dia hanambara ity lahatsoratra fanampiana ity rehefa mifantoka na miditra amin'ny fanaraha-maso ny mpampiasa.

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

Fanjakana fanamarinana

Ny Bootstrap dia misy fomba fanamarinana ho an'ny fahadisoana, fampitandremana ary fahombiazana amin'ny fifehezana endrika. Mampiasa, manampy .has-warning, .has-error, na .has-successamin'ny singa parent. Izay rehetra .control-label, .form-control, ary .help-blockao anatin'io singa io dia hahazo ny fomba fanamarinana.

Mampita fanjakana fanamarinana ho an'ireo teknolojia manampy sy mpampiasa jamba loko

Ny fampiasana ireo fomba fanamarinana ireo mba hilazana ny toetry ny fanaraha-maso ny endrika dia manome famantarana miloko miloko ihany, izay tsy hampitaina amin'ireo mpampiasa teknolojia manampy - toy ny mpamaky efijery - na amin'ireo mpampiasa jamba miloko.

Ataovy azo antoka fa misy famantarana hafa momba ny fanjakana koa omena. Ohatra, azonao atao ny mampiditra soso-kevitra momba ny fanjakana ao amin'ny lahatsoratry ny fanaraha-maso ny endrika <label>(tahaka ny amin'ity ohatra kaody manaraka ity), ampidiro ny Glyphicon (miaraka amin'ny lahatsoratra hafa mifanentana amin'ny fampiasana ny .sr-onlykilasy - jereo ny ohatra Glyphicon ), na amin'ny fanomezana fanampim -panampiana text block. Ho an'ny teknolojia fanampiana manokana, ny fanaraha-maso endrika tsy mety dia azo omena aria-invalid="true"toetra ihany koa.

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

Miaraka amin'ny kisary azo atao

Azonao atao ihany koa ny manampy kisary fanehoan-kevitra azo atao miaraka amin'ny fanampin'ny .has-feedbacksy ny kisary havanana.

Ny kisary fanehoan-kevitra dia miasa amin'ny <input class="form-control">singa soratra ihany.

Kisary, etikety, ary vondrona fampidirana

Ilaina ny fametrahana kisary fanehoan-kevitra amin'ny tanana ho an'ny fampidirana tsy misy marika sy ho an'ny vondrona fampidirana misy fanampim-panampiana eo ankavanana. Amporisihina mafy ianao hanome etikety ho an'ny fidirana rehetra noho ny antony hidirana. Raha te hisoroka ny etikety tsy hiseho ianao dia afeno miaraka amin'ny .sr-onlykilasy. Raha tsy maintsy manao tsy misy etikety ianao dia amboary ny topsandan'ny kisary fanehoan-kevitra. Ho an'ny vondrona fampidirana, ampifanaraho amin'ny rightsandan'ny piksel mifanaraka amin'ny sakan'ny addon ny sandany.

Mampita ny dikan'ny kisary amin'ny teknolojia manampy

Mba hahazoana antoka fa ny teknolojia manampy - toy ny mpamaky efijery - dia mampita tsara ny dikan'ny kisary iray, dia tokony hampidirina amin'ny .sr-onlykilasy ny lahatsoratra miafina fanampiny ary ampifandraisina mazava amin'ny fifehezana endrika mifandraika amin'ny fampiasana azy aria-describedby. Raha tsy izany, ataovy azo antoka fa ny dikany (ohatra, ny fisian'ny fampitandremana ho an'ny saha fampidirana lahatsoratra manokana) dia ampitaina amin'ny endrika hafa, toy ny fanovana ny lahatsoratry ny tena <label>mifandray amin'ny fanaraha-maso ny endrika.

Na dia efa milaza aza ireto ohatra manaraka ireto ny toetry ny fanamarinana ny fanaraha-maso ny endriny tsirairay ao amin'ny <label>lahatsoratra, ny teknika etsy ambony (mampiasa .sr-onlylahatsoratra sy aria-describedby) dia nampidirina ho an'ny tanjona fanoharana.

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

Kisary azo atao amin'ny endrika mitsivalana sy an-tsipika

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

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

`.sr-only`Kisary azo atao misy marika miafina

Raha mampiasa ny .sr-onlykilasy ianao mba hanafenana ny fanaraha-maso ny endrika <label>(fa tsy mampiasa safidy fametahana marika hafa, toy ny aria-labeltoetra), dia hanitsy ho azy ny toeran'ny kisary i Bootstrap rehefa ampiana izany.

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

Fanaraha-maso ny habeny

Mametraha haavo amin'ny fampiasana kilasy toy ny .input-lg, ary mametraha sakany amin'ny alàlan'ny kilasy tsanganana grid toy ny .col-lg-*.

Fandrefesana ny haavony

Mamorona fifehezana endrika avo kokoa na fohy kokoa mifanaraka amin'ny haben'ny bokotra.

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

Haben'ny vondrona endrika mitsivalana

Haingana hamehezana etikety sy fehezina ao anatiny .form-horizontalamin'ny fanampiana.form-group-lg na .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>

Fametrahana tsanganana

Ampidiro ao anaty tsanganana grid, na singa ray aman-dreny mahazatra, mba hampiharana mora ny sakany irina.

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

Tags bokotra

Ampiasao ny kilasy bokotra amin'ny singa <a>, <button>, na <input>.

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

Fampiasana manokana momba ny toe-javatra

Raha azo ampiasaina amin'ny <a>sy <button>singa ny kilasin'ny bokotra, ny <button>singa ihany no tohanana ao anatin'ny singa nav sy navbar.

Rohy miasa toy ny bokotra

Raha <a>ampiasaina toy ny bokotra ireo singa - miteraka fampiasa ao anaty pejy, fa tsy mandeha mankany amin'ny antontan-taratasy na fizarana hafa ao anatin'ny pejy ankehitriny - dia tokony homena role="button".

Fandikana ny navigateur

Amin'ny maha fomba fanao tsara indrindra, dia manoro hevitra mafy izahay hampiasa ilay <button>singa isaky ny azo atao mba hiantohana ny famadihana mifanandrify amin'ny navigateur.

Anisan'ny zavatra hafa, misy bug ao amin'ny Firefox <30 izay manakana antsika tsy hametraka ny line-heightbokotra <input>mifototra, ka mahatonga azy ireo tsy hifanaraka tsara amin'ny haavon'ny bokotra hafa ao amin'ny Firefox.

FANDIKANA

Ampiasao ny kilasin'ny bokotra misy mba hamoronana bokotra voalamina haingana.

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

Fampitaovana ny dikan'ny teknôlôjia manampy

Ny fampiasana loko hanampiana ny dikany amin'ny bokotra iray dia manome famantarana hita maso fotsiny, izay tsy hampitaina amin'ireo mpampiasa teknolojia manampy - toy ny mpamaky efijery. Ataovy azo antoka fa ny fampahalalana aseho amin'ny loko dia miharihary avy amin'ny atiny (ny soratra hita amin'ny bokotra), na ampidirina amin'ny fomba hafa, toy ny lahatsoratra fanampiny miafina miaraka amin'ny .sr-onlykilasy.

habe

Mitady bokotra lehibe kokoa na kely kokoa? Ampio .btn-lg, .btn-sm, na .btn-xshabe fanampiny.

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

Mamorona bokotra haavon'ny sakana — ireo izay mivelatra amin'ny sakan'ny ray aman-dreny iray — amin'ny alalan'ny fanampiana .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>

Fanjakana mavitrika

Ny bokotra dia hiseho voatsindry (miaraka amin'ny fiaviana maizina, sisintany maizina, ary aloka miditra) rehefa mavitrika. Ho an'ny <button>singa dia atao amin'ny alàlan'ny :active. Ho an'ny <a>singa dia vita amin'ny .active. Na izany aza, azonao ampiasaina .activeamin'ny <button>s (ary ampidiro ny aria-pressed="true"toetra) raha mila mamerina ny fanjakana mavitrika amin'ny programa ianao.

Button element

Tsy ilaina ny manampy :activefa pseudo-class izany, fa raha mila manery ny endrika mitovy ianao dia tohizo ary ampio .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>

Singa vatofantsika

Ampio ny .activekilasy amin'ny <a>bokotra.

Rohy voalohany Rohy

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

Fanjakana kilemaina

Ataovy toy ny tsy azo kitihina ny bokotra amin'ny alàlan'ny fanafoanana azy ireo miaraka amin'ny opacity.

Button element

Ampio ny disabledtoetra amin'ny <button>bokotra.

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

Mifanaraka amin'ny navigateur

Raha ampidirinao amin'ny disabled, ny <button>Internet Explorer 9 sy ny ambany dia hamoaka lahatsoratra miloko volomparasy miaraka amin'ny alokaloka ratsy izay tsy azontsika amboarina.

Singa vatofantsika

Ampio ny .disabledkilasy amin'ny <a>bokotra.

Rohy voalohany Rohy

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

Ampiasainay .disabledho toy ny kilasin'ny fitaovana eto, mitovy amin'ny .activekilasy mahazatra, ka tsy ilaina ny prefix.

Fampitandremana momba ny fiasa rohy

Ity kilasy ity dia mampiasa pointer-events: nonehanandrana manafoana ny fampandehanana rohy an'ny <a>s, saingy io fananana CSS io dia tsy mbola manara-penitra ary tsy tohanana tanteraka ao amin'ny Opera 18 sy ambany, na ao amin'ny Internet Explorer 11. Ankoatra izany, na dia ao amin'ny navigateur izay manohana pointer-events: noneny klavier aza. Tsy misy fiantraikany ny fitetezana, midika izany fa mbola afaka manetsika ireo rohy ireo ny mpampiasa klavier sy ny mpampiasa ny teknolojia mpanampy. Noho izany, mba ho azo antoka, mampiasa JavaScript manokana hanaisotra ny rohy toy izany.

Sary mamaly

Ny sary ao amin'ny Bootstrap 3 dia azo atao mora raisina amin'ny alàlan'ny fanampiana ny .img-responsivekilasy. Izany dia mihatra max-width: 100%;, height: auto;ary display: block;amin'ny sary ka mizana tsara amin'ny singa ray.

Mba hampifantoka ny sary mampiasa ny .img-responsivekilasy, ampiasao .center-blockfa tsy .text-center. Jereo ny fizarana kilasin'ny mpanampy raha mila fanazavana fanampiny momba ny .center-blockfampiasana.

Sary SVG sy IE 8-10

.img-responsiveAo amin'ny Internet Explorer 8-10, tsy mifandanja ny haben'ny sary SVG misy. Mba hamahana izany dia ampio width: 100% \9;izay ilaina. Bootstrap dia tsy mampihatra izany ho azy satria miteraka fahasarotana amin'ny endrika sary hafa.

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

Endriky ny sary

Manampia kilasy amin'ny <img>singa iray mba hamoronana sary mora amin'ny tetikasa rehetra.

Mifanaraka amin'ny navigateur

Ataovy ao an-tsaina fa ny Internet Explorer 8 dia tsy manana fanohanana ny zoro boribory.

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

Loko contextual

Ampidiro ny dikany amin'ny alàlan'ny loko miaraka amin'ny kilasy fampiasa amin'ny fanamafisana vitsivitsy. Mety hampiharina amin'ny rohy ihany koa ireo ary hihamaizina amin'ny hover toy ny fomban'ny rohy mahazatra.

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

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>

Fikarakarana manokana

Indraindray ny kilasy fanamafisana dia tsy azo ampiharina noho ny maha-manokana ny mpifidy hafa. Amin'ny ankabeazan'ny toe-javatra, ny vahaolana ampy dia ny famonosana ny lahatsoratrao <span>amin'ny kilasy.

Fampitaovana ny dikan'ny teknôlôjia manampy

Ny fampiasana loko hanampiana dikany dia manome famantarana hita maso ihany, izay tsy hampitaina amin'ireo mpampiasa teknolojia manampy - toy ny mpamaky efijery. Ataovy azo antoka fa ny fampahalalana asehon'ny loko dia na miharihary avy amin'ny atiny (ny loko manodidina dia ampiasaina hanamafisana ny dikany efa misy ao amin'ny lahatsoratra/marika), na ampidirina amin'ny fomba hafa, toy ny lahatsoratra fanampiny miafina miaraka amin'ny .sr-onlykilasy .

Fiaviana ara-tantara

Mitovitovy amin'ny kilasy lokon'ny lahatsoratra amin'ny teny contextual, apetraho mora amin'ny kilasy contextual ny lafin'ny singa iray. Ny singa vatofantsika dia ho maizina amin'ny hover, toy ny kilasy lahatsoratra.

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>

Fikarakarana manokana

Indraindray dia tsy azo ampiharina ny kilasy background contextual noho ny maha manokana an'ny mpifidy hafa. Amin'ny toe-javatra sasany, ny vahaolana ampy dia ny fametahana ny votoatin'ny singanao <div>amin'ny kilasy.

Fampitaovana ny dikan'ny teknôlôjia manampy

Toy ny amin'ny loko contextual , ataovy izay hahazoana antoka fa ny dikany rehetra ampitaina amin'ny loko dia ampitaina amin'ny endrika tsy fanehoana fotsiny.

Akatona kisary

Ampiasao ny kisary akaiky ankapobeny hanesorana votoaty toy ny modals sy fanairana.

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

Carets

Mampiasà carets hanondro ny fiasa sy ny fitarihana midina. Mariho fa ny caret default dia hivadika ho azy amin'ny menus dropup .

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

Mitsinkafona haingana

Asio singa iray miankavia na miankavanana miaraka amin'ny kilasy. !importantdia tafiditra ao mba hisorohana ny olana manokana. Ny kilasy koa dia azo ampiasaina ho mixins.

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

Sakanana votoaty afovoany

Mametraha singa iray mankany display: blockary afovoany amin'ny alàlan'ny margin. Misy amin'ny mixin sy class.

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

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

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

Clearfix

Hazavao mora floats amin'ny fanampiana .clearfix ny singa parent . Mampiasa ny micro clearfix araka ny nalazan'i Nicolas Gallagher. Azo ampiasaina ho mixin ihany koa.

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

Mampiseho sy manafina votoaty

Manery singa iray haseho na afenina ( anisan'izany ny mpamaky efijery ) amin'ny fampiasana .showsy .hiddenkilasy. Ireo kilasy ireo dia ampiasaina !importantmba hialana amin'ny fifandirana manokana, toy ny quick floats . Tsy misy afa-tsy amin'ny fanodinkodinana ny haavon'ny sakana izy ireo. Izy ireo koa dia azo ampiasaina ho mixins.

.hideazo alaina, saingy tsy misy fiantraikany amin'ny mpamaky efijery foana izany ary tsy ampiasaina amin'ny v3.0.1 . Ampiasao .hiddenna .sr-onlyho solon'izay.

Fanampin'izay, .invisibleazo ampiasaina hanodina ny fahitana singa iray ihany, midika displayizany fa tsy ovaina ary mety hisy fiantraikany amin'ny fandehan'ny antontan-taratasy ihany ilay singa.

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

mpamaky efijery sy atiny fitetezana kitendry

Afeno singa iray amin'ny fitaovana rehetra afa-tsy ny mpamaky efijery misy .sr-only. Atambatra .sr-onlymba .sr-only-focusablehampisehoana indray ilay singa rehefa mifantoka (ohatra amin'ny mpampiasa klavier ihany). Ilaina amin'ny fanarahana ireo fomba fanao tsara indrindra amin'ny fidirana . Azo ampiasaina ho mixins ihany koa.

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

Fanoloana sary

Ampiasao ny .text-hidekilasy na mixin hanampy amin'ny fanoloana ny votoatin'ny lahatsoratra amin'ny sary ambadika.

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

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

Ho an'ny fampandrosoana haingana kokoa ho an'ny finday, ampiasao ireto kilasy fampiasa ireto mba hampisehoana sy hanafenana votoaty amin'ny alàlan'ny fitaovana amin'ny alàlan'ny fangatahana media. Tafiditra ao anatin'izany ihany koa ny kilasy fampiasa amin'ny fanovana votoaty rehefa vita pirinty.

Andramo ny mampiasa ireo amin'ny fototra voafetra ary aza mamorona dikan-teny hafa tanteraka amin'ny tranokala iray ihany. Ampiasao kosa izy ireo mba hamenoana ny famelabelaran'ny fitaovana tsirairay.

Kilasy misy

Mampiasà kilasy tokana na fitambaran'ireo kilasy misy mba hamadihana votoaty manerana ny toerana fiatoana amin'ny seranana.

	Fitaovana kely fanampinyTelefaonina (<768px)	Fitaovana kelyTablets (≥768px)	Fitaovana antononyDesktop (≥992px)	Fitaovana lehibeDesktop (≥1200px)
`.visible-xs-*`	hita maso	Zavatra tsy	Zavatra tsy	Zavatra tsy
`.visible-sm-*`	Zavatra tsy	hita maso	Zavatra tsy	Zavatra tsy
`.visible-md-*`	Zavatra tsy	Zavatra tsy	hita maso	Zavatra tsy
`.visible-lg-*`	Zavatra tsy	Zavatra tsy	Zavatra tsy	hita maso
`.hidden-xs`	Zavatra tsy	hita maso	hita maso	hita maso
`.hidden-sm`	hita maso	Zavatra tsy	hita maso	hita maso
`.hidden-md`	hita maso	hita maso	Zavatra tsy	hita maso
`.hidden-lg`	hita maso	hita maso	hita maso	Zavatra tsy

Amin'ny v3.2.0, misy karazany telo ny kilasy ho an'ny teboka tsirairay, iray ho an'ny sandan'ny fananana .visible-*-*CSS tsirairay voatanisa etsy ambany.display

Vondrona kilasy	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Noho izany, ho an'ny efijery kely ( xs) ohatra, ny .visible-*-*kilasy misy dia: .visible-xs-block, .visible-xs-inline, ary .visible-xs-inline-block.

Misy ihany koa ireo kilasy .visible-xs, .visible-sm, .visible-md, ary .visible-lgtsy ampiasaina intsony amin'ny v3.2.0 . Izy ireo dia mitovy amin'ny .visible-*-block, afa-tsy amin'ny tranga manokana fanampiny ho an'ny <table>singa mifandraika amin'ny famadihana.

Kilasy fanontana

Mitovy amin'ireo kilasy mamaly matetika, ampiasao ireto mba hanodina votoaty ho pirinty.

fianarana	mpitety	pirinty
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Zavatra tsy	hita maso
`.hidden-print`	hita maso	Zavatra tsy

Misy ihany koa ny kilasy .visible-printsaingy tsy ampiasaina intsony amin'ny v3.2.0 . Izy io dia mitovy amin'ny .visible-print-block, afa-tsy amin'ny tranga manokana fanampiny ho an'ny <table>singa mifandraika amin'izany.

Tranga fitsapana

Hanova ny haben'ny navigateur na enta-mavesatra amin'ny fitaovana samihafa mba hitsapana ireo kilasy fampiasa mandray andraikitra.

Hita amin'ny...

Ny mari-pamantarana maitso dia manondro fa hita ao amin'ny seranan-tsambonao ankehitriny ilay singa.

Extra small ✔ Hita amin'ny x-kely

KELY ✔ Hita amin'ny kely

SALASALANY ✔ Hita amin'ny medium

ankamaroan'ireo ✔ Hita amin'ny lehibe

Extra kely sy kely ✔ Hita amin'ny x-kely sy kely

antonony sy lehibe ✔ Hita amin'ny antonony sy lehibe

Extra small and medium ✔ Hita amin'ny x-kely sy antonony

Kely sy lehibe ✔ Hita amin'ny kely na lehibe

Extra kely sy lehibe ✔ Hita amin'ny x-kely sy lehibe

Kely sy antonony ✔ Hita amin'ny kely sy antonony

Miafina amin'ny...

Eto, ny mari-pamantarana maitso dia manondro ihany koa fa miafina ao amin'ny seranan-tsambonao ankehitriny ilay singa.

Extra small ✔ Afenina amin'ny x-kely

KELY ✔ Afenina amin'ny kely

SALASALANY ✔ Afenina amin'ny antonony

ankamaroan'ireo ✔ Afenina amin'ny lehibe

Extra kely sy kely ✔ Afenina amin'ny x-kely sy kely

antonony sy lehibe ✔ Afenina amin'ny antonony sy lehibe

Extra small and medium ✔ Afenina amin'ny x-kely sy antonony

Kely sy lehibe ✔ Afenina amin'ny kely na lehibe

Extra kely sy lehibe ✔ Afenina amin'ny x-kely sy lehibe

Kely sy antonony ✔ Afenina amin'ny kely sy salantsalany

Ny CSS Bootstrap dia naorina amin'ny Less, preprocessor manana fiasa fanampiny toy ny variables, mixins, ary fiasa amin'ny fanangonana CSS. Ireo izay mikasa ny hampiasa ny loharano Ny rakitra kely kokoa fa tsy ny rakitra CSS natambatray dia afaka mampiasa ireo fari-pahalalana sy mixins maro ampiasaintsika manerana ny rafitra.

Ny varimbazaha sy ny mixins dia voarakotra ao amin'ny fizarana rafitra Grid .

Manangona Bootstrap

Ny Bootstrap dia azo ampiasaina amin'ny fomba roa farafahakeliny: miaraka amin'ny CSS natambatra na miaraka amin'ny loharano Less files. Mba hanangonana ny rakitra Kely, jereo ny fizarana fanombohana momba ny fomba fametrahana ny tontolo fampandrosoana anao mba hampandehanana ny baiko ilaina.

Mety miasa miaraka amin'ny Bootstrap ny fitaovana fanangonana antoko fahatelo, saingy tsy tohanan'ny ekipa fototra.

hiovaova

Ampiasaina mandritra ny tetikasa manontolo ny fiovaovana ho toy ny fomba iray hampivondronana sy hizarana ny soatoavina fampiasa matetika toy ny loko, ny elanelana, na ny antonta endri-tsoratra. Raha te hahita fahatapahana tanteraka dia jereo ny Customizer .

loko

Ampiasao mora ny loko roa: grayscale sy semantic. Ny loko grayscale dia manome fidirana haingana amin'ny aloky ny mainty fampiasa matetika raha ny semantika kosa dia misy loko isan-karazany voatendry ho an'ny soatoavina misy dikany.

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

Ampiasao ny iray amin'ireo fari-pahaizan'ny loko ireo amin'ny maha-izy azy na avereno amin'ny fari-piainana manan-danja kokoa ho an'ny tetikasanao.

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

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

torolalana

Variana vitsivitsy ho an'ny fanamboarana haingana ireo singa fototra amin'ny taolan'ny tranokalanao.

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

rohy

Ataovy mora ny rohinao amin'ny loko mety miaraka amin'ny sanda tokana.

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

Mariho fa @link-hover-colormampiasa asa iray, fitaovana mahafinaritra hafa avy amin'ny Less, mba hamoronana ho azy ny loko hover. Azonao atao ny mampiasa darken, lighten, saturate, ary desaturate.

Typography

Apetraho mora ny endri-tsoratra, ny haben'ny lahatsoratra, ny fitarihana, ary ny maro hafa miaraka amin'ny fari-pitsipika haingana vitsivitsy. Mampiasa ireo ihany koa ny Bootstrap mba hanomezana fampifangaroana typografika mora.

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

sary Masina

Variana haingana roa ho an'ny fanamboarana ny toerana sy ny anaran'ny kisaryo.

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

singa

Ny singa ao amin'ny Bootstrap dia mampiasa ny fari-pahaizan'ny sasany amin'ny fametrahana soatoavina iraisana. Ireto ny tena fampiasa matetika.

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

Mixins mpivarotra

Ny mixins mpivarotra dia mixins hanampy amin'ny fanohanana navigateur maro amin'ny fampidirana ireo prefix mpivarotra mifandraika amin'ny CSS natambatrao.

Fametahana boaty

Avereno amin'ny mixin tokana ny modely boaty misy anao. Ho an'ny teny manodidina, jereo ity lahatsoratra mahasoa avy amin'ny Mozilla ity .

Ny mixin dia tsy ampiasaina amin'ny v3.2.0, miaraka amin'ny fampidirana Autoprefixer. Mba hitazomana ny fifanarahana mihemotra, ny Bootstrap dia hanohy hampiasa ny mixin ao anatiny mandra-pahatongan'ny Bootstrap v4.

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

Zoro boribory

Ankehitriny, ny navigateur maoderina rehetra dia manohana ny border-radiusfananana tsy misy tombo-kase. Noho izany, tsy misy .border-radius()mixin, fa ny Bootstrap dia ahitana ny hitsin-dàlana ho an'ny fihodinana haingana ny zoro roa amin'ny lafiny iray amin'ny zavatra iray.

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

Alokaloka Boaty (Drop).

Raha mampiasa navigateur sy fitaovana farany sy lehibe indrindra ny mpihaino anao, dia ataovy izay hampiasa box-shadowazy irery. Raha mila fanohanana ho an'ny fitaovana Android taloha (pre-v4) sy iOS (pre-iOS 5) ianao, ampiasao ny mixin efa lany andro mba haka ny -webkitprefix ilaina.

Ny mixin dia tsy ampiasaina amin'ny v3.1.0, satria ny Bootstrap dia tsy manohana amin'ny fomba ofisialy ireo sehatra efa lany andro izay tsy manohana ny fananana mahazatra. Mba hitazomana ny fifanarahana mihemotra, ny Bootstrap dia hanohy hampiasa ny mixin ao anatiny mandra-pahatongan'ny Bootstrap v4.

Aza hadino ny mampiasa rgba()loko ao amin'ny aloky ny boaty mba hampifangaro azy ireo araka izay azo atao amin'ny fiaviana.

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

fiovana

Mixins maro ho an'ny flexibility. Apetraho amin'ny iray ny fampahafantarana tetezamita rehetra, na mametraha fahatarana sy faharetana misaraka raha ilaina.

Ny mixins dia tsy ampiasaina amin'ny v3.2.0, miaraka amin'ny fampidirana Autoprefixer. Mba hitazomana ny fifanarahana mihemotra, ny Bootstrap dia hanohy hampiasa ny mixins ao anatiny mandra-pahatongan'ny 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;
}

fiovana

Ahodina, mizana, mandika (mihetsika), na mitongilana izay zavatra rehetra.

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

fihetsik'ireo sary mihetsika

Mixin tokana ho an'ny fampiasana ny toetran'ny animation CSS3 rehetra amin'ny fanambarana iray ary mixins hafa ho an'ny fananana tsirairay.

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

hatevin'ny

Apetraho ny opacity ho an'ny navigateur rehetra ary omeo filterfiatoana ho an'ny IE8.

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

Lahatsoratra misy toerana

Omeo contexte ho an'ny fanaraha-maso ny endrika ao anatin'ny sehatra tsirairay.

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

andry

Mamorona tsanganana amin'ny alàlan'ny CSS ao anatin'ny singa tokana.

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

Gradients

Avadika mora ny loko roa ho gradient ambadika. Mandrosoa kokoa ary mametraha tari-dalana, mampiasa loko telo, na mampiasa gradient radial. Miaraka amin'ny mixin tokana dia azonao ny syntax voafantina rehetra ilainao.

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

Azonao atao ihany koa ny mamaritra ny zoro amin'ny gradient tsipika miloko mahazatra:

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

Raha mila gradient style barber-stripe ianao dia mora ihany koa. Ampidiro fotsiny ny loko tokana dia hametahana tsipika fotsy mangarahara isika.

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

Amboary ny ante ary ampiasao loko telo. Apetraho ny loko voalohany, ny loko faharoa, ny fiatoana ny loko faharoa (ny sanda isan-jato toy ny 25%), ary ny loko fahatelo miaraka amin'ireto mixins ireto:

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

Fampitandremana! Raha toa ka mila manaisotra gradient ianao dia ataovy izay hanesorana izay IE manokana filtermety nampidirinao. Azonao atao izany amin'ny fampiasana ny .reset-filter()mixin miaraka background-image: none;.

Utility mixins

Utility mixins dia mixins izay manambatra ny toetra CSS tsy misy ifandraisany mba hahatratrarana tanjona na asa manokana.

Clearfix

Adino ny manampy class="clearfix"singa rehetra ary ampio ny .clearfix()mixin raha mety. Mampiasa ny micro clearfix avy amin'i Nicolas Gallagher .

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

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

Ivontoerana mitsivalana

Aforeto haingana ny singa rehetra ao anatin'ny ray aman-dreniny. Mitaky widthna max-widthhapetraka.

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

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

Mpanampy mametaka

Farito mora kokoa ny refin'ny zavatra iray.

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

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

Textarea azo ovaina

Ampifandraiso mora ny safidy fanovana habe ho an'ny textarea, na singa hafa. Default amin'ny fihetsika mahazatra amin'ny navigateur ( both).

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

Manapaka lahatsoratra

Tapaho mora foana ny lahatsoratra miaraka amin'ny ellipsis miaraka amin'ny mixin tokana. Mitaky singa blockna inline-blockambaratonga.

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

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

Sary Retina

Mametraha lalana roa sary sy ny refin'ny sary @1x, ary ny Bootstrap dia hanome fanontaniana media @2x. Raha manana sary maro hatolotra ianao dia eritrereto ny manoratra amin'ny tananao ny sarin'ny retina CSS amin'ny fangatahana media tokana.

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

Raha miorina amin'ny Less ny Bootstrap dia manana seranan-tsambo Sass ofisialy ihany koa izy . Mitazona azy ao amin'ny tahiry GitHub mitokana izahay ary mitantana ny fanavaozana miaraka amin'ny script fiovam-po.

Inona no tafiditra

Satria ny seranan-tsambo Sass dia manana repo misaraka ary manompo mpihaino hafa kely, ny votoatin'ny tetikasa dia tsy mitovy amin'ny tetikasa Bootstrap lehibe. Izany dia miantoka fa ny seranan-tsambo Sass dia mifanaraka amin'ny rafitra mifototra amin'ny Sass araka izay azo atao.

LALANA	Description
`lib/`	Kaody vatosoa Ruby (fampidirana Sass, Rails ary Compass)
`tasks/`	Scripts mpanova (mivadika ho Sass)
`test/`	Fitsapana fanangonana
`templates/`	Fampisehoana fonosana kompas
`vendor/assets/`	Sass, JavaScript, ary rakitra endri-tsoratra
`Rakefile`	Asa anatiny, toy ny rake sy convert

Tsidiho ny fitahirizana GitHub ao amin'ny seranan-tsambo Sass raha te hahita ireo rakitra ireo miasa.

Fametrahana

Raha mila fanazavana momba ny fomba fametrahana sy fampiasana Bootstrap ho an'ny Sass, jereo ny GitHub repository readme . Io no loharano farany indrindra ary misy fampahalalana azo ampiasaina amin'ny tetikasa Rails, Compass ary Sass mahazatra.

Bootstrap ho an'ny Sass

CSS

Overview

HTML5 doctype

Mobile aloha

Typography sy rohy

Normalize.css

fitoeran

Rafitra Grid

Sava lalana

Fanontaniana media

Grid safidy

Ohatra: Stacked-to-horizontal

Ohatra: fitoeran-drano

Ohatra: Mobile sy desktop

Ohatra: Mobile, tablette, desktop

Ohatra: Famonosana tsanganana

Famerenana ny tsanganana mandray andraikitra

tsanganana offset

Andry fanatobiana

Filaharana tsanganana

Vitsy kokoa ny mixins sy variables

hiovaova

Mixins

Fampiasana ohatra

Typography

Lohateny

h1. Lohatenin'ny bootstrap

h2. Lohatenin'ny bootstrap

h3. Lohatenin'ny bootstrap

h4. Lohatenin'ny bootstrap

h5. Lohatenin'ny bootstrap

h6. Lohatenin'ny bootstrap

h1. Lohateny Bootstrap Lahatsoratra faharoa

h2. Lohateny Bootstrap Lahatsoratra faharoa

h3. Lohateny Bootstrap Lahatsoratra faharoa

h4. Lohateny Bootstrap Lahatsoratra faharoa

h5. Lohateny Bootstrap Lahatsoratra faharoa

h6. Lohateny Bootstrap Lahatsoratra faharoa

Kopia vatana

Dika mitovy amin'ny vatana

Namboarina tamin'ny Less

Singa lahatsoratra an-tsoratra

Lahatsoratra voamarika

Lahatsoratra voafafa

Lahatsoratra notapahana

Ampidirina lahatsoratra

Lahatsoratra misy tsipitsipika

Lahatsoratra kely

Sahisahy

nampiana

Singa mifandimby

Kilasy fampifanarahana

Kilasy fanovana

fanafohezan-teny

Fanafohezana fototra

Initialism

adiresy

Blockquotes

Default blockquote

Safidy blockquote

Fanononana loharano

Fampisehoana mifandimby

Lisitra

Tsy voalamina

baiko

Unstyled

Milahatra

Description

Famaritana marindrano

Auto-tanety

fehezan-dalàna

Milahatra

Fampidirana mpampiasa

Boky fototra

hiovaova

Santionany vokatra

latabatra

Ohatra fototra

Mitsipika mitsipika

Mifanaraka amin'ny navigateur

Demo `:focus`fanjakana

Fanamarihana momba ny fampandehanana rohy amin'ny`<a>`

`.sr-only`Kisary azo atao misy marika miafina