Likolo ya échafaudage, ba éléments HTML ya moboko ezali na style mpe ematisami na ba classes extensibles mpo na kopesa lolenge ya sika, ya ntango nyonso kotala mpe koyoka.
Grille typographique mobimba esalemi na ba variables mibale ya Moins na fichier na biso ya variables.less: @baseFontSize
mpe @baseLineHeight
. Ya liboso ezali font-size ya base oyo esalelami na mobimba mpe ya mibale ezali base line-height.
Tosalelaka ba variables wana, mpe mwa matematiki, mpo na kosala ba marges, ba paddings, mpe ba line-heights ya lolenge na biso nyonso mpe mingi mosusu.
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.
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.
Eloko | Kosalela yango | Soki olingi |
---|---|---|
<strong> |
Mpo na konyata mwa ndambo ya makomi na ntina | Moko te |
<em> |
Mpo na kopesa ntina na mwa makomi na mitungisi | Moko te |
<abbr> |
Enveloppe ba abréviations na ba sigles mpo na kolakisa version oyo epanzani na hover | Botia .initialism kelasi mpo na bokuse ya makomi minene. |
<address> |
Mpo na koyeba makambo ya boyokani mpo na nkɔkɔ na yango ya penepene to nzoto mobimba ya mosala | Bobatela formatage na kosukisa ba lignes nionso na<br> |
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa kaka kofanda amet risus. Maecenas faucibus mollis oyo ezali na kati. Nulla vitae elit libero, oyo ezali na mbula-mpɛmbɛ oyo babengi pharetra augue.
Liyebisi: Bozala na bonsomi ya kosalela <b>
mpe <i>
na HTML5, kasi bosaleli na bango ebongwanaki mwa moke. <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.
Talá bandakisa mibale ya ndenge oyo <address>
tag ekoki kosalelama:
Ba abréviations oyo ezali na title
attribut ezali na bordure ya se oyo ezali na ba points clairs mpe curseur ya aide na hover. Yango epesaka ba usagers indication supplémentaire eloko moko ekolakisama na hover.
Bakisa initialism
kelasi na mokuse mpo na kobakisa boyokani ya makomi na kopesaka yango mwa moke bonene ya makomi.
HTML ezali eloko ya malamu koleka banda mampa oyo bakati na biteni.
Bokuse ya liloba attribut ezali attr .
Eloko | Kosalela yango | Soki olingi |
---|---|---|
<blockquote> |
Elemento ya niveau ya bloc mpo na kozongela makambo oyo euti na source mosusu | Bakisa .pull-left mpe .pull-right bakelasi mpo na ba options flottées |
<small> |
Elemento optionnel pona kobakisa citation oyo etali mosaleli, typiquement mokomi na titre ya mosala | Tia <cite> zingazinga ya motó ya likambo to nkombo ya liziba |
Mpo na kotya blockquote, zingá HTML<blockquote>
nyonso lokola citatio. Mpo na ba citations droites tozali ko recommander a .<p>
Botia <small>
élément optionnel pona ko citer source na bino pe okozua em dash —
avant yango pona ba raisons ya styling.
- <bokangami ya maloba>
- <p> Lorem ipsum dolor vandi amet, consectetur adipiscing elit. Motango mobimba posuere erat a ante venenatis. </p>
- <moke> Moto moko ya lokumu </small>
- </blockquote ya maloba>
Ba blockquotes ya défaut ezali na style ya boye:
Lorem ipsum dolor vanda amet, consectetur elit oyo ezo boma nzoto. Motango mobimba posuere erat a ante venenatis.
Moto moko ya lokumu na Nzoto ya mosala
Pona ko flotter blockquote na yo na droite, bakisa class="pull-right"
:
Lorem ipsum dolor vanda amet, consectetur elit oyo ezo boma nzoto. Motango mobimba posuere erat a ante venenatis.
Moto moko ya lokumu na Nzoto ya mosala
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Mitó likoló! Ba liste ya ba déscriptions horizontales ekokata ba termes oyo ezali milayi mingi pona kokota na fix ya colonne gauche text-overflow
. Na ba viewports ya mike, bakobongwana na layout ya stacked par défaut.
Envelopper ba fragments ya code inline na <code>
.
- Ndakisa , eteni < code> < / code > esengeli kozingama lokola inline .
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>
- <liboso>
- <p>Ndakisa ya makomi awa...</p>
- </pre>
Liyebisi: Kobosana te kobatela code na kati ya <pre>
bilembo pene na lobɔkɔ ya mwasi soki likoki ezali; ekosala ba onglets nionso.
Okoki kobakisa na bolingi .pre-scrollable
kelasi oyo ekotia max-hauteur ya 350px mpe ekopesa barre de défilement ya axe y.
Zwá <pre>
élément moko mpe bakisa ba classes mibale oyo okoki kopona mpo na kosala rendu oyo ebakisami.
- <p> Ndakisa ya makomi awa... </p>
- <pre class = "prettyprint ."
- ba linenums" >
- <p>Ndakisa ya makomi awa...</p>
- </pre>
Télécharger google-code-prettify pe tala readme pona ndenge ya kosalela.
Kotya eelmbo | Ndimbola |
---|---|
<table> |
Elemento ya enveloppement pona kolakisa ba données na format tabulaire |
<thead> |
Elemento ya conteneur mpo na milɔngɔ́ ya motó ya tableau ( <tr> ) mpo na kopesa bilembo na makonzí ya tableau |
<tbody> |
Elemento ya récipient mpo na ba lignes ya tableau ( <tr> ) na nzoto ya tableau |
<tr> |
Elemento ya récipient mpo na ensemble ya ba cellules ya tableau ( <td> to <th> ) oyo emonanaka na molongo moko |
<td> |
Cellule ya tableau par défaut |
<th> |
Cellule ya tableau spécial pona ba étiquettes ya colonne (to molongo, selon portée pe placement) Esengeli kosalelama na kati ya a <thead> |
<caption> |
Bolimbisi to bokuse ya makambo oyo tableau ezali na yango, mingimingi ezali na ntina mpo na batángi ya écran |
- <mesa>
- <motó>
- <tr>
- <th> ... </th> na likambo yango
- <th> ... </th> na likambo yango
- </tr>
- </thead>
- <nzoto>
- <tr>
- <td> ... </td> na likambo yango
- <td> ... </td> na likambo yango
- </tr>
- </tbody>
- </tableau>
Nkombo | Kelasi | Ndimbola |
---|---|---|
Mbeba | Moko te | Ba styles te, kaka ba colonnes na ba lignes |
Ya ntina | .table |
Kaka ba lignes horizontales entre ba lignes |
Ezali na ndelo | .table-bordered |
Ezongisaka ba coins mpe ebakisi ndelo ya libanda |
Bande ya zébra | .table-striped |
Abakisi langi ya fond ya gris clair na ba lignes impairs (1, 3, 5, etc) |
Ezali na bokundoli | .table-condensed |
Ekata padding vertical na katikati, kobanda 8px kino 4px, na kati ya nionso td mpe th ba éléments |
Ba tableaux ezali automatiquement styled na kaka mua ba frontières pona ko assurer lecture pe ko maintenir structure. Na 2.0, .table
kelasi esengeli.
- < kelasi ya mesa = "mesa" >
- ...
- </tableau>
# . | 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 |
Bozwa mwa kitoko na bamesa na bino na kobakisa zebra-striping —bakisa kaka .table-striped
kelasi.
Liyebisi: Ba tableaux rayé esalelaka :nth-child
selecteur ya CSS mpe ezali te na IE7-IE8.
- <tableau classe = "tableau-rayé" >
- ...
- </tableau>
# . | 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 |
Bakisa bandelo zingazinga ya mesa mobimba mpe ba coins arrondis mpo na ba raisons esthétiques.
- < classe ya tableau = "tableau oyo ezali na ndelo ya tableau" >
- ...
- </tableau>
# . | Prenom | Nkombo ya libota | Nkombo ya mosaleli |
---|---|---|---|
1. 1. | Marko | Otto | @mdo |
Marko | Otto | @kozwa molongo ya botimo | |
2. 2 | Yakobo | Thornton oyo azali | @mafuta |
3 | Larry ndeke | @twitter na twitter |
Sala ba tableaux na yo compact mingi na kobakisa .table-condensed
classe pona kokata padding ya cellule ya table na kati (kobanda na 8px ti na 4px).
- < classe ya tableau = "tableau-condensé" >
- ...
- </tableau>
# . | 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 |
Bozala na bonsomi ya kosangisa moko ya kelasi ya mesa mpo na kokokisa lolenge ekeseni na kosalelaka moko ya kelasi oyo ezali.
- <table class = "tableau table-rayé tableau-bordered tableau-condensé" >
- ...
- </tableau>
Kombo mobimba | |||
---|---|---|---|
# . | 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 |
Eteni ya malamu koleka na ntina na ba formulaire na Bootstrap ezali ete ba entrées mpe ba contrôles na yo nyonso emonanaka malamu ata ndenge nini otongi yango na marquage na yo. HTML ya superflue esengeli te, kasi tozali kopesa ba modèles mpo na ba oyo basengaka yango.
Ba layouts ya mindondo mingi eyaka na ba classes ya mokuse mpe ya évolutif mpo na styling ya pete mpe bokangami ya événement, yango wana ozali couvert na étape nionso.
Bootstrap eza na lisungi ya mitindo minei ya ba layouts ya formulaire:
Mitindo ndenge na ndenge ya ba layouts ya formulaire esengaka mwa mbongwana mpo na kosala marquage, kasi ba contrôles yango moko etikalaka mpe etambwisaka ndenge moko.
Ba formulaire ya Bootstrap ezali na ba styles pona ba contrôles nionso ya formulaire ya base lokola entrée, textarea, pe pona oyo olingaki kozela. Mais eza pe na nombre ya ba composants personnalisés lokola ba entrées appendées na prépendues na soutien ya ba listes ya ba cases de coche.
Ba états lokola erreur, avertissement, na succès ekotisami pona lolenge moko na moko ya contrôle ya formulaire. Ezali mpe na ba styles mpo na ba contrôles handicapés.
Bootstrap epesaka marquage ya pete mpe ba styles mpo na ba styles minei ya ba formulaire web oyo emonanaka mingi.
Nkombo | Kelasi | Ndimbola |
---|---|---|
Vertical (ya ndenge ya liboso) . | .form-vertical (esengeli te) |
Ba étiquettes stacked, aligné na gauche likolo ya ba contrôles |
Na kati ya molongo | .form-inline |
Étiquette aligné na gauche na ba contrôles ya bloc inline pona style compact |
Koluka | .form-search |
Entrée texte extra-rond mpo na esthétique ya recherche typique |
Ya kolala | .form-horizontal |
Flotter ba étiquettes gauche, aligné na droite na ligne moko na ba contrôles |
Ba défauts intelligents et légers sans marquage supplémentaire.
- < kelasi ya formulaire = "malamu" >
- <label> Nkombo ya étiquette </label>
- < lolenge ya bokoti = "mokanda" kelasi = "span3" esika = "Kokoma eloko moko..." >
- <span class = "help-block" > Ndakisa ya makomi ya lisalisi ya niveau ya bloc awa. </span>
- <label class = "esika ya kotiya elembo" >
- <input type = "checkbox" > Tala ngai
- </étiquette>
- <button type = "tinda" classe = "btn" > Tinda </button>
- </forme>
Bakisa .form-search
na formulaire mpe .search-query
na input
.
- <formule classe = "malamu formulaire-boluka" >
- < lolenge ya bokoti = "mokanda" kelasi = "motuna-boluka-moyen ya bokoti" >
- < lolenge ya bouton = "tinda" classe = "btn" > Boluka </bouton>
- </forme>
Bakisa .form-inline
na finesse alignment vertical na espacement ya ba contrôles ya forme.
- < kelasi ya formulaire = "malamu formulaire-inline" >
- < lolenge ya bokoti = "mokanda" kelasi = "bokoti-moke" esika = "Email" >
- < lolenge ya bokoti = "mot ya nzela" classe = "bokoti-moke" esika = "Mot ya nzela" >
- <label class = "esika ya kotiya elembo" >
- <input type = "checkbox" > Bokanisa ngai
- </étiquette>
- < lolenge ya bouton = "tinda" classe = "btn" > Bokota </button>
- </forme>
Elakisami na loboko ya mobali ezali na ba contrôles nionso ya formulaire par défaut oyo tozali ko soutenir. Tala liste oyo ezali na masasi:
Na kopesaka ndakisa ya layout ya formulaire oyo ezali likolo, awa ezali marquage oyo esangisi na groupe ya liboso ya entrée mpe ya contrôle. Ba .control-group
, .control-label
, mpe .controls
bakelasi nyonso esengeli mpo na kosala styling.
- < kelasi ya lolenge = "formule-horizontal" >
- <ensemble ya bilanga>
- <lisapo> Mokanda ya lisapo </lisapo>
- <div class = "etuluku-ya-bokonzi" >
- <label class = "contrôle-étiquette" mpo na = "bokoti01" > Bokotisi makomi </étiquette>
- <div classe = "ba contrôles" >
- < lolenge ya bokoti = "mokanda" kelasi = "bokoti-xmonene" id = "bokoti01" >
- <p class = "help-block" > Mokanda ya lisalisi ya kosunga </p>
- </div>
- </div>
- </esika ya bilanga>
- </forme>
Bootstrap ezali na ba styles mpo na navigateur-supportée focusé mpe disabled
ba états. Tolongoli Webkit ya liboso outline
mpe tosaleli a box-shadow
na esika na yango mpo na :focus
.
Ezali mpe na ba styles ya validation mpo na ba erreurs, ba avertissements, mpe ba succès. Mpo na kosalela, bakisá kelasi ya libunga na oyo ezali zingazinga .control-group
.
- <ensemble ya bilanga
- class = "erreur ya groupe ya contrôle" >
- ...
- </esika ya bilanga>
Bituluku ya bokomi —na makomi oyo ebakisami to oyo ebakisami liboso —epesaka lolenge ya pete ya kopesa contexte mingi mpo na makomi na yo. Bandakisa minene ezali na elembo ya @ mpo na bankombo ya basaleli ya Twitter to $ mpo na makambo ya mosolo.
Kino v1.4, Bootstrap esengelaki kosala marquage ya likolo zingazinga ya ba cases ya kotiya bilembo mpe ba radios mpo na ko empiler yango. Sikawa, ezali likambo ya pete ya kozongela <label class="checkbox">
oyo ezingaka <input type="checkbox">
.
Ba cases ya kotiya elembo na kati ya ligne mpe ba radios ezali mpe na lisungi. Bakisa kaka na to .inline
moko .checkbox
to .radio
pe osilisi.
Mpo na kosalela ba inputs ya prépend to append na forme ya inline, sala makasi otia .add-on
mpe input
na ligne moko, sans espaces.
Mpo na kobakisa makomi ya lisalisi mpo na bokotisi ya formulaire na yo, kotia makomi ya lisalisi na kati ya molongo na <span class="help-inline">
to bloc ya makomi ya lisalisi na <p class="help-block">
nsima ya eleman ya bokotisi.
Na esika ya kosala elembo nyonso bosenga ya kobakisa, tosangisi yango na sprite —liboke ya bililingi na fisyé moko oyo esalelaka CSS mpo na kotya bililingi na background-position
. Oyo ezali ndenge moko oyo tosalelaka na Twitter.com mpe esalaki biso malamu.
Ba classes nionso ya ba icônes ezali préfixé na .icon-
pona espacement ya ba kombo ya malamu pe scoping, mingi lokola ba composants na biso misusu. Yango ekosalisa mpo na koboya matata na bisaleli mosusu.
Glyphicons epesi biso nzela ya kosalela ba Halflings oyo etiamaki na kati ya bokumbi bisaleli na biso ya source ouverte tant que tozali kopesa lien mpe crédit awa na docs. Svp bokanisa kosala ndenge moko na ba projets na bino.
Bootstrap esalela <i>
tag mpo na bilembo nyonso, kasi bazali na kelasi ya cas te —bobele prefixe oyo bakabolaka. Mpo na kosalela yango, tyá code oyo elandi kaka esika nyonso:
- <i classe = "boluka-elembo" </i>
Ezali mpe na ba styles oyo ezali mpo na ba icônes inversées (ya pembe), oyo esalemi prêt na classe moko ya likolo:
- <i class = "elembo-luka elembo-mpembe" ></i>
Ezali na bakelasi 140 oyo okoki kopona mpo na bilembo na yo. Bakisa kaka <i>
tag na ba classes ya bien pe oza set. Okoki kozwa liste mobimba na sprites.less to kaka awa na mokanda oyo.
Mitó likoló! Ntango ozali kosalela pembeni ya bansinga ya makomi, lokola na ba boutons to ba liens nav, kobosana te kotika esika nsima ya <i>
tag mpo na esika oyo ebongi.
Ba icons ezali minene, kasi wapi mutu akosalela yango? Talá mwa makanisi:
Essentiellement, esika nionso okoki kotia <i>
tag, okoki kotia icône.
Salelá yango na ba boutons, bituluku ya ba boutons mpo na barre ya bisaleli, navigation, to ba entrées ya formulaire prépendu.