Ba composants

Ba douzaines ya ba composants oyo ekoki kosalelama lisusu etongami na Bootstrap mpo na kopesa navigation, ba alertes, ba popovers, mpe mingi mosusu.

Ba groupes ya ba boutons

Salelá bituluku ya ba boutons mpo na kosangisa ba boutons ebele esika moko lokola composante composite moko. Tongela bango na série ya <a>to <button>ba éléments.

Okoki pe kosangisa ba ensembles ya <div class="btn-group">na kati ya a <div class="btn-toolbar">pona ba projets plus complexes.

Ndakisa ya kosala bilembo

Tala ndenge HTML elukaka groupe ya ba boutons standard oyo etongami na ba boutons ya tag ya ancre:

<div kelasi = "btn-etuluku" > 
  <a kelasi = "btn" href = "#" > 1 </a>  
  <a kelasi = "btn" href = "#" > 2 </a>  
  <a kelasi = "btn" href = "#" > 3 </a>  
</div>

Mpe na barre ya bisaleli mpo na bituluku mingi:

<div class = "btn-barre ya bisaleli" > 
  <div kelasi = "btn-etuluku" > 
    ...
  </div>
</div>

Boîte de coche na ba saveurs ya radio

Ba groupes ya ba boutons ekoki pe kosala lokola ba radio, esika kaka bouton moko ekoki kozala activé, to ba cases ya kotiya elembo, esika nombre nionso ya ba boutons ekoki kozala activé. Tala ba docs ya Javascript pona yango.

Bozua javascript »

Mitó ezali likoló

CSS mpo na bituluku ya ba boutons ezali na fisyé ekeseni, button-groups.less.

Ba boutons oyo ezali kokita

Salelá bouton nyonso mpo na kobanda menu oyo ezali kokita na kotyáká yango na kati ya a .btn-groupmpe kopesa elembo ya menu oyo ebongi.

Ndakisa ya kosala bilembo

Ndenge moko na groupe ya ba boutons, marquage na biso esalela marquement ya bouton ya mbala na mbala, kasi na mwa ba additions mpo na ko refiner style mpe ko soutenir plugin jQuery ya déroulant ya Bootstrap.

<div kelasi = "btn-etuluku" > 
  <a class = "btn kokita-toggle" data-toggle = "kokita" href = "#" >   
    Mosala
    <span kelasi = "caret" </span> 
  </a>
  <ul class = "menu ya kokita" > 
    <!-- ba liens ya menu oyo ezali kokita -->
  </ul>
</div>

Ba déroulants ya bouton ya kokabola

Kotonga na ba styles ya groupe ya bouton na marquage, tokoki kosala bouton ya kokabola na pete. Ba boutons ya kokabola ezali na action standard na gauche mpe toggle ya déroulant na droite na ba liens contextuels.

Ndakisa ya kosala bilembo

To panza na ba déroulants ya bouton normal pona kopesa action ya deuxième bouton oyo ezo fonctionner lokola déclencheur ya déroulant separate.

<div kelasi = "btn-etuluku" > 
  <a classe = "btn" href = "#" > Mosala </a>  
  <a class = "btn kokita-toggle" data-toggle = "kokita" href = "#" >   
    <span kelasi = "caret" </span> 
  </a>
  <ul class = "menu ya kokita" > 
    <!-- ba liens ya menu oyo ezali kokita -->
  </ul>
</div>

Ba défauts ya pete Marquage moko, ba classes ekeseni

Classe ya base ya makasi

Ba composants nionso ya nav awa —ba onglets, ba pilili, pe ba liste — bakabolaka marquage ya base moko pe ba styles na nzela ya .navclasse.

Mpo na nini ba onglets na ba pilili

Ba onglets na ba pilule na Bootstrap etongami na a <ul>na HTML ya moboko moko, liste ya ba liens. Swap entre ba onglets to ba pilili na kaka classe.

Ba options nionso mibale ezali malamu pona ba sous-sections ya contenus to ko naviguer entre ba pages ya contenus oyo etali yango.

Ba onglets ya moboko

Zwa régulier <ul>ya ba liens pe bakisa .nav-tabs:

<ul classe = "nav nav-tabs" > 
  <li kelasi = "mosala" > 
    <a href = "#" > Ndako </a> 
  </li>
  <li><a href = "#" > ... </a></li> Ezali ndenge nini? 
  <li><a href = "#" > ... </a></li> Ezali ndenge nini? 
