Kokangama ya bottes

Base ya CSS

Ba éléments HTML ya fondamental oyo esalemi na style mpe ematisami na ba classes extensibles.

Typographie

Mitó ya makambo

Mitó ya makambo nyonso ya HTML, <h1>na nzela <h6>ezali.

h1. Motó ya likambo 1

h2. Motó ya likambo 2

h3. Motó ya likambo 3

h4. Motó ya likambo 4

h5. Motó ya likambo 5
h6. Motó ya likambo 6

Kopi ya nzoto

Bootstrap ya mokili mobimba ya liboso font-sizeezali 14px , na a line-heightya 20px . Yango esalelami mpo na <body>mpe baparagrafe nyonso. En plus, <p>(paragraphes) ezuaka marge ya se ya ndambo ya line-height na bango (10px par défaut).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus na magnis ya kobota, nascetur ridiculus mus. Nullam id dolor id nibh ultricies mituka.

Cum sociis natoque penatibus na magnis ya kobota, nascetur ridiculus mus. Donec ullamcorper nulla oyo ezali na mbongo te. Duis mollis, est non commodo luctus, nisi erat ligula ya porte, eget lacinia odio sem nec elit. Donec ullamcorper nulla oyo ezali na mbongo te.

Maecenas sed diam eget risus varius blandit efandi amet non magna. Donec id elit non mi porta gravida na eget metus. Duis mollis, est non commodo luctus, nisi erat ligula ya porte, eget lacinia odio sem nec elit.

<p> ... </p>

Kopi ya nzoto ya plomb

Salá ete paragrafe moko ezala polele na kobakisáká .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor motɛkisi ya mbongo. Duis mollis, est oyo ezali na mbongo te.

<p kelasi = "kokamba" > ... </p>

Etongami na Moke

Échelle typographique esalemi na ba variables mibale ya LESS na ba variables.less : @baseFontSizena @baseLineHeight. 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.

Kobenda likebi

Salelá bilembo ya kotya likebi na ndenge ya liboso ya HTML oyo ezali na mitindo ya pɛpɛlɛ.

<small>

Mpo na kolongola likebi na kati ya molɔngɔ to na ba blocs ya makomi, salelá mwa elembo.

Molongo oyo ya makomi ezali mpo na kotalela yango lokola makomi ya mikemike.

<p> <moke> Molongo oyo ya makomi ezali mpo na kotalela yango lokola makomi ya malamu. </moke> </p>

Molende

Mpo na kopesa ntina na mwa ndambo ya makomi oyo ezali na kilo ya font oyo ezali kilo mingi.

Eteni ya makomi oyo elandi ebongolami lokola makomi ya moindo makasi .

<strong> ebongolami lokola makomi ya moindo makasi </strong>

Makomi ya Italie

Mpo na konyata mwa ndambo ya makomi oyo ezali na makomi ya italike.

Eteni ya makomi oyo elandi ebongolami lokola makomi oyo ezali na italike .

<em> ebongolami lokola makomi ya italike </em>

Mitó likoló!Bozala na bonsomi ya kosalela <b>mpe <i>na HTML5. <b>ezali mpo na kobimisa maloba to bafraze kozanga kopesa ntina mosusu nzokande <i>ezali mingimingi mpo na mongongo, maloba ya tekiniki, mpe bongo na bongo.

Ba kelasi ya alignment

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

  1. <p class = "text-left" > Mokanda oyo ekangami na lobɔkɔ ya mwasi. </p> 
  2. <p class = "text-center" > Mokanda oyo ekangami na katikati . </p> 
  3. <p class = "text-right" > Mokanda oyo ekangami na loboko ya mobali. </p>

Bakelasi ya kopesa motuya mingi

Kopesa ndimbola na nzela ya langi na mwa ndambo ya bakelasi ya utilité ya accent.

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

Etiam porta sem malesuada ya monene ya mollis euismod.

Donec ullamcorper nulla oyo ezali na mbongo te.

Aenean eu leo ​​quam. Pellentesque ornare na yango ezali na nzoto kolɔngɔnɔ.

Duis mollis, est non commodo luctus, nisi erat ligula ya porte.

  1. <p classe = "kokanga mongongo" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
  2. <p class = "kebisi ya makomi" > Etiam porta sem malesuada magna mollis euismod. </p> 
  3. <p class = "libunga-ya-makomi" > Donec ullamcorper nulla non metus aucteur fringilla. </p> 
  4. <p classe = "mayebisi-makomi" > Enean eu leo ​​quam. Pellentesque ornare na yango ezali na nzoto kolɔngɔnɔ. </p> 
  5. <p classe = "elonga ya makomi" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Maloba ya mokuse

Implémentation stylisée ya <abbr>élément ya HTML pona ba abréviations na ba sigles pona kolakisa version élargie na hover. Ba abréviations oyo ezali na titleattribut ezali na ndelo ya nse oyo ezali na ba points ya pete mpe curseur ya lisalisi na hover, kopesaka contexte ya kobakisa na hover.

<abbr>

Mpo na makomi oyo epanzani na hover molai ya abréviation, kotia titleattribut.

Bokuse ya liloba attribut ezali attr .

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

<abbr class="initialism">

Bakisa .initialismna abréviation mpo na font-size ya mwa moke.

HTML ezali eloko ya malamu koleka banda mampa oyo bakati na biteni.

<abbr title = "Monoko ya bilembo ya makomi ya likolo" class = "initialisme" > HTML </abbr>

Baadrɛsi

Lakisa ba informations ya contact pona koko oyo azali pene to nzoto mobimba ya mosala.

<address>

Bobatela formatage na kosukisa milɔngɔ nyonso na <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890. Ezali ndenge moko na likambo ya kozala na bomoi ya malamu
Kombo mobimba
liboso.ya [email protected] 
  1. <addresse>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   795 Folsom Ave, Suite 600 na mokili mobimba
  4.   San Francisco, CA 94107 <br>
  5.   <abbr motó ya likambo = "Telephone" > P: </abbr> (123) 456-7890 
  6. </addresse>
  7.  
  8. <addresse>
  9.   <strong> Nkombo mobimba </strong><br>
  10.   <a href = "mailto:#" > ya liboso.ya [email protected] </a> 
  11. </addresse>

Ba citations ya bloc

Mpo na kozongela ba blocs ya contenus oyo ewutaki na source mosusu na kati ya mokanda na yo.

Blocquote ya liboso

Zinga HTML<blockquote> nyonso lokola citatio. Mpo na ba citations droites tozali ko recommander a .<p>

Lorem ipsum dolor vanda amet, consectetur elit oyo ezo boma nzoto. Motango mobimba posuere erat a ante.

  1. <bokangami ya maloba>
  2.   <p> Lorem ipsum dolor vandi amet, consectetur adipiscing elit. Motango mobimba posuere erat a ante. </p>
  3. </blockquote ya maloba>

Ba options ya ko bloquer

Style mpe contenus ebongwanaka mpo na ba variations simples na blockquote standard.

Kopesa nkombo ya source moko

Bakisa <small>tag mpo na koyeba source. 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.

Moto moko ya lokumu na Source Title 
  1. <bokangami ya maloba>
  2.   <p> Lorem ipsum dolor vandi amet, consectetur adipiscing elit. Motango mobimba posuere erat a ante. </p>
  3.   <moke> Moto moko ya lokumu <cite title = "Titre ya source" > Titre ya source </cite></small> 
  4. </blockquote ya maloba>

Ba écrans mosusu

Salelá .pull-rightmpo na blocquote oyo ezali kopumbwapumbwa, oyo ezali na boyokani na lobɔkɔ ya mobali.

Lorem ipsum dolor vanda amet, consectetur elit oyo ezo boma nzoto. Motango mobimba posuere erat a ante.

Moto moko ya lokumu na Source Title 
  1. <blockquote classe = "kobenda-na loboko ya mobali" > 
  2.   ...
  3. </blockquote ya maloba>

Ba liste

Ezali na ordre te

Liste ya biloko oyo kati na yango molongo ezali na ntina polele te .

  • Lorem ipsum dolor vanda amet
  • Consectetur oyo ezali kopesa nzoto elit
  • Moléstie ya motángo mobimba lorem na massa
  • Facilisis na aliquet ya nisl ya prétium
  • Nulla volutpat azali na nzoto kolɔngɔnɔ
    • Eloko oyo babengi Phasellus iaculis neque
    • Purus sodales ya ba ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libéré volutpat na
  • Faucibus porta lacus oyo ezali na mpɛmbɛ
  • Aenean afanda amet erat nunc
  • Eget porttitor lorem na kombo ya nzambe
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

Epesamaki mitindo

Liste ya biloko oyo kati na yango molongo ezali na ntina polele.

  1. Lorem ipsum dolor vanda amet
  2. Consectetur oyo ezali kopesa nzoto elit
  3. Moléstie ya motángo mobimba lorem na massa
  4. Facilisis na aliquet ya nisl ya prétium
  5. Nulla volutpat azali na nzoto kolɔngɔnɔ
  6. Faucibus porta lacus oyo ezali na mpɛmbɛ
  7. Aenean afanda amet erat nunc
  8. Eget porttitor lorem na kombo ya nzambe
  1. <ol>
  2.   <li> ... </li>
  3. </ol>

Kozanga style

Longola padding ya default list-stylempe ya gauche na biloko ya liste (bana ya mbala moko kaka).

  • Lorem ipsum dolor vanda amet
  • Consectetur oyo ezali kopesa nzoto elit
  • Moléstie ya motángo mobimba lorem na massa
  • Facilisis na aliquet ya nisl ya prétium
  • Nulla volutpat azali na nzoto kolɔngɔnɔ
    • Eloko oyo babengi Phasellus iaculis neque
    • Purus sodales ya ba ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libéré volutpat na
  • Faucibus porta lacus oyo ezali na mpɛmbɛ
  • Aenean afanda amet erat nunc
  • Eget porttitor lorem na kombo ya nzambe
  1. <ul classe = "ezali na style te" > 
  2.   <li> ... </li>
  3. </ul>

Na kati ya molongo

Tia biloko nyonso ya liste na molongo moko na inline-blockmpe mwa padding ya pole.

  • Lorem ipsum ezalaka
  • Phasellus iaculis oyo ezali na nzoto
  • Nulla volutpat ezali bongo
  1. <ul classe = "na kati ya molongo" > 
  2.   <li> ... </li>
  3. </ul>

Ndimbola

Liste ya maloba oyo ezali na bandimbola oyo ezali na boyokani na yango.

Ba liste ya bandimbola
Liste ya kolimbola ezali malamu mpenza mpo na kolimbola maloba.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida na eget metus.
Malesuada ezali porta
Etiam porta sem malesuada ya monene ya mollis euismod. 
  1. <dl>
  2.   <dt> ... </dt> oyo azali na bomoi
  3.   <dd> ... </dd>
  4. </dl>

Boyebisi ya horizontal

Salá maloba mpe bandimbola na <dl>molɔngɔ pembenipembeni.

Ba liste ya bandimbola
Liste ya kolimbola ezali malamu mpenza mpo na kolimbola maloba.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida na eget metus.
Malesuada ezali porta
Etiam porta sem malesuada ya monene ya mollis euismod.
Felis euismod semper azali kozwa lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa kaka kofanda amet risus. 
  1. <dl kelasi = "dl-horizontal" > 
  2.   <dt> ... </dt> oyo azali na bomoi
  3.   <dd> ... </dd>
  4. </dl>

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 portes de vue ya moke, bakobongwana na layout ya stacked par défaut.

Code

Na kati ya molongo

Envelopper ba fragments ya code inline na <code>.

Na ndakisa, <section>esengeli kozingama lokola inline. 
  1. Ndakisa , <code > & lt ; eteni & gt ;</ code > esengeli kozingama lokola inline .

Bloc ya base

Salelá <pre>mpo na milɔngɔ́ mingi ya code. Kobosana te kokima ba parenthèses nionso ya angle na code mpo na kosala rendu malamu.

<p>Ezalela ya makomi awa...</p>
  1. <liboso>
  2.   <p>Ndakisa ya makomi awa...</p>
  3. </pre>

Mitó likoló!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-scrollablekelasi oyo ekotia max-hauteur ya 350px mpe ekopesa barre de défilement ya axe y.

Bamesa

Ba styles ya défaut

Mpo na kosala styling ya moboko —padding ya pole mpe bobele bakaboli ya horizontal —bakisá kelasi ya moboko .tablena nyonso <table>.

# . 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 
  1. < kelasi ya mesa = "mesa" > 
  2.   ...
  3. </tableau>

Ba kelasi oyo okoki kopona

Bakisa moko ya bakelasi oyo elandi na kelasi ya .tablemoboko.

.table-striped

Abakisi zebra-striping na molongo nyonso ya tableau na kati ya <tbody>via :nth-childCSS selector (ezali te na IE7-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 
  1. <tableau classe = "tableau-rayé" > 
  2.   ...
  3. </tableau>

.table-bordered

Bakisa bandelo mpe ba coins ya rond na mesa.

# . 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 
  1. < classe ya tableau = "tableau oyo ezali na ndelo ya tableau" > 
  2.   ...
  3. </tableau>

.table-hover

Activer é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 ndeke @twitter na twitter 
  1. < classe ya tableau = "tableau-hover" > 
  2.   ...
  3. </tableau>

.table-condensed

Esalaka ba tables compact mingi na kokata ba remplissage ya cellule na kati.

# . 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 
  1. < classe ya tableau = "tableau-condensé" > 
  2.   ...
  3. </tableau>

Ba kelasi ya molɔngɔ oyo okoki kopona

Salelá bakelasi ya contexte mpo na kopesa langi na milɔngɔ ya tableau.

Kelasi Ndimbola
.success Ezali komonisa likambo oyo elongi to oyo esalemi malamu.
.error Ezali komonisa likambo moko ya likama to oyo ekoki kozala mabe.
.warning Ezali komonisa likebisi oyo ekoki kozala na mposa ya kotya likebi.
.info Esalemi lokola alternative na ba styles ya défaut.
# . Eloko Kofuta Ezwami Statut
1. 1. TB - Sanza na sanza 01/04/2012 na mokolo ya 01/04 Kondima
2. 2 TB - Sanza na sanza 02/04/2012 na mokolo ya 02/04 Eboyaki
3 TB - Sanza na sanza 03/04/2012 na mokolo ya 03/04 Kozelisa
4. TB - Sanza na sanza 04/04/2012 na mokolo ya 04/04 Benga na kati mpo na kondimisa 
  1. ...
  2.   < tr classe = "elonga" >
  3.     <td> 1 < /td> Ezali ndenge nini?
  4.     <td>TB - Sanza na sanza</ td >
  5.     <td> 01 / 04 / 2012 < /td> Ezali ndenge nini?
  6.     <td>Endimami</ td >
  7.   </ tr >
  8. ...

Marquage ya table oyo esungami

Liste ya ba éléments HTML ya tableau oyo esungami mpe ndenge nini esengeli kosalela yango.

Kotya eelmbo Ndimbola
<table> Elemento ya enveloppe mpo na 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 na placement).
<caption> Bolimbisi to bokuse ya makambo oyo tableau ezali na yango, mingimingi ezali na ntina mpo na batángi ya écran 
  1. <mesa>
  2.   <maloba ya nse> ... </maloba ya nse>
  3.   <motó>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </tr>
  8.   </thead>
  9.   <nzoto>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </tableau>

Baformilɛrɛ

Ba styles ya défaut

Ba contrôles ya formulaire individuel ezuaka styling, kasi sans classe ya base oyo esengeli na <form>to ba changements minene na marquage. Esali que ba étiquettes empilé, oyo ezo aligné na gauche likolo ya ba contrôles ya formulaire.

Legende Ndakisa ya mokanda ya lisalisi ya nivo ya bloc awa. 
  1. <lolenge>
  2.   <ensemble ya bilanga>
  3.     <lisapo> Lisapo </lisapo>
  4.     <label> Nkombo ya étiquette </label>
  5.     <input type = "text" placeholder = "Kokoma eloko moko..." >  
  6.     <span class = "help-block" > Ndakisa ya makomi ya lisalisi ya niveau ya bloc awa. </span> 
  7.     <label class = "boîte de coche" > 
  8.       <input type = "checkbox" > Tala ngai 
  9.     </étiquette>
  10.     <button type = "tinda" classe = "btn" > Tinda </button>  
  11.   </esika ya bilanga>
  12. </forme>

Ba layouts oyo okoki kopona

Esangisi na Bootstrap ezali na ba layouts misato ya formulaire optionnels mpo na ba cas ya usage commun.

Formulaire ya koluka

Bakisa .form-searchna formulaire mpe .search-queryna <input>mpo na bokoti ya makomi ya extra-rond.

  1. < kelasi ya formulaire = "formule-boluka" > 
  2.   < lolenge ya bokoti = "mokanda" kelasi = "motuna-boluka-moyen ya bokoti" >  
  3.   < lolenge ya bouton = "tinda" classe = "btn" > Boluka </bouton>  
  4. </forme>

Formulaire ya kati ya ligne

Bakisa .form-inlinempo na ba étiquettes aligné na gauche mpe ba contrôles inline-block mpo na layout compact.

  1. < kelasi ya formulaire = "formule-inline" > 
  2.   < lolenge ya bokoti = "mokanda" kelasi = "bokoti-moke" esika = "Email" >   
  3.   < lolenge ya bokoti = "mot ya nzela" classe = "bokoti-moke" esika = "Mot ya nzela" >   
  4.   <label class = "boîte de coche" > 
  5.     <input type = "checkbox" > Bokanisa ngai 
  6.   </étiquette>
  7.   < lolenge ya bouton = "tinda" classe = "btn" > Bokota </button>  
  8. </forme>

Forme horizontale

Bobongisa ba étiquettes na droite mpe bo flotter yango na gauche mpo ebima na ligne moko na ba contrôles. Esengaka mbongwana ya bilembo mingi uta na formulaire ya liboso:

  • Bakisa .form-horizontalna formulaire
  • Envelopper ba étiquettes na ba contrôles na kati.control-group
  • Bakisa .control-labelna étiquette
  • Envelopper ba contrôles nionso oyo ezo sangana na kati .controlspona alignment ya bien
  1. < kelasi ya lolenge = "formule-horizontal" > 
  2.   <div class = "etuluku-ya-bokonzi" > 
  3.     <label class = "étiquette-contrôle" mpo na = "Email ya kokotisa" > Email </label>  
  4.     <div classe = "ba contrôles" > 
  5.       < lolenge ya bokoti = "mokomi " id = "Email ya bokoti" esika ya esika = "Email" >   
  6.     </div>
  7.   </div>
  8.   <div class = "etuluku-ya-bokonzi" > 
  9.     <label class = "contrôle-étiquette" mpo na = "inputPassword" > Mot ya nzela </label>  
  10.     <div classe = "ba contrôles" > 
  11.       < lolenge ya bokoti = "mot ya nzela" id = "Mot ya nzela ya bokoti" placeholder = "Mot ya nzela" >   
  12.     </div>
  13.   </div>
  14.   <div class = "etuluku-ya-bokonzi" > 
  15.     <div classe = "ba contrôles" > 
  16.       <label class = "boîte de coche" > 
  17.         <input type = "checkbox" > Bokanisa ngai 
  18.       </étiquette>
  19.       < lolenge ya bouton = "tinda" classe = "btn" > Bokota </button>  
  20.     </div>
  21.   </div>
  22. </forme>

Ba contrôles ya formulaire oyo esungami

Bandakisa ya ba contrôles ya formulaire standard oyo esungami na layout ya formulaire ya ndakisa.

Ba inputs

Contrôle ya formulaire oyo emonanaka mingi, ba champs ya entrée basé na texte. Esangisi lisungi mpo na mitindo nyonso ya HTML5: makomi, mot de passe, datetime, datetime-local, date, sanza, ngonga, poso, nimero, email, url, boluki, tel, mpe langi.

Esengaka kosalela oyo elakisami typena ntango nyonso.

  1. < lolenge ya bokoti = "mokanda" esika = "Bokotisi makomi" >

Esika ya makomi

Contrôle ya formulaire oyo esimbaka ba lignes ebele ya texte. Bobongola rowsattribut soki esengeli.

  1. < milɔngɔ ya esika ya makomi = "3" ></esika ya makomi>

Ba cases ya kotiya bilembo mpe ba radios

Ba cases ya kotiya bilembo ezali mpo na kopona option moko to mingi na liste ntango ba radios ezali mpo na kopona option moko kati na mingi.

Par défaut (ezali ebele) .


  1. <label class = "boîte de coche" > 
  2.   < lolenge ya bokoti = "boîte de coche" motuya = "" >  
  3.   Nzela ya liboso ezali oyo mpe oyo —kobosana te kokɔtisa ntina oyo ezali malamu mpenza
  4. </étiquette>
  5.  
  6. < kelasi ya étiquette = "radio" > 
  7.   < lolenge ya bokoti = "radio" kombo = "optionsRadios" id = "optionsRadios1" valeur = "option1" etiamaki elembo >     
  8.   Nzela ya liboso ezali oyo mpe oyo —kobosana te kokɔtisa ntina oyo ezali malamu mpenza
  9. </étiquette>
  10. < kelasi ya étiquette = "radio" > 
  11.   < lolenge ya bokoti = "radio" kombo = "baRadio ya ba options" id = "baRadio ya ba options2" valeur = "option2" >    
  12.   Option mibale ekoki kozala eloko mosusu mpe kopona yango ekolongola option moko
  13. </étiquette>

Ba cases ya kotiya elembo na kati ya molɔngɔ

Bakisa .inlinekelasi na série ya ba cases to ba radios mpo ba contrôles ebima na ligne moko.

  1. <label class = "boîte de coche na kati ya molongo" > 
  2.   < lolenge ya bokoti = " boîte de coche" id = "boîte de contrôle na kati ya ligne1" valeur = "option1" > 1   
  3. </étiquette>
  4. <label class = "boîte de coche na kati ya molongo" > 
  5.   < lolenge ya bokoti = " boîte de coche" id = "boîte de contrôle en ligne2" valeur = "option2" > 2   
  6. </étiquette>
  7. <label class = "boîte de coche na kati ya molongo" > 
  8.   < lolenge ya bokoti = " boîte de coche" id = "boîte de contrôle na kati ya ligne3" valeur = "option3" > 3   
  9. </étiquette>

Ezali kopona

Salelá option par défaut to lakisa a multiple="multiple"mpo na kolakisa ba options ebele na mbala moko.


  1. <pona>
  2.   <nzela> 1 </option>
  3.   <nzela> 2 </option>
  4.   <nzela> 3 </option>
  5.   <nzela> 4 </option>
  6.   <nzela> 5 </option>
  7. </pona>
  8.  
  9. <pona ebele = "ebele" > 
  10.   <nzela> 1 </option>
  11.   <nzela> 2 </option>
  12.   <nzela> 3 </option>
  13.   <nzela> 4 </option>
  14.   <nzela> 5 </option>
  15. </pona>

Kobakisa ba contrôles ya formulaire

Kobakisa likolo ya ba contrôles ya navigateur oyo ezali, Bootstrap ezali na ba composants misusu ya formulaire ya tina.

Ba entrées prépendues mpe oyo ebakisami

Bakisa makomi to ba boutons liboso to nsima ya bokɔti nyonso oyo esalemi na makomi. Sala note que selectba éléments ezali soutenu te awa.

Ba options ya défaut

Zinga an .add-onmpe an inputna moko ya bakelasi mibale mpo na kokanga liboso to kobakisa makomi na bokoti.

@

.00 
  1. <div class = "kokɔtisa-kosala liboso" > 
  2.   <span classe = "ebakisi" > @ </span> 
  3.   < classe ya bokoti = "span2" id = "Kokota liboso" lolenge = "mokanda" esika ya esika = "Nkombo ya mosaleli" >    
  4. </div>
  5. <div class = "kokɔtisa-kobakisa" > 
  6.   < classe ya bokoti = "span2" id = "Kokota oyo ebakisami" lolenge = "mokanda" >   
  7.   <span classe = "ebakisi" > .00 </span> 
  8. </div>

Esangisi yango

Salelá bakelasi nyonso mibale mpe bandakisa mibale ya .add-onmpo na kosala liboso mpe kobakisa bokɔti moko.

$ .00 
  1. <div class = "kokɔtisa liboso ya kokɔtisa-kobakisa" > 
  2.   <span classe = "ebakisi" > $ </span> 
  3.   < classe ya bokoti = "span2" id = "Bokotisi oyo ebakisamiPrepended" type = "texte" >   
  4.   <span classe = "ebakisi" > .00 </span> 
  5. </div>

Ba boutons na esika ya makomi

Na esika ya a <span>na makomi, salelá a .btnmpo na kokangisa bouton moko (to mibale) na esika oyo bakomi.

  1. <div class = "kokɔtisa-kobakisa" > 
  2.   < classe d'entrée = "span2" id = "Bouton d'entrée oyo ebakisami" type = "texte" >   
  3.   <bouton classe = "btn" type = "bouton" > Kende! </bouton>  
  4. </div>
  1. <div class = "kokɔtisa-kobakisa" > 
  2.   < classe d'entrée = "span2" id = "ba Boutons d'entrée oyo ebakisami" type = "texte" >   
  3.   <bouton classe = "btn" type = "button" > Boluka </bouton>  
  4.   <bouton classe = "btn" type = "bouton" > Ba options </bouton>  
  5. </div>

Ba boutons oyo ezali kokita

  1. <div class = "kokɔtisa-kobakisa" > 
  2.   < classe ya bokoti = "span2" id = "Bouton ya kokita oyo ebakisami" type = "texte" >   
  3.   <div kelasi = "btn-etuluku" > 
  4.     <bouton classe = "btn kokita-toggle" data-toggle = "kokita" >  
  5.       Mosala
  6.       <span kelasi = "caret" </span> 
  7.     </bouton>
  8.     <ul class = "menu ya kokita" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div class = "kokɔtisa-kosala liboso" > 
  2.   <div kelasi = "btn-etuluku" > 
  3.     <bouton classe = "btn kokita-toggle" data-toggle = "kokita" >  
  4.       Mosala
  5.       <span kelasi = "caret" </span> 
  6.     </bouton>
  7.     <ul class = "menu ya kokita" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   < classe ya bokoti = "span2" id = "Bouton ya kokita liboso" type = "texte" >   
  12. </div>
  1. <div class = "kokɔtisa liboso ya kokɔtisa-kobakisa" > 
  2.   <div kelasi = "btn-etuluku" > 
  3.     <bouton classe = "btn kokita-toggle" data-toggle = "kokita" >  
  4.       Mosala
  5.       <span kelasi = "caret" </span> 
  6.     </bouton>
  7.     <ul class = "menu ya kokita" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   < classe ya bokoti = "span2" id = "Bouton ya kokita oyo ebakisamiPrepended" type = "texte" >   
  12.   <div kelasi = "btn-etuluku" > 
  13.     <bouton classe = "btn kokita-toggle" data-toggle = "kokita" >  
  14.       Mosala
  15.       <span kelasi = "caret" </span> 
  16.     </bouton>
  17.     <ul class = "menu ya kokita" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Ba groupes ya kokita oyo ekabolami

  1. <lolenge>
  2.   <div class = "kokɔtisa-kosala liboso" > 
  3.     <div kelasi = "btn-etuluku" > ... </div> 
  4.     < lolenge ya bokoti = "mokanda" > 
  5.   </div>
  6.   <div class = "kokɔtisa-kobakisa" > 
  7.     < lolenge ya bokoti = "mokanda" > 
  8.     <div kelasi = "btn-etuluku" > ... </div> 
  9.   </div>
  10. </forme>

Formulaire ya koluka

  1. < kelasi ya formulaire = "formule-boluka" > 
  2.   <div class = "kokɔtisa-kobakisa" > 
  3.     < lolenge ya bokoti = "mokanda" kelasi = "span2 boluki-motuna" >  
  4.     < lolenge ya bouton = "tinda" classe = "btn" > Boluka </bouton>  
  5.   </div>
  6.   <div class = "kokɔtisa-kosala liboso" > 
  7.     < lolenge ya bouton = "tinda" classe = "btn" > Boluka </bouton>  
  8.     < lolenge ya bokoti = "mokanda" kelasi = "span2 boluki-motuna" >  
  9.   </div>
  10. </forme>

Contrôle ya dimensionnement

Salelá ba classes ya taille relative lokola .input-largeto ekokanisa ba entrées na yo na ba taille ya colonne ya grille na kosalelaka .span*ba classes.

Ba entrées ya niveau ya bloc

Sala que n'importe quel <input>ou <textarea>élément e se comporter lokola élément ya niveau ya bloc.

  1. < classe ya bokoti = "niveau-ya bloc-ya bokoti" type = "mokomi" placeholder = ".niveau-ya bloc-ya bokoti" >

Taille ya relative

  1. < classe ya entrée = "entrée-mini" type = "texte" placeholder = ".input-mini" >   
  2. < classe ya bokoti = "bokoti-moke" lolenge = "mokanda" esika = " .bokoti -moke" >   
  3. < classe ya bokoti = "moyen-ya bokoti" lolenge = "mokanda" ya esika = ".moyen ya bokoti " >   
  4. < classe ya bokoti = "bokoti-monene" lolenge = "mokanda" esika = " .bokoti -monene" >   
  5. < classe ya bokoti = "bokoti-xmonene" lolenge = "mokanda" esika = ".bokoti-xmonene" >   
  6. < classe ya bokoti = "bokoti-xxmonene" lolenge = " mokomi" esika ya esika = ".bokoti-xxmonene" >

Mitó likoló!Na ba versions oyo ekoya, tokozala ko changer usage ya ba classes oyo ya entrée relative po ekokana na ba taille ya ba boutons na biso. Na ndakisa, .input-largeekobakisa padding mpe font-size ya entrée moko.

Taille ya grille

Salelá .span1to .span12mpo na bokɔti oyo ekokani na bonene moko ya makonzí ya grille.

  1. < classe ya bokoti = "span1" lolenge = "mokanda" esika = ".span1" >   
  2. < classe ya bokoti = "span2" lolenge = "mokanda" esika = ".span2" >   
  3. < classe ya bokoti = "span3" lolenge = "mokanda" esika = ".span3" >   
  4. <pona kelasi = "span1" > 
  5.   ...
  6. </pona>
  7. <pona kelasi = "span2" > 
  8.   ...
  9. </pona>
  10. <pona kelasi = "span3" > 
  11.   ...
  12. </pona>

Mpo na ba entrées ya grille ebele na ligne moko, salela .controls-rowclasse ya modificateur mpo na espacement ya malamu . Ezali ko flotter ba entrées mpo na ko collapser blanc-espace, kotiya ba marges oyo esengeli, mpe ko effacer flotteur.

  1. <div classe = "ba contrôles" > 
  2.   < classe ya bokoti = "span5" lolenge = "mokanda" esika = ".span5" >   
  3. </div>
  4. <div class = "ba contrôles-molongo" > 
  5.   < classe ya bokoti = "span4" lolenge = "mokanda" esika = ".span4" >   
  6.   < classe ya bokoti = "span1" lolenge = "mokanda" esika = ".span1" >   
  7. </div>
  8. ...

Ba entrées oyo ekoki kobongisama te

Présenter ba données na formulaire oyo ezali éditable te sans kosalela marquage ya formulaire ya solo.

Basusu bazali kopesa motuya awa 
  1. <span class = "input-xlarge uneditable-input" > Mwa motuya awa </span>

Bosala misala

Sukisa formulaire na groupe ya ba actions (boutons). Ntango otye yango na kati ya .form-actions, ba boutons ekokɔta yango moko mpo na kozala na molɔngɔ na ba contrôles ya formulaire.

  1. <div class = "misala-ya lolenge" > 
  2.   < lolenge ya bouton = "tinda" classe = "btn btn-primary" > Bomba mbongwana </button>  
  3.   < lolenge ya bouton = "bouton" classe = "btn" > Bolongoli </bouton>  
  4. </div>

Mokanda ya lisalisi

Lisungi ya nivo ya kati mpe ya bloc mpo na makomi ya lisalisi oyo ebimaka zingazinga ya ba contrôles ya formulaire.

Lisalisi na kati ya molɔngɔ

Mokanda ya lisalisi na kati ya molɔngɔ 
  1. < lolenge ya bokoti = "mokanda" ><span classe = "lisalisi-na molongo" > Mokanda ya lisalisi ya kati ya molongo </span>

Bokanga lisalisi

Bloc ya molai ya makomi ya lisalisi oyo epanzani na molongo ya sika mpe ekoki koleka molongo moko. 
  1. <input type = "text" ><span class = "help-block" > Bloc ya molai ya makomi ya lisalisi oyo epanzani na molongo ya sika mpe ekoki koleka molongo moko. </span>

Ba états ya contrôle ya forme

Pesa makanisi na basaleli to bapaya na ba états ya ba réactions ya moboko na ba contrôles ya formulaire mpe ba étiquettes.

Bokotisi focus

Tolongolaka ba outlinestyles par défaut na ba contrôles ya formulaire mosusu mpe tosalelaka a box-shadowna esika na yango mpo na :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "texte" valeur = "Oyo ezali focusé..." >

Ba entrées oyo ezali valide te

Ba entrées ya style na nzela ya fonctionnalité ya navigateur par défaut na :invalid. Lakisa a type, bakisa requiredattribut soki esika ezali ya kopona te, mpe (soki ekoki) lakisa a pattern.

Yango ezali te na ba versions ya Internet Explorer 7-9 mpo na bozangi ya lisungi mpo na ba pseudo selecteurs ya CSS.

  1. < classe ya bokoti = "span3" lolenge = "email" esengeli >

Ba entrées oyo ekangami

Bakisa disabledattribut na entrée moko pona kopekisa entrée ya usager pe ko déclencher look ya mua différent.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Bokotisi ekangami awa..." ekangami >

Validation elobi

Bootstrap ezali na ba styles ya validation pona erreur, avertissement, info, na ba messages ya succès. Mpo na kosalela, bakisá kelasi oyo ebongi na oyo ezali zingazinga .control-group.

Ekoki kozala ete likambo moko esalemaki mabe
Svp bobongisa libunga yango
Nkombo ya mosaleli ezwami
Woohoo! 
  1. <div class = "kebisi ya etuluku ya bokonzi" > 
  2.   <label class = "contrôle-étiquette" mpo na = "inputWarning" > Bokotisi na likebisi </label>  
  3.   <div classe = "ba contrôles" > 
  4.     < lolenge ya bokoti = "mokanda" id = "Kebisi ya bokoti" >  
  5.     <span class = "help-inline" > Eloko moko ekoki kozala mabe </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "libunga ya etuluku ya bokonzi" > 
  10.   <label class = "contrôle-étiquette" mpo na = "inputError" > Bokotisi na libunga </label>  
  11.   <div classe = "ba contrôles" > 
  12.     < lolenge ya bokoti = "mokanda" id = "Libunga ya bokoti" >  
  13.     <span class = "help-inline" > Svp bobongisa libunga </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "info ya groupe ya contrôle" > 
  18.   <label class = "contrôle-étiquette" mpo na = "info ya kokotisa" > Kokota na info </label>  
  19.   <div classe = "ba contrôles" > 
  20.     < lolenge ya bokoti = "mokanda" id = "Mayebisi ya bokoti" >  
  21.     <span class = "help-inline" > Nkombo ya mosaleli esi ezwami </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "succès ya groupe ya contrôle" > 
  26.   <label class = "contrôle-étiquette" mpo na = "inputSuccess" > Bokotisi na elonga </label>  
  27.   <div classe = "ba contrôles" > 
  28.     < lolenge ya bokoti = "mokanda" id = "Elonga ya bokoti" >  
  29.     <span class = "lisalisi-na molongo" > Woohoo! </span> 
  30.   </div>
  31. </div>

Ba boutons

Ba boutons ya défaut

Ba styles ya bouton ekoki kosalelama na eloko nyonso na .btnkelasi oyo esalelami. Kasi, typiquement okolinga kosalela oyo na kaka <a>mpe <button>ba éléments mpo na rendu ya malamu koleka.

Bouton classe="" Ndimbola
btn Bouton gris standard na gradient
btn btn-primary Epesaka poids visuel supplémentaire mpe e identifiaka action ya liboso na ensemble ya ba boutons
btn btn-info Esalemi lokola alternative na ba styles ya défaut
btn btn-success Ezali komonisa likambo oyo elongi to oyo esalemi malamu
btn btn-warning Ezali kolakisa ete esengeli kozwa bokebi na likambo oyo
btn btn-danger Ezali komonisa likambo moko ya likama to oyo ekoki kozala mabe
btn btn-inverse Alternate bouton gris foncé, ekangami te na action sémantique to kosalela
btn btn-link Bokitisaka ntina ya bouton moko na kosala ete ezala lokola lien wana ozali kobatela bizaleli ya bouton

Compatibilité ya navigateur croisé

IE9 e crop ba gradients ya fond te na ba coins arrondis, yango wana tolongoli yango. Related, IE9 jankifies buttonba éléments désactivés, ko rendre texte gris na texte-shadow moko ya mabe oyo tokoki kobongisa te.

Ba taille ya ba boutons

Fancy ba boutons ya minene to ya mike? Bakisa .btn-large, .btn-small, to .btn-minimpo na bonene mosusu.

  1. <p>
  2.   <bouton classe = "btn btn-monene btn-primaire" type = "bouton" > Bouton ya monene </button>  
  3.   <bouton classe = "btn btn-monene" type = "bouton" > Bouton ya monene </bouton>  
  4. </p>
  5. <p>
  6.   <bouton classe = "btn btn-primaire" type = "bouton" > Bouton ya liboso </bouton>  
  7.   <bouton classe = "btn" type = "button" > Bouton ya liboso </button>  
  8. </p>
  9. <p>
  10.   <bouton classe = "btn btn-moke btn-primaire" type = "bouton" > Bouton ya moke </bouton>  
  11.   <bouton classe = "btn btn-moke" type = "bouton" > Bouton ya moke </bouton>  
  12. </p>
  13. <p>
  14.   <bouton classe = "btn btn-mini btn-primaire" lolenge = "bouton" > Mini bouton </bouton>  
  15.   <bouton classe = "btn btn-mini" type = "bouton" > Bouton mini </bouton>  
  16. </p>

Salá ba boutons ya niveau ya bloc —oyo epanzani na bonene mobimba ya moboti —na kobakisa .btn-block.

  1. <bouton classe = "btn btn-monene btn-bloc btn-primaire" type = "bouton" > Bouton ya niveau ya bloc </button>  
  2. <bouton classe = "btn btn-monene btn-bloc" type = "bouton" > Bouton ya niveau ya bloc </button>

Etat ya désactivé

Sala que ba boutons ezala uncliquer na ko fade yango sima 50%.

Elemento ya anchor

Bakisa .disabledkelasi na <a>ba boutons.

Lien ya liboso Lien 

  1. <a href = "#" class = "btn btn-monene btn-ya liboso ekangami" > Lien ya liboso </a>  
  2. <a href = "#" classe = "btn btn-monene ekangami" > Lien </a>

Mitó likoló!Tosalelaka .disabledlokola classe ya utilité awa, ndenge moko na .activeclasse commune, yango wana prefixe moko te esengeli. Lisusu, kelasi oyo ezali kaka mpo na esthétique; esengeli osalela JavaScript personnalisé mpo na kokanga ba liens awa.

Elemento ya bouton

Bakisa disabledattribut na <button>ba boutons.

  1. <button type = "button" class = "btn btn-ya monene btn-ya liboso ekangami" ekangami = "ekangamaki" > Bouton ya liboso </button>   
  2. < lolenge ya bouton = "bouton" classe = "btn btn-monene" ekangami > Bouton </bouton>

Kelasi moko, ba tags ebele

Salelá .btnkelasi na <a>, <button>, to <input>eloko moko.

Lien 
  1. <a classe = "btn" href = "" > Lien </a>  
  2. <bouton classe = "btn" type = "kotinda" > Bouton </bouton>  
  3. < classe ya bokoti = "btn" lolenge = "bouton" motuya = "Kokota" >   
  4. < classe ya entrée = "btn" type = "tinda" valeur = "Tinda" >

Lokola momeseno malamu, meka kokokanisa eleman mpo na contexte na yo mpo na kosala ete boyokani ya rendu croisé-navigateur. Soki ozali na input, salelá moko <input type="submit">mpo na bouton na yo.

Bililingi

Bakisa ba classes na <img>élément moko pona ko styler ba images facilement na projet nionso.

140x140 na mokili mobimba 140x140 na mokili mobimba 140x140 na mokili mobimba 
  1. <img src = "..." classe = "emg-ezali na rond" >  
  2. <img src = "..." kelasi = "cercle-ya-img" >  
  3. <img src = "..." kelasi = "img-polaroid" >

Mitó likoló! .img-roundedmpe .img-circleesalaka te na IE7-8 mpo na kozanga border-radiuslisungi.

Ba icons ya ba Glyphicons

Ba glyphes ya elembo

140 bilembo na lolenge ya sprite, ezali na langi ya motane makasi (ya liboso) mpe ya mpɛmbɛ, epesami na Glyphicons .

  • elembo-verre
  • icon-miziki
  • elembo-koluka
  • elembo-enveloppe
  • icon-motema
  • elembo-monzoto
  • icon-star-ezali na eloko te
  • elembo-mosaleli
  • icon-filme ya kosala
  • icon-ya-monene
  • icon-th
  • elembo-ya-liste
  • elembo-ok
  • icon-kolongola yango
  • kosala zoom ya elembo
  • elembo-kosala zoom-out
  • elembo oyo ekangamaka
  • elembo-elembo
  • elembo-cog
  • elembo-bosɔtɔ
  • elembo-ndako
  • elembo-fisyé
  • elembo-ntango
  • icon-nzela
  • elembo-télécharger-alt
  • icon-télécharger
  • icon-kotya na esika na yango
  • icon-boîte de réception
  • elembo-kosakana-cercle
  • icon-kozongela
  • icon-kozongisa sika
  • liste ya bilembo-alt
  • icon-lock ya kokangama
  • elembo-drapo
  • ba icon-écouteurs
  • elembo-volume-kokangama
  • elembo-volume-na nse
  • elembo-volume-komatisama
  • elembo-qrcode
  • ikode-barre
  • elembo ya elembo
  • ba icon-tags
  • buku ya bilili
  • elembo-elembo ya marque
  • icon-print
  • elembo-kamera
  • elembo-fonte
  • elembo-ya moindo makasi
  • icon-italic
  • elembo-makomi-bolai
  • elembo-makomi-bonene
  • icon-align-na lobɔkɔ ya mwasi
  • icon-align-centre ya kosala
  • icon-align-na lobɔkɔ ya mobali
  • icon-align-ko justifier
  • liste ya bilembo
  • icon-indent-na lobɔkɔ ya mwasi
  • icon-indent-na lobɔkɔ ya mobali
  • elembo-elongi-ntango-video
  • elembo-elilingi
  • elembo-krɛyo
  • elembo-map-marqueur
  • icon-bobongisa
  • elembo-tint
  • icon-bobongola
  • icon-kokabola
  • icon-check na yango
  • elembo-kotambola
  • icon-etamboli-kozonga sima
  • icon-ya mbangu-kozonga sima
  • elembo-na nsima
  • icon-play
  • elembo-kopema mwa moke
  • elembo-kotelemisa
  • icon-kokende liboso
  • icon-kokende liboso nokinoki
  • icon-etamboli-kokende liboso
  • elembo-kobimisa
  • elembo-chevron-na lobɔkɔ ya mwasi
  • elembo-chevron-na lobɔkɔ ya mobali
  • elembo-bakisa-elembo
  • elembo-kolongola-elembo
  • elembo-kolongola-elembo
  • elembo-ok-elembo
  • elembo-motuna-elembo
  • elembo-ya-nsango-elembo
  • icon-shot ya écran
  • icon-kolongola-cercle
  • icon-ok-cercle ya kosala
  • icon-ban-cercle ya epekiseli
  • elembo-flèche-na lobɔkɔ ya mwasi
  • elembo-flèche-na lobɔkɔ ya mobali
  • elembo-flèche-likolo
  • elembo-flɛ́mɛ-na nse
  • icon-kokabola-alt
  • icon-bobongola bonene-etondi
  • icon-bobongola bonene-ya moke
  • elembo-plus
  • elembo-kolongola
  • elembo-monzoto
  • elembo-ya-koganga-elembo
  • icon-likabo
  • elembo-lokasa
  • elembo-moto
  • icon-liso-efungolama
  • icon-liso-kokangama
  • elembo-ya-kebisi-elembo
  • icon-plan
  • elembo-manáka
  • icon-ya mbalakaka
  • icon-kopesa makanisi
  • elembo-aimant
  • elembo-chevron-likolo
  • elembo-chevron-na nse
  • elembo-kozongisa lisusu tweet
  • icon-chariot ya kosomba biloko
  • elembo-dossier-kokanga
  • elembo-dossier-efungolama
  • icon-bobongola bonene-ya semba
  • icon-bobongola bonene-horizontal
  • elembo-hdd
  • elembo-liseke ya ngɔmbɛ
  • elembo-ngonga
  • elembo-mokanda ya mokanda
  • icon-ya loboko ya monene
  • icon-masapi minene-na nse
  • icon-loboko-na lobɔkɔ ya mobali
  • icon-loboko-na lobɔkɔ ya mwasi
  • icon-loboko-likolo
  • icon-loboko-na nse
  • icon-cercle-flèche-na loboko ya mobali
  • icon-cercle-flèche-gauche
  • icon-cercle-fléche-likolo
  • icon-cercle-flɛ́mɛ-na nse
  • elembo-globe
  • clé ya elembo
  • icon-misala ya kosala
  • filtre ya elembo
  • icon-porte-documents
  • elembo-ekran mobimba

Attribution ya ba Glyphicons

Glyphicons Halflings ezalaka normalement gratuitement te, mais arrangement entre Bootstrap na ba créateurs ya Glyphicons esali que yango ezala possible sans frais pona yo en tant que ba développeurs. Comme merci, tosengi yo otia lien optionnel ya kozonga na Glyphicons chaque fois que ekozala pratique.

Ndenge ya kosalela

Ba icons nionso esengaka <i>tag oyo ezali na classe unique, préfixé na icon-. Mpo na kosalela yango, tyá code oyo elandi kaka esika nyonso:

  1. <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. Toko enforcer spécifiquement classe oyo na hover na ba états actifs pona ba liens nav na dropdown.

  1. <i class = "elembo-luka elembo-mpembe" ></i>

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.

Bandakisa ya bilembo

Salelá yango na ba boutons, bituluku ya ba boutons mpo na barre ya bisaleli, navigation, to ba entrées ya formulaire prépendu.

Ba boutons

Lisanga ya ba boutons na barre ya bisaleli ya bouton
  1. <div class = "btn-barre ya bisaleli" > 
  2.   <div kelasi = "btn-etuluku" > 
  3.     <a class = "btn" href = "#" ><i classe = "elembo-kobongisa-na-gauche" ></i></a>   
  4.     <a class = "btn" href = "#" ><i classe = "esika-ya-kobongisa-elembo" ></i></a>   
  5.     <a classe = "btn" href = "#" ><i classe = "elembo-kobongisa-na-na-na-na-likolo" </i></a>   
  6.     <a class = "btn" href = "#" ><i classe = "kobongisa-elembo-ya-kobongisa" ></i></a>   
  7.   </div>
  8. </div>
Dropdown na groupe ya ba boutons
Mosaleli 
  1. <div kelasi = "btn-etuluku" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "elembo-mosaleli elembo-mpembe" ></i> Mosaleli </a>   
  3.   <a class = "btn btn-kobalusama ya liboso" data-toggle = "kokita" href = "#" ><span classe = "caret" ></span></a>    
  4.   <ul class = "menu ya kokita" > 
  5.     <li><a href = "#" ><i classe = "elembo-krɛyo" </i> Bobongisi </a></li>  
  6.     <li><a href = "#" ><i classe = "elembo-bosɔtɔ" ></i> Bolongola </a></li>  
  7.     <li><a href = "#" ><i classe = "cercle-ya-epekiseli-ya-elembo" ></i> Bopekisa </a></li>  
  8.     <li kelasi = "mokabola" </li> 
  9.     <li><a href = "#" ><i classe = "ngai" ></i> Sala mokambi </a></li>  
  10.   </ul>
  11. </div>
Ba taille ya ba boutons
Monzoto Monzoto Monzoto 
  1. <a classe = "btn btn-monene" href = "#" ><i classe = "moto ya elembo" ></i> Monzoto </a>   
  2. <a classe = "btn btn-moke" href = "#" ><i classe = "moto ya elembo" ></i> Monzoto </a>   
  3. <a classe = "btn btn-mini" href = "#" ><i classe = "moto ya elembo" ></i> Monzoto </a>

Navigation ya motuka

  1. <ul kelasi = "nav nav-liste" > 
  2.   <li class = "active" ><a href = "#" ><i class = "elembo-ndako elembo-mpembe" </i> Ndako </a></li>   
  3.   <li><a href = "#" ><i classe = "buku-ya-bilili" </i> Bibliotɛkɛ </a></li>  
  4.   <li><a href = "#" ><i classe = "icon-crayon" </i> Misala </a></li>  
  5.   <li><a href = "#" ><i kelasi = "ngai" </i> Misc </a></li>  
  6. </ul>

Bitando ya kosala baformilɛrɛ

  1. <div class = "etuluku-ya-bokonzi" > 
  2.   <label class = "contrôle-étiquette" mpo na = "inputIcon" > Addresse ya email </label>  
  3.   <div classe = "ba contrôles" > 
  4.     <div class = "kokɔtisa-kosala liboso" > 
  5.       <span class = "kobakisa" ><i classe = "enveloppe-ya elembo" ></i></span>  
  6.       < classe ya bokoti = "span2" id = "Icon ya bokoti" lolenge = "mokanda" >   
  7.     </div>
  8.   </div>
  9. </div>