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.
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.
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.
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>
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=no
na 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">
Bootstrap etie ba styles ya moboko ya elakiseli ya mokili mobimba, typographie, mpe ya lien. Mingimingi, biso:
background-color: #fff;
na ...body
@font-family-base
, @font-size-base
, mpe @line-height-base
lokola moboko na biso ya konyata@link-color
pe appliquer ba sous-lignes ya lien kaka na:hover
Ba styles oyo ekoki kozwama na kati ya scaffolding.less
.
Mpo na kobongisa bozongisi ya navigateur croisé, tosalelaka Normalize.css , projet ya Nicolas Gallagher mpe Jonathan Neal .
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 padding
mpe mingi, ata moko te ya eloko oyo ezali na kati ya biloko oyo ezali na kati.
Salelá .container
mpo na eloko oyo ezali koyanola na bonene oyo etɛngamá te.
<div class="container">
...
</div>
Salelá .container-fluid
mpo na eloko oyo ezali na bonene mobimba, oyo ezali na bonene mobimba ya esika na yo ya kotala.
<div class="container-fluid">
...
</div>
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 .
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:
.container
(fixe-width) to .container-fluid
(full-width) mpo na kosala alignment mpe padding malamu..row
mpe .col-xs-4
ezali mpo na kosala nokinoki ba layouts ya grille. Ba mixins moke ekoki pe kosalelama pona ba layouts sémantiques mingi.padding
. Padding wana ezali offset na ba lignes pona colonne ya liboso pe ya suka via marge négative na .row
s..col-xs-4
..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.
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-width
mpo 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) { ... }
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 |
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
.
<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>
Bobongola ndenge nyonso ya grille ya bonene oyo etɛngamá te na ebongiseli ya bonene mobimba na kobongola oyo ya libándá na yo .container
na .container-fluid
.
<div class="container-fluid">
<div class="row">
...
</div>
</div>
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.
<!-- 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>
Tongela na ndakisa ya liboso na kosalaka ba layouts kutu ya dynamique mpe ya makasi koleka na ba .col-sm-*
classes ya tablette.
<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>
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.
<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>
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 .clearfix
mpe kelasi na biso ya utilité oyo eyanolaka .
<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>
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-4
etambolaka .col-md-4
likoló ya makonzí minei.
<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-0
classes.
<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>
Mpo na kosala nest ya makambo na yo na grille ya liboso, bakisa ya sika .row
mpe 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).
<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>
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.
<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>
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 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 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));
}
}
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>
Mitó ya makambo nyonso ya HTML, <h1>
na nzela ya <h6>
, ezali. .h1
na nzela ya .h6
bakelasi 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 .small
kelasi.
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>
Bootstrap ya mokili mobimba font-size
ezali 14px , na a line-height
ya 1.428 . Yango esalelami mpo na <body>
mpe baparagrafe nyonso. En plus, <p>
(paragraphes) ezuaka marge ya se ya ndambo ya hauteur ya ligne na bango oyo e calculer (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>
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>
Échelle typographique esalemi na ba variables mibale Moins na ba variables.less : @font-size-base
na @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.
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.
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>
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>
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>
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ɛ.
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-size
encastrés .<small>
Okoki na lolenge mosusu kosalela eleman ya kati na molongo na .small
na 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>
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>
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>
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.
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>
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>
Implémentation stylisée ya <abbr>
élément ya HTML pona ba abréviations na ba sigles pona kolakisa version élargie na hover. Ba abréviations na title
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 liloba attribut ezali attr .
<abbr title="attribute">attr</abbr>
Bakisa .initialism
na 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>
Lakisa ba informations ya contact pona koko oyo azali pene to nzoto mobimba ya mosala. Bobatela formatage na kosukisa milɔngɔ nyonso na <br>
.
<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>
Mpo na kozongela ba blocs ya contenus oyo ewutaki na source mosusu na kati ya mokanda na yo.
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>
Style mpe contenus ebongwanaka mpo na ba variations simples na norme moko<blockquote>
.
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>
Bakisa .blockquote-reverse
mpo na blockquote na makambo oyo ezali na boyokani na lobɔkɔ ya mobali.
<blockquote class="blockquote-reverse">
...
</blockquote>
Liste ya biloko oyo kati na yango molongo ezali na ntina polele te .
<ul>
<li>...</li>
</ul>
Liste ya biloko oyo kati na yango molongo ezali na ntina polele.
<ol>
<li>...</li>
</ol>
Longola marge par défaut list-style
mpe 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.
<ul class="list-unstyled">
<li>...</li>
</ul>
Tia biloko nyonso ya liste na molongo moko na display: inline-block;
mpe mwa padding ya pole.
<ul class="list-inline">
<li>...</li>
</ul>
Liste ya maloba oyo ezali na bandimbola oyo ezali na boyokani na yango.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
Salá maloba mpe bandimbola na <dl>
molɔngɔ pembenipembeni. Ebandi stacked lokola <dl>
s par défaut, kasi tango navbar epanzani, bongo sala oyo.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
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.
Envelopper inline fragments ya code na<code>
.
<section>
esengeli kozingama lokola inline.
For example, <code><section></code> should be wrapped as inline.
Salelá ba...<kbd>
mpo na komonisa bokɔti oyo mbala mingi bakɔtaka na nzela ya klaviatware.
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>
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 ba....pre-scrollable
kelasi, oyo ekotia max-hauteur ya 350px mpe ekopesa barre de défilement ya axe y.
Mpo na kolakisa ba variables salela <var>
tag.
y = m x + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
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>
Mpo na kosala styling ya moboko —padding ya pole mpe bobele bakaboli ya horizontal —bakisá kelasi ya moboko .table
na 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>
Salelá .table-striped
mpo na kobakisa zebra-striping na molɔngɔ́ nyonso ya mesa na kati ya <tbody>
.
Ba tableaux rayés esalemi na style na nzela ya :nth-child
selecteur 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>
Bakisa .table-bordered
mpo 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>
Bakisa .table-hover
mpo 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>
Bakisa .table-condensed
mpo 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>
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>
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-only
kelasi.
Bosala ba tableaux oyo ezo répondre na enveloppant nionso .table
na kati .table-responsive
pona 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.
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 ezali na mwa styling ya fieldset ya embarrassant oyo esangisi width
oyo 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>
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-control
width: 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 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.
Bakisa .form-inline
na 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.
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.
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-only
classe. Ezali na mayele mosusu ya kopesa elembo mpo na mayele ya kosalisa, na ndakisa aria-label
, aria-labelledby
to title
attribut. Soki moko te kati na yango ezali, batángi ya écran bakoki kosalela placeholder
attribut yango, soki ezali, kasi yebá ete kosalela yango placeholder
lokola 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>
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-horizontal
na formulaire (oyo esengeli te kozala a <form>
). Kosala bongo ebongoli .form-group
s 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>
Bandakisa ya ba contrôles ya formulaire standard oyo esungami na layout ya formulaire ya ndakisa.
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
.
Ba entrées ekozala kaka entièrement style soki ya bango type
e déclaré bien.
<input type="text" class="form-control" placeholder="Text input">
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 .
Contrôle ya formulaire oyo esimbaka ba lignes ebele ya texte. Bobongola rows
attribut soki esengeli.
<textarea class="form-control" rows="3"></textarea>
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 .disabled
kelasi na moboti .radio
, .radio-inline
, .checkbox
, to .checkbox-inline
.
<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>
Salelá bakelasi .checkbox-inline
to .radio-inline
na 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>
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>
Yebá ete ba menu mingi ya kopona ya native —elingi koloba na Safari mpe Chrome —ezali na ba coins arrondis oyo ekoki kobongisama te na nzela ya border-radius
ba 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 multiple
attribut, 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>
Ntango osengeli kotya makomi ya pɛtɛɛ pembeni ya elembo ya formulaire na kati ya formulaire moko, salelá .form-control-static
kelasi 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>
Tolongolaka ba outline
styles par défaut na ba contrôles ya formulaire mosusu mpe tosalelaka a box-shadow
na esika na yango mpo na :focus
.
:focus
étatEntrée ya exemple oyo ezali likolo esalela ba styles personnalisés na documentation na biso pona kolakisa :focus
état na a .form-control
.
Bakisa disabled
attribut boolean na entrée moko pona kopekisa ba interactions ya usager. Ba entrées oyo ekangami ezo monana pete pe ebakisa not-allowed
curseur.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Bakisa disabled
attribut na a <fieldset>
pona ko désactiver ba contrôles nionso na kati ya <fieldset>
na mbala moko.
<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.
Atako Bootstrap ekosalela ba styles oyo na ba navigateurs nionso, Internet Explorer 11 mpe na se esimbaka mobimba te disabled
attribut 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>
Bakisa readonly
attribut 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>
Texte ya lisungi ya niveau ya bloc pona 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-describedby
attribut. 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 class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
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-success
na eloko ya moboti. N'importe quel .control-label
, .form-control
, mpe .help-block
na kati ya élément wana ekozua ba styles ya validation.
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-only
kelasi - 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>
Okoki mpe kobakisa bilembo ya makanisi oyo okoki kopona na kobakisa .has-feedback
mpe elembo ya lobɔkɔ ya mobali.
Ba icônes ya ba réactions esalaka kaka na <input class="form-control">
ba éléments textuels.
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-only
kelasi. Soki osengeli kosala kozanga bilembo, bongisá top
motuya ya elembo ya kopesa makanisi. Mpo na bituluku ya bokɔti, bongisa right
motuya na motuya ya pixel oyo ebongi na kotalela bonene ya addon na yo.
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-only
kelasi 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-only
texte 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>
<form class="form-horizontal">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess3Status" class="sr-only">(success)</span>
</div>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
</div>
</div>
</form>
<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess4Status" class="sr-only">(success)</span>
</div>
</form>
<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess3">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
</div>
</form>
.sr-only
étiquettes oyo ebombamiSoki osaleli .sr-only
kelasi mpo na kobomba ba contrôle ya formulaire moko <label>
(na esika ya kosalela ba options mosusu ya étiquetage, lokola aria-label
attribut), Bootstrap ekobongisa automatiquement position ya icône mbala moko ebakisami.
<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>
Botia bosanda na kosalelaka bakelasi lokola .input-lg
, mpe botia bonene na kosalelaka bakelasi ya makonzí ya grille lokola .col-lg-*
.
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>
Nokinoki taille ya ba étiquettes mpe ba contrôles ya formulaire na kati .form-horizontal
na kobakisa .form-group-lg
to .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>
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>
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">
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.
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"
.
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-height
of <input>
-based, esalaka que e correspondre exactement te na hauteur ya ba boutons misusu na Firefox.
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>
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-only
kelasi.
Fancy ba boutons ya minene to ya mike? Bakisa .btn-lg
, .btn-sm
, to .btn-xs
mpo 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>
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 .active
na <button>
s (mpe kotia aria-pressed="true"
attribut) soki osengeli kozongela état actif na ndenge ya programme.
Pas besoin ya kobakisa :active
lokola 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>
Bakisa .active
kelasi 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>
Salá ete ba boutons ezala lokola ekoki kofina te na kozongisaka yango lisusu na opacity
.
Bakisa disabled
attribut 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>
Soki obakisi disabled
attribut na a <button>
, Internet Explorer 9 mpe na nse ekosala ete makomi ezala gris na texte-shadow moko ya mabe oyo tokoki kobongisa te.
Bakisa .disabled
kelasi 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 .disabled
lokola classe ya utilité awa, ndenge moko na .active
classe commune, yango wana prefixe moko te esengeli.
Classe oyo esalelaka pointer-events: none
pona 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.
Ba images na Bootstrap 3 ekoki kozala responsive-friendly via addition ya .img-responsive
classe. 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-responsive
kelasi na katikati, salelá .center-block
na esika ya .text-center
. Tala eteni ya bakelasi ya basalisi mpo na koyeba makambo mingi na ntina ya .center-block
bosaleli.
Na Internet Explorer 8-10, bilili ya SVG na .img-responsive
ezali na bonene ya kozanga boyokani. Mpo na kobongisa likambo yango, bakisá yangowidth: 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">
Bakisa ba classes na <img>
élément moko pona ko styler ba images facilement na projet nionso.
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">
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>
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.
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-only
kelasi .
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>
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.
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.
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>
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>
Flotter élément moko na gauche to droite na classe moko. !important
ezali 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();
}
Botia eleman moko na display: block
mpe 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();
}
Effacer float
s 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();
}
Forcer élément moko elakisama to ebombama ( y compris pona ba lecteurs ya écran ) na bosaleli ya .show
pe .hidden
ba classes. Ba classes oyo basalelaka !important
pona 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.
.hide
ezali, kasi esimbaka ntango nyonso te batángi ya écran mpe esili kosalelama banda na v3.0.1 . Salelá .hidden
to .sr-only
na esika na yango.
Lisusu, .invisible
ekoki kosalelama mpo na kobalusa kaka visibilité ya élément moko, elingi koloba ya yango display
ebongisami 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();
}
Bomba élément moko na ba appareils nionso sauf ba lecteurs d'écran na .sr-only
. Sangisa .sr-only
na .sr-only-focusable
mpo 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();
}
Salelá .text-hide
kelasi 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();
}
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.
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 display
valeur 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-lg
lisusu 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 -.
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-print
pe 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 -.
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.
Ba marques ya vert elakisi ete élément ezali komonana na esika ya kotala na yo ya lelo.
Awa, bilembo ya vert elakisi mpe ete elemande ebombami na esika ya kotala na yo ya lelo.
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 .
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 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 .
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;
}
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;
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-color
asalelaka 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
.
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 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 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 motɛkisi ezali ba mixins mpo na kosalisa kosunga ba navigateurs ebele na kokɔtisáká ba préfixes nyonso ya motɛkisi oyo etali yango na CSS na yo oyo esangisi.
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;
}
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;
}
Soki bato oyo ozali koluka bazali kosalela ba navigateurs mpe baaparɛyi ya sika mpe ya minene, kobosana te kosalela kaka box-shadow
biloko 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 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 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;
}
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;
}
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;
}
Botia opacité pona ba navigateurs nionso pe bopesa filter
fallback pona IE8.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}
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
}
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;
}
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 filter
oyo okoki kobakisa. Okoki kosala yango na kosaleláká .reset-filter()
mixin oyo ezali pembeni background-image: none;
.
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.
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();
}
Nokinoki na katikati ya eloko nyonso oyo ezali na kati ya moboti na yango. Esengaka width
to max-width
esengeli kozala na esika.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}
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); }
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 texte na pete na ellipsis na mixin moko. Esengaka élément ezala block
to inline-block
niveau.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}
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);
}
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.
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.
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.