CSS
Ba paramètres ya CSS ya mokili mobimba, ba éléments HTML ya moboko oyo esalemi na style mpe ematisami na ba classes extensibles, mpe système ya grille ya liboso.
Botali ya mozindo
Bozua lowdown na ba pièces clés ya infrastructure ya Bootstrap, y compris approche na biso ya développement web ya malamu, ya mbangu, ya makasi.
Lolenge ya doctype ya HTML5
Bootstrap esalelaka ba éléments HTML mosusu mpe ba propriétés CSS oyo esengaka kosalela doctype HTML5. Botia yango na ebandeli ya ba projets na bino nionso.
<!doctype html>
<html lang="en">
...
</html>Mobile liboso
Na Bootstrap 2, tobakisaki ba styles optionnels mobiles amical pona ba aspects clés ya cadre. Na Bootstrap 3, tokomi lisusu projet mpo ezala mobile amical banda ebandeli. Na esika ya kobakisa na ba styles mobiles optionnels, bazali kotumba yango mbala moko na kati ya moboko. Kutu, Bootstrap ezali liboso ya telefone ya mabɔkɔ . Ba styles ya liboso ya mobile ekoki kozwama na bibliothèque mobimba na esika ya kozwa yango na ba fichiers ekeseni.
Mpo na kosala ete osala malamu mpe osimba zoom, bakisa meta tag ya viewport na <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">Okoki ko désactiver ba capacités ya zoom na ba appareils mobiles na kobakisa user-scalable=nona meta tag ya viewport. Yango e désactiver zoom, elingi koloba ba usagers bazali kaka capable ya ko défiler, mpe esali que site na yo ezala mua mingi lokola application native. Na mobimba, tozali kopesa toli te na site nyonso, yango wana kebá!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">Typographie mpe ba liens
Bootstrap etie ba styles ya moboko ya elakiseli ya mokili mobimba, typographie, mpe ya lien. Mingimingi, biso:
- Set
background-color: #fff;na ...body - Salelá bizaleli
@font-family-base,@font-size-base, mpe@line-height-baselokola moboko na biso ya konyata - Set couleur ya lien global via
@link-colorpe appliquer ba sous-lignes ya lien kaka na:hover
Ba styles oyo ekoki kozwama na kati ya scaffolding.less.
Kosala normalisation.css
Mpo na kobongisa bozongisi ya navigateur croisé, tosalelaka Normalize.css , projet ya Nicolas Gallagher mpe Jonathan Neal .
Ba récipients
Bootstrap esengaka élément contenant pona ko envelopper ba contenus ya site pe ko louer système na biso ya grille. Okoki kopona moko ya ba conteneurs mibale oyo okosalela na ba projets na yo. Simbá ete, mpo na paddingmpe mingi, ata moko te ya eloko oyo ezali na kati ya biloko oyo ezali na kati.
Salelá .containermpo na eloko oyo ezali koyanola na bonene oyo etɛngamá te.
<div class="container">
...
</div>Salelá .container-fluidmpo na eloko oyo ezali na bonene mobimba, oyo ezali na bonene mobimba ya esika na yo ya kotala.
<div class="container-fluid">
...
</div>Système ya grille
Bootstrap ezali na système ya grille ya fluide ya liboso oyo ezo répondre, mobile oyo ezo échelle na ndenge esengeli jusqu'à 12 colonnes tango taille ya appareil to ya port de vue ezo koma. Ezali na ba kelasi oyo esili kolimbolama liboso mpo na ba options ya layout ya pete, mpe lisusu ba mixins ya makasi mpo na kobimisa ba layouts ya sémantique mingi .
Maloba ya ebandeli
Ba systèmes ya grille esalemaka pona kosala ba layouts ya page na nzela ya série ya ba lignes na ba colonnes oyo ezo bomba contenus na yo. Tala ndenge système ya grille Bootstrap esalaka:
- Esengeli kotya milɔngɔ na kati ya
.container(fixe-width) to.container-fluid(full-width) mpo na kosala alignment mpe padding malamu. - Salelá milɔngɔ mpo na kosala bituluku ya makonzí oyo ezali na nse.
- Esengeli kotya makambo na kati ya makonzí, mpe kaka makonzí nde ekoki kozala bana ya mbala moko ya milɔngɔ.
- Ba kelasi ya grille oyo esili kolimbolama liboso lokola
.rowmpe.col-xs-4ezali mpo na kosala nokinoki ba layouts ya grille. Ba mixins moke ekoki pe kosalelama pona ba layouts sémantiques mingi. - Ba colonnes esala ba gouttières (ba espaces entre contenus ya colonne) via
padding. Padding wana ezali offset na ba lignes pona colonne ya liboso pe ya suka via marge négative na.rows. - Marge négative ezali pourquoi ba exemples oyo ezali awa na se ezali outdented. Ezali mpo ete makambo oyo ezali na kati ya makonzí ya grille ezala na molɔngɔ na makambo oyo ezali na kati ya grille te.
- Ba colonnes ya grille esalemi na kolakisa motango ya ba colonnes zomi na mibale oyo ezali oyo olingi ko span. Na ndakisa, makonzí misato oyo ekokani ekosalela misato
.col-xs-4. - Soki batye makonzí koleka 12 na kati ya molɔngɔ moko, etuluku mokomoko ya makonzí mosusu ekozipama, lokola unité moko, na molɔngɔ ya sika.
- Ba classes ya grille esalemaka na ba dispositifs oyo ezali na ba largeurs ya écran eleki to ekokani na ba taille ya ba points de rupture, mpe ezo overrider ba classes ya grille oyo etali ba appareils ya mike. Yango wana, par exemple ko appliquer
.col-md-*classe nionso na élément moko ekozala kaka te na effet na styling na yango na ba appareils moyennes mais pe na ba appareils ya minene soki.col-lg-*classe moko ezali te.
Tala bandakisa mpo na kosalela mitinda oyo na code na yo.
Mituna ya ba médias
Tosalelaka ba requêtes ya média oyo elandi na ba fichiers na biso ya Moins pona kosala ba points de rupture ya clé na système na biso ya grille.
/* 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) { ... }Tozali ntango mosusu kopanzana na mituna oyo ya media mpo na kokɔtisa a max-widthmpo na kopekisa CSS na ensemble moko ya moke ya baaparɛyi.
@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) { ... }Ba options ya grille
Tala ndenge nini makambo ya système ya grille ya Bootstrap esalaka na kati ya ba dispositifs ebele na tableau ya maboko.
| Ba appareils ya mike mike mingi Ba téléphones (<768px) | Ba appareils ya mike Tablets (≥768px) | Ba dispositifs ya moyenne Ba bureaux (≥992px) | Ba appareils ya minene Ba bureaux (≥1200px) | |
|---|---|---|---|---|
| Comportement ya grille | Horizontal na tango nionso | Ekweyi mpo na kobanda, horizontal likolo ya ba points de rupture | ||
| Largeur ya récipient | Moko te (auto) . | 750px ezali | 970px ezali | 1170px na yango |
| Prefixe ya kelasi | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| # ya makonzí | 12 | |||
| Bolai ya makonzí | Auto | ~62px | ~81px | ~97px |
| Bolai ya gouttière | 30px (15px na ngambo moko na moko ya colonne) | |||
| Esika ya kofanda | Iyo | |||
| Ba offsets | Iyo | |||
| Kosala komande ya makonzí | Iyo | |||
Ndakisa: Etamboli-na-horizontal
Na kosalelaka ensemble moko ya .col-md-*ba classes ya grille, okoki kosala système ya grille ya base oyo ebandi ebele na ba appareils mobiles na ba appareils tablettes (gamme extra petite à petite) avant ekoma horizontal na ba appareils ya bureau (moyenne). Tia makonzí ya grille na kati ya .row.
.kol-md-1
.kol-md-1
.kol-md-1
.kol-md-1
.kol-md-1
.kol-md-1
.kol-md-1
.kol-md-1
.kol-md-1
.kol-md-1
.kol-md-1
.kol-md-1
.col-md-8 oyo ezali na kati
.col-md-4 oyo ezali
.col-md-4 oyo ezali
.col-md-4 oyo ezali
.col-md-4 oyo ezali
.kolo-md-6
.kolo-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>Ndakisa: Esika oyo batyaka mai
Bobongola ndenge nyonso ya grille ya bonene oyo etɛngamá te na ebongiseli ya bonene mobimba na kobongola oyo ya libándá na yo .containerna .container-fluid.
<div class="container-fluid">
<div class="row">
...
</div>
</div>Ndakisa: Mobile mpe bureau
Olingi te ba colonnes na yo ezala kaka ebele na ba appareils ya mike? Salelá bakelasi ya grille ya aparɛyi ya moke mpe ya monene mingi na kobakisáká .col-xs-* .col-md-*na makonzí na yo. Tala ndakisa oyo ezali awa na nse mpo na koyeba malamu ndenge oyo nyonso esalaka.
.kolo-xs-12 .kol-md-8
.kol-xs-6 .kol-md-4
.kol-xs-6 .kol-md-4
.kol-xs-6 .kol-md-4
.kol-xs-6 .kol-md-4
.kol-xs-6
.kol-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>Ndakisa: Mobile, tablette, bureau
Tongela na ndakisa ya liboso na kosalaka ba layouts kutu ya dynamique mpe ya makasi koleka na ba .col-sm-*classes ya tablette.
.kol-xs-12 .kol-sm-6 .kol-md-8
.kol-xs-6 .kol-md-4
.kol-xs-6 .kol-sm-4
.kol-xs-6 .kol-sm-4
.kol-xs-6 .kol-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>Ndakisa: Kozipa makonzí
Soki batye makonzí koleka 12 na kati ya molɔngɔ moko, etuluku mokomoko ya makonzí mosusu ekozipama, lokola unité moko, na molɔngɔ ya sika.
.col-xs-9 oyo ezali na kati
.col-xs-4
Lokola 9 + 4 = 13 > 12, div oyo ya 4 colonne-largeur ezuaka enveloppé na ligne ya sika lokola unité moko contigue.
Lokola 9 + 4 = 13 > 12, div oyo ya 4 colonne-largeur ezuaka enveloppé na ligne ya sika lokola unité moko contigue.
.col-xs-6
Ba colonnes oyo elandi ezali kokoba na nzela ya ligne ya sika.
Ba colonnes oyo elandi ezali kokoba na nzela ya ligne ya sika.
<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 > 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>Ba réinitialisations ya colonne oyo ezo répondre
Na ba niveaux minei ya ba grilles oyo ezali ozali bound ya kokima na makambo esika, na ba points de rupture mosusu, ba colonnes na yo epanzani mpenza malamu te lokola moko ezali molai koleka mosusu. Mpo na kobongisa yango, salelá kosangisa ya a .clearfixmpe kelasi na biso ya utilité oyo eyanolaka .
.col-xs-6 .col-sm-3
Bobongola bonene ya
esika na yo ya kotala to tala yango na telefone na yo mpo na ndakisa.
esika na yo ya kotala to tala yango na telefone na yo mpo na ndakisa.
.kol-xs-6 .kol-sm-3
.kol-xs-6 .kol-sm-3
.kol-xs-6 .kol-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>Longola kopɛtola makonzí na bisika ya kobuka oyo ezali koyanola, ekoki kozala ete osengeli kozongisa na esika na yango ba offsets, kopusama, to kobenda . Tala yango na mosala na ndakisa ya grille .
<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>Longola ba gouttières
Longola ba gouttières na molongo moko pe eza ba colonnes na .row-no-guttersclasse.
.kolo-xs-12 .kol-md-8
.kol-xs-6 .kol-md-4
.kol-xs-6 .kol-md-4
.kol-xs-6 .kol-md-4
.kol-xs-6 .kol-md-4
.kol-xs-6
.kol-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>Kosala offset ya ba colonnes
Bokende na makonzí na lobɔkɔ ya mobali na kosaleláká .col-md-offset-*bakelasi. Bakelasi yango ebakisaka marge ya lobɔkɔ ya mwasi ya likoló na *makonzí. Na ndakisa, .col-md-offset-4etambolaka .col-md-4likoló ya makonzí minei.
.col-md-4 oyo ezali
.col-md-4 .col-md-bozangisi-4
.col-md-3 .col-md-bozangisi-3
.col-md-3 .col-md-bozangisi-3
.col-md-6 .col-md-bozangisi-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>Okoki pe ko overrider ba offsets na ba niveaux ya grille ya se na ba .col-*-offset-0classes.
<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>Ba colonnes ya kosala zumbu
Mpo na kosala nest ya makambo na yo na grille ya liboso, bakisa ya sika .rowmpe ensemble ya .col-sm-*ba colonnes na kati ya .col-sm-*colonne oyo ezali. Milɔngɔ́ oyo ekangami esengeli kozala na ensemble ya makonzí oyo ebakisami kino na 12 to na nse (esengeli te osalela makonzí nyonso 12 oyo ezali).
Niveau ya 1: .col-sm-9
Niveau ya 2: .col-xs-8 .col-sm-6
Niveau ya 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>Kosala komande ya makonzí
Bobongola na pete ordre ya ba colonnes ya grille na biso oyo etongami na kati na .col-md-push-*ba .col-md-pull-*classes ya modificateur.
.col-md-9 .col-md-kopusaka-3
.col-md-3 .kolo-md-kobenda-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>Moins de mixins na ba variables
En plus ya ba classes ya grille préconstruites pona ba layouts ya mbangu, Bootstrap ezali na ba variables Less na ba mixins pona ko produire noki ba layouts na yo moko simple, sémantique.
Ba variables oyo ezali
Ba variables e déterminer nombre ya ba colonnes, largeur ya gouttière, na point ya requête ya media oyo esengeli kobanda ba colonnes flottante. Tosalelaka oyo mpo na kobimisa ba classes ya grille oyo esili kolimbolama liboso oyo ekomami likolo, mpe lisusu mpo na ba mixins personnalisés oyo etangami awa na se.
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;Ba mixins
Ba mixins esalelamaka elongo na ba variables ya grille pona kobimisa CSS sémantique pona ba colonne ya grille moko moko.
// 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));
}
}Ndakisa ya bosaleli
Okoki ko modifier ba variables na ba valeurs personnalisées na yo moko, to kosalela kaka ba mixins na ba valeurs na bango ya défaut. Tala ndakisa ya kosalela ba paramètres par défaut mpo na kosala layout ya ba colonnes mibale na espace entre.
.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>Typographie
Mitó ya makambo
Mitó ya makambo nyonso ya HTML, <h1>na nzela ya <h6>, ezali. .h1na nzela ya .h6bakelasi ezali mpe, mpo na ntango olingi kokokana na lolenge ya makomi ya motó ya likambo kasi olingi kaka ete makomi na yo emonana na kati ya molɔngɔ.
h1. Motó ya likambo ya bootstrap |
Semi-gras 36px |
h2. Motó ya likambo ya bootstrap |
Semi-bold 30px |
h3. Motó ya likambo ya bootstrap |
Semi-gras 24px |
h4. Motó ya likambo ya bootstrap |
Semi-gras 18px |
h5. Motó ya likambo ya bootstrap |
Semi-gras 14px |
h6. Motó ya likambo ya bootstrap |
Semi-gras 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>Salá makomi ya pɛtɛɛ, ya mibale na motó ya likambo nyonso oyo ezali na <small>elembo ya monene to .smallkelasi.
h1. Motó ya likambo ya bootstrap Texte secondaire |
h2. Motó ya likambo ya bootstrap Texte secondaire |
h3. Motó ya likambo ya bootstrap Texte secondaire |
h4. Motó ya likambo ya bootstrap Texte secondaire |
h5. Motó ya likambo ya bootstrap Texte secondaire |
h6. Motó ya likambo ya bootstrap Texte secondaire |
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>Kopi ya nzoto
Bootstrap ya mokili mobimba font-sizeezali 14px , na a line-heightya 1.428 . Yango esalelami mpo na <body>mpe baparagrafe nyonso. En plus, <p>(ba paragraphes) bazuaka marge ya se ya ndambo ya hauteur ya ligne na bango calculé (10px par défaut).
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus na magnis ya kobota, nascetur ridiculus mus. Nullam id dolor id nibh ultricies mituka.
Cum sociis natoque penatibus na magnis ya kobota, nascetur ridiculus mus. Donec ullamcorper nulla oyo ezali na mbongo te. Duis mollis, est non commodo luctus, nisi erat ligula ya porte, eget lacinia odio sem nec elit. Donec ullamcorper nulla oyo ezali na mbongo te.
Maecenas sed diam eget risus varius blandit efandi amet non magna. Donec id elit non mi porta gravida na eget metus. Duis mollis, est non commodo luctus, nisi erat ligula ya porte, eget lacinia odio sem nec elit.
<p>...</p>Kopi ya nzoto ya plomb
Salá ete paragrafe moko ezala polele na kobakisáká .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor motɛkisi ya mbongo. Duis mollis, est oyo ezali na mbongo te.
<p class="lead">...</p>Etongami na Moke
Échelle typographique esalemi na ba variables mibale Moins na ba variables.less : @font-size-basena @line-height-base. Ya liboso ezali base font-size oyo esalelami na mobimba mpe ya mibale ezali base line-height. Tosalelaka ba variables wana mpe mwa matematiki ya pete mpo na kosala ba marges, ba paddings, mpe ba line-heights ya lolenge na biso nyonso mpe mingi mosusu. Personnaliser bango pe Bootstrap ezo adapter.
Elementos de texto en línea
Makomi oyo batye elembo
Mpo na kosala ete makomi ekende liboso mpo na ntina na yango na likambo mosusu, salelá <mark>elembo.
Okoki kosalela elembo ya elembo mpo nakobeta nsetenkoma.
You can use the mark tag to <mark>highlight</mark> text.Makomi oyo elongolami
Mpo na kolakisa ba blocs ya texte oyo elongolami salelá <del>tag.
Molongo oyo ya makomi ezali mpo na kotalela yango lokola makomi oyo elongolami.
<del>This line of text is meant to be treated as deleted text.</del>Kobɛta na nzela ya makomi
Mpo na kolakisa ba blocs ya texte oyo ezali lisusu na ntina te salelá <s>tag.
Molongo oyo ya makomi ezali mpo na kotalela yango lokola oyo ezali lisusu na bosikisiki te.
<s>This line of text is meant to be treated as no longer accurate.</s>Makomi oyo batye na kati
Mpo na kolakisa makambo oyo ebakisami na mokanda salelá <ins>elembo.
Molongo oyo ya makomi ezali mpo na kotalela yango lokola kobakisa na mokanda.
<ins>This line of text is meant to be treated as an addition to the document.</ins>Makomi oyo batye na nse na nse
Mpo na kotya na nse ya makomi salelá <u>elembo yango.
Molongo oyo ya makomi ekobongola ndenge batye yango na nse
<u>This line of text will render as underlined</u>Salelá bilembo ya kotya likebi na ndenge ya liboso ya HTML oyo ezali na mitindo ya pɛpɛlɛ.
Mokanda ya moke
Mpo na kolongola likebi na kati ya molɔngɔ to na ba blocs ya makomi, salelá <small>elembo mpo na kotya makomi na 85% ya bonene ya moboti. Ba éléments ya tête ezuaka ya bango moko pona ba éléments font-sizeencastrés .<small>
Okoki na lolenge mosusu kosalela eleman ya kati na molongo na .smallna esika ya nyonso <small>.
Molongo oyo ya makomi ezali mpo na kotalela yango lokola makomi ya mikemike.
<small>This line of text is meant to be treated as fine print.</small>Molende
Mpo na kopesa ntina na mwa ndambo ya makomi oyo ezali na kilo ya font oyo ezali kilo mingi.
Eteni ya makomi oyo elandi ebongolami lokola makomi ya moindo makasi .
<strong>rendered as bold text</strong>Makomi ya Italie
Mpo na konyata mwa ndambo ya makomi oyo ezali na makomi ya italike.
Eteni ya makomi oyo elandi ebongolami lokola makomi oyo ezali na italike .
<em>rendered as italicized text</em>Ba éléments alternatifs
Bozala na bonsomi ya kosalela <b>mpe <i>na HTML5. <b>ezali mpo na kobimisa maloba to bafraze kozanga kopesa ntina mosusu nzokande <i>ezali mingimingi mpo na mongongo, maloba ya tekiniki, mpe bongo na bongo.
Ba kelasi ya alignment
Facilement réaligner texte na ba composants na ba classes ya alignment ya texte.
Makomi oyo ezali na molɔngɔ na lobɔkɔ ya mwasi.
Mokanda oyo ezali na molɔngɔ na katikati.
Mokanda oyo ezali na molɔngɔ na lobɔkɔ ya mobali.
Mokanda oyo elongisami.
Ezali na texte ya enveloppe te.
<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>Ba kelasi ya mbongwana
Bobongola makomi na ba composants na ba classes ya makomi minene.
Makomi ya mike.
Makomi ya minene.
Makomi oyo ezali na makomi minene.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>Maloba ya mokuse
Implémentation stylisée ya <abbr>élément ya HTML pona ba abréviations na ba sigles pona kolakisa version élargie na hover. Maloba ya mokuse oyo ezali na atitle attribut ezali na frontière ya se oyo ezali na ba points clairs mpe curseur ya aide na hover, epesaka contexte ya kobakisa na hover mpe na ba usagers ya ba technologies ya assistance.
Bokuse ya moboko
Bokuse ya liloba attribut ezali attr .
<abbr title="attribute">attr</abbr>Initialisme
Bakisa .initialismna abréviation mpo na font-size ya mwa moke.
HTML ezali eloko ya malamu koleka banda mampa oyo bakati na biteni.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>Baadrɛsi
Lakisa ba informations ya contact pona koko oyo azali pene to nzoto mobimba ya mosala. Bobatela formatage na kosukisa milɔngɔ nyonso na <br>.
Twitter, Inc.
1355 balabala ya zando, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Kombo mobimba
liboso.ya [email protected]
1355 balabala ya zando, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Kombo mobimba
liboso.ya [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>Ba citations ya bloc
Mpo na kozongela ba blocs ya contenus oyo ewutaki na source mosusu na kati ya mokanda na yo.
Blocquote ya liboso
Zinga HTML<blockquote> nyonso lokola citatio. Mpo na kozwa maloba ya semba, tozali kolendisa yo .<p>
Lorem ipsum dolor vanda amet, consectetur elit oyo ezo boma nzoto. Motango mobimba posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>Ba options ya ko bloquer
Style mpe contenus ebongwanaka mpo na ba variations simples na norme moko <blockquote>.
Kopesa nkombo ya source moko
Bakisa a <footer>mpo na koyeba esika oyo euti. Zinga kombo ya mosala ya source na <cite>.
Lorem ipsum dolor vanda amet, consectetur elit oyo ezo boma nzoto. Motango mobimba posuere erat a ante.
<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>Ba écrans mosusu
Bakisa .blockquote-reversempo na blockquote na makambo oyo ezali na boyokani na lobɔkɔ ya mobali.
<blockquote class="blockquote-reverse">
...
</blockquote>Ba liste
Ezali na ordre te
Liste ya biloko oyo kati na yango molongo ezali na ntina polele te .
- Lorem ipsum dolor vanda amet
- Consectetur elit oyo ezali na mafuta
- Moléstie ya motángo mobimba lorem na massa
- Facilisis na aliquet ya nisl ya prétium
- Nulla volutpat azali na nzoto kolɔngɔnɔ
- Eloko oyo babengi Phasellus iaculis neque
- Ba sodales ya purus ba ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libéré volutpat na
- Faucibus porta lacus oyo ezali na mpɛmbɛ
- Aenean afanda amet erat nunc
- Eget porttitor lorem na kombo ya nzambe
<ul>
<li>...</li>
</ul>Epesamaki mitindo
Liste ya biloko oyo kati na yango molongo ezali na ntina polele.
- Lorem ipsum dolor vanda amet
- Consectetur elit oyo ezali na mafuta
- Moléstie ya motángo mobimba lorem na massa
- Facilisis na aliquet ya nisl ya prétium
- Nulla volutpat azali na nzoto kolɔngɔnɔ
- Faucibus porta lacus oyo ezali na mpɛmbɛ
- Aenean afanda amet erat nunc
- Eget porttitor lorem na kombo ya nzambe
<ol>
<li>...</li>
</ol>Kozanga style
Longola marge par défaut list-stylempe ya gauche na biloko ya liste (kaka bana ya mbala moko). Yango etali kaka biloko ya liste ya bana ya mbala moko , elingi koloba okozala na mposa ya kobakisa kelasi mpo na baliste nyonso oyo ekangami lokola.
- Lorem ipsum dolor vanda amet
- Consectetur elit oyo ezali na mafuta
- Moléstie ya motángo mobimba lorem na massa
- Facilisis na aliquet ya nisl ya prétium
- Nulla volutpat azali na nzoto kolɔngɔnɔ
- Eloko oyo babengi Phasellus iaculis neque
- Ba sodales ya purus ba ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libéré volutpat na
- Faucibus porta lacus oyo ezali na mpɛmbɛ
- Aenean afanda amet erat nunc
- Eget porttitor lorem na kombo ya nzambe
<ul class="list-unstyled">
<li>...</li>
</ul>Na kati ya molongo
Tia biloko nyonso ya liste na molongo moko na display: inline-block;mpe mwa padding ya pole.
- Lorem ipsum ezalaka
- Eloko oyo babengi Phasellus iaculis
- Nulla volutpat ezali bongo
<ul class="list-inline">
<li>...</li>
</ul>Ndimbola
Liste ya maloba oyo ezali na bandimbola oyo ezali na boyokani na yango.
- Ba liste ya bandimbola
- Liste ya kolimbola ezali malamu mpenza mpo na kolimbola maloba.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida na eget metus.
- Malesuada ezali porta
- Etiam porta sem malesuada ya monene ya mollis euismod.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>Bolimbisi ya horizontal
Salá maloba mpe bandimbola na <dl>molɔngɔ pembenipembeni. Ebandi stacked lokola <dl>s par défaut, kasi tango navbar epanzani, bongo sala oyo.
- Ba liste ya bandimbola
- Liste ya kolimbola ezali malamu mpenza mpo na kolimbola maloba.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida na eget metus.
- Malesuada ezali porta
- Etiam porta sem malesuada ya monene ya mollis euismod.
- Felis euismod semper azali kozwa lacinia
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa kaka kofanda amet risus.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>Kokata na automatique
Ba liste ya bandimbola ya horizontal ekokata maloba oyo ezali milai mingi mpo na kokokana na ligne ya gauche na text-overflow. Na ba portes de vue ya moke, bakobongwana na layout ya stacked par défaut.
Code
Na kati ya molongo
Envelopper ba fragments ya code inline na <code>.
Na ndakisa,
<section>esengeli kozingama lokola inline.
For example, <code><section></code> should be wrapped as inline.Entrée ya mosaleli
Salelá <kbd>mpo na komonisa bokɔti oyo mbala mingi bakɔtaka na nzela ya klaviatware.
Mpo na kobongola ba répertoires, koma
cdna nsima nkombo ya répertoire.
Mpo na kobongisa ba paramètres, finá ctrl + ,
Mpo na kobongisa ba paramètres, finá 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>Bloc ya base
Salelá <pre>mpo na milɔngɔ mingi ya code. Kobosana te kokima ba parenthèses nionso ya angle na code mpo na kosala rendu malamu.
<p>Ezalela ya makomi awa...</p>
<pre><p>Sample text here...</p></pre>Okoki kobakisa na bolingi na yo .pre-scrollablekelasi, oyo ekotia max-hauteur ya 350px mpe ekopesa barre de défilement ya axe y.
Ba variables oyo ezali
Mpo na kolakisa ba variables salela <var>tag.
y = m x + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>Exemple ya sortie
Pona kolakisa ba blocs échantillon sortie ya programme moko salela <samp>tag.
Mokanda oyo ezali mpo na kotalela yango lokola ndakisa oyo euti na programɛ moko ya ordinatɛrɛ.
<samp>This text is meant to be treated as sample output from a computer program.</samp>Bamesa
Ndakisa ya moboko
Mpo na kosala styling ya moboko —padding ya pole mpe bobele bakaboli ya horizontal —bakisa kelasi ya moboko .tablena nyonso <table>. Ekoki komonana super redundant, kasi na kotalaka bosaleli ya monene ya ba tableaux mpo na ba plugins mosusu lokola ba calendriers mpe ba pickers ya ba dates, to opté ko isoler ba styles na biso ya table personnalisé.
| # . | Prenom | Nkombo ya libota | Nkombo ya mosaleli |
|---|---|---|---|
| 1. 1. | Marko | Otto | @mdo |
| 2. 2 | Yakobo | Thornton oyo azali | @mafuta |
| 3 | Larry, moto oyo azali | Ndɛkɛ yango | @twitter na twitter |
<table class="table">
...
</table>Milɔngɔ oyo ezali na bansinga
Salelá .table-stripedmpo na kobakisa zebra-striping na molɔngɔ́ nyonso ya mesa na kati ya <tbody>.
Bokokani ya navigateur croisé
Ba tableaux rayés esalemi na style na nzela ya :nth-childselecteur CSS, oyo ezali te na Internet Explorer 8.
| # . | Prenom | Nkombo ya libota | Nkombo ya mosaleli |
|---|---|---|---|
| 1. 1. | Marko | Otto | @mdo |
| 2. 2 | Yakobo | Thornton oyo azali | @mafuta |
| 3 | Larry, moto oyo azali | Ndɛkɛ yango | @twitter na twitter |
<table class="table table-striped">
...
</table>Mesa oyo ezali na ndelo
Bakisa .table-borderedmpo na bandelo na ngambo nyonso ya mesa mpe baselile.
| # . | Prenom | Nkombo ya libota | Nkombo ya mosaleli |
|---|---|---|---|
| 1. 1. | Marko | Otto | @mdo |
| 2. 2 | Yakobo | Thornton oyo azali | @mafuta |
| 3 | Larry, moto oyo azali | Ndɛkɛ yango | @twitter na twitter |
<table class="table table-bordered">
...
</table>Hover milɔngɔ́
Bakisa .table-hovermpo na kofungola état ya hover na ba lignes ya tableau na kati ya <tbody>.
| # . | Prenom | Nkombo ya libota | Nkombo ya mosaleli |
|---|---|---|---|
| 1. 1. | Marko | Otto | @mdo |
| 2. 2 | Yakobo | Thornton oyo azali | @mafuta |
| 3 | Larry, moto oyo azali | Ndɛkɛ yango | @twitter na twitter |
<table class="table table-hover">
...
</table>Mesa oyo ezali na bozindo
Bakisa .table-condensedmpo na kosala ete bamesa ezala compact mingi na kokataka remplissage ya ba cellules na katikati.
| # . | Prenom | Nkombo ya libota | Nkombo ya mosaleli |
|---|---|---|---|
| 1. 1. | Marko | Otto | @mdo |
| 2. 2 | Yakobo | Thornton oyo azali | @mafuta |
| 3 | Larry ndeke | @twitter na twitter | |
<table class="table table-condensed">
...
</table>Ba kelasi ya contexte
Salelá bakelasi ya contexte mpo na kopesa langi na milɔngɔ ya tableau to na baselile mokomoko.
| Kelasi | Ndimbola |
|---|---|
.active |
Ezali kosalela langi ya hover na molongo to cellule moko boye |
.success |
Ezali komonisa likambo oyo elongi to oyo esalemi malamu |
.info |
Ezali kolakisa mbongwana to action informative oyo ezali neutre |
.warning |
Ezali komonisa likebisi oyo ekoki kozala na mposa ya kotya likebi |
.danger |
Ezali komonisa likambo moko ya likama to oyo ekoki kozala mabe |
| # . | Motó ya likambo ya makonzí | Motó ya likambo ya makonzí | Motó ya likambo ya makonzí |
|---|---|---|---|
| 1. 1. | Makambo oyo ezali na kati ya colonne | Makambo oyo ezali na kati ya colonne | Makambo oyo ezali na kati ya colonne |
| 2. 2 | Makambo oyo ezali na kati ya colonne | Makambo oyo ezali na kati ya colonne | Makambo oyo ezali na kati ya colonne |
| 3 | Makambo oyo ezali na kati ya colonne | Makambo oyo ezali na kati ya colonne | Makambo oyo ezali na kati ya colonne |
| 4. | Makambo oyo ezali na kati ya colonne | Makambo oyo ezali na kati ya colonne | Makambo oyo ezali na kati ya colonne |
| 5 | Makambo oyo ezali na kati ya colonne | Makambo oyo ezali na kati ya colonne | Makambo oyo ezali na kati ya colonne |
| 6 | Makambo oyo ezali na kati ya colonne | Makambo oyo ezali na kati ya colonne | Makambo oyo ezali na kati ya colonne |
| 7 | Makambo oyo ezali na kati ya colonne | Makambo oyo ezali na kati ya colonne | Makambo oyo ezali na kati ya colonne |
| 8 | Makambo oyo ezali na kati ya colonne | Makambo oyo ezali na kati ya colonne | Makambo oyo ezali na kati ya colonne |
| 9 | Makambo oyo ezali na kati ya colonne | Makambo oyo ezali na kati ya colonne | Makambo oyo ezali na kati ya colonne |
<!-- 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>Kopesa ndimbola na ba technologies ya kosunga
Kosalela langi mpo na kobakisa ndimbola na molongo ya mesa to na selile moko moko epesaka kaka elembo ya komona, oyo ekopesama te na basaleli ya mayele ya kosunga – lokola batángi ya écran. Salá ete nsango oyo emonisami na langi ezala polele na makambo oyo ezali na kati yango moko (makomi oyo ezali komonana na molɔngɔ/selile ya mesa oyo etali yango), to ekɔtisama na nzela ya banzela mosusu, na ndakisa makomi mosusu oyo ebombami elongo na .sr-onlykelasi.
Bamesa oyo ezali kopesa eyano
Bosala ba tableaux oyo ezo répondre na enveloppant nionso .tablena kati .table-responsivepona kosala que ba défiler horizontalement na ba appareils ya mike (na se ya 768px). Ntango ozali kotala na eloko moko ya monene koleka 768px ya bonene, okomona bokeseni moko te na batableau oyo.
Kokata/kokata na vertical
Ba tableaux oyo ezo répondre esalaka usage ya overflow-y: hidden, oyo ezo cliper contenus nionso oyo eleki ba bords ya se to ya likolo ya table. Mingimingi, yango ekoki kokata ba menu oyo ezali kokita mpe ba widgets mosusu ya bato mosusu.
Firefox mpe ba ensembles ya bilanga
Firefox ezali na mwa styling ya fieldset ya embarrassant oyo esangisi widthoyo e interférer na tableau ya réponse. Yango ekoki koleka te kozanga hack moko ya Firefox oyo topesaka te na Bootstrap:
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}Mpo na koyeba makambo mingi, tanga eyano oyo ya Stack Overflow .
| # . | Motó ya likambo ya tableau | Motó ya likambo ya tableau | Motó ya likambo ya tableau | Motó ya likambo ya tableau | Motó ya likambo ya tableau | Motó ya likambo ya tableau |
|---|---|---|---|---|---|---|
| 1. 1. | Cellule ya mesa | Cellule ya mesa | Cellule ya mesa | Cellule ya mesa | Cellule ya mesa | Cellule ya mesa |
| 2. 2 | Cellule ya mesa | Cellule ya mesa | Cellule ya mesa | Cellule ya mesa | Cellule ya mesa | Cellule ya mesa |
| 3 | Cellule ya mesa | Cellule ya mesa | Cellule ya mesa | Cellule ya mesa | Cellule ya mesa | Cellule ya mesa |
| # . | Motó ya likambo ya tableau | Motó ya likambo ya tableau | Motó ya likambo ya tableau | Motó ya likambo ya tableau | Motó ya likambo ya tableau | Motó ya likambo ya tableau |
|---|---|---|---|---|---|---|
| 1. 1. | Cellule ya mesa | Cellule ya mesa | Cellule ya mesa | Cellule ya mesa | Cellule ya mesa | Cellule ya mesa |
| 2. 2 | Cellule ya mesa | Cellule ya mesa | Cellule ya mesa | Cellule ya mesa | Cellule ya mesa | Cellule ya mesa |
| 3 | Cellule ya mesa | Cellule ya mesa | Cellule ya mesa | Cellule ya mesa | Cellule ya mesa | Cellule ya mesa |
<div class="table-responsive">
<table class="table">
...
</table>
</div>Baformilɛrɛ
Ndakisa ya moboko
Ba contrôles ya formulaire individuel ezuaka automatiquement mua styling mondial. Ba éléments nionso ya textuel <input>, <textarea>, na oyo etiamaki na par défaut. Envelopper ba étiquettes na ba contrôles na kati pona espacement optimal.<select>.form-controlwidth: 100%;.form-group
<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>Kosangisa te bituluku ya baformilɛrɛ na bituluku ya bokɔti
Kosangisa ba groupes ya formulaire directement te na ba groupes ya entrée . Na esika ya kosala bongo, tyá etuluku ya bokɔti na kati ya etuluku ya formulaire.
Formulaire ya kati ya ligne
Bakisa .form-inlinena formulaire na yo (oyo esengeli te ezala <form>) mpo na ba contrôles aligné na gauche mpe bloc inline. Yango etali kaka ba formulaire na kati ya ba viewports oyo ezali na bonene ya ata 768px.
Ekoki kosɛnga ba largeurs personnalisées
Ba entrées na ba selects width: 100%;esalemi par défaut na Bootstrap. Na kati ya ba formulaires inline, to réinitialiser yango na width: auto;po ba contrôles multiples ekoki ko résidérer na ligne moko. Na kotalela ndenge oyo ozali kotya, ekoki kosɛnga básala ba largeurs personnalisés mosusu.
Bakisa ntango nyonso bilembo
Ba lecteurs ya écran bakozala na problème na ba formulaire na yo soki otie étiquette te pona entrée nionso. Mpo na ba formulaire oyo ya inline, okoki kobomba ba étiquettes na kosalelaka .sr-onlyclasse. Ezali na mayele mosusu ya kopesa elembo mpo na mayele ya kosalisa, na ndakisa aria-label, aria-labelledbyto titleattribut. Soki moko te kati na yango ezali, batángi ya écran bakoki kosalela placeholderattribut yango, soki ezali, kasi yebá ete kosalela yango placeholderlokola esika ya mayele mosusu ya kotya bilembo ezali malamu te.
<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>Forme horizontale
Salelá ba classes ya grille oyo esili kolimbolama liboso ya Bootstrap mpo na kosala boyokani na ba étiquettes mpe bituluku ya ba contrôles ya formulaire na layout horizontal na kobakisa .form-horizontalna formulaire (oyo esengeli te kozala a <form>). Kosala bongo ebongoli .form-groups mpo na komitambwisa lokola milɔngɔ ya grille, yango wana ntina ya .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>Ba contrôles oyo esungami
Bandakisa ya ba contrôles ya formulaire standard oyo esungami na layout ya formulaire ya ndakisa.
Ba inputs
Contrôle ya formulaire oyo emonanaka mingi, ba champs ya entrée basé na texte. Esangisi lisungi mpo na mitindo nyonso ya HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, mpe color.
Type déclaration esengeli
Ba entrées ekozala kaka entièrement style soki ya bango typee déclaré bien.
<input type="text" class="form-control" placeholder="Text input">Bituluku ya bokɔtisi
Mpo na kobakisa makomi to ba boutons oyo esangisi liboso mpe/to nsima ya makomi nyonso oyo esalemi na makomi <input>, talá eteni ya etuluku ya bokɔti .
Esika ya makomi
Contrôle ya formulaire oyo esimbaka ba lignes ebele ya texte. Bobongola rowsattribut soki esengeli.
<textarea class="form-control" rows="3"></textarea>Ba cases ya kotiya bilembo mpe ba radios
Ba case ya kotiya bilembo ezali mpo na kopona option moko to mingi na liste, nzokande ba radios ezali mpo na kopona option moko kati na mingi.
Ba cases ya kotiya elembo mpe ba radio oyo ekangami esungami, kasi mpo na kopesa curseur "epesameli nzela te" na hover ya moboti <label>, ekosenga obakisa .disabledkelasi na moboti .radio, .radio-inline, .checkbox, to .checkbox-inline.
Par défaut (ezali ebele) .
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—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—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>Ba cases ya kotiya elembo na kati ya ligne mpe ba radios
Salelá bakelasi .checkbox-inlineto .radio-inlinena molɔngɔ ya bakɛsi to ba radio mpo na koyeba makambo oyo ezali komonana na molɔngɔ moko.
<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>Ba cases ya kotiya bilembo mpe ba radios oyo ezangi makomi ya étiquette
Soki osengeli kozala na makomi te na kati ya <label>, entrée ezali positionné ndenge olingaki kozela. Sikoyo esalaka kaka na ba cases ya kotiya elembo oyo ezali en ligne te mpe na ba radios. Kobosana te kopesa naino lolenge moko ya elembo mpo na mayele ya kosalisa (na ndakisa, kosalela 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>Ezali kopona
Yebá ete ba menu mingi ya kopona native —elingi koloba na Safari mpe Chrome —ezali na ba coins arrondis oyo ekoki kobongisama te na nzela ya border-radiusba propriétés.
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>Mpo <select>na ba contrôles na multipleattribut, ba options ebele elakisami na ndenge ya défaut.
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>Contrôle statique
Ntango osengeli kotya makomi ya pɛtɛɛ pembeni ya elembo ya formulaire na kati ya formulaire moko, salelá .form-control-statickelasi oyo ezali na <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>Etat ya focus
Tolongolaka ba outlinestyles par défaut na ba contrôles ya formulaire mosusu mpe tosalelaka a box-shadowna esika na yango mpo na :focus.
Démo :focusétat
Entrée ya exemple oyo ezali likolo esalela ba styles personnalisés na documentation na biso pona kolakisa :focusétat na a .form-control.
Etat ya désactivé
Bakisa disabledattribut boolean na entrée moko pona kopekisa ba interactions ya usager. Ba entrées oyo ekangami ezo monana pete pe ebakisa not-allowedcurseur.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>Ba ensembles ya bilanga oyo ekangami
Bakisa disabledattribut na a <fieldset>pona ko désactiver ba contrôles nionso na kati ya <fieldset>na mbala moko.
Caveat na ntina na fonctionnalité ya lien ya<a>
Par défaut, ba navigateurs eko traité ba contrôles nionso ya formulaire native ( <input>, <select>na ba <button>éléments) na kati ya a <fieldset disabled>comme désactivé, epekisa ba interactions ya clavier na souris na bango. Kasi, soki formulaire na yo ezali mpe na ba <a ... class="btn btn-*">éléments, bakopesa yango kaka style ya pointer-events: none. Ndenge emonisami na eteni oyo elobeli état désactivé mpo na ba boutons (mpe mingimingi na eteni moke mpo na ba éléments ya anchor), proprété oyo ya CSS ezali naino standardisé te mpe esungami mobimba te na Opera 18 mpe na nse, to na Internet Explorer 11, mpe elongi 't kopekisa basaleli ya clavier kozala na makoki ya ko focuser to ko activer ba liens oyo. Na yango, mpo ozala na libateli, salelá JavaScript oyo obongisi mpo na kokanga ba liens ya ndenge wana.
Bokokani ya navigateur croisé
Atako Bootstrap ekosalela ba styles oyo na ba navigateurs nionso, Internet Explorer 11 mpe na se esimbaka mobimba te disabledattribut na <fieldset>. Salelá JavaScript oyo obongisi mpo na kokanga esika oyo ozali kosala na ba navigateurs oyo.
<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>Botangi kaka eloba
Bakisa readonlyattribut boolean na entrée moko pona kopekisa modification ya valeur ya entrée. Ba entrées ya kotanga kaka emonanaka pete (kaka lokola ba entrées oyo ekangami), kasi batela curseur standard.
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>Mokanda ya lisalisi
Texte ya lisungi ya niveau ya bloc pona ba contrôles ya formulaire.
Kosangisa makomi ya lisalisi na ba contrôles ya formulaire
Mokanda ya lisalisi esengeli kozala na boyokani ya polele na bokonzi ya formulaire oyo ezali na boyokani na kosalela aria-describedbyattribut. Yango ekosala ete ba technologies ya lisungi – lokola ba lecteurs ya écran – esakola texte oyo ya lisungi tango mosaleli azali ko focuser to akoti na contrôle.
<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>Validation elobi
Bootstrap ezali na ba styles ya validation mpo na erreur, avertissement, mpe ba états ya succès na ba contrôles ya formulaire. Mpo na kosalela, bakisa .has-warning, .has-error, to .has-successna eloko ya moboti. N'importe quel .control-label, .form-control, mpe .help-blockna kati ya élément wana ekozua ba styles ya validation.
Kopesa état ya validation na ba technologies d'assistance na ba usagers aveugles de couleur
Kosalela ba styles oyo ya validation mpo na kolakisa état ya contrôle ya formulaire epesaka kaka indication visuelle, basée na couleur, oyo ekopesama te na ba usagers ya ba technologies ya assistance - lokola ba lecteurs d’écran - to na ba usagers aveugles de couleur.
Kosala ete indication mosusu ya l’Etat epesamela mpe. Ndakisa, okoki kotia likanisi moko na ntina ya ezalela na <label>makomi ya bokonzi ya formulaire yango moko (lokola ezali na ndakisa ya code oyo elandi), kotia Glyphicon (na makomi ya ndenge mosusu oyo ebongi kosalelaka .sr-onlykelasi - tala bandakisa ya Glyphicon ), to na kopesaka blocage ya texte ya lisungi ya kobakisa . Concrètement pona ba technologies ya assistance, ba contrôles ya formulaire invalides ekoki pe kopesama aria-invalid="true"attribut.
<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>Na ba icônes oyo okoki kopona
Okoki mpe kobakisa bilembo ya makanisi oyo okoki kopona na kobakisa .has-feedbackmpe elembo ya lobɔkɔ ya mobali.
Ba icônes ya ba réactions esalaka kaka na <input class="form-control">ba éléments textuels.
Ba icônes, ba étiquettes, na ba groupes ya entrée
Positionnement manuel ya ba icônes ya rétroaction esengeli pona ba entrées sans étiquette pe pona ba groupes ya ba entrées na add-on na droite. Tolendisami makasi kopesa ba étiquettes mpo na ba inputs nionso mpo na ba raisons ya accessibilité. Soki olingi kopekisa ba étiquettes elakisama, bomba yango elongo na .sr-onlykelasi. Soki osengeli kosala kozanga bilembo, bongisá topmotuya ya elembo ya kopesa makanisi. Mpo na bituluku ya bokɔti, bongisa rightmotuya na motuya ya pixel oyo ebongi na kotalela bonene ya addon na yo.
Kopesa ndimbola ya elembo na mayele ya kosalisa
Mpo na kosala ete mayele ya kosalisa – lokola batángi ya écran – epesa malamu ndimbola ya elembo, esengeli kotya makomi mosusu oyo ebombami na .sr-onlykelasi mpe kosangisa yango polele na bokonzi ya formulaire oyo ezali na boyokani na kosalela aria-describedby. Na lolenge mosusu, sala ete ndimbola (na ndakisa, likambo oyo ete ezali na likebisi mpo na esika moko boye ya kokotisa makomi) epesamela na lolenge mosusu, na ndakisa kobongola makomi ya solosolo <label>oyo esangisi na bokonzi ya formulaire.
Atako bandakisa oyo elandi elobeli déjà état ya validation ya ba contrôles ya forme na bango respectifs na kati ya <label>texte yango moko, technique oyo ezali likolo (kosalela .sr-onlytexte na aria-describedby) ekotisami pona ba fins d’illustration.
<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>Ba icônes optionnelles na ba formes horizontales na inline
<form class="form-horizontal">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess3Status" class="sr-only">(success)</span>
</div>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
</div>
</div>
</form><form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess4Status" class="sr-only">(success)</span>
</div>
</form>
<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess3">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
</div>
</form>Ba icônes optionnelles na ba .sr-onlyétiquettes oyo ebombami
Soki osaleli .sr-onlykelasi mpo na kobomba ba contrôle ya formulaire moko <label>(na esika ya kosalela ba options mosusu ya étiquetage, lokola aria-labelattribut), Bootstrap ekobongisa automatiquement position ya icône mbala moko ebakisami.
(kolonga)
@
(kolonga)
<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>Contrôle ya dimensionnement
Botia bosanda na kosalelaka bakelasi lokola .input-lg, mpe botia bonene na kosalelaka bakelasi ya makonzí ya grille lokola .col-lg-*.
Kosala bonene ya bolai
Salá ba contrôles ya formulaire ya molai to ya mokuse oyo ekokani na bonene ya bouton.
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>Ba taille ya groupe ya forme horizontale
Nokinoki taille ya ba étiquettes mpe ba contrôles ya formulaire na kati .form-horizontalna kobakisa .form-group-lgto .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>Kosala bonene ya makonzí
Envelopper ba entrées na ba colonnes ya grille, to élément parent nionso ya personnalisé, pona ko enforcer facilement ba largeurs oyo olingi.
<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>Ba boutons
Ba tags ya bouton
Salelá bakelasi ya bouton na eleman moko <a>, <button>, to <input>.
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">Kosalela yango na ndenge ya sikisiki
Atako ba classes ya bouton ekoki kosalelama na <a>mpe <button>ba éléments, kaka <button>ba éléments nde esungami na kati ya ba composants na biso ya nav mpe navbar.
Ba liens oyo ezali kosala lokola ba boutons
Soki ba <a>éléments esalelami mpo na kosala lokola ba boutons – ko déclencher fonctionnalité ya kati ya lokasa, na esika ya kokende na mokanda mosusu to eteni mosusu na kati ya lokasa ya lelo – esengeli mpe kopesa yango role="button".
Kobongola na navigateur croisé
Lokola momeseno ya malamu koleka, tozali kolendisa mpenza kosalela <button>elembo yango ntango nyonso oyo likoki ezali mpo na kosala ete boyokani ya kosala na navigateur ekulusu.
Parmi d’autres choses, ezali na bug moko na Firefox <30 oyo epekisaka biso ko setting ba boutons ya line-heightof <input>-based, esalaka que e correspondre exactement te na hauteur ya ba boutons misusu na Firefox.
Makambo oyo okoki kopona
Salelá kelasi nyonso ya bouton oyo ezali mpo na kosala nokinoki bouton oyo ezali na lolenge.
<!-- 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>Kopesa ndimbola na ba technologies ya kosunga
Kosalela langi mpo na kobakisa ndimbola na bouton epesaka kaka elembo ya komona, oyo ekopesama te na basaleli ya mayele ya kosunga – lokola batángi ya écran. Salá ete makambo oyo emonisami na langi ezala polele na makambo oyo ezali na kati yango moko (makomi oyo ezali komonana ya bouton), to ekɔtisama na nzela ya mayele mosusu, na ndakisa makomi mosusu oyo ebombami elongo na .sr-onlykelasi.
Ba taille
Fancy ba boutons ya minene to ya mike? Bakisa .btn-lg, .btn-sm, to .btn-xsmpo na bonene mosusu.
<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>Salá ba boutons ya niveau ya bloc —oyo epanzani na bonene mobimba ya moboti —na kobakisa .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>Etat actif
Ba boutons ekobima na kofina (na fond ya molili, ndelo ya moindo, mpe elili ya inset) tango ezali activé. Mpo na <button>ba éléments, yango esalemaka na nzela ya :active. Mpo na <a>ba éléments, esalemi na .active. Kasi, okoki kosalela .activena <button>s (mpe kotia aria-pressed="true"attribut) soki osengeli kozongela état actif na ndenge ya programme.
Elemento ya bouton
Pas besoin ya kobakisa :activelokola ezali pseudo-classe, mais soki oza na besoin ya ko forcer apparence moko, kende liboso pe bakisa .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>Elemento ya anchor
Bakisa .activekelasi na <a>ba boutons.
<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>Etat ya désactivé
Salá ete ba boutons ezala lokola oyo okoki kofina te na kozongisaka yango lisusu na opacity.
Elemento ya bouton
Bakisa disabledattribut na <button>ba boutons.
<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>Bokokani ya navigateur croisé
Soki obakisi disabledattribut na a <button>, Internet Explorer 9 mpe na nse ekosala ete makomi ezala gris na texte-shadow moko ya mabe oyo tokoki kobongisa te.
Elemento ya anchor
Bakisa .disabledkelasi na <a>ba boutons.
<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>Tosalelaka .disabledlokola classe ya utilité awa, ndenge moko na .activeclasse commune, yango wana prefixe moko te esengeli.
Lien ya fonctionnalité ya caveat
Classe oyo esalelaka pointer-events: nonepona koluka ko désactiver fonctionnalité ya lien ya <a>s, mais propriété wana ya CSS eza nanu standardisé te pe eza entièrement soutenu te na Opera 18 et en bas, ou na Internet Explorer 11. En plus, même na ba navigateurs oyo basalaka soutien pointer-events: none, clavier navigation etikali na bopusi te, elingi koloba ete basaleli ya klaviatware oyo bamonaka mpe basaleli ya mayele ya kosalisa bakozala kaka na likoki ya kosala ete ba liens wana esala mosala. Na yango, mpo ozala na libateli, salelá JavaScript oyo obongisi mpo na kokanga ba liens ya ndenge wana.
Bililingi
Bililingi oyo ezali kopesa eyano
Ba images na Bootstrap 3 ekoki kozala responsive-friendly via addition ya .img-responsiveclasse. Yango etali max-width: 100%;, height: auto;mpe display: block;na elilingi mpo ete esala échelle kitoko na eleman ya moboti.
Mpo na kotya bililingi oyo esalela .img-responsivekelasi na katikati, salelá .center-blockna esika ya .text-center. Tala eteni ya bakelasi ya basalisi mpo na koyeba makambo mingi na ntina ya .center-blockbosaleli.
Bilili ya SVG mpe IE 8-10
Na Internet Explorer 8-10, bilili ya SVG na .img-responsiveezali na bonene ya kozanga boyokani. Mpo na kobongisa likambo yango, bakisá width: 100% \9;esika oyo esengeli. Bootstrap esalelaka yango automatiquement te mpo epesaka ba complications na ba formats misusu ya image.
<img src="..." class="img-responsive" alt="Responsive image">Ba shapes ya bilili
Bakisa ba classes na <img>élément moko pona ko styler ba images facilement na projet nionso.
Bokokani ya navigateur croisé
Bozala na makanisi ete Internet Explorer 8 ezangi lisungi mpo na ba coins arrondis.
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">Bakelasi ya basalisi
Ba couleurs ya contexte
Kopesa ndimbola na nzela ya langi na mwa ndambo ya bakelasi ya utilité ya accent. Yango ekoki mpe kosalelama na ba liens mpe ekokóma molili na hover kaka lokola ba styles na biso ya lien par défaut.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies mituka ut id elit.
Duis mollis, est non commodo luctus, nisi erat ligula ya porte.
Maecenas sed diam eget risus varius blandit efandi amet non magna.
Etiam porta sem malesuada ya monene ya mollis euismod.
Donec ullamcorper nulla oyo ezali na mbongo te.
<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>Kosala na ntina na makambo ya sikisiki
Tango mosusu ba classes ya accent ekoki kosalelama te mpo na spécificité ya sélecteur mosusu. Mbala mingi, likambo oyo ekoki mpo na kosilisa yango ezali ya kozinga makomi na yo na a <span>na kelasi.
Kopesa ndimbola na ba technologies ya kosunga
Kosalela langi mpo na kobakisa ndimbola epesaka kaka elembo ya komona, oyo ekopesama te na basaleli ya mayele ya kosunga – lokola batángi ya écran. Sala ete sango oyo emonisami na langi ezala polele uta na makambo yango moko (balangi ya contexte esalelamaka kaka mpo na kolendisa ndimbola oyo esi ezali na kati ya makomi/markup), to ekotisama na nzela ya mayele mosusu, lokola makomi ya kobakisa oyo ebombami elongo na .sr-onlykelasi .
Ba fond ya contexte
Ndenge moko na ba classes ya couleur ya texte contextuel, tia facilement fond ya élément moko na classe contextuelle nionso. Ba composants ya anchor ekozala molili na hover, kaka lokola ba classes ya texte.
Nullam id dolor id nibh ultricies mituka ut id elit.
Duis mollis, est non commodo luctus, nisi erat ligula ya porte.
Maecenas sed diam eget risus varius blandit efandi amet non magna.
Etiam porta sem malesuada ya monene ya mollis euismod.
Donec ullamcorper nulla oyo ezali na mbongo te.
<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>Kosala na ntina na makambo ya sikisiki
Tango mosusu ba classes ya fond contextuel ekoki kosalelama te mpo na spécificité ya sélecteur mosusu. Na ba cas misusu, solution suffisante ezali ya ko envelopper contenus ya élément na yo na a <div>na classe.
Kopesa ndimbola na ba technologies ya kosunga
Lokola na ba couleurs contextuelles , sala que signification nionso oyo epesameli na nzela ya couleur epesamela pe na format oyo ezali kaka présentation te.
Bokanga elembo
Salelá elembo ya bokangami ya monene mpo na koboya makambo lokola ba modal mpe makebisi.
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>Ba carets
Salelá ba carets mpo na komonisa ndenge oyo ezali kokita mpe ndenge oyo ezali kotambwisa yango. Yeba que caret ya défaut eko retourner automatiquement na ba menu ya dropup .
<span class="caret"></span>Ba flotteurs ya mbangu
Flotter élément moko na gauche to droite na classe moko. !importantezali na kati mpo na koboya makambo ya spécificité. Ba classes ekoki pe kosalelama lokola ba mixins.
<div class="pull-left">...</div>
<div class="pull-right">...</div>// Classes
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
// Usage as mixins
.element {
.pull-left();
}
.another-element {
.pull-right();
}Ba blocs ya contenus ya centre
Botia eleman moko na display: blockmpe na katikati na nzela ya margin. Disponible lokola mixin na classe.
<div class="center-block">...</div>// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}Bobongisi ya polele
Effacer floats facilement na kobakisa .clearfix na élément parent . Esalelaka micro clearfix ndenge Nicolas Gallagher akómisaki yango mingi. Ekoki mpe kosalelama lokola mixin.
<!-- Usage as a class -->
<div class="clearfix">...</div>// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage as a mixin
.element {
.clearfix();
}Kolakisa mpe kobomba makambo oyo ezali na kati
Forcer élément moko elakisama to ebombama ( y compris pona ba lecteurs ya écran ) na bosaleli ya .showpe .hiddenba classes. Ba classes oyo basalelaka !importantpona ko éviter ba conflits ya spécificité, kaka ndenge ba flotteurs ya mbangu . Bazali kaka pona ba toggling ya niveau ya bloc. Bakoki mpe kosalela yango lokola ba mixins.
.hideezali, kasi esimbaka ntango nyonso te batángi ya écran mpe esili kosalelama banda na v3.0.1 . Salelá .hiddento .sr-onlyna esika na yango.
Lisusu, .invisibleekoki kosalelama mpo na kobalusa kaka visibilité ya élément moko, elingi koloba ya yango displayebongisami te mpe élément ekoki kaka ko affecter flux ya mokanda.
<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();
}Lecteur d'écran na contenus ya navigation ya clavier
Bomba élément moko na ba appareils nionso sauf ba lecteurs d'écran na .sr-only. Sangisa .sr-onlyna .sr-only-focusablempo na kolakisa lisusu élément tango ezali focused (ndakisa na mosaleli ya clavier kaka). Esengeli mpo na kolanda mayele malamu ya bozwi . Ekoki mpe kosalelama lokola ba mixins.
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>// Usage as a mixin
.skip-navigation {
.sr-only();
.sr-only-focusable();
}Kozongisa bililingi
Salelá .text-hidekelasi to mixin mpo na kosalisa na kozongisa makambo ya makomi ya eleman moko na elilingi ya nsima.
<h1 class="text-hide">Custom heading</h1>// Usage as a mixin
.heading {
.text-hide();
}Ba utilités oyo ezo répondre
Mpo na bokolisi nokinoki oyo ezali pɛtɛɛ mpo na telefone ya mabɔkɔ, salelá bakelasi oyo ya lisalisi mpo na kolakisa mpe kobomba makambo na nzela ya aparɛyi na nzela ya motuna ya media. Ezali mpe na bakelasi ya utilité mpo na kobongola makambo ntango ezali konyatama.
Meká kosalela makambo yango na ndelo mpe koboya kosala ba versions oyo ekeseni mpenza na site moko. Salelá yango nde mpo na kokokisa maloba ya aparɛyi mokomoko.
Bakelasi oyo ezali
Salelá moko to kosangisa ya bakelasi oyo ezali mpo na kobongola makambo na kati ya bisika ya kobukana ya port de vue.
| Ba appareils ya mike mike mingiBatelefone (<768px) | Ba apareyi ya mikemikeBa tablettes (≥768px) Ezali na ba tablettes. | Ba dispositifs ya moyenneBa bureaux (≥992px) | Ba apareyi ya mineneBa bureaux (≥1200px) . | |
|---|---|---|---|---|
.visible-xs-* |
Ezali komonana | Ya kobombana | Ya kobombana | Ya kobombana |
.visible-sm-* |
Ya kobombana | Ezali komonana | Ya kobombana | Ya kobombana |
.visible-md-* |
Ya kobombana | Ya kobombana | Ezali komonana | Ya kobombana |
.visible-lg-* |
Ya kobombana | Ya kobombana | Ya kobombana | Ezali komonana |
.hidden-xs |
Ya kobombana | Ezali komonana | Ezali komonana | Ezali komonana |
.hidden-sm |
Ezali komonana | Ya kobombana | Ezali komonana | Ezali komonana |
.hidden-md |
Ezali komonana | Ezali komonana | Ya kobombana | Ezali komonana |
.hidden-lg |
Ezali komonana | Ezali komonana | Ezali komonana | Ya kobombana |
Kobanda na v3.2.0, ba .visible-*-*classes pona point de rupture moko na moko eza na ba variations misato, moko pona displayvaleur ya propriété CSS moko na moko oyo etangami na se.
| Groupe ya ba classes | CSSdisplay |
|---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
Donc, pona ba xsécrans extra petits ( ) par exemple, ba .visible-*-*classes oyo ezali ezali: .visible-xs-block, .visible-xs-inline, na .visible-xs-inline-block.
Ba classes .visible-xs, .visible-sm, .visible-md, mpe .visible-lglisusu ezali, kasi ezali déprecated lokola ya v3.2.0 . Bazali pene na ekokani na .visible-*-block, longola se na ba cas spéciaux ya kobakisa mpo na ba <table>éléments oyo etali toggling -.
Ba kelasi ya imprimerie
Ndenge moko na bakelasi ya koyanola ya mbala na mbala, salelá oyo mpo na kobongola makambo mpo na konyata.
| Bakelasi | Navigateur | Imprimer |
|---|---|---|
.visible-print-block.visible-print-inline.visible-print-inline-block |
Ya kobombana | Ezali komonana |
.hidden-print |
Ezali komonana | Ya kobombana |
Classe .visible-printpe ezali mais ezali déprequé à partir ya v3.2.0. Ezali pene na ekokani na .visible-print-block, longola se na ba cas spéciaux ya kobakisa mpo na <table>ba éléments oyo etali -.
Ba cas ya test
Bobongola bonene ya navigateur na bino to bo charger na ba appareils différents pona ko tester ba classes ya utilitaires oyo ezo répondre.
Ezali komonana na...
Ba marques ya vert elakisi ete élément ezali komonana na esika ya kotala na yo ya lelo.
Extra ya moke
✔ Emonanaka na x-moke
Moke
✔ Emonanaka na mike
Katikati
✔ Emonanaka na moyen
Large
✔ Emonanaka na monene
✔ Visible on x-small and small
✔ Emonanaka na moyenne na grand
✔ Visible on x-small and medium
✔ Emonanaka na mike mpe ya minene
✔ Emonanaka na x-moke mpe monene
✔ Visible on small and medium
Ebombami na...
Awa, bilembo ya vert elakisi mpe ete elemande ebombami na esika ya kotala na yo ya lelo.
Kosalela Moke
CSS ya Bootstrap etongami na Less, préprocesseur oyo ezali na fonctionnalité ya kobakisa lokola ba variables, mixins, mpe ba fonctions mpo na compilation ya CSS. Ba oyo bazali koluka kosalela ba fichiers ya source Less na esika ya ba fichiers CSS na biso oyo to compilé bakoki kosalela ba variables mpe ba mixins ebele oyo tosalelaka na cadre mobimba.
Ba variables ya grille na ba mixins ezuami na kati ya eteni ya système ya grille .
Kosangisa Bootstrap
Bootstrap ekoki kosalelama na ndenge ata mibale: na CSS oyo esangisi to na ba fichiers ya source Less. Mpo na kosangisa ba fichiers Moins, tala eteni ya Kobanda mpo na ndenge ya kobongisa environnement na yo ya développement mpo na kosala ba commandes oyo esengeli.
Bisaleli ya bosangisi ya bato ya misato ekoki kosala na Bootstrap, kasi esungami te na ekipi na biso ya moboko.
Ba variables oyo ezali
Ba variables esalelamaka na projet mobimba lokola lolenge ya ko centraliser mpe kokabola ba valeurs oyo esalemaka mingi lokola ba couleurs, espacement, to ba stacks ya ba fonts. Mpo na koyeba makambo nyonso oyo epanzani, talá Customizer .
Balangi
Facile kosalela ba schemes ya couleur mibale: gris na sémantique. Ba couleurs ya échelle ya gris epesaka accès rapide na ba nuances ya noir oyo esalemaka mingi alors que sémantique esangisi ba couleurs ndenge na ndenge oyo epesameli na ba valeurs contextuelles ya tina.
@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;Salelá moko ya ba variables ya langi oyo ndenge ezali to pesa yango lisusu na ba variables oyo ezali na ntina mingi mpo na projet na yo.
// Use as-is
.masthead {
background-color: @brand-primary;
}
// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}Échafaudage
Mwa ndambo ya ba variables mpo na ko personnaliser noki ba éléments clés ya skeleton ya site na yo.
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;Ba liens
Facile style ba liens na yo na couleur oyo ebongi na valeur moko kaka.
// 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;
}
}Simbá ete @link-hover-colorasalelaka fonction moko, esaleli mosusu ya kokamwa oyo euti na Less, mpo na kosala automatiquement couleur ya hover oyo ebongi. Okoki kosalela darken, lighten, saturate, mpe desaturate.
Typographie
Set facilement typeface na yo, taille ya texte, leading, mpe mingi mosusu na mwa ba variables ya mbangu. Bootstrap esalelaka oyo lokola mpo na kopesa ba mixins typographiques ya pete.
@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;Ba icons
Ba variables mibale ya mbangu pona ko personnaliser esika pe kombo ya fichier ya ba icônes na yo.
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";Ba composants
Ba composants na Bootstrap mobimba esalaka usage ya ba variables par défaut mosusu pona ko setting ba valeurs communes. Talá oyo basalelaka mingi.
@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;Ba mixins ya batekisi
Ba mixins ya motɛkisi ezali ba mixins mpo na kosalisa na kosunga ba navigateurs ebele na kokɔtisáká ba préfixes nyonso ya motɛkisi oyo etali yango na CSS na yo oyo esangisi.
Kosala bonene ya bakɛsi
Réinitialiser modèle ya boîte ya ba composants na yo na mixin moko. Mpo na koyeba makambo oyo ezali na kati, talá lisolo oyo ya lisungi oyo euti na Mozilla .
Mixin ezali déprecated lokola ya v3.2.0, na introduction ya Autoprefixer. Mpo na kobatela boyokani ya nsima, Bootstrap ekolanda kosalela mixin na kati tii na Bootstrap v4.
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}Ba coins oyo ezali arrondi
Lelo oyo ba navigateurs nionso ya mikolo oyo ezo soutenir propriété non préfixe border-radius. Lokola yango, .border-radius()mixin ezali te, kasi Bootstrap ezali na ba raccourcis mpo na ko arrondir noki ba coins mibale na ngambo moko boye ya eloko moko.
.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;
}Boîte (Drop) ba ombres
Soki bato oyo ozali koluka bazali kosalela ba navigateurs mpe baaparɛyi ya sika mpe ya minene, kobosana te kosalela kaka box-shadowbiloko yango yango moko. Soki ozali na mposa ya lisungi mpo na baaparɛyi ya kala ya Android (yambo ya v4) mpe ya iOS (yambo ya iOS 5), salelá mixin oyo esili kosalelama mpo na kozwa liboso oyo esengeli -webkit.
Mixin ezali déprequé à partir ya v3.1.0, puisque Bootstrap esimbaka officiellement te ba plateformes dépassées oyo esimbaka propriété standard te. Mpo na kobatela boyokani ya nsima, Bootstrap ekolanda kosalela mixin na kati tii na Bootstrap v4.
Bozala sûr ya kosalela rgba()ba couleurs na ba ombres ya boîte na bino po esangisama sans soudure na ba fond.
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}Ba transitions
Ba mixins ebele pona flexibilité. Botia ba informations nionso ya transition na moko, to lakisa retard mpe durée ekeseni soki esengeli.
Ba mixins ezali dépréciés à partir ya v3.2.0, na introduction ya Autoprefixer. Mpo na kobatela boyokani ya nsima, Bootstrap ekolanda kosalela ba mixins na kati tii na 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;
}Mbongwana oyo esalemi
Kobalusa, kosala échelle, kobongola (kotambola), to kobalusa eloko nyonso.
Ba mixins ezali dépréciés à partir ya v3.2.0, na introduction ya Autoprefixer. Mpo na kobatela boyokani ya nsima, Bootstrap ekolanda kosalela ba mixins na kati tii na 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;
}Ba animations
Mixin moko mpo na kosalela ba propriétés nionso ya animation ya CSS3 na déclaration moko mpe mixins mosusu mpo na ba propriétés moko moko.
Ba mixins ezali dépréciés à partir ya v3.2.0, na introduction ya Autoprefixer. Mpo na kobatela boyokani ya nsima, Bootstrap ekolanda kosalela ba mixins na kati tii na 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;
}Opacité
Botia opacité pona ba navigateurs nionso pe bopesa filterfallback pona IE8.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}Mokanda ya esika ya kofanda
Pesa contexte mpo na ba contrôles ya formulaire na kati ya esika moko na moko.
.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
}Makonzí
Bosala ba colonne na nzela ya CSS na kati ya élément moko.
.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;
}Ba gradients
Bobongola na pete balangi mibale nyonso na gradient ya fond. Zwá makambo mingi mpe tyá nzela, salelá balangi misato, to salelá gradient radial. Na mixin moko ozuaka ba syntaxes nionso ya préfix oyo okozala na besoin na yango.
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);Okoki mpe kolakisa angle ya gradient standard ya couleur mibale, linéaire:
#gradient > .directional(#333; #000; 45deg);Soki ozali na mposa ya gradient ya style barber-stripe, yango ezali pete, mpe. Boyebisa kaka couleur moko pe toko superposer bande ya pembe translucide.
#gradient > .striped(#333; 45deg);Likolo ya ante mpe salelá langi misato na esika na yango. Botia langi ya liboso, langi ya mibale, botelemisi ya langi ya langi ya mibale (valeur ya pourcentage lokola 25%), mpe langi ya misato na ba mixins oyo:
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);Mitó likoló! Soki mokolo mosusu osengeli kolongola gradient moko, salá makasi olongola IE-specifique nyonso filteroyo okoki kobakisa. Okoki kosala yango na kosaleláká .reset-filter()mixin oyo ezali pembeni background-image: none;.
Ba mixins ya utilité
Ba mixins ya utilité ezali ba mixins oyo esangisaka ba propriétés ya CSS oyo ezali na boyokani te mpo na kokokisa mokano to mosala moko ya sikisiki.
Bobongisi ya polele
Bobosana kobakisa class="clearfix"na élément nionso mpe na esika na yango bakisa .clearfix()mixin esika esengeli. Esalelaka micro clearfix oyo euti na Nicolas Gallagher .
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}Centrée horizontale
Nokinoki na katikati ya eloko nyonso oyo ezali na kati ya moboti na yango. Esengaka widthto max-widthesengeli kozala na esika.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}Basali ya kopesa bonene
Lakisa ba dimensions ya eloko moko na pete.
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }Ba textareas oyo ekoki kobongola bonene
Configurer facilement ba options ya ko changer taille pona textarea nionso, to élément mosusu nionso. Ezali na ndenge ya liboso na bizaleli ya navigateur ya momesano ( both).
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}Kokata makomi
Kokata texte na pete na ellipsis na mixin moko. Esengaka élément ezala blockto inline-blockniveau.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}Ba images ya rétine
Lakisa banzela mibale ya bilili mpe bonene ya bilili ya @1x, mpe Bootstrap ekopesa motuna ya media @2x. Soki ozali na bilili mingi ya kosalela, kanisá kokoma CSS ya elilingi na yo ya rétine na mabɔkɔ na motuna moko ya media.
.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);
}Kosalela Sass
Alors que Bootstrap etongami na Less, ezali mpe na port officiel ya Sass . Tobatela yango na ebombelo ya GitHub ekeseni mpe tosimbaka ba mises à jour na script ya mbongwana.
Oyo ezali na kati
Lokola port ya Sass ezali na repo ekeseni mpe esalelaka audience oyo ekeseni mwa moke, makambo oyo ezali na kati ya mosala yango ekeseni mingi na mosala monene ya Bootstrap. Yango esalaka ete port ya Sass ezala na boyokani na ba systèmes ebele oyo esalemi na Sass soki likoki ezali.
| Nzela | Ndimbola |
|---|---|
lib/ |
Code ya mabanga ya Ruby (Configuration ya Sass, ba intégration ya Rails na Compass) |
tasks/ |
Ba scripts ya convertisseur (kobalusa na amont Moins na Sass) |
test/ |
Ba test ya compilation |
templates/ |
Manifeste ya emballage ya boussole |
vendor/assets/ |
Sass, JavaScript, mpe ba fichiers ya font |
Rakefile |
Misala ya kati, lokola kosala rake mpe kobongola |
Kota na ebombelo ya GitHub ya port ya Sass mpo na komona ba fisyé oyo na mosala.
Installation ya mosala
Mpo na koyeba ndenge ya kotya mpe kosalela Bootstrap mpo na Sass, talá ebombelo ya GitHub readme . Ezali source ya sika koleka mpe ezali na ba informations mpo na kosalela na Rails, Compass, mpe ba projets ya Sass standard.