Akiru informojn pri la ĉefaj pecoj de la infrastrukturo de Bootstrap, inkluzive de nia aliro al pli bona, pli rapida, pli forta retejo-disvolviĝo.

HTML5-dokumentotipo

Bootstrap uzas iujn HTML-elementojn kaj CSS-ecojn, kiuj postulas la uzon de la HTML5-dokumentotipo. Enmetu ĝin komence de ĉiuj viaj projektoj.

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

Poŝtelefono unue

Kun Bootstrap 2, ni aldonis laŭvolajn poŝtelefonajn amikajn stilojn por ŝlosilaj aspektoj de la kadro. Kun Bootstrap 3, ni reverkis la projekton por esti movebla amika de la komenco. Anstataŭ aldoni laŭvolajn moveblajn stilojn, ili estas bakitaj ĝuste en la kernon. Fakte, Bootstrap unue estas movebla . Poŝtelefonaj unuaj stiloj troveblas tra la tuta biblioteko anstataŭ en apartaj dosieroj.

Por certigi taŭgan bildigon kaj tuŝan zomon, aldonu la meta-etikedon de vidpunkto al via <head>.

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

Vi povas malŝalti zomigajn kapablojn ĉe porteblaj aparatoj aldonante user-scalable=noal la meta-etikedo de la vidfenestro. Ĉi tio malŝaltas zomi, kio signifas, ke uzantoj nur povas rulumi, kaj rezultigas vian retejon sentiĝi iom pli kiel denaska aplikaĵo. Ĝenerale, ni ne rekomendas ĉi tion en ĉiu retejo, do atentu!

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

Tipografio kaj ligiloj

Bootstrap starigas bazajn tutmondajn ekranajn, tipografiojn kaj ligajn stilojn. Specife, ni:

Fiksita background-color: #fff;sur labody
Uzu la @font-family-base, @font-size-base, kaj @line-height-baseatributojn kiel nian tipografian bazon
Agordu la tutmondan ligilon koloron per @link-colorkaj apliku ligajn substrekojn nur sur:hover

Ĉi tiuj stiloj troviĝas ene de scaffolding.less.

Normaligi.css

Por plibonigita trans-retumila bildigo, ni uzas Normalize.css , projekton de Nicolas Gallagher kaj Jonathan Neal .

Ujoj

Bootstrap postulas enhavan elementon por envolvi retejan enhavon kaj gastigi nian kradsistemon. Vi povas elekti unu el du ujoj por uzi en viaj projektoj. Rimarku ke, pro paddingkaj pli, neniu ujo estas enŝlosebla.

Uzu .containerpor respondema fiksa larĝa ujo.

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

Uzu .container-fluidpor plenlarĝa ujo, ampleksanta la tutan larĝon de via vidfenestro.

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

Bootstrap inkluzivas respondeman, moveblan unuan fluidan kradsistemon, kiu taŭge skalas ĝis 12 kolumnojn laŭ la grandeco de la aparato aŭ vidfenestro pliiĝas. Ĝi inkluzivas antaŭdifinitajn klasojn por facilaj aranĝaj opcioj, kaj ankaŭ potencajn miksaĵojn por generi pli semantikajn aranĝojn .

Enkonduko

Kradaj sistemoj estas uzataj por krei paĝajn aranĝojn per serio de vicoj kaj kolumnoj, kiuj enhavas vian enhavon. Jen kiel funkcias la kradsistemo Bootstrap:

Vicoj devas esti metitaj ene de .container(fiks-larĝo) aŭ .container-fluid(plen-larĝo) por taŭga vicigo kaj kompletigo.
Uzu vicojn por krei horizontalajn grupojn de kolumnoj.
Enhavo devas esti metita ene de kolumnoj, kaj nur kolumnoj povas esti tujaj filoj de vicoj.
Antaŭdifinitaj kradaj klasoj ŝatas .rowkaj .col-xs-4estas disponeblaj por rapide fari kradajn aranĝojn. Malpli da miksaĵoj ankaŭ povas esti uzataj por pli semantikaj aranĝoj.
Kolumnoj kreas defluojn (interspacoj inter kolumnenhavo) per padding. Tiu kompletigo estas kompensita en vicoj por la unua kaj lasta kolumno per negativa marĝeno sur .rows.
La negativa marĝeno estas kial la ekzemploj malsupre estas maldentaj. Estas tiel ke enhavo en kradaj kolumnoj estas vicigita kun ne-krada enhavo.
Kradaj kolumnoj estas kreitaj specifante la nombron de dek du disponeblaj kolumnoj, kiujn vi volas enhavi. Ekzemple, tri egalaj kolumnoj uzus tri .col-xs-4.
Se pli ol 12 kolumnoj estas metitaj ene de ununura vico, ĉiu grupo de kromaj kolumnoj, kiel unu unuo, envolvos novan linion.
Kradklasoj validas por aparatoj kun ekranlarĝoj pli grandaj ol aŭ egalaj al la rompopunktograndecoj, kaj superregas kradklasojn celitajn ĉe pli malgrandaj aparatoj. Tial, ekz. apliki ajnan .col-md-*klason al elemento ne nur influos ĝian stilon ĉe mezaj aparatoj sed ankaŭ ĉe grandaj aparatoj se .col-lg-*klaso ne ĉeestas.

Rigardu la ekzemplojn por apliki ĉi tiujn principojn al via kodo.

Demandoj pri amaskomunikiloj

Ni uzas la sekvajn amaskomunikilajn demandojn en niaj Malpli dosieroj por krei la ŝlosilajn rompopunktojn en nia kradsistemo.

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

Ni foje plivastigas ĉi tiujn amaskomunikilajn demandojn por inkluzivi max-widthpor limigi CSS al pli mallarĝa aro da aparatoj.

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

Kradaj opcioj

Vidu kiel aspektoj de la Bootstrap kradsistemo funkcias tra pluraj aparatoj kun oportuna tablo.

	Ekstra malgrandaj aparatoj Telefonoj (<768px)	Malgrandaj aparatoj Tablojdoj (≥768px)	Mezaj aparatoj Labortabloj (≥992px)	Grandaj aparatoj Labortabloj (≥1200px)
Krada konduto	Horizontale ĉiam	Kolapsis por komenci, horizontale super rompopunktoj
Larĝo de ujo	Neniu (aŭtomata)	750 px	970 px	1170 px
Klasprefikso	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
nombro da kolumnoj	12
Larĝo de kolumno	Aŭtomate	~62px	~81px	~97px
Larĝo de kanaleto	30 px (15 px sur ĉiu flanko de kolono)
Nestebla	Jes
Ofsetoj	Jes
Kolumna ordigo	Jes

Ekzemplo: Stakitaj-al-horizontalaj

Uzante ununuran aron de .col-md-*kradklasoj, vi povas krei bazan kradsistemon, kiu komenciĝas stakigita sur porteblaj aparatoj kaj tablojdaj aparatoj (la ekstra malgranda ĝis malgranda gamo) antaŭ iĝi horizontala sur labortablaj (mezaj) aparatoj. Metu kradkolumnojn en iu ajn .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>

Ekzemplo: Fluida ujo

Turnu ajnan fikslarĝan kradan aranĝon en plenlarĝan aranĝon ŝanĝante vian plej eksteran .containeral .container-fluid.

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

Ekzemplo: Poŝtelefono kaj labortablo

Ĉu vi ne volas, ke viaj kolumnoj simple stakiĝas en pli malgrandaj aparatoj? Uzu la ekstrajn malgrandajn kaj mezajn aparatojn kradklasojn aldonante .col-xs-* .col-md-*al viaj kolumnoj. Vidu la ekzemplon sube por pli bona ideo pri kiel ĉio funkcias.

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

Ekzemplo: Poŝtelefono, tablojdo, labortablo

Konstruu sur la antaŭa ekzemplo kreante eĉ pli dinamikajn kaj potencajn aranĝojn kun tablojdaj .col-sm-*klasoj.

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

Ekzemplo: Kolumna envolvado

Se pli ol 12 kolumnoj estas metitaj ene de ununura vico, ĉiu grupo de kromaj kolumnoj, kiel unu unuo, envolvos novan linion.

.col-xs-9

.col-xs-4
Ekde 9 + 4 = 13 > 12, ĉi tiu 4-kolumna larĝa div estas envolvita al nova linio kiel unu apuda unuo.

.col-xs-6
Postaj kolumnoj daŭras laŭ la nova linio.

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

Respondema kolumno rekomencigas

Kun la kvar niveloj de kradoj disponeblaj, vi nepre renkontos problemojn, kie, ĉe certaj rompopunktoj, viaj kolumnoj ne tute klariĝas, ĉar unu estas pli alta ol la alia. Por ripari tion, uzu kombinaĵon de a .clearfixkaj niaj respondemaj utilecaj klasoj .

.col-xs-6 .col-sm-3
Regrandigu vian vidfenestron aŭ kontrolu ĝin en via telefono por ekzemplo.

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

Krom kolumnpurigo ĉe respondemaj rompopunktoj, vi eble bezonos restarigi kompensojn, puŝojn aŭ tirojn . Vidu ĉi tion en ago en la kradekzemplo .

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

Forigi kanalojn

Forigu la kanalojn de vico kaj ĝiaj kolumnoj kun la .row-no-guttersklaso.

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

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

.col-xs-6

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

Ofsecaj kolumnoj

Movu kolumnojn dekstren uzante .col-md-offset-*klasojn. Ĉi tiuj klasoj pliigas la maldekstran marĝenon de kolono per *kolumnoj. Ekzemple, .col-md-offset-4moviĝas .col-md-4super kvar kolumnoj.

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

Vi ankaŭ povas superregi kompensojn de pli malaltaj kradaj niveloj kun .col-*-offset-0klasoj.

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

Nestokolumnoj

Por nesti vian enhavon kun la defaŭlta krado, aldonu novan .rowkaj aron da .col-sm-*kolumnoj en ekzistanta .col-sm-*kolumno. Nestitaj vicoj devus inkluzivi aron da kolumnoj kiuj sumiĝas ĝis 12 aŭ malpli (ne necesas, ke vi uzu ĉiujn 12 disponeblajn kolumnojn).

Nivelo 1: .col-sm-9

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

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

Kolumna ordigo

Facile ŝanĝu la ordon de niaj enkonstruitaj kradaj kolumnoj kun .col-md-push-*kaj .col-md-pull-*modifklasoj.

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

Malpli miksaĵoj kaj variabloj

Krom antaŭkonstruitaj kradaj klasoj por rapidaj aranĝoj, Bootstrap inkluzivas Malpli da variabloj kaj miksaĵoj por rapide generi viajn proprajn simplajn, semantikajn aranĝojn.

Variabloj

Variabloj determinas la nombron da kolumnoj, la defluillarĝon, kaj la amaskomunikilaron demandpunkton ĉe kiu komenci flosajn kolumnojn. Ni uzas ĉi tiujn por generi la antaŭdifinitajn kradklasojn dokumentitajn supre, same kiel por la kutimaj miksaĵoj listigitaj sube.

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

Miksinoj

Miksinoj estas uzitaj lige kun la kradvariabloj por generi semantikan CSS por individuaj kradkolumnoj.

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

Ekzempla uzado

Vi povas modifi la variablojn al viaj propraj kutimaj valoroj, aŭ simple uzi la miksaĵojn kun iliaj defaŭltaj valoroj. Jen ekzemplo de uzado de la defaŭltaj agordoj por krei du-kolumnan aranĝon kun interspaco.

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

Titoloj

Ĉiuj HTML-titoloj, <h1>tra <h6>, estas haveblaj. .h1tra .h6klasoj ankaŭ haveblas, por kiam vi volas kongrui kun la tiparo de titolo sed ankoraŭ volas ke via teksto estu montrata enlinie.

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

Kreu pli malpezan, sekundaran tekston en iu ajn titolo kun ĝenerala <small>etikedo aŭ la .smallklaso.

h1. Bootstrap-titolo Malĉefa teksto

h2. Bootstrap-titolo Malĉefa teksto

h3. Bootstrap-titolo Malĉefa teksto

h4. Bootstrap-titolo Malĉefa teksto

h5. Bootstrap-titolo Malĉefa teksto

h6. Bootstrap-titolo Malĉefa teksto

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

Korpa kopio

La tutmonda defaŭlto de Bootstrap font-sizeestas 14px , kun a line-heightde 1.428 . Ĉi tio estas aplikata al la <body>kaj ĉiuj alineoj. Krome, <p>(alineoj) ricevas malsupran marĝenon de duono de ilia komputita linio-alteco (10px defaŭlte).

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

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

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

<p>...</p>

Ĉefa korpokopio

Elstarigu alineon aldonante .lead.

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

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

Konstruita kun Malpli

La tipografia skalo baziĝas sur du Malpli variabloj en variabloj.malpli : @font-size-basekaj @line-height-base. La unua estas la baza tiparo-grandeco uzata ĉie kaj la dua estas la bazlinia alteco. Ni uzas tiujn variablojn kaj iun simplan matematikon por krei la randojn, remburaĵojn kaj linio-altojn de ĉiuj niaj tipoj kaj pli. Agordu ilin kaj Bootstrap adaptiĝas.

Enliniaj tekstaj elementoj

Markita teksto

Por reliefigi tekston pro ĝia graveco en alia kunteksto, uzu la <mark>etikedon.

Vi povas uzi la marketikedon porreliefigiteksto.

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

Forigita teksto

Por indiki blokojn de teksto kiuj estis forigitaj uzu la <del>etikedon.

~~Ĉi tiu linio de teksto estas traktata kiel forigita teksto.~~

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

Striita teksto

Por indiki tekstoblokojn kiuj ne plu rilatas uzu la <s>etikedon.

~~Ĉi tiu linio de teksto estas traktata kiel ne plu preciza.~~

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

Enmetita teksto

Por indiki aldonojn al la dokumento uzu la <ins>etikedon.

Ĉi tiu linio de teksto estas traktata kiel aldono al la dokumento.

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

Substrekita teksto

Por substreki tekston uzu la <u>etikedon.

Ĉi tiu linio de teksto prezentiĝos kiel substrekita

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

Uzu la defaŭltajn emfazajn etikedojn de HTML kun malpezaj stiloj.

Malgranda teksto

Por malemfazi enliniajn aŭ blokojn de teksto, uzu la <small>etikedon por agordi tekston je 85% la grandeco de la gepatro. Titolelementoj ricevas sian propran font-sizepor nestitaj <small>elementoj.

Vi povas alternative uzi enlinian elementon kun .smallanstataŭ iu ajn <small>.

Ĉi tiu linio de teksto estas intencita esti traktata kiel bela preskribo.

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

Aŭdaca

Por emfazi fragmenton de teksto kun pli peza tiparo.

La sekva fragmento de teksto estas prezentita kiel grasa teksto .

<strong>rendered as bold text</strong>

Kursivo

Por emfazi fragmenton de teksto kun kursivo.

La sekva fragmento de teksto estas prezentita kiel kursiva teksto .

<em>rendered as italicized text</em>

Alternaj elementoj

Bonvolu uzi <b>kaj <i>en HTML5. <b>celas reliefigi vortojn aŭ frazojn sen transdoni aldonan gravecon dum <i>estas plejparte por voĉo, teknikaj terminoj ktp.

Alineaj klasoj

Facile realigu tekston al komponantoj kun tekstaj vicigoklasoj.

Maldekstre vicigita teksto.

Centra vicigita teksto.

Dekstre vicigita teksto.

Pravigita teksto.

Neniu envolvi tekston.

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

Transformaj klasoj

Transformu tekston en komponantojn kun klasoj de tekstaj majuskloj.

Minuskla teksto.

Majuskla teksto.

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

Mallongigoj

Stiligita efektivigo de HTML-a <abbr>elemento por mallongigoj kaj akronimoj por montri la vastigitan version sur ŝvebado. Mallongigoj kun titleatributo havas malpezan punktitan malsupran randon kaj helpkursoron sur ŝvebado, provizante plian kuntekston dum ŝvebado kaj al uzantoj de helpaj teknologioj.

Baza mallongigo

Mallongigo de la vorto atributo estas attr .

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

Inicialismo

Aldonu .initialismal mallongigo por iomete pli malgranda tiparo.

HTML estas la plej bona afero ekde tranĉaĵigita pano.

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

Adresoj

Prezentu kontaktinformojn por la plej proksima prapatro aŭ la tuta laboro. Konservu formatadon finante ĉiujn liniojn per <br>.

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

Plena Nomo
[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>

Blokcitaĵoj

Por citado de enhavoblokoj de alia fonto ene de via dokumento.

Defaŭlta blokcitaĵo

Envolvi <blockquote>ajnan HTML kiel la citaĵo. Por rektaj citaĵoj, ni rekomendas <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>

Opcioj de blokquotetoj

Stilo kaj enhavo ŝanĝas por simplaj varioj sur normo <blockquote>.

Nomante fonton

Aldonu <footer>por identigi la fonton. Envolvu la nomon de la fontverko en <cite>.

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

Iu fama en Fonta Titolo

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

Alternaj ekranoj

Aldonu .blockquote-reversepor blokcitaĵo kun dekstre vicigita enhavo.

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

Iu fama en Fonta Titolo

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

Listoj

Neordigita

Listo de eroj en kiuj la ordo ne eksplicite gravas.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at 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>

Ordonita

Listo de eroj en kiuj la ordo eksplicite gravas .

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at 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>

Senstila

Forigu la defaŭltan list-stylekaj maldekstran marĝenon sur listaĵoj (nur tujaj infanoj). Ĉi tio validas nur por tujaj filaj listeroj , kio signifas, ke vi devos aldoni la klason ankaŭ por iuj nestitaj listoj.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at 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>

En linio

Metu ĉiujn listaĵojn sur unu linion kun display: inline-block;iom da malpeza kompletigo.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Priskribo

Listo de terminoj kun iliaj rilataj priskriboj.

Priskribolistoj: Priskriba listo estas perfekta por difini terminojn.
Euismod: Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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

Horizontala priskribo

Faru terminojn kaj priskribojn en <dl>linio flank-al-flanke. Komencas stakigita kiel defaŭlta <dl>s, sed kiam la navbar pligrandiĝas, do ĉi tiuj faru.

Priskribolistoj: Priskriba listo estas perfekta por difini terminojn.
Euismod: Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod sempre 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>

Aŭto-tranĉiga

Horizontalaj priskriblistoj detranĉos terminojn kiuj estas tro longaj por konveni en la maldekstra kolumno kun text-overflow. En pli mallarĝaj vidfenestroj, ili ŝanĝiĝos al la defaŭlta staplita aranĝo.

En linio

Envolvu enliniajn fragmentojn de kodo per <code>.

Ekzemple, <section>devus esti envolvita kiel enlinia.

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

Enigo de la uzanto

Uzu la <kbd>por indiki enigon kiu estas kutime enigita per klavaro.

Por ŝanĝi dosierujojn, tajpu cdsekvate de la nomo de la dosierujo.
Por redakti agordojn, premu 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>

Baza bloko

Uzu <pre>por pluraj linioj de kodo. Nepre eskapu iujn ajn angulajn krampojn en la kodo por taŭga bildigo.

<p>Ekzempla teksto ĉi tie...</p>

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

Vi povas laŭvole aldoni la.pre-scrollable klason, kiu starigos maksimuman altecon de 350px kaj disponigos y-akson rulobreton.

Variabloj

Por indiki variablojn uzu la <var>etikedon.

y = m x + b

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

Specimena eligo

Por indiki blokojn specimeno eligo de programo uzu la <samp>etikedon.

Ĉi tiu teksto estas traktata kiel specimena eligo de komputila programo.

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

Baza ekzemplo

Por baza stilo—malpeza remburaĵo kaj nur horizontalaj disigiloj—aldonu la bazan klason .tableal iu ajn <table>. Eble ŝajnas super redunda, sed konsiderante la vastan uzadon de tabeloj por aliaj kromprogramoj kiel kalendaroj kaj dato-elektiloj, ni elektis izoli niajn kutimajn tabelstilojn.

Laŭvola tabelteksto.
#	Antaŭnomo	Familia nomo	Uzantnomo
1	Mark	Otto	@mdo
2	Jakobo	Thornton	@graso
3	Larry	la birdo	@twitter

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

Striitaj vicoj

Uzu .table-stripedpor aldoni zebro-striadon al iu tabelvico ene de la <tbody>.

Inter-retumila kongruo

Striitaj tabloj estas stilitaj per la :nth-childCSS-elektilo, kiu ne estas disponebla en Internet Explorer 8.

#	Antaŭnomo	Familia nomo	Uzantnomo
1	Mark	Otto	@mdo
2	Jakobo	Thornton	@graso
3	Larry	la birdo	@twitter

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

Bordita tablo

Aldonu .table-borderedpor randoj sur ĉiuj flankoj de la tablo kaj ĉeloj.

#	Antaŭnomo	Familia nomo	Uzantnomo
1	Mark	Otto	@mdo
2	Jakobo	Thornton	@graso
3	Larry	la birdo	@twitter

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

Ŝvebi vicojn

Aldoni .table-hoverpor ebligi ŝveban staton sur tabelvicoj ene de <tbody>.

#	Antaŭnomo	Familia nomo	Uzantnomo
1	Mark	Otto	@mdo
2	Jakobo	Thornton	@graso
3	Larry	la birdo	@twitter

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

Kondensita tablo

Aldonu .table-condensedpor fari tablojn pli kompaktajn tranĉante ĉela remburaĵo en duono.

#	Antaŭnomo	Familia nomo	Uzantnomo
1	Mark	Otto	@mdo
2	Jakobo	Thornton	@graso
3	Larry la Birdo		@twitter

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

Kuntekstaj klasoj

Uzu kuntekstajn klasojn por kolorigi tabelvicojn aŭ individuajn ĉelojn.

Klaso	Priskribo
`.active`	Aplikas la ŝveban koloron al aparta vico aŭ ĉelo
`.success`	Indikas sukcesan aŭ pozitivan agon
`.info`	Indikas neŭtralan informan ŝanĝon aŭ agon
`.warning`	Indikas averton, kiu eble bezonas atenton
`.danger`	Indikas danĝeran aŭ eble negativan agon

#	Kolumna titolo	Kolumna titolo	Kolumna titolo
1	Kolumna enhavo	Kolumna enhavo	Kolumna enhavo
2	Kolumna enhavo	Kolumna enhavo	Kolumna enhavo
3	Kolumna enhavo	Kolumna enhavo	Kolumna enhavo
4	Kolumna enhavo	Kolumna enhavo	Kolumna enhavo
5	Kolumna enhavo	Kolumna enhavo	Kolumna enhavo
6	Kolumna enhavo	Kolumna enhavo	Kolumna enhavo
7	Kolumna enhavo	Kolumna enhavo	Kolumna enhavo
8	Kolumna enhavo	Kolumna enhavo	Kolumna enhavo
9	Kolumna enhavo	Kolumna enhavo	Kolumna enhavo

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

Transdonante signifon al helpaj teknologioj

Uzi koloron por aldoni signifon al tabelvico aŭ individua ĉelo nur provizas vidan indikon, kiu ne estos transdonita al uzantoj de helpaj teknologioj - kiel ekranlegiloj. Certigu, ke informoj indikitaj per la koloro estas aŭ evidenta de la enhavo mem (la videbla teksto en la koncerna tabelvico/ĉelo), aŭ estas inkluzivita per alternativaj rimedoj, kiel aldona teksto kaŝita kun la .sr-onlyklaso.

Respondema tabeloj

Kreu respondemajn tabelojn envolvante iujn ajn .tablepor .table-responsivefari ilin rulumi horizontale sur malgrandaj aparatoj (sub 768px). Vidante sur io ajn pli granda ol 768px larĝa, vi ne vidos diferencon en ĉi tiuj tabeloj.

Vertikala tondado/tranĉado

Respondema tabeloj uzas overflow-y: hidden, kiu detranĉas ajnan enhavon kiu iras preter la malsupraj aŭ supraj randoj de la tabelo. Aparte, ĉi tio povas detranĉi falmenuojn kaj aliajn triajn fenestraĵojn.

Fajrovulpo kaj kamparo

Fajrovulpo havas iun mallertan kamparan stilon implikantan widthtion malhelpas la respondeman tabelon. Ĉi tio ne povas esti anstataŭita sen specifa hako de Firefox, kiun ni ne provizas en Bootstrap:

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

Por pliaj informoj, legu ĉi tiun respondon de Stack Overflow .

#	Tabelo titolo	Tabelo titolo	Tabelo titolo	Tabelo titolo	Tabelo titolo	Tabelo titolo
1	Tabelĉelo	Tabelĉelo	Tabelĉelo	Tabelĉelo	Tabelĉelo	Tabelĉelo
2	Tabelĉelo	Tabelĉelo	Tabelĉelo	Tabelĉelo	Tabelĉelo	Tabelĉelo
3	Tabelĉelo	Tabelĉelo	Tabelĉelo	Tabelĉelo	Tabelĉelo	Tabelĉelo

#	Tabelo titolo	Tabelo titolo	Tabelo titolo	Tabelo titolo	Tabelo titolo	Tabelo titolo
1	Tabelĉelo	Tabelĉelo	Tabelĉelo	Tabelĉelo	Tabelĉelo	Tabelĉelo
2	Tabelĉelo	Tabelĉelo	Tabelĉelo	Tabelĉelo	Tabelĉelo	Tabelĉelo
3	Tabelĉelo	Tabelĉelo	Tabelĉelo	Tabelĉelo	Tabelĉelo	Tabelĉelo

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

Baza ekzemplo

Individuaj formularaj kontroloj aŭtomate ricevas iun tutmondan stilon. Ĉiuj tekstaj <input>, <textarea>kaj <select>elementoj kun .form-controlestas width: 100%;defaŭlte agordita. Envolvu etikedojn kaj kontrolojn .form-grouppor optimuma interspaco.

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

Ne miksu formgrupojn kun eniggrupoj

Ne miksu formgrupojn rekte kun eniggrupoj . Anstataŭe, nestu la eniggrupon ene de la formogrupo.

Enlinia formo

Aldonu .form-inlineal via formularo (kiu ne devas esti <form>) por maldekstre vicigitaj kaj enlini-blokaj kontroloj. Ĉi tio validas nur por formoj en vidfenestroj, kiuj estas almenaŭ 768px larĝaj.

Povas postuli kutimajn larĝojn

Enigaĵoj kaj elektoj width: 100%;aplikiĝis defaŭlte en Bootstrap. Ene de enliniaj formoj, ni rekomencigas tion por width: auto;ke pluraj kontroloj povu loĝi sur la sama linio. Depende de via aranĝo, aldonaj kutimaj larĝoj povas esti postulataj.

Ĉiam aldonu etikedojn

Ekranlegiloj havos problemojn kun viaj formoj se vi ne inkluzivas etikedon por ĉiu enigo. Por ĉi tiuj enliniaj formoj, vi povas kaŝi la etikedojn uzante la .sr-onlyklason. Ekzistas pliaj alternativaj metodoj provizi etikedon por helpaj teknologioj, kiel ekzemple la aria-label, aria-labelledbyaŭ titleatributo. Se neniu el ĉi tiuj ĉeestas, ekranlegantoj povas uzi la placeholderatributon, se ĉeestas, sed notu ke uzo de placeholderkiel anstataŭaĵo por aliaj etikedmetodoj ne estas konsilita.

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

Horizontala formo

Uzu la antaŭdifinitajn kradklasojn de Bootstrap por vicigi etikedojn kaj grupojn de formularaj kontroloj en horizontala aranĝo aldonante .form-horizontalal la formo (kiu ne devas esti <form>). Farante tion ŝanĝas .form-groups por konduti kiel kradaj vicoj, do ne bezonas .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>

Subtenataj kontroloj

Ekzemploj de normaj formularaj kontroloj subtenataj en ekzempla formo-aranĝo.

Enigaĵoj

Plej ofta formkontrolo, tekst-bazitaj enigkampoj. Inkluzivas subtenon por ĉiuj HTML5-tipoj: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, kaj color.

Tipo-deklaro necesas

Enigaĵoj nur estos plene stilitaj se ili typeestas ĝuste deklaritaj.

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

Eniggrupoj

Por aldoni integran tekston aŭ butonojn antaŭ kaj/aŭ post iu tekstbazita <input>, kontrolu la eniggrupon komponanton .

Tekstaro

Formkontrolo kiu subtenas plurajn liniojn de teksto. Ŝanĝu rowsatributon laŭbezone.

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

Markobutonoj kaj radioj

Markobutonoj estas por elekti unu aŭ plurajn opciojn en listo, dum radioj estas por elekti unu opcion el multaj.

Malebligitaj markobutonoj kaj radioj estas subtenataj, sed por provizi "ne permesitan" kursoron sur ŝvebado de la gepatro <label>, vi devos aldoni la .disabledklason al la gepatro .radio, .radio-inline, .checkbox, aŭ .checkbox-inline.

Defaŭlte (stakita)

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

Enliniaj markobutonoj kaj radioj

Uzu la .checkbox-inlineaŭ .radio-inlineklasojn sur serio de markobutonoj aŭ radioj por kontroloj kiuj aperas sur la sama linio.

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

Markobutonoj kaj radioj sen etikedo teksto

Se vi ne havas tekston ene de la <label>, la enigo estas poziciigita kiel vi atendus. Nuntempe nur funkcias ĉe ne-enliniaj markobutonoj kaj radioj. Memoru ankoraŭ provizi iun formon de etikedo por helpaj teknologioj (ekzemple, uzante 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>

Elektas

Notu, ke multaj denaskaj elektaj menuoj—nome en Safaro kaj Chrome—havas rondajn angulojn, kiuj ne povas esti modifitaj per border-radiuspropraĵoj.

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

Por <select>kontroloj kun la multipleatributo, pluraj opcioj estas montritaj defaŭlte.

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

Statika kontrolo

Kiam vi devas meti simplan tekston apud formularetikedo ene de formo, uzu la .form-control-staticklason sur <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>

Fokuso stato

Ni forigas la defaŭltajn outlinestilojn en iuj formularaj kontroloj kaj aplikas a box-shadowen ĝia loko por :focus.

Demo `:focus`-ŝtato

La supra ekzempla enigo uzas kutimajn stilojn en nia dokumentaro por montri la :focusstaton sur .form-control.

Malfunkciigita ŝtato

Aldonu la disabledbulean atributon al enigo por malhelpi uzantinteragojn. Malebligitaj enigaĵoj aperas pli malpezaj kaj aldonas not-allowedkursoron.

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

Malebligitaj kampoj

Aldonu la disabledatributon al a <fieldset>por malŝalti ĉiujn kontrolojn ene de la <fieldset>samtempe.

Averto pri ligfunkcieco de`<a>`

Defaŭlte, retumiloj traktos ĉiujn denaskajn formkontrolojn ( <input>, <select>kaj <button>elementoj) ene de <fieldset disabled>kiel malŝaltitaj, malhelpante ambaŭ klavarajn kaj musajn interagojn sur ili. Tamen, se via formo ankaŭ inkluzivas <a ... class="btn btn-*">elementojn, ĉi tiuj nur ricevos stilon pointer-events: none. Kiel notite en la sekcio pri malfunkciigita stato por butonoj (kaj specife en la subsekcio por ankroelementoj), ĉi tiu CSS-posedaĵo ankoraŭ ne estas normigita kaj ne estas plene subtenata en Opera 18 kaj sube, aŭ en Internet Explorer 11, kaj gajnis ne malhelpas klavaruzantojn povi enfokusigi aŭ aktivigi ĉi tiujn ligilojn. Do por esti sekura, uzu kutiman JavaScript por malŝalti tiajn ligilojn.

Inter-retumila kongruo

Dum Bootstrap aplikos ĉi tiujn stilojn en ĉiuj retumiloj, Internet Explorer 11 kaj sube ne plene subtenas la disabledatributon sur <fieldset>. Uzu kutiman JavaScript por malŝalti la kamparon en ĉi tiuj retumiloj.

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

Nur legebla ŝtato

Aldonu la readonlybulean atributon al enigo por malhelpi modifon de la valoro de la enigo. Nurlegeblaj enigaĵoj ŝajnas pli malpezaj (same kiel malebligitaj enigaĵoj), sed konservas la norman kursoron.

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

Helpa teksto

Bloknivela helpteksto por formularaj kontroloj.

Asocii helpan tekston kun formularaj kontroloj

Helpteksto devus esti eksplicite asociita kun la formo-kontrolo al kiu ĝi rilatas uzante la aria-describedbyatributon. Ĉi tio certigos, ke helpaj teknologioj - kiel ekranlegiloj - anoncos ĉi tiun helptekston kiam la uzanto enfokusigas aŭ eniras la kontrolon.

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

Konvalidaj ŝtatoj

Bootstrap inkluzivas validigajn stilojn por eraroj, avertoj kaj sukcesaj statoj sur formularaj kontroloj. Por uzi, aldonu .has-warning, .has-error, aŭ .has-successal la gepatra elemento. Ajna .control-label, .form-control, kaj .help-blockene de tiu elemento ricevos la validigajn stilojn.

Transdonante validuman staton al helpaj teknologioj kaj kolorblindaj uzantoj

Uzi ĉi tiujn validigajn stilojn por indiki la staton de formo-kontrolo nur provizas vidan, kolor-bazitan indikon, kiu ne estos transdonita al uzantoj de helpaj teknologioj - kiel ekranlegiloj - aŭ al kolorblindaj uzantoj.

Certigu, ke alternativa indiko de ŝtato ankaŭ estas provizita. Ekzemple, vi povas inkluzivi sugeston pri stato en la <label>teksto de la formo-kontrolo mem (kiel estas la kazo en la sekva kodekzemplo), inkluzivi Glyphicon (kun taŭga alternativa teksto uzante la .sr-onlyklason - vidu la Glyphicon-ekzemploj ), aŭ disponigante aldona helpa tekstobloko. Specife por helpaj teknologioj, malvalidaj formkontroloj ankaŭ povas esti asignitaj aria-invalid="true"atributo.

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

Kun laŭvolaj ikonoj

Vi ankaŭ povas aldoni laŭvolajn rimarkigajn ikonojn kun la aldono de .has-feedbackkaj la dekstra ikono.

Reago-ikonoj funkcias nur kun tekstaj <input class="form-control">elementoj.

Ikonoj, etikedoj kaj eniggrupoj

Mana poziciigado de reago-ikonoj estas postulata por enigaĵoj sen etikedo kaj por eniggrupoj kun aldonaĵo dekstre. Vi estas forte instigitaj provizi etikedojn por ĉiuj enigaĵoj pro alireblaj kialoj. Se vi volas malhelpi etikedojn montriĝi, kaŝu ilin kun la .sr-onlyklaso. Se vi devas fari sen etikedoj, ĝustigu la topvaloron de la sugesta ikono. Por eniggrupoj, alĝustigu la rightvaloron al taŭga piksela valoro depende de la larĝo de via aldonaĵo.

Transdonante la signifon de la ikono al helpaj teknologioj

Por certigi, ke helpaj teknologioj - kiel ekranlegiloj - ĝuste transdonas la signifon de ikono, kroma kaŝita teksto devus esti inkludita kun la .sr-onlyklaso kaj eksplicite asociita kun la formokontrolo al kiu ĝi rilatas uzante aria-describedby. Alternative, certigu, ke la signifo (ekzemple, la fakto ke estas averto por aparta tekst-enirkampo) estas transdonita en iu alia formo, kiel ekzemple ŝanĝado de la teksto de la reala <label>asociita kun la formularkontrolo.

Kvankam la sekvaj ekzemploj jam mencias la validigan staton de siaj respektivaj formkontroloj en la <label>teksto mem, la supra tekniko (uzante .sr-onlytekston kaj aria-describedby) estis inkluzivita por ilustraj celoj.

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

Laŭvolaj ikonoj en horizontalaj kaj enliniaj formoj

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

Laŭvolaj ikonoj kun kaŝitaj `.sr-only`etikedoj

Se vi uzas la .sr-onlyklason por kaŝi formularan kontrolon <label>(prefere ol uzi aliajn etikedajn opciojn, kiel la aria-labelatributon), Bootstrap aŭtomate ĝustigos la pozicion de la ikono post kiam ĝi estas aldonita.

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

Kontrolu grandecon

Agordu altecojn uzante klasojn kiel .input-lg, kaj agordu larĝojn per kradaj kolumnaj klasoj kiel .col-lg-*.

Alteco grandeco

Kreu pli altajn aŭ pli mallongajn formkontrolojn, kiuj kongruas kun butongrandoj.

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

Horizontala formo grupgrandoj

Rapide grandumi etikedojn kaj formkontrolojn ene .form-horizontalaldonante .form-group-lgaŭ .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>

Kolumna grandeco

Envolvu enigaĵojn en kradaj kolumnoj, aŭ iu ajn kutima gepatra elemento, por facile devigi deziratajn larĝojn.

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

Butonetikedoj

Uzu la butonklasojn sur <a>, <button>, aŭ <input>elemento.

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

Kunteksta uzado

Dum butonklasoj povas esti uzataj sur <a>kaj <button>elementoj, nur <button>elementoj estas subtenataj ene de niaj nav kaj navbar-komponentoj.

Ligiloj agante kiel butonoj

Se la <a>elementoj estas uzataj por funkcii kiel butonoj - ekigante enpaĝan funkcion, anstataŭ navigi al alia dokumento aŭ sekcio ene de la nuna paĝo - ili ankaŭ devus ricevi taŭgan role="button".

Trans-retumila bildigo

Kiel plej bona praktiko, ni tre rekomendas uzi la <button>elementon kiam ajn eblas por certigi kongruan trans-retumilon bildigon.

Interalie, estas cimo en Fajrovulpo <30 , kiu malhelpas al ni agordi la butonojn bazitajn sur, kaŭzante, ke ili ne precize kongruas kun la alteco de aliaj butonoj en Fajrovulpo line-height.<input>

Opcioj

Uzu iun ajn el la disponeblaj butonklasoj por rapide krei stilitan butonon.

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

Transdonante signifon al helpaj teknologioj

Uzi koloron por aldoni signifon al butono nur provizas vidan indikon, kiu ne estos transdonita al uzantoj de helpaj teknologioj - kiel ekranlegiloj. Certigu, ke informoj indikitaj per la koloro estas aŭ evidenta de la enhavo mem (la videbla teksto de la butono), aŭ estas inkluzivita per alternativaj rimedoj, kiel aldona teksto kaŝita kun la .sr-onlyklaso.

Grandecoj

Ĉu vi volas pli grandajn aŭ pli malgrandajn butonojn? Aldonu .btn-lg, .btn-sm, aŭ .btn-xspor pliaj grandecoj.

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

Kreu bloknivelajn butonojn—tiujn kiuj ampleksas la tutan larĝon de gepatro— aldonante .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>

Aktiva stato

Butonoj aperos premitaj (kun pli malhela fono, pli malhela rando kaj enmetita ombro) kiam aktivaj. Por <button>elementoj, ĉi tio estas farita per :active. Por <a>elementoj, ĝi estas farita per .active. Tamen, vi povas uzi .activesur <button>s (kaj inkluzivi la aria-pressed="true"atributon) se vi bezonas reprodukti la aktivan staton programe.

Butona elemento

Ne necesas aldoni :activeĉar ĝi estas pseŭdoklaso, sed se vi bezonas devigi la saman aspekton, daŭrigu kaj aldonu .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>

Ankro-elemento

Aldonu la .activeklason al <a>butonoj.

Primara ligilo Ligo

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

Malfunkciigita ŝtato

Faru butonojn aspekti neklakeblaj per velkado de ili reen per opacity.

Butona elemento

Aldonu la disabledatributon al <button>butonoj.

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

Inter-retumila kongruo

Se vi aldonas la disabledatributon al <button>, Interreto Explorer 9 kaj sube faros tekston griza kun aĉa tekst-ombro, kiun ni ne povas ripari.

Ankro-elemento

Aldonu la .disabledklason al <a>butonoj.

Primara ligilo Ligo

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

Ni uzas .disabledĉi tie kiel utilan klason, similan al la komuna .activeklaso, do ne necesas prefikso.

Ligo-funkcieca averto

Ĉi tiu klaso uzas pointer-events: nonepor provi malŝalti la ligan funkcion de <a>s, sed tiu CSS-posedaĵo ankoraŭ ne estas normigita kaj ne estas plene subtenata en Opera 18 kaj sube, aŭ en Internet Explorer 11. Krome, eĉ en retumiloj kiuj subtenas pointer-events: noneklavaron. navigado restas netuŝita, kio signifas, ke videblaj klavaruzantoj kaj uzantoj de helpaj teknologioj ankoraŭ povos aktivigi ĉi tiujn ligilojn. Do por esti sekura, uzu kutiman JavaScript por malŝalti tiajn ligilojn.

Respondema bildoj

Bildoj en Bootstrap 3 povas fariĝi respondemaj amika per aldono de la .img-responsiveklaso. Ĉi tio validas max-width: 100%;, height: auto;kaj display: block;al la bildo tiel ke ĝi skalas bele al la gepatra elemento.

Por centri bildojn kiuj uzas la .img-responsiveklason, uzu .center-blockanstataŭ .text-center. Vidu la sekcion de helpklasoj por pliaj detaloj pri .center-blockuzado.

SVG-bildoj kaj IE 8-10

En Internet Explorer 8-10, SVG-bildoj kun .img-responsiveestas misproporcie grandaj. Por ripari ĉi tion, aldonu width: 100% \9;kie necese. Bootstrap ne aplikas ĉi tion aŭtomate ĉar ĝi kaŭzas komplikaĵojn al aliaj bildformatoj.

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

Bildaj formoj

Aldonu klasojn al <img>elemento por facile stiligi bildojn en iu ajn projekto.

Inter-retumila kongruo

Memoru, ke Interreto Explorer 8 mankas subteno por rondigitaj anguloj.

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

Kuntekstaj koloroj

Transdonu signifon per koloro per manpleno da emfazaj utilaj klasoj. Ĉi tiuj ankaŭ povas esti aplikataj al ligiloj kaj mallumiĝos dum ŝvebado same kiel niaj defaŭltaj ligaj stiloj.

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

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

Traktante specifecon

Foje emfazaj klasoj ne povas esti aplikataj pro la specifeco de alia elektilo. Plejofte, sufiĉa solvo estas envolvi vian tekston en <span>kun la klaso.

Transdonante signifon al helpaj teknologioj

Uzi koloron por aldoni signifon nur provizas vidan indikon, kiu ne estos transdonita al uzantoj de helpaj teknologioj - kiel ekranlegiloj. Certigu, ke informoj indikitaj per la koloro estas aŭ evidentaj de la enhavo mem (la kontekstaj koloroj estas nur uzataj por plifortigi signifon kiu jam ĉeestas en la teksto/markado), aŭ estas inkluditaj per alternativaj rimedoj, kiel aldona teksto kaŝita kun la .sr-onlyklaso . .

Kuntekstaj fonoj

Simile al la kuntekstaj tekstaj kolorklasoj, facile agordu la fonon de elemento al iu ajn kunteksta klaso. Ankraj komponantoj mallumiĝos dum ŝvebado, same kiel la tekstaj klasoj.

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

Traktante specifecon

Foje kontekstaj fonklasoj ne povas esti aplikataj pro la specifeco de alia elektilo. En iuj kazoj, sufiĉa solvo estas envolvi la enhavon de via elemento en <div>kun la klaso.

Transdonante signifon al helpaj teknologioj

Kiel kun kuntekstaj koloroj , certigu, ke ajna signifo transdonita per koloro ankaŭ estas transdonita en formato kiu ne estas pure prezenta.

Fermu ikonon

Uzu la ĝeneralan fermikonon por forĵeti enhavon kiel modalojn kaj atentigojn.

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

Carets

Uzu signojn por indiki falmenuman funkcion kaj direkton. Rimarku, ke la defaŭlta kamero inversiĝos aŭtomate en falmenuoj .

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

Rapidaj flosas

Flosigu elementon maldekstren aŭ dekstren kun klaso. !importantestas inkluzivita por eviti specifecajn problemojn. Klasoj ankaŭ povas esti uzataj kiel miksinoj.

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

Centri enhavblokojn

Agordu elementon al display: blockkaj centri per margin. Havebla kiel miksaĵo kaj klaso.

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

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

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

Clearfix

Facile malplenigu floats aldonante .clearfix al la gepatra elemento . Utiligas la mikroklaran fiksaĵon kiel popularigitan de Nicolas Gallagher. Povas ankaŭ esti uzata kiel miksaĵo.

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

Montri kaj kaŝi enhavon

Devigi elementon esti montrita aŭ kaŝita ( inkluzive por ekranlegiloj ) per la uzo de .showkaj .hiddenklasoj. Ĉi tiuj klasoj uzas !importantpor eviti specifajn konfliktojn, same kiel la rapidaj flosiloj . Ili estas disponeblaj nur por bloknivela ŝanĝado. Ili ankaŭ povas esti uzataj kiel miksinoj.

.hidedisponeblas, sed ĝi ne ĉiam influas ekranlegilojn kaj estas malrekomendita ekde v3.0.1. Uzu .hiddenaŭ .sr-onlyanstataŭe.

Krome, .invisiblepovas esti uzata por ŝanĝi nur la videblecon de elemento, tio signifas, ke displayĝi ne estas modifita kaj la elemento ankoraŭ povas influi la fluon de la dokumento.

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

Ekranlegilo kaj klavara navigado enhavo

Kaŝi elementon al ĉiuj aparatoj krom ekranlegiloj kun .sr-only. Kombinu .sr-onlykun .sr-only-focusablepor montri la elementon denove kiam ĝi estas fokusita (ekz. de klavara uzanto). Necesas por sekvi plej bonajn praktikojn pri alirebleco . Povas ankaŭ esti uzata kiel miksaĵoj.

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

Anstataŭigo de bildo

Uzu la .text-hideklason aŭ miksaĵon por helpi anstataŭigi la tekstan enhavon de elemento per fonbildo.

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

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

Por pli rapida evoluado por poŝtelefono, uzu ĉi tiujn utilajn klasojn por montri kaj kaŝi enhavon per aparato per amaskomunikila demando. Ankaŭ inkluzivitaj utilaj klasoj por ŝanĝi enhavon kiam presite.

Provu uzi ĉi tiujn sur limigita bazo kaj eviti krei tute malsamajn versiojn de la sama retejo. Anstataŭe, uzu ilin por kompletigi la prezenton de ĉiu aparato.

Disponeblaj klasoj

Uzu ununuran aŭ kombinaĵon de la disponeblaj klasoj por ŝanĝi enhavon tra vidpunktoj.

	Ekstra malgrandaj aparatojTelefonoj (<768px)	Malgrandaj aparatojTablojdoj (≥768px)	Mezaj aparatojLabortabloj (≥992px)	Grandaj aparatojLabortabloj (≥1200px)
`.visible-xs-*`	Videbla	Kaŝita	Kaŝita	Kaŝita
`.visible-sm-*`	Kaŝita	Videbla	Kaŝita	Kaŝita
`.visible-md-*`	Kaŝita	Kaŝita	Videbla	Kaŝita
`.visible-lg-*`	Kaŝita	Kaŝita	Kaŝita	Videbla
`.hidden-xs`	Kaŝita	Videbla	Videbla	Videbla
`.hidden-sm`	Videbla	Kaŝita	Videbla	Videbla
`.hidden-md`	Videbla	Videbla	Kaŝita	Videbla
`.hidden-lg`	Videbla	Videbla	Videbla	Kaŝita

Ekde v3.2.0, la .visible-*-*klasoj por ĉiu rompopunkto venas en tri varioj, unu por ĉiu CSS- displayposedaĵvaloro listigita malsupre.

Grupo de klasoj	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Do, por ekstra malgrandaj ( xs) ekranoj ekzemple, la disponeblaj .visible-*-*klasoj estas: .visible-xs-block, .visible-xs-inline, kaj .visible-xs-inline-block.

La klasoj .visible-xs, .visible-sm, .visible-md, kaj .visible-lgankaŭ ekzistas, sed estas malrekomenditaj ekde v3.2.0 . Ili estas proksimume ekvivalentaj al .visible-*-block, krom kun aldonaj specialaj kazoj por ŝanĝantaj <table>-rilataj elementoj.

Presaj klasoj

Simile al la regulaj respondemaj klasoj, uzu ĉi tiujn por ŝanĝi enhavon por presado.

Klasoj	Retumilo	Presi
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Kaŝita	Videbla
`.hidden-print`	Videbla	Kaŝita

La klaso .visible-printankaŭ ekzistas sed estas malrekomendita ekde v3.2.0. Ĝi estas proksimume ekvivalenta al .visible-print-block, krom kun kromaj specialaj kazoj por <table>-rilataj elementoj.

Testkazoj

Regrandigu vian retumilon aŭ ŝarĝu sur malsamaj aparatoj por testi la respondemajn utilajn klasojn.

Videbla sur...

Verdaj markmarkoj indikas, ke la elemento estas videbla en via nuna vidfenestro.

Ekstra malgranda ✔ Videbla sur x-malgranda

Malgranda ✔ Videbla sur malgranda

Meza ✔ Videbla sur mediumo

Granda ✔ Videbla sur granda

Ekstra malgranda kaj malgranda ✔ Videbla sur x-malgranda kaj malgranda

Mezaj kaj grandaj ✔ Videbla sur meza kaj granda

Ekstra malgranda kaj meza ✔ Videbla sur x-malgranda kaj meza

Malgranda kaj granda ✔ Videbla sur malgranda kaj granda

Ekstre malgranda kaj granda ✔ Videbla sur x-malgranda kaj granda

Malgranda kaj meza ✔ Videbla sur malgrandaj kaj mezaj

Kaŝita sur...

Ĉi tie, verdaj markmarkoj ankaŭ indikas, ke la elemento estas kaŝita en via nuna vidfenestro.

Ekstra malgranda ✔ Kaŝita sur x-malgranda

Malgranda ✔ Kaŝita sur malgranda

Meza ✔ Kaŝita sur mediumo

Granda ✔ Kaŝita sur granda

Ekstra malgranda kaj malgranda ✔ Kaŝita sur x-malgranda kaj malgranda

Mezaj kaj grandaj ✔ Kaŝita sur meza kaj granda

Ekstra malgranda kaj meza ✔ Kaŝita sur x-malgranda kaj meza

Malgranda kaj granda ✔ Kaŝita sur malgranda kaj granda

Ekstre malgranda kaj granda ✔ Kaŝita sur x-malgranda kaj granda

Malgranda kaj meza ✔ Kaŝita sur malgrandaj kaj mezaj

La CSS de Bootstrap estas konstruita sur Less, antaŭprocesoro kun plia funkcieco kiel variabloj, miksaĵoj kaj funkcioj por kompili CSS. Tiuj, kiuj serĉas uzi la fonton Malpli dosierojn anstataŭ niaj kompilitaj CSS-dosieroj, povas uzi la multajn variablojn kaj miksaĵojn, kiujn ni uzas tra la kadro.

Kradvariabloj kaj miksaĵoj estas kovritaj ene de la kradsistemo sekcio .

Kompilante Bootstrap

Bootstrap povas esti uzata en almenaŭ du manieroj: kun la kompilita CSS aŭ kun la fonto Malpli dosieroj. Por kompili la Malpli dosierojn, konsultu la sekcion Komenci pri kiel agordi vian evoluan medion por ruli la necesajn komandojn.

Triaj kompililoj povas funkcii kun Bootstrap, sed ili ne estas subtenataj de nia kerna teamo.

Variabloj

Variabloj estas uzataj tra la tuta projekto kiel maniero por centralizi kaj dividi ofte uzatajn valorojn kiel koloroj, interspaco aŭ tiparstakoj. Por kompleta paneo, bonvolu vidi la Customizer .

Koloroj

Facile uzu du kolorskemojn: grizskalo kaj semantika. Grizskalaj koloroj disponigas rapidan aliron al ofte uzataj nigraj nuancoj dum semantikaj inkluzivas diversajn kolorojn asignitajn al signifaj kontekstaj valoroj.

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

Uzu iun el ĉi tiuj koloraj variabloj kiel ili estas aŭ reasignu ilin al pli signifaj variabloj por via projekto.

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

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

Skafaldo

Manpleno da variabloj por rapide agordi ŝlosilajn elementojn de la skeleto de via retejo.

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

Ligiloj

Facile stilu viajn ligilojn kun la ĝusta koloro kun nur unu valoro.

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

Notu, ke la @link-hover-coloruzas funkcion, alian mirindan ilon de Less, por aŭtomate krei la ĝustan ŝveban koloron. Vi povas uzi darken, lighten, saturate, kaj desaturate.

Tipografio

Facile agordu vian tiparon, tekstograndecon, gvidadon kaj pli per kelkaj rapidaj variabloj. Bootstrap uzas ĉi tiujn ankaŭ por provizi facilajn tipografiajn miksaĵojn.

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

Ikonoj

Du rapidaj variabloj por agordi la lokon kaj dosiernomon de viaj ikonoj.

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

Komponentoj

Komponantoj ĉie en Bootstrap uzas iujn defaŭltajn variablojn por fiksi komunajn valorojn. Jen la plej ofte uzataj.

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

Vendistaj miksaĵoj

Vendistaj miksaĵoj estas miksaĵoj por helpi subteni plurajn foliumilojn inkluzivante ĉiujn koncernajn vendistajn prefiksojn en via kompilita CSS.

Skatolo-grandeco

Restarigu la skatolan modelon de viaj komponantoj per unuopa miksaĵo. Por kunteksto, vidu ĉi tiun helpeman artikolon de Mozilo .

La miksaĵo estas malrekomendita ekde v3.2.0, kun la enkonduko de Autoprefixer. Por konservi malantaŭan kongruecon, Bootstrap daŭre uzos la miksaĵon interne ĝis Bootstrap v4.

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

Rondigitaj anguloj

Hodiaŭ ĉiuj modernaj retumiloj subtenas la ne-prefiksan border-radiusposedaĵon. Kiel tia, ne ekzistas .border-radius()miksaĵo, sed Bootstrap inkluzivas ŝparvojojn por rapide rondigi du angulojn sur aparta flanko de objekto.

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

Skatolo (Faligi) ombroj

Se via celgrupo uzas la plej novajn kaj plej bonegajn retumilon kaj aparatojn, nepre nur uzi la box-shadowposedaĵon memstare. Se vi bezonas subtenon por pli malnovaj Android (antaŭ-v4) kaj iOS-aparatoj (antaŭ iOS 5), uzu la malrekomenditan miksaĵon por preni la postulatan -webkitprefikson.

La miksaĵo estas malrekomendita ekde v3.1.0, ĉar Bootstrap ne oficiale subtenas la malmodernajn platformojn, kiuj ne subtenas la norman posedaĵon. Por konservi malantaŭan kongruecon, Bootstrap daŭre uzos la miksaĵon interne ĝis Bootstrap v4.

Nepre uzu rgba()kolorojn en viaj skatolaj ombroj, por ke ili miksu kiel eble plej perfekte kun fonoj.

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

Transiroj

Multoblaj miksaĵoj por fleksebleco. Agordu ĉiujn transirajn informojn per unu, aŭ specifu apartan prokraston kaj daŭron laŭbezone.

La miksaĵoj estas malrekomenditaj ekde v3.2.0, kun la enkonduko de Autoprefixer. Por konservi malantaŭan kongruecon, Bootstrap daŭre uzos la miksaĵojn interne ĝis 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;
}

Transformoj

Rotacii, skali, traduki (movu), aŭ deklini ajnan objekton.

La miksaĵoj estas malrekomenditaj ekde v3.2.0, kun la enkonduko de Autoprefixer. Por konservi malantaŭan kongruecon, Bootstrap daŭre uzos la miksaĵojn interne ĝis Bootstrap v4.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

Animacioj

Ununura miksaĵo por uzi ĉiujn animaciajn ecojn de CSS3 en unu deklaro kaj aliajn miksaĵojn por individuaj propraĵoj.

La miksaĵoj estas malrekomenditaj ekde v3.2.0, kun la enkonduko de Autoprefixer. Por konservi malantaŭan kongruecon, Bootstrap daŭre uzos la miksaĵojn interne ĝis Bootstrap v4.

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

Opakeco

Agordu la opakecon por ĉiuj retumiloj kaj provizi filterrezervilon por IE8.

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

Anstataŭilo teksto

Provizu kuntekston por formularaj kontroloj ene de ĉiu kampo.

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

Kolumnoj

Generu kolumnojn per CSS ene de ununura elemento.

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

Gradientoj

Facile turnu iujn ajn du kolorojn en fonan gradienton. Pli progresiĝu kaj starigu direkton, uzu tri kolorojn aŭ uzu radialan gradienton. Per unuopa miksaĵo vi ricevas ĉiujn prefiksajn sintaksojn, kiujn vi bezonos.

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

Vi ankaŭ povas specifi la angulon de norma dukolora, linia gradiento:

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

Se vi bezonas barbir-strian stilan gradienton, ankaŭ tio estas facila. Nur specifu ununuran koloron kaj ni supermetos diafanan blankan strion.

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

Pliigu la antaŭan kaj uzu tri kolorojn anstataŭe. Agordu la unuan koloron, la duan koloron, la kolorhalton de la dua koloro (procentvaloro kiel 25%) kaj la trian koloron per ĉi tiuj miksaĵoj:

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

Atentu! Se vi iam bezonos forigi gradienton, nepre forigi ajnan IE-specifan filter, kiun vi eble aldonis. Vi povas fari tion uzante la .reset-filter()miksaĵon apud background-image: none;.

Utilaj miksaĵoj

Utilaj miksinoj estas miksinoj kiuj kombinas alie senrilatajn CSS-ecojn por atingi specifan celon aŭ taskon.

Clearfix

Forgesu aldoni class="clearfix"al iu ajn elemento kaj anstataŭe aldonu la .clearfix()miksaĵon kie konvene. Uzas la mikroklarfikson de Nicolas Gallagher .

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

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

Horizontala centrado

Rapide centri ajnan elementon ene de sia patro. Postulas widthaŭ max-widthagordas.

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

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

Dimensigaj helpantoj

Specifu la dimensiojn de objekto pli facile.

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

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

Regrandigeblaj tekstaroj

Facile agordu la opciojn de regrandigo por iu ajn tekstareo aŭ iu ajn alia elemento. Defaŭlte al normala retumila konduto ( both).

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

Detranĉante tekston

Facile detranĉu tekston per elipso per unuopa miksaĵo. Postulas elementon esti blockaŭ inline-blocknivelo.

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

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

Bildoj de retino

Specifu du bildvojojn kaj la @1x bildajn dimensiojn, kaj Bootstrap provizos @2x amaskomunikilan demandon. Se vi havas multajn bildojn por servi, konsideru skribi vian retinan bildon CSS permane en ununura amaskomunikila demando.

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

Dum Bootstrap estas konstruita sur Less, ĝi ankaŭ havas oficialan Sass-havenon . Ni konservas ĝin en aparta GitHub-deponejo kaj pritraktas ĝisdatigojn per konverta skripto.

Kio estas inkluzivita

Ĉar la Sass-haveno havas apartan repo kaj servas iomete malsaman publikon, la enhavo de la projekto multe diferencas de la ĉefa Bootstrap-projekto. Ĉi tio certigas, ke la Sass-haveno estas tiel kongrua kun kiel eble plej multaj Sass-bazitaj sistemoj.

Vojo	Priskribo
`lib/`	Ruby-gemkodo (Sass-agordo, Rails kaj Compass-integriĝoj)
`tasks/`	Konvertilaj skriptoj (fariĝante kontraŭflue Less al Sass)
`test/`	Kompilaj provoj
`templates/`	Kompasa pakaĵo manifesto
`vendor/assets/`	Sass, JavaScript kaj tipardosieroj
`Rakefile`	Internaj taskoj, kiel rasti kaj konverti

Vizitu la GitHub-deponejon de la haveno Sass por vidi ĉi tiujn dosierojn en ago.

Instalado

Por informoj pri kiel instali kaj uzi Bootstrap por Sass, konsultu la GitHub-deponejon readme . Ĝi estas la plej ĝisdata fonto kaj inkluzivas informojn por uzi kun Rails, Compass kaj normaj Sass-projektoj.

Bootstrap por Sass

CSS

Superrigardo

HTML5-dokumentotipo

Poŝtelefono unue

Tipografio kaj ligiloj

Normaligi.css

Ujoj

Kradsistemo

Enkonduko

Demandoj pri amaskomunikiloj

Kradaj opcioj

Ekzemplo: Stakitaj-al-horizontalaj

Ekzemplo: Fluida ujo

Ekzemplo: Poŝtelefono kaj labortablo

Ekzemplo: Poŝtelefono, tablojdo, labortablo

Ekzemplo: Kolumna envolvado

Respondema kolumno rekomencigas

Forigi kanalojn

Ofsecaj kolumnoj

Nestokolumnoj

Kolumna ordigo

Malpli miksaĵoj kaj variabloj

Variabloj

Miksinoj

Ekzempla uzado

Tipografio

Titoloj

h1. Bootstrap-titolo

h2. Bootstrap-titolo

h3. Bootstrap-titolo

h4. Bootstrap-titolo

h5. Bootstrap-titolo

h6. Bootstrap-titolo

h1. Bootstrap-titolo Malĉefa teksto

h2. Bootstrap-titolo Malĉefa teksto

h3. Bootstrap-titolo Malĉefa teksto

h4. Bootstrap-titolo Malĉefa teksto

h5. Bootstrap-titolo Malĉefa teksto

h6. Bootstrap-titolo Malĉefa teksto

Korpa kopio

Ĉefa korpokopio

Konstruita kun Malpli

Enliniaj tekstaj elementoj

Markita teksto

Forigita teksto

Striita teksto

Enmetita teksto

Substrekita teksto

Malgranda teksto

Aŭdaca

Kursivo

Alternaj elementoj

Alineaj klasoj

Transformaj klasoj

Mallongigoj

Baza mallongigo

Inicialismo

Adresoj

Blokcitaĵoj

Defaŭlta blokcitaĵo

Opcioj de blokquotetoj

Nomante fonton

Alternaj ekranoj

Listoj

Neordigita

Ordonita

Senstila

En linio

Priskribo

Horizontala priskribo

Aŭto-tranĉiga

Kodo

En linio

Enigo de la uzanto

Baza bloko

Variabloj

Specimena eligo

Tabeloj

Baza ekzemplo

Striitaj vicoj

Demo `:focus`-ŝtato

Averto pri ligfunkcieco de`<a>`

Laŭvolaj ikonoj kun kaŝitaj `.sr-only`etikedoj