</ul>

Ba pilili ya moboko

Zwá kaka HTML yango, kasi salelá .nav-pillsna esika na yango:

<ul classe = "nav nav-pilili" > 
  <li kelasi = "mosala" > 
    <a href = "#" > Ndako </a> 
  </li>
  <li><a href = "#" > ... </a></li> Ezali ndenge nini? 
  <li><a href = "#" > ... </a></li> Ezali ndenge nini? 
</ul>

Stackable Sala ba onglets to ba pilili vertical

Ndenge nini ko stack 'em

Lokola ba onglets na ba pilili ezali horizontal par défaut, bakisa kaka classe ya mibale, .nav-stacked, po emonana verticalement empilé.

Ba onglets oyo batyá ebele

<ul class = "nav nav-tabs nav-ezali na ebele" > 
  ...
</ul>

Ba pilili oyo batyá ebele

<ul class = "nav nav-pilili nav-empilami" > 
  ...
</ul>

Dropdowns Mpo na ba composants nav ya avance

Ba menu ya riche esalemi pete

Ba menu ya kokita na ba onglets ya Bootstrap mpe ba pilule ezali super facile mpe esengaka kaka mwa HTML ya likolo mpe plugin ya jQuery ya pete.

Motó na lokasa ya Javascript mpo na kotánga ba docs na ntina na initialisation ya ba dropdowns na Bootstrap.

Ba onglets na ba dropdowns

<ul classe = "nav nav-tabs" > 
  <li classe = "esika ya kokita" > 
    <a classe = "kobalusama ya kokita". 
       data-toggle = "esika ya kokita".
       href = "#" >
        Kokita ya nse
        <b kelasi = "caret" ></b> 
      </a>
    <ul class = "menu ya kokita" > 
      <!-- ba liens -->
    </ul>
  </li>
</ul>

Ba pilili na ba dropdowns

<ul classe = "nav nav-pilili" > 
  <li classe = "esika ya kokita" > 
    <a classe = "kobalusama ya kokita". 
       data-toggle = "esika ya kokita".
       href = "#" >
        Kokita ya nse
        <b kelasi = "caret" ></b> 
      </a>
    <ul class = "menu ya kokita" > 
      <!-- ba liens -->
    </ul>
  </li>
</ul>

Nav lists Tongela ba navs simples ebele, malamu pona ba barres latérales

Navigation na ndenge ya application

Ba liste ya Nav epesaka lolenge ya pete mpe ya pete ya kotonga bituluku ya ba liens nav na mitó ya makambo oyo okoki kopona. Bazali malamu kosalelama na ba barres ya mopanzi lokola Finder na OS X.

Structuralment, batongami na ba styles ya nav ya moboko ndenge moko na ba onglets na ba pilule, donc usage na personnalisation ezali droite.

Na ba icons

Ba listes ya Nav ezali pe facile ya ko équiper na ba icônes. Bakisa <i>tag oyo ebongi na classe pe oza set.

Ndakisa nav liste

Zwá liste ya ba liens mpe bakisa class="nav nav-list":

<ul kelasi = "nav nav-liste" > 
  <li classe = "nav-motó ya likambo" > 
    Motó ya likambo ya liste
  </li>
  <li kelasi = "mosala" > 
    <a href = "#" > Ndako </a> 
  </li>
  <li>
    <a href = "#" > Bibliotɛkɛ </a> 
  </li>
  ...
</ul>

Ndakisa na bilembo

Ndakisa moko, kasi na <i>bilembo mpo na bilembo.

<ul kelasi = "nav nav-liste" > 
  ...
  <li>
    <a href = "#" > 
      <i kelasi = "buku-ya bilembo" </i> 
      Biblioteke
    </a>
  </li>
  ...
</ul>

Tabbable nav Mema ba onglets na bomoi na nzela ya javascript

Oyo ezali na kati

Mema ba onglets na yo na bomoi na plugin moko ya pete mpo na kobalusa kati na makambo na nzela ya ba onglets. Bootstrap esangisaka ba onglets tabbables na ba styles minei: likolo (par défaut), droite, se, na gauche.

Kobongola kati na bango ezali pɛtɛɛ mpe esɛngaka kaka kobongola bilembo moke mpenza.

Ndakisa ya tableau

Mpo na kosala ete ba onglets ezala tabbables, envelopper le .nav-tabsna div mosusu na classe .tabbable.

Nazali na Eteni 1.

Howdy, nazali na Eteni 2.

Nini likolo fille, oyo eza Section 3.

Plugin ya jQuery oyo esalemi na ndenge ya moto ye moko

Ba onglets nionso ya ba tabbables ezali kosala na plugin na biso ya jQuery ya pete. Tanga mingi na ntina ya ndenge ya komema ba onglets ya tabbable na bomoi na lokasa ya docs ya javascript.

Bozwa javascript ya →

Marquage ya semba

Kosalela ba onglets tabbables esengaka div ya enveloppe, ensemble ya ba onglets, mpe ensemble ya ba panneaux tabbables ya contenus.

<div kelasi = "tabbable" > 
  <ul classe = "nav nav-tabs" > 
    <li class = "active" ><a href = "#1" data-toggle = "tab" > Eteni ya 1 </a></li>   
    <li><a href = "#2" data-toggle = "tab" > Eteni ya 2 </a></li>  
  </ul>
  <div class = "makambo ya tab" > 
    <div class = "tab-pane ezali kosala" id = "1" >  
      <p> Nazali na Eteni 1. </p>
    </div>
    <div classe = "tab-pane" id = "2" >  
      <p> Howdy, nazali na Eteni 2. </p>
    </div>
  </div>
</div>

Tabbable na direction nionso

Ba onglets na nse

Flip ordre ya HTML mpe bakisa classe mpo na kotia ba onglets na se.

Nazali na Eteni A.

Howdy, nazali na Eteni B.

Nini likolo fille, oyo eza Section C.

<div class = "ba onglets ya tableau-na se" > 
  <div class = "makambo ya tab" > 
    ...
  </div>
  <ul classe = "nav nav-tabs" > 
    ...
  </ul>
</div>

Ba onglets na gauche

Bobongola kelasi mpo na kotya ba onglets na lobɔkɔ ya mwasi.

Nazali na Eteni A.

Howdy, nazali na Eteni B.

Nini likolo fille, oyo eza Section C.

<div class = "ba onglets ya tableau-gauche" > 
  <ul classe = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "makambo ya tab" > 
    ...
  </div>
</div>

Ba onglets na lobɔkɔ ya mobali

Bobongola kelasi mpo na kotya ba onglets na lobɔkɔ ya mobali.

Nazali na Eteni A.

Howdy, nazali na Eteni B.

Nini likolo fille, oyo eza Section C.

<div class = "ba onglets ya tableau-droit" > 
  <ul classe = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "makambo ya tab" > 
    ...
  </div>
</div>

Ndakisa ya navbar ya statique

Ndakisa ya navbar ya statique (ekangamaka na likolo te) na kombo ya projet, navigation, mpe formulaire ya boluki.

Échafaudage ya Navbar

Navbar esengaka kaka mua ba divs pona ko structurer yango bien pona affichage statique to fixe.

<div classe = "barre ya nav" > 
  <div class = "navbar-ya kati" > 
    <div classe = "conteneur" > 
      ...
    </div>
  </div>
</div>

Mpo na kosala ete navbar ekangama na likoló ya esika ya kotala, bakisa .navbar-fixed-topna div ya libándá mpenza, .navbar. Na CSS na yo, ekosɛnga mpe opesa compte ya superposition oyo yango esalaka na kobakisa padding-top: 40px;na <body>.

<div class = "navbar navbar-esika-ya-likolo" > 
  ...
</div>

Kombo ya marque

Lien simple pona kolakisa kombo ya marque to projet na yo esengaka kaka tag ya anchor.

<a kelasi = "marque" href = "#" >  
  Kombo ya projet
</a>

Formulaire ya koluka

Ba formulaire ya recherche ezuaka ba styles personnalisés na navbar na .navbar-searchclasse. Kotisa .pull-leftto .pull-rightna formmpo na kosala ete ezala na molɔngɔ.

<formule classe = "navbar-luka kobenda-na loboko ya mwasi" > 
  < lolenge ya bokoti = "mokanda" kelasi = "boluki-motuna" esika = "Boluka" >   
</forme>

Variation oyo ezo répondre na option

Na kotalela motuya ya makambo oyo ezali na barre na yo ya likoló, okoki kosalela ba options ya koyanola. Mpo na kosala yango, zingá makambo na yo ya nav na esika oyo ezali na div, .nav-collapse.collapse, mpe bakisá bouton ya kobongola navbar, .btn-navbar.

<div classe = "barre ya nav" > 
  <div class = "navbar-ya kati" > 
    <div classe = "conteneur" > 
 
      <!-- .btn-navbar esalelami lokola toggle mpo na makambo ya navbar oyo ekwei -->
      <a classe = "btn btn-navbar" data-toggle = "kokwea" cible-donnée = ".nav-kokwea" >   
        <span classe = "barre-ya elembo" </span> 
        <span classe = "barre-ya elembo" </span> 
        <span classe = "barre-ya elembo" </span> 
      </a>
 
      <!-- Sala makasi otika marque libanda soki olingi elakisama -->
      <a class = "brand" href = "#" > Nkombo ya mosala </a>  
 
      <!-- Nionso olingi ebombama na 940px to na se, tia na kati awa -->
      <div classe = "nav-kokwea" > 
        <!-- .nav, .navbar-boluka, .navbar-formule, etc -->
      </div>
 
    </div>
  </div>
</div>

Mitó likoló! Navbar oyo ezo répondre esengaka plugin ya collapse .

Nav ba liens

Biloko ya Nav ezali pete mpo na kobakisa na nzela ya ba liste oyo ezali na ordre te.

<ul kelasi = "nav" > 
  <li kelasi = "mosala" > 
    <a href = "#" > Ndako </a> 
  </li>
  <li><a href = "#" > Lien </a></li> 
  <li><a href = "#" > Lien </a></li> 
</ul>

Kobakisa ba dropdowns

Kobakisa ba dropdowns na nav ezali super simple, kasi esɛngaka kosalela plugin na biso ya javascript .

<ul kelasi = "nav" > 
  <li classe = "esika ya kokita" > 
    <a href = "#" na lingala. 
          classe = "kobalusama ya kokita".
          data-toggle = "esika ya kokita" >
          Konte
          <b kelasi = "caret" ></b> 
    </a>
    <ul class = "menu ya kokita" > 
      ...
    </ul>
  </li>
</ul>

Bozwa javascript ya →

Mpo na nini kosalela yango

Navigation ya Breadcrumb esalelamaka lokola lolenge ya kolakisa basaleli esika bazali na kati ya app to site moko, kasi mpo na navigation ya liboso te. Bomba bosaleli na bango ya moke mpe ya mokuse mpo na kozala malamu mingi.

Bandakisa

Ndakisa moko elakisami lokola ekoki kolakisa na kati ya nkasa mingi.

Kosala bilembo

HTML ezali liste na yo standard oyo ezali na ordre te na ba liens.

<ul class = "mbuma ya mampa" > 
  <li>
    <a href = "#" > Ndako </a> <span classe = "mokabola" > / </span>   
  </li>
  <li>
    <a href = "#" > Bibliothèque </a> <span classe = "mokaboli" > / </span>   
  </li>
  <li kelasi = "mosala" > 
    <a href = "#" > Ba données </a> 
  </li>
</ul>

Pagination ya ba pages multicon

Ntango nini osengeli kosalela

Pagination ultra simpliste et minimalement styled inspirée par Rdio, bien pona ba apps na ba résultats ya recherche. Bloc ya monene ezali mpasi mpo na kozanga, ekoki ko évoluer na pete, mpe epesaka bisika ya minene ya ko cliquer.

Ba liens ya page oyo ezali na état

Ba liens ezali personnalisable mpe esalaka na nombre ya ba circonstances na classe oyo ebongi. .disabledmpo na ba liens oyo okoki ko cliquer te mpe .activempo na page ya lelo.

Alignment oyo ekoki kobongwana

Bakisa moko ya bakelasi mibale oyo okoki kopona mpo na kobongola boyokani ya ba liens ya pagination: .pagination-centeredmpe .pagination-right.

Bandakisa

Composant ya pagination par défaut ezali flexible mpe esalaka na nombre ya ba variations.

Kosala bilembo

Enveloppé na <div>, pagination ezali kaka <ul>.

<div classe = "kosala lokasa" > 
  <ul>
    <li><a href = "#" > Liboso </a></li> 
    <li kelasi = "mosala" > 
      <a href = "#" > 1 </a> 
    </li>
    <li><a href = "#" > 2 </a></li> Ezali ndenge nini? 
    <li><a href = "#" > 3 </a></li> Ezali ndenge nini? 
    <li><a href = "#" > 4 </a></li> Ezali ndenge nini? 
    <li><a href = "#" > Na sima </a></li> 
  </ul>
</div>

Pager Pona ba liens ya mbangu ya liboso pe ya sima

Na ntina na pager

Composant pager ezali ensemble ya ba liens pona ba implémentations simples ya pagination na marquage ya lumière et même ba styles ya léger. Ezali malamu mingi mpo na ba sites ya pete lokola ba blogs to ba magazines.

Ndakisa ya liboso

Par défaut, pager ezo centrer ba liens.

<ul kelasi = "pager" > 
  <li>
    <a href = "#" > Liboso </a> 
  </li>
  <li>
    <a href = "#" > Na sima </a> 
  </li>
</ul>

Ba liens oyo ezali na boyokani

Na lolenge mosusu, okoki kosala ete lien mokomoko ezala na mipanzi:

<ul kelasi = "pager" > 
  <li classe = "ya liboso" > 
    <a href = "#" > Ezali ndenge nini? Mibange </a> 
  </li>
  <li classe = "oyo elandi" > 
    <a href = "#" > Ya sika → </a> 
  </li>
</ul>

Ba étiquettes	Kosala bilembo
Mbeba	`<span class="label">Default</span>`
Ya sika	`<span class="label label-success">New</span>`
Likebisi	`<span class="label label-warning">Warning</span>`
Ntina	`<span class="label label-important">Important</span>`
Info	`<span class="label label-info">Info</span>`

Ba miniatures ya défaut

Na ndenge ya libela, bililingi ya mikemike ya Bootstrap ebongisami mpo na kolakisa bililingi oyo ezali na boyokani na bilembo moke oyo esengeli.

Personnalisable makasi

Na mwa marquage ya kobakisa, ezali na nzela ya kobakisa lolenge nyonso ya makambo ya HTML lokola mitó ya makambo, baparagrafe, to ba boutons na kati ya bililingi mikemike.

Etiquette ya miniature

Cras justo odio, dapibus ac facilisis na, egestas eget quam. Donec id elit non mi porta gravida na eget metus. Nullam id dolor id nibh ultricies mituka ut id elit.

Mosala Mosala
Etiquette ya miniature

Cras justo odio, dapibus ac facilisis na, egestas eget quam. Donec id elit non mi porta gravida na eget metus. Nullam id dolor id nibh ultricies mituka ut id elit.

Mosala Mosala

Mpo na nini kosalela bililingi ya mikemike

Ba miniatures (liboso .media-gridtii na v1.4) ezali malamu mpo na ba grille ya ba photos to ba vidéos, ba résultats ya recherche ya ba images, ba produits ya détail, ba portefeuilles, mpe mingi mosusu. Ekoki kozala ba liens to ba contenus statiques.

Marquage ya pete, oyo ekoki kobongwana

Kosala bilembo ya moke ezali pɛtɛɛ —a oyo ezali ulna motángo nyonso ya libiloko ezali kaka oyo esengeli. Ezali mpe super flexible, kopesa nzela na lolenge nyonso ya makambo na kaka mwa marquage mingi mpo na kozinga makambo na yo.

Esalelaka bonene ya makonzí ya grille

Na nsuka, eteni ya bililingi ya mike esalela bakelasi ya système ya grille oyo ezali —lokola .span2to .span3—mpo na kokamba bonene ya bililingi ya mike.

Ba marquage yango

Ndenge tolobaki yango liboso, elembo oyo esengeli mpo na bililingi ya mikemike ezali pɛtɛɛ mpe ezali pɛtɛɛ. Tala ndenge ya kosala na ndenge ya liboso mpo na bilili oyo ezali na boyokani :

<ul class = "bilili ya mike" > 
  <li kelasi = "span3" > 
    <a href = "#" classe = "elilingi ya moke" >  
      <img src = "Esika ya kofanda/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

Mpo na makambo ya HTML oyo obongisi na bililingi ya mikemike, elembo ebongwanaka mwa moke. Pona ko permettre contenus ya niveau ya bloc partout, to swap the <a>pona <div>like donc:

<ul class = "bilili ya mike" > 
  <li kelasi = "span3" > 
    <div class = "elilingi ya moke" > 
      <img src = "Esika ya kofanda/260x180" alt = "" >  
      <h5> Etiketi ya elilingi ya moke </h5>
      <p> Liloba ya moke kaka awa... </p>
    </div>
  </li>
  ...
</ul>

Bandakisa mosusu

Explorez ba options na yo nionso na ba classes ya grille ndenge na ndenge oyo ezali na yo. Okoki mpe kosangisa mpe kosala boyokani na ba taille ndenge na ndenge.

Ba défauts ya pete

Classe ya base oyo ekomami lisusu

Na Bootstrap 2, tosili ko simplifier classe ya base: .alertna esika ya .alert-message. Tokitisi mpe bilembo ya moke oyo esengeli —te <p>esengeli na ndenge ya libela, kaka oyo ya libanda <div>.

Message ya alerte moko

Mpo na composant oyo eumelaka mingi na code moke, tolongoli lolenge ya kokesana mpo na ba alertes ya bloc, ba messages oyo eyaka na remplissage mingi mpe typiquement texte mingi. Kelasi yango mpe ebongwani na .alert-block.

Ekendeke malamu na javascript

Bootstrap eza na plugin ya jQuery ya malamu oyo esimbaka ba messages ya alerte, kosala que ko rejeter yango noki pe facile.

Bozwa plugin yango »

Ndakisa ya makebisi

Envelopper message na yo na icône ya fermeture optionnelle na div na classe simple.

× Likebisi! Meilleur vérifier yo self, ozali komonana trop bien te.

<div classe = "kebisi" > 
  <a classe = "kokanga" > × </a> 
  <strong> Kebisa! </strong> Meilleur vérifier yo yo moko, ozali komonana malamu mingi te.
</div>

Bobakisi na pete message ya alerte standard na ba classes mibale ya option: .alert-blockpona ba contrôles ya remplissage pe ya texte mingi pe .alert-headingpona motó ya likambo oyo ekokani.

Likebisi!

Meilleur vérifier yo self, ozali komonana malamu mingi te. Nulla vitae elit libero, oyo ezali na mbula-mpɛmbɛ oyo babengi pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<div class = "bokebisi-bokebisi" > 
  <a classe = "kokanga" > × </a> 
  <h4 class = "motó ya likambo ya likebisi" > Likebisi! </h4> 
  Meilleur vérifier yo self, ozali te...
</div>

Ba alternatives ya contexte Bakisa ba classes ya option pona ko changer connotation ya alerte

Libunga to likama

× Oh snap! Bobongola mwa makambo likolo mpe meka kotinda lisusu.

<div class = "libunga ya likebisi ya likebisi" > 
  ...
</div>

Kolonga

× Longonya! Otángi malamu nsango oyo ya ntina mingi ya kokebisa.

<div class = "alerte-elonga ya kokebisa" > 
  ...
</div>

Nsango

× Mitó likoló! Alerte oyo esengeli na attention na yo, mais eza super important te.

<div class = "liyebisi ya likebisi ya likebisi" > 
  ...
</div>

Bandakisa mpe bilembo

Ya ntina

Barre ya progression par défaut na gradient vertical.

<div classe = "kokende liboso" > 
  <div kelasi = "barre". 
       style = " bonene : 60 %; " ></div> 
</div>

Ezali na bansinga

Esalelaka gradient mpo na kosala effet rayé.

<div class = "makambo ya bokende liboso." 
     progression-rayé" >
  <div kelasi = "barre". 
       style = " bonene : 20 %; " ></div> 
</div>

Ezali na bomoi

Azuaka exemple rayé pe a animer yango.

<div class = "bokende liboso-likama." 
     progress-rayé active" >
  <div kelasi = "barre". 
       style = " bonene : 40 %; " ></div> 
</div>

Options mpe lisungi ya navigateur

Ba couleurs ya kobakisa

Ba barres ya progrès esalelaka mua ba kombo ya classe ndenge moko na ba boutons na ba alertes pona styling ya ndenge moko.

.progress-info
.progress-success
.progress-danger

Na lolenge mosusu, okoki kosala ba fichiers LESS na ndenge ya moto ye moko mpe ko rouler ba couleurs na ba taille na yo moko.

Ezaleli

Ba barres ya progrès esalela ba transitions CSS3, yango wana soki o ajuster dynamiquement largeur via javascript, eko changer taille sans problème.

Soki osaleli .activekelasi, ba .progress-stripedbarres na yo ya progression eko animer ba rayures gauche à droite.

Lisungi ya navigateur

Ba barres ya progrès esalela ba gradients ya CSS3, ba transitions, na ba animations pona kozua ba effets na yango nionso. Makambo oyo esimbami te na IE7-8 to ba versions ya kala ya Firefox.

Opera esimbaka ba animations te na tango oyo.

Mabulu ya mai

Salelá libulu lokola effet simple na élément moko mpo na kopesa yango effet inset.

Talá, nazali na kati ya libulu moko!

<div classe = "malamu" > 
  ...
</div>

Badge ya ba badges

Salelá elembo na eleman moko mpo na motángo oyo otángi te to lokola elembo ya pɛtɛɛ.

<span classe = "badge" > 3 </div>

Bokanga elembo

Salelá elembo ya bokangami ya monene mpo na koboya makambo lokola ba modal mpe makebisi.

<a classe = "kokanga" > &ntango; </a>

Bituluku ya ba boutons Sangisa ba boutons mpo na misala mingi lokola barre ya bisaleli

Ba groupes ya ba boutons

Ndakisa ya kosala bilembo

Boîte de coche na ba saveurs ya radio

Mitó ezali likoló

Ba boutons ya kokita Ba menu ya kokita ya contexte oyo etongami na ba groupes ya ba boutons

Ba boutons oyo ezali kokita

Ndakisa ya kosala bilembo

Ba déroulants ya bouton ya kokabola

Ndakisa ya kosala bilembo

Nav, ba onglets, mpe ba pilili Navigation ya ndenge ya liste oyo ekoki kobongwana mingi

Ba défauts ya pete Marquage moko, ba classes ekeseni

Classe ya base ya makasi

Mpo na nini ba onglets na ba pilili

Ba onglets ya moboko

Ba pilili ya moboko

Stackable Sala ba onglets to ba pilili vertical

Ndenge nini ko stack 'em

Ba onglets oyo batyá ebele

Ba pilili oyo batyá ebele

Dropdowns Mpo na ba composants nav ya avance

Ba menu ya riche esalemi pete

Ba onglets na ba dropdowns

Ba pilili na ba dropdowns

Nav lists Tongela ba navs simples ebele, malamu pona ba barres latérales

Navigation na ndenge ya application

Na ba icons

Ndakisa nav liste

Ndakisa na bilembo

Tabbable nav Mema ba onglets na bomoi na nzela ya javascript

Oyo ezali na kati

Ndakisa ya tableau

Plugin ya jQuery oyo esalemi na ndenge ya moto ye moko

Marquage ya semba

Tabbable na direction nionso

Ba onglets na nse

Ba onglets na gauche

Ba onglets na lobɔkɔ ya mobali

Navbar

Ndakisa ya navbar ya statique

Échafaudage ya Navbar

Kombo ya marque

Formulaire ya koluka

Variation oyo ezo répondre na option

Nav ba liens

Kobakisa ba dropdowns

Biloko ya kosala mampa

Mpo na nini kosalela yango

Bandakisa

Kosala bilembo

Pagination Ba options mibale pona ko paging na kati ya contenus

Pagination ya ba pages multicon

Ntango nini osengeli kosalela

Ba liens ya page oyo ezali na état

Alignment oyo ekoki kobongwana

Bandakisa

Kosala bilembo

Pager Pona ba liens ya mbangu ya liboso pe ya sima

Na ntina na pager

Ndakisa ya liboso

Ba liens oyo ezali na boyokani

Ba étiquettes ya kati ya molɔngɔ Ba étiquette mpe ba annoter makomi

Ba miniatures Grilles ya bilili, ba vidéos, makomi, mpe mingi mosusu

Ba miniatures ya défaut

Personnalisable makasi

Etiquette ya miniature

Etiquette ya miniature

Mpo na nini kosalela bililingi ya mikemike

Marquage ya pete, oyo ekoki kobongwana

Esalelaka bonene ya makonzí ya grille

Ba marquage yango

Bandakisa mosusu

Alerts Styles mpo na succès, likebisi, mpe ba messages ya erreur

Ba défauts ya pete

Classe ya base oyo ekomami lisusu

Message ya alerte moko

Ekendeke malamu na javascript

Ndakisa ya makebisi

Likebisi!

Ba alternatives ya contexte Bakisa ba classes ya option pona ko changer connotation ya alerte