Ba glyphes oyo ezali

Ezali na ba glyphes koleka 250 na format ya fonte uta na ensemble ya Glyphicon Halflings. Glyphicons Halflings ezalaka normalement ofele te, kasi mokeli na yango asali yango disponible mpo na Bootstrap ofele. Lokola matondi, tosengi kaka ete otia lien ya kozonga na Glyphicons soki likoki ezali.

glyphicon glyphicon-mozoto ya monzoto
glyphicon glyphicon-bakisa mpe
glyphicon glyphicon-euro oyo ezali na kati
glyphicon glyphicon-eur oyo ezali na kati
glyphicon glyphicon-kolongola yango
glyphicon glyphicon-lipata ya nzoto
glyphicon glyphicon-enveloppe oyo ezali na kati
glyphicon glyphicon-krɛyo
glyphicon glyphicon-verre ya nzoto
glyphicon glyphicon-miziki ya miziki
glyphicon glyphicon-koluka
glyphicon glyphicon-motema
glyphicon glyphicon-monzoto
glyphicon glyphicon-monzoto-ezali mpamba
glyphicon mosaleli ya glyphicon
glyphicon glyphicon-filme ya kosala
glyphicon glyphicon-ya-ya-monene
glyphicon glyphicon-ezali na ntina mingi
glyphicon glyphicon-liste ya liboso
glyphicon glyphicon-ok na mokili ya lelo
glyphicon glyphicon-kolongola yango
glyphicon glyphicon-kosala kosala zoom
glyphicon glyphicon-kosala zoom ya moke
glyphicon glyphicon-ezali kokangama
glyphicon glyphicon-elembo ya bilembo
glyphicon glyphicon-cog ya nzoto
glyphicon glyphicon-bosɔtɔ
glyphicon glyphicon-ya ndako
glyphicon fisyé ya glyphicon
glyphicon glyphicon-ntango
glyphicon glyphicon-nzela
glyphicon glyphicon-kozwa-alt
glyphicon glyphicon-kozwa yango
glyphicon glyphicon-kotya na esika na yango
glyphicon glyphicon-boîte de réception
glyphicon glyphicon-kosakana-cercle
glyphicon glyphicon-kozongela
glyphicon glyphicon-kozongisa sika
glyphicon glyphicon-liste-alt
glyphicon glyphicon-eloko ya kokangama
glyphicon glyphicon-drapo
glyphicon ba glyphicon-écouteurs
glyphicon glyphicon-volume-kokangama
glyphicon glyphicon-volume-na nse
glyphicon glyphicon-volume ya komata
glyphicon glyphicon-qrcode na mokili mobimba
glyphicon glyphicon-kode ya barre
glyphicon glyphicon-eloko ya kotánga
glyphicon ba étiquettes ya glyphicon
glyphicon glyphicon-buku ya bato
glyphicon glyphicon-ezali elembo ya bilembo
glyphicon glyphicon-konyata yango
glyphicon glyphicon-kamera ya ndako
glyphicon glyphicon-fonte ya ndenge na ndenge
glyphicon glyphicon-ya moindo makasi
glyphicon glyphicon-italique
glyphicon glyphicon-bolai ya makomi
glyphicon glyphicon-bonene ya makomi
glyphicon glyphicon-kobongisa-na lobɔkɔ ya mwasi
glyphicon glyphicon-kobongisa-na katikati
glyphicon glyphicon-kobongisa-na loboko ya mobali
glyphicon glyphicon-kobongisa-kobongisa
glyphicon glyphicon-liste ya makambo
glyphicon glyphicon-ekɔti-na lobɔkɔ ya mwasi
glyphicon glyphicon-indent-na loboko ya mobali
glyphicon glyphicon-elongi-ntango-vidéo
glyphicon glyphicon-elilingi
glyphicon glyphicon-map-marqueur
glyphicon glyphicon-kobongisa
glyphicon glyphicon-tint ya nzoto
glyphicon glyphicon-bobongoli
glyphicon glyphicon-kabola yango
glyphicon glyphicon-kotala yango
glyphicon glyphicon-kotambola
glyphicon glyphicon-kozonga sima
glyphicon glyphicon-ya mbangu-kozonga sima
glyphicon glyphicon-kozonga sima
glyphicon glyphicon-kosakana
glyphicon glyphicon-kopema mwa moke
glyphicon glyphicon-kotelemisa yango
glyphicon glyphicon-kokende liboso
glyphicon glyphicon-kokende liboso mbangu
glyphicon glyphicon-kokende liboso
glyphicon glyphicon-ezali kobimisa
glyphicon glyphicon-chevron-na lobɔkɔ ya mwasi
glyphicon glyphicon-chevron-na loboko ya mobali
glyphicon elembo ya glyphicon-plus
glyphicon glyphicon-elembo-ya-kolongola
glyphicon glyphicon-kolongola-elembo
glyphicon glyphicon-elembo ya malamu
glyphicon glyphicon-elembo-ya-motuna
glyphicon glyphicon-elembo-ya-nsango
glyphicon glyphicon-eloko ya kosala na ekra
glyphicon glyphicon-kolongola-cercle
glyphicon glyphicon-ok-cercle ya nzoto
glyphicon glyphicon-ban-cercle
glyphicon glyphicon-flèche-na loboko ya mwasi
glyphicon glyphicon-flèche-na loboko ya mobali
glyphicon glyphicon-flèche-likolo
glyphicon glyphicon-flɛ́mɛ-na nse
glyphicon glyphicon-kabola-alt
glyphicon glyphicon-bobongola bonene-etondi
glyphicon glyphicon-kobongola bonene-ya moke
glyphicon glyphicon-elembo ya koganga
glyphicon glyphicon-likabo
glyphicon glyphicon-nkasa
glyphicon glyphicon-moto ya nzoto
glyphicon glyphicon-kofungola miso
glyphicon glyphicon-kokanga miso
glyphicon glyphicon-elembo-ya-kebisi
glyphicon glyphicon-plan
glyphicon glyphicon-manáka ya kala
glyphicon glyphicon-ya mbalakaka
glyphicon glyphicon-kopesa makanisi
glyphicon glyphicon-aimant ya monene
glyphicon glyphicon-chevron-likolo ya likolo
glyphicon glyphicon-chevron-na nse
glyphicon glyphicon-kozongisa lisusu tweet
glyphicon glyphicon-chariot ya kosomba biloko
glyphicon glyphicon-dossier-kokanga
glyphicon glyphicon-dossier-efungolama
glyphicon glyphicon-bobongola bonene-ya semba
glyphicon glyphicon-bobongola bonene-horizontal
glyphicon glyphicon-hdd na mokili mobimba
glyphicon glyphicon-liseke ya ngɔmbɛ
glyphicon glyphicon-ngonga ya nzoto
glyphicon glyphicon-mokanda ya kosakola
glyphicon glyphicon-kopesa mabɔkɔ na likoló
glyphicon glyphicon-masapi minene-na nse
glyphicon glyphicon-loboko-na loboko ya mobali
glyphicon glyphicon-loboko-na lobɔkɔ ya mwasi
glyphicon glyphicon-loboko-likolo
glyphicon glyphicon-loboko-na nse
glyphicon glyphicon-cercle-flèche-na loboko ya mobali
glyphicon glyphicon-cercle-flèche-gauche
glyphicon glyphicon-cercle-flèche-likolo
glyphicon glyphicon-cercle-flɛ́mɛ-na nse
glyphicon glyphicon-globe ya nzoto
glyphicon clé ya glyphicon
glyphicon glyphicon-misala ya kosala
glyphicon glyphicon-filtre ya nzoto
glyphicon glyphicon-malette ya mbongo
glyphicon glyphicon-écran mobimba
glyphicon glyphicon-tableau de bord
glyphicon glyphicon-eloko ya kosala na papye
glyphicon glyphicon-motema-ezali mpamba
glyphicon glyphicon-lien oyo ezali na kati
glyphicon glyphicon-telephone
glyphicon glyphicon-pinɛ ya kopumbwa
glyphicon glyphicon-usd na mokili mobimba
glyphicon glyphicon-gbp na mokili mobimba
glyphicon glyphicon-sort ya nzoto
glyphicon glyphicon-kobongisa-na-alfabɛ
glyphicon glyphicon-kobongisa-na-alfabɛ-alt
glyphicon glyphicon-kobongisa-na-molongo
glyphicon glyphicon-kobongisa-na-molongo-alt
glyphicon glyphicon-kobongisa-na-ba-attributs
glyphicon glyphicon-kobongisa-na-bizaleli-alt
glyphicon glyphicon-ezali na elembo te
glyphicon glyphicon-kopanzana
glyphicon glyphicon-kokwea-na nse
glyphicon glyphicon-kokwea-likolo
glyphicon glyphicon-kokɔta na site
glyphicon glyphicon-flash ya ndenge na ndenge
glyphicon glyphicon-kobima na mosala
glyphicon glyphicon-fenetre-ya sika
glyphicon glyphicon-enregistrement
glyphicon glyphicon-bomba yango
glyphicon glyphicon-kofungola
glyphicon glyphicon-ebombami
glyphicon glyphicon-kokɔtisa na mboka
glyphicon glyphicon-kobima na mboka mopaya
glyphicon glyphicon-tinda yango
glyphicon glyphicon-disquette-ya-disque
glyphicon glyphicon-disquette-ebombami
glyphicon glyphicon-kolongola-disquette
glyphicon glyphicon-disquette-kobatela
glyphicon glyphicon-disquette-efungolama
glyphicon glyphicon-carte-de-crédit
glyphicon glyphicon-botindiki
glyphicon glyphicon-biloko ya kolya
glyphicon glyphicon-motó ya likambo
glyphicon oyo ekangami na glyphicon
glyphicon glyphicon-écouteur ya matoyi
glyphicon glyphicon-telefone-alt
glyphicon glyphicon-linɔ́ngi
glyphicon glyphicon-stats oyo ezali na kati
glyphicon glyphicon-sd-vidéo oyo ezali na kati
glyphicon glyphicon-vidéo ya hd
glyphicon ba sous-titres ya glyphicon
glyphicon glyphicon-sons-stéréo
glyphicon glyphicon-maloba-dolby
glyphicon glyphicon-sons-5-1
glyphicon glyphicon-sons-6-1
glyphicon glyphicon-sons-7-1
glyphicon glyphicon-elembo ya lotomo ya kosala yango
glyphicon glyphicon-elembo-ya-bokomisi nkombo
glyphicon glyphicon-lipata-télécharger
glyphicon glyphicon-lipata-kotya
glyphicon glyphicon-nzete-ya nzete ya mbila
glyphicon glyphicon-nzete-ezali kokata nkasa
glyphicon glyphicon-cd na mokili mobimba
glyphicon glyphicon-bomba-fisyé
glyphicon glyphicon-kofungola-fisyé
glyphicon glyphicon-nivo ya likolo
glyphicon glyphicon-kopi ya kosala
glyphicon glyphicon-pasta ya nzoto
glyphicon glyphicon-azali kokebisa
glyphicon glyphicon-equalizer
glyphicon glyphicon-mokonzi
glyphicon glyphicon-mokonzi-mwasi
glyphicon glyphicon-pion ya nzoto
glyphicon glyphicon-episkɔpɔ
glyphicon glyphicon-chevalier
glyphicon glyphicon-formule ya bebe
glyphicon glyphicon-hema ya nzoto
glyphicon glyphicon-tableau noir
glyphicon mbeto ya glyphicon
glyphicon glyphicon-pome
glyphicon glyphicon-effacer yango
glyphicon glyphicon-montre ya sable
glyphicon mwinda ya glyphicon
glyphicon glyphicon-kosala mibale
glyphicon glyphicon-cochon-enchon
glyphicon ba sizo ya glyphicon
glyphicon glyphicon-bitcoin na mokili mobimba
glyphicon glyphicon-btc na mokili mobimba
glyphicon glyphicon-xbt na mokili mobimba
glyphicon glyphicon-yen oyo ezali na kati
glyphicon glyphicon-jpy na mokili mobimba
glyphicon glyphicon-ruble na mokili mobimba
glyphicon glyphicon-kopangusa
glyphicon na échelle ya glyphicon
glyphicon glyphicon-lolly ya zɛlo
glyphicon glyphicon-glace-lolly-emekaki
glyphicon glyphicon-ezali kopesa mateya
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-vertical
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-fenetre-modale
glyphicon mafuta ya glyphicon
glyphicon glyphicon-mbuma ya mbuma
glyphicon glyphicon-lunettes ya moi
glyphicon glyphicon-bonene ya makomi
glyphicon glyphicon-langi ya makomi
glyphicon glyphicon-makomi-ya nsima
glyphicon glyphicon-eloko-kobongisa-likolo
glyphicon glyphicon-eloko-kobongisa-na nse
glyphicon glyphicon-objet-align-horizontal
glyphicon glyphicon-objet-aligner-gauche
glyphicon glyphicon-objet-align-vertical
glyphicon glyphicon-objet-aligner-droit
glyphicon glyphicon-triangle-na loboko ya mobali
glyphicon glyphicon-triangle-na loboko ya mwasi
glyphicon glyphicon-triangle-na nse
glyphicon glyphicon-likolo ya triangle
glyphicon glyphicon-console ya gliphicon
glyphicon glyphicon-ekomami ya likoló
glyphicon glyphicon-abonné na yango
glyphicon glyphicon-menu-na lobɔkɔ ya mwasi
glyphicon glyphicon-menu-na loboko ya mobali
glyphicon glyphicon-menu-na nse
glyphicon glyphicon-menu-likolo

Ndenge ya kosalela

Mpo na bantina ya bosali, bilembo nyonso esengaka kelasi ya moboko mpe kelasi ya bilembo moko moko. Mpo na kosalela yango, tyá code oyo elandi kaka esika nyonso. Kobosana te kotika esika kati na elembo mpe makomi mpo na kokɔtisa yango malamu.

Kosangisa yango na biloko mosusu te

Ba classes ya ba icônes ekoki kosangisama directement te na ba composants misusu. Esengeli te kosalela yango elongo na bakelasi mosusu oyo ezali na élément moko. Na esika ya kosala bongo, bakisa moko oyo ekangami <span>mpe salelá bakelasi ya bilembo na <span>.

Kaka mpo na kosalela na ba éléments ya pamba

Ba kelasi ya bilembo esengeli kosalelama kaka na ba éléments oyo ezali na contenus ya texte te mpe ezali na ba éléments ya mwana te.

Kobongola esika ya makomi ya elembo

Bootstrap ezui ba fichiers ya fonte ya icône ekozala na ../fonts/répertoire, par rapport na ba fichiers CSS oyo esangisi. Ko déplacer to ko changer kombo ya ba fichiers ya ba fonts wana elakisi ko mettre à jour CSS na moko ya ba façons misato:

Bobongola @icon-font-pathmpe/to @icon-font-nameba variables na ba fichiers ya source Moins.
Salelá option ya ba URLs relatives oyo epesami na compilateur Moins.
Bobongola url()banzela na CSS oyo esangisi.

Salelá option nyonso oyo ebongi mpenza na configuration na yo ya développement spécifique.

Ba icônes oyo ekoki kozuama

Ba versions ya sika ya ba technologies ya assistance ekosakola ba contenus oyo CSS esalemi, ainsi que ba caractères spécifiques ya Unicode. Mpo na koboya kobima oyo ekanisamaki te mpe oyo ezali kobulunganisa na batángi ya écran (mingimingi ntango basalelaka bilembo kaka mpo na kokembisa yango), tobombaka yango na aria-hidden="true"attribut yango.

Soki ozali kosalela elembo mpo na kopesa ndimbola (na esika ya kozala kaka lokola eloko ya kokembisa), sala ete ndimbola oyo epesama mpe na mayele ya kosunga – ndakisa, kotia makambo ya kobakisa, oyo ebombami na miso elongo na .sr-onlykelasi.

Soki ozali kosala ba contrôles oyo ezali na texte mosusu te (lokola <button>oyo ezali kaka na icône), esengeli toujours kopesa ba contenus alternatifs pona koyeba tina ya contrôle, po ezala na sens na ba usagers ya ba technologies ya assistance. Na cas oyo, okokaki kobakisa aria-labelattribut moko na contrôle yango moko.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Bandakisa

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

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

Elembo oyo esalelami na likebisi mpo na kopesa ete ezali nsango ya libunga, na .sr-onlymakomi ya kobakisa mpo na kopesa likanisi oyo epai ya basaleli ya mayele ya kosalisa.

Tyá adresi ya email oyo ebongi

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

Menu oyo ekoki kobongola, oyo ezali na contexte mpo na kolakisa baliste ya ba liens. Esalemi interactive na plugin ya JavaScript oyo ezali kokita .

Ndakisa

Envelopper déclencheur ya dropdown na menu ya dropdown na kati ya .dropdown, to élément mosusu oyo esakoli position: relative;. Na nsima, bakisá HTML ya menu yango.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Ba menu ya kokita ekoki kobongwana mpo na kopanzana na likolo (na esika ya kokita) na kobakisa .dropupna moboti.

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Kobongisa makambo

Na ndenge ya libela, menu oyo ezali kokita ezali kotyama automatiquement 100% kobanda na likoló mpe na ngámbo ya lobɔkɔ ya mwasi ya moboti na yango. Bakisa .dropdown-menu-rightna a .dropdown-menuna droite aligner menu oyo ezali kokita.

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

Mitó ya makambo

Bakisa motó mpo na kotya bilembo na biteni ya misala na menu nyonso oyo ezali kokita.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

Mokaboli

Bakisa diviseur mpo na kokabola série ya ba liens na menu oyo ezali kokita.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

Biloko ya menu oyo ekangami

Bakisa .disabledna a <li>na dropdown mpo na ko désactiver lien.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

Sangisa molongo ya ba boutons esika moko na ligne moko na groupe ya ba boutons. Bakisa na radio JavaScript optionnel mpe comportement ya style ya case ya kotiya elembo na plugin na biso ya ba boutons .

Tooltips & popovers na ba groupes ya boutons esengaka réglage spécial

Ntango ozali kosalela ba toli ya bisaleli to ba popovers na biloko oyo ezali na kati ya .btn-group, okozala na mposa ya kolakisa nzela container: 'body'ya koboya ba effets secondaires oyo olingi te (lokola eleman oyo ezali kokola mingi mpe/to kobungisa ba coins na yango oyo ezali arrondi ntango tooltip to popover ebandi).

Salá ete ezali malamu `role`mpe pesa elembo

Pona ba technologies ya lisungi – lokola ba lecteurs d’écran – elakisaka que série ya ba boutons esangisi, esengeli rolekopesa attribut oyo ebongi. Mpo na bituluku ya ba boutons, oyo ekozala role="group", nzokande ba barres ya bisaleli esengeli kozala na role="toolbar".

Exception moko ezali ba groupes oyo ezali kaka na contrôle moko (par exemple ba groupes ya bouton justifié na ba <button>éléments) to déroulant.

En plus, esengeli kopesa ba groupes na ba barres d’outils étiquette ya polele, lokola mingi ya ba technologies d’assistance ekosakola yango te, malgré présence ya roleattribut correct. Na bandakisa oyo epesami awa, tosalelaka aria-label, kasi banzela mosusu lokola aria-labelledbyekoki mpe kosalelama.

Ndakisa ya moboko

Envelopper série ya ba boutons na .btnin .btn-group.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

Sangisa ba ensembles ya <div class="btn-group">na kati ya a <div class="btn-toolbar">mpo na ba composants complexes mingi.

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

Kosala bonene ya biloko

Na esika ya kosalela bakelasi ya bonene ya bouton na bouton nyonso na kati ya etuluku, bakisa kaka .btn-group-*na moko na moko .btn-group, bakisa mpe ntango ozali kosala yango na bituluku mingi.

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

Kosala zumbu

Tia moko na .btn-groupkati ya mosusu .btn-groupntango olingi ba menu oyo ezali kokita esangana na molɔngɔ ya ba boutons.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Bokeseni ya semba

Salá ete ensemble ya ba boutons emonana ebelemi na verticale na esika ya kozala horizontalement. Ba déroulants ya bouton ya kokabola esimbami awa te.

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

Ba groupes ya ba boutons justifiés

Salá ete etuluku ya ba boutons etandama na bonene ekokani mpo na kotanda bonene mobimba ya moboti na yango. Lisusu esalaka na ba déroulants ya ba boutons na kati ya groupe ya ba boutons.

Kosimba bandelo

Na ntina na HTML mpe CSS ya sikisiki oyo basalelaka mpo na kolongisa ba boutons (elingi koloba display: table-cell), bandelo oyo ezali kati na yango ekómaka mbala mibale. Na ba groupes ya ba boutons réguliers, margin-left: -1pxesalemaka pona ko empiler ba frontières au lieu ya ko longola yango. Kasi, marginesalaka te na display: table-cell. Yango wana, na kotalela ba personnalisations na yo na Bootstrap, okoki kolinga kolongola to kozongisa langi na bandelo.

IE8 mpe bandelo

Internet Explorer 8 elakisaka te bandelo na ba boutons na groupe ya ba boutons justifiés, ezala na <a>to <button>ba éléments. Mpo na kolonga likambo yango, zingá bouton mokomoko na mosusu .btn-group.

Tala #12476 mpo na koyeba makambo mosusu.

Na `<a>`ba éléments

Envelopper kaka série ya .btns na .btn-group.btn-group-justified.

Loboko ya mwasi Katikati Malamu

Loboko ya mwasi Katikati

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

Ba liens oyo ezali kosala lokola ba boutons

Soki ba <a>éléments esalelami mpo na kosala lokola ba boutons – ko déclencher fonctionnalité ya kati ya lokasa, na esika ya kokende na mokanda mosusu to eteni mosusu na kati ya lokasa ya lelo – esengeli mpe kopesa yango role="button".

Na `<button>`ba éléments

Mpo na kosalela bituluku ya ba boutons justifiés na ba <button>éléments, esengeli o envelopper bouton moko na moko na groupe ya ba boutons . Ba navigateurs mingi basalelaka malamu CSS na biso te mpo na justification na <button>ba éléments, kasi lokola tosungaka ba déroulants ya ba boutons, tokoki kosala autour ya yango.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

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.

Dépendance ya plugin

Ba boutons oyo ezali kokita esɛngaka ete plugin oyo ezali kokita ezala na version na yo ya Bootstrap.

Ba dropdowns ya bouton moko

Bobongola bouton moko na toggle ya kokita na mwa mbongwana ya ntina ya bilembo.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Ba déroulants ya bouton ya kokabola

Ndenge moko mpe, salá ba dropdowns ya bouton split na ba changements ya marquage ndenge moko, kaka na bouton ekeseni.

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Kosala bonene ya biloko

Ba déroulants ya ba boutons esalaka na ba boutons ya ba taille nionso.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Variation ya dropup

Déclenchez ba menu déroulant likolo ya ba éléments na kobakisa .dropupna moboti.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Bobakisa ba contrôles ya formulaire na kobakisa makomi to ba boutons liboso, sima, to na ngambo nyonso mibale ya texte-based nionso <input>. Salelá .input-groupna .input-group-addonto .input-group-btnmpo na kokanga liboso to kobakisa biloko na moko .form-control.

Textual `<input>`s kaka

Bokima kosalela <select>ba éléments awa lokola ekoki te kozala entièrement styled na ba navigateurs WebKit.

Bokima kosalela <textarea>ba éléments awa lokola rowsattribut na bango ekozala respecté te na ba cas misusu.

Tooltips & popovers na ba groupes ya entrée esengaka réglage spécial

Ntango ozali kosalela ba toli ya bisaleli to ba popovers na biloko oyo ezali na kati ya .input-group, okozala na mposa ya koyebisa nzela container: 'body'ya koboya ba effets secondaires oyo olingi te (lokola élément oyo ezali kokola mingi mpe/to kobungisa ba coins na yango oyo ezali arrondi ntango tooltip to popover ebandi).

Kosangisa yango na biloko mosusu te

Kosangisa te bituluku ya baformilɛrɛ to bakelasi ya makonzí ya grille mbala moko na bituluku ya bokɔti. Na esika ya kosala yango, tyá etuluku ya bokɔti na kati ya etuluku ya formulaire to eloko oyo etali grille.

Bakisa ntango nyonso bilembo

Ba lecteurs ya écran bakozala na problème na ba formulaire na yo soki otie étiquette te pona entrée nionso. Pona ba groupes ya ba inputs oyo, sala que étiquette to fonctionnalité nionso ya kobakisa epesamela ba technologies ya lisungi.

Technique ya sikisiki oyo esengeli kosalelama (ba éléments oyo emonanaka <label>, <label>ba éléments oyo ebombami na kosalelaka .sr-onlyclasse, to kosalela aria-label, aria-labelledby, aria-describedby, titleto placeholderattribut) mpe ba informations nini ya kobakisa ekosenga kopesa ekokesana na kotalela lolenge ya sikisiki ya widget ya interface oyo ozali kosalela. Bandakisa oyo ezali na eteni oyo epesi mwa mayele oyo epesami, oyo etali likambo moko boye.

Ndakisa ya moboko

Tia add-on to bouton moko na ngambo nyonso mibale ya entrée. Okoki mpe kotya moko na ngámbo nyonso mibale ya eloko moko oyo bakomi.

Tozali kopesa mabɔkɔ te na makambo mingi oyo ebakisami ( .input-group-addonto .input-group-btn) na ngámbo moko.

Tozali kopesa maboko te na ba form-controls ebele na groupe moko ya entrée.

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

Kosala bonene ya biloko

Bakisa ba classes ya taille ya formulaire relative na .input-groupyango moko mpe contenus na kati eko changer automatiquement bonene —ntina ya kozongela ba classes ya taille ya contrôle ya formulaire te na élément moko na moko.

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

Ba cases ya kotiya elembo mpe ba addons ya radio

Tia case nionso to option ya radio na kati ya addon ya groupe ya entrée na esika ya texte.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Ba addons ya bouton

Ba boutons na ba groupes ya entrée ezali mua différente mpe esengaka niveau moko supplémentaire ya nesting. Na esika ya .input-group-addon, ekosɛnga osalela .input-group-btnmpo na kozinga ba boutons. Yango esengeli mpo na ba styles ya navigateur par défaut oyo ekoki ko superviser te.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Ba boutons na ba dropdowns

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Ba boutons oyo ezali na biteni

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

Ba boutons ebele

Atako okoki kaka kozala na eloko moko oyo ebakisami na ngámbo moko, okoki kozala na ba boutons ebele na kati ya moko .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

Navs oyo ezali na Bootstrap ezali na marquage ya kokabola, kobanda na .navclasse ya base, lokola mpe ba états ya kokabola. Swap ba classes ya modificateur pona ko changer entre style moko na moko.

Kosalela navs mpo na ba panneaux ya ba onglets esengaka plugin ya ba onglets JavaScript

Mpo na ba onglets oyo ezali na bisika oyo ezali na ba onglets, osengeli kosalela ba onglets JavaScript plugin . Marquage ekosenga pe ba attributs ya kobakisa rolepe ya ARIA – tala marquage ya ndakisa ya plugin pona ba détails mosusu.

Sala ba navs oyo basalelaka lokola navigation accessible

Soki ozali kosalela navs mpo na kopesa barre ya navigation, sala makasi obakisa a role="navigation"na conteneur parent oyo ezali na logique mingi ya <ul>, to envelopper <nav>élément moko zingazinga ya navigation mobimba. Kobakisa te rôle na <ul>yango moko, mpo yango ekopekisa yango esakolama lokola liste ya solosolo na ba technologies ya kosunga.

Ba onglets

Notez .nav-tabsclasse esengaka classe ya .navbase.

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Ba pilili

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

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Ba pilili mpe ekoki kotyama na likoló na likoló. Bakisa kaka .nav-stacked.

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

Elongisami

Facile kosala ba onglets to ba pilili ekokani na bonene ya moboti na bango na ba écrans ya largeur koleka 768px na .nav-justified. Na ba écrans ya mike, ba liens nav ezo stack.

Ba liens navbar nav justifiés ezali na tango oyo esimbami te.

Safari na réponse justifiée navs

Kobanda na v9.1.2, Safari elakisaka bozangi oyo na yango kobongola bonene ya navigateur na yo na ndenge ya horizontal esalaka mabunga ya bozongisi na nav oyo elongisami oyo elongolami na ntango ya kozongisa sika. Bug oyo elakisami mpe na ndakisa ya nav oyo elongisami .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

Ba liens oyo ekangami

Pona composant nav nionso (ba onglets to ba pilili), bakisa .disabledpona ba liens ya gris pe ba effets ya hover te .

Fonctionnalité ya lien e impacté te

Classe oyo eko changer kaka <a>apparence ya 's, fonctionnalité na yango te. Salelá JavaScript oyo obongisi mpo na kokanga ba liens awa.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

Kosalela ba dropdowns

Bakisa ba menu oyo ezali kokita na mwa HTML ya kobakisa mpe ba plugin ya JavaScript oyo ezali kokita .

Ba onglets na ba dropdowns

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Ba pilili na ba dropdowns

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Navbars ezali ba composants méta responsives oyo esalaka lokola ba têtes ya navigation pona application to site na yo. Babandi kokweya (mpe ezali toggleable) na ba vues mobiles mpe bakomaka horizontal lokola largeur ya port de vue oyo ezali ezali komata.

Ba liens navbar nav justifiés ezali na tango oyo esimbami te.

Makambo oyo ezali kotonda

Lokola Bootstrap eyebi te esika boni oyo ezali na kati ya navbar na yo esengeli, okoki kokutana na makambo na kozinga makambo na molɔngɔ ya mibale. Mpo na kosilisa likambo yango, okoki:

Kitisa motango to bonene ya biloko ya navbar.
Bomba biloko mosusu ya navbar na ba taille ya écran mosusu na kosalelaka ba classes ya utilitaires oyo ezo répondre .
Bobongola esika oyo navbar na yo ebongwanaka kati na mode collapsed mpe horizontal. Personnaliser @grid-float-breakpointvariable to bakisa query na yo moko ya media.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Bozongisa marque ya navbar na elilingi na yo moko na kobongola makomi mpo na <img>. Lokola the .navbar-brandezali na padding mpe bosanda na yango, ekoki kozala ete osengeli koboya mwa CSS na kotalela elilingi na yo.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

Tia makambo ya formulaire na kati .navbar-formmpo na alignment vertical malamu mpe comportement collapsé na ba portes de vue ya mike. Salelá ba options ya alignment mpo na kozwa ekateli ya esika oyo efandaka na kati ya makambo ya navbar.

Lokola a heads up, .navbar-formakabolaka mingi ya code na yango na .form-inlinevia mixin. Ba contrôles ya formulaire misusu, lokola ba groupes ya entrée, ekoki kosenga ba largeurs fixes elakisama malamu na kati ya navbar.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Bakisa ntango nyonso bilembo

Ba lecteurs ya écran bakozala na problème na ba formulaire na yo soki otie étiquette te pona entrée nionso. Mpo na ba formulaire oyo ya inline, okoki kobomba ba étiquettes na kosalelaka .sr-onlyclasse. Ezali na mayele mosusu ya kopesa elembo mpo na mayele ya kosalisa, na ndakisa aria-label, aria-labelledbyto titleattribut. Soki moko te kati na yango ezali, batángi ya écran bakoki kosalela placeholderattribut yango, soki ezali, kasi yebá ete kosalela yango placeholderlokola esika ya mayele mosusu ya kotya bilembo ezali malamu te.

Bakisa .navbar-btnclasse na <button>ba éléments oyo efandi na a te mpo na <form>ko centrer yango verticalement na navbar.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

Envelopper ba chaînes ya texte na élément na .navbar-text, mingi mingi na <p>tag pona leadership ya malamu pe couleur.

<p class="navbar-text">Signed in as Mark Otto</p>

Mpo na bato oyo bazali kosalela ba liens standard oyo ezali te na kati ya composante ya navigation ya navbar ya ordinaire, salelá .navbar-linkkelasi mpo na kobakisa balangi oyo ebongi mpo na ba options ya navbar ya liboso mpe ya inverse.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

Bobongisa ba liens nav, ba formulaire, ba boutons, to makomi, na kosalelaka ba classes ya .navbar-leftto .navbar-rightutilitaire. Ba classes nionso mibale ekobakisa flotteur ya CSS na direction oyo elakisami. Par exemple, pona ko aligner ba liens nav, tia yango na separate <ul>na classe ya utilitaire respective oyo esalemi.

Ba kelasi oyo ezali ba versions mixin-ed ya .pull-leftmpe .pull-right, kasi ezali scoped na ba queries ya media mpo na kosimba na pete ba composants ya navbar na kati ya ba taille ya dispositif.

Bakisa .navbar-fixed-topmpe kotia a .containerto .container-fluidna centre mpe pad navbar contenus.

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

Esengeli kosala padding ya nzoto

Navbar oyo ebongwani ekozipa makambo na yo mosusu, longola kaka soki obakisi paddingna likoló ya <body>. Meka ba valeurs na yo moko to salela fragment na biso oyo ezali awa na se. Toli: Na ndenge ya libela, navbar ezali na bosanda ya 50px.

body { padding-top: 70px; }

Sala makasi otia oyo sima ya CSS ya Bootstrap ya moboko.

Bakisa .navbar-fixed-bottommpe kotia a .containerto .container-fluidna centre mpe pad navbar contenus.

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

Esengeli kosala padding ya nzoto

Navbar oyo ebongwani ekozipa makambo na yo mosusu, longola kaka soki obakisi paddingna nse ya <body>. Meka ba valeurs na yo moko to salela fragment na biso oyo ezali awa na se. Toli: Na ndenge ya libela, navbar ezali na bosanda ya 50px.

body { padding-bottom: 70px; }

Sala makasi otia oyo sima ya CSS ya Bootstrap ya moboko.

Salá navbar ya bonene mobimba oyo ezali kokende mosika na lokasa na kobakisa .navbar-static-topmpe kokɔtisa .containerto .container-fluidna katikati mpe pad navbar makambo.

Na bokeseni na .navbar-fixed-*bakelasi, osengeli te kobongola ata eloko moko te na body.

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

Bobongola lolenge ya navbar na kobakisa .navbar-inverse.

<nav class="navbar navbar-inverse">
  ...
</nav>

Biloko ya kosala mampa

Lakisa esika lokasa ya lelo ezali na kati ya hiérarchie ya navigation.

Ba séparateurs ebakisami automatiquement na CSS na nzela ya :beforempe content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Kosala ba paginations

Pesa ba liens ya pagination mpo na site to app na yo na composant ya pagination ya ba pages ebele, to alternative ya pager ya pete .

Pagination ya liboso

Pagination simple 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.

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Kosala étiquetage na composant ya pagination

Esengeli kozinga composante ya pagination na <nav>élément moko mpo na koyeba yango lokola eteni ya navigation mpo na ba lecteurs d’écran mpe ba technologies mosusu ya kosunga. En plus, lokola page moko ezali probablement kozala na plus d'une section ya navigation ya boye déjà (lokola navigation ya liboso na tête, to navigation ya barre côté), ezali malamu kopesa descriptif aria-labelpona <nav>oyo ezo refleter but na yango. Na ndakisa, soki eteni ya pagination esalelami mpo na kotambola kati na ensemble ya ba résultats ya boluki, étiquette oyo ebongi ekoki kozala aria-label="Search results pages".

Ba états handicapés na actives

Ba liens ezali personnalisables pona ba circonstances différentes. Salelá .disabledmpo na ba liens oyo okoki kofina te mpe .activempo na komonisa lokasa oyo ozali kosalela.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

Tosengi yo o swap out ba ancres actifs to désactivés pona <span>, to otika anchor na cas ya ba flèches ya liboso/ya sima, pona kolongola fonctionnalité ya cliquage tout en gardant ba styles oyo olingaki.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

Kosala bonene ya biloko

Fancy pagination ya monene to ya moke? Bakisa .pagination-lgto .pagination-smmpo na ba taille mosusu.

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

Pager oyo azali kosala

Ba liens ya mbangu ya liboso mpe ya sima mpo na ba implémentations ya pagination ya pete na marquage ya pole mpe ba styles. 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.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

Ba liens oyo ezali na boyokani

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

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Etat désactivé optionnel

Ba liens ya pager esalela pe .disabledclasse ya utilité générale à partir ya pagination.

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Ndakisa

Ndakisa ya motó ya likambo Ya sika

<h3>Example heading <span class="label label-default">New</span></h3>

Ba variations oyo ezali

Bakisa moko ya ba classes ya modificateur oyo tolobeli awa na se mpo na kobongola ndenge ya étiquette moko.

Default Primaire Succès Info Kebisa Likama

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Ozali na ba tonnes ya ba étiquettes?

Mikakatano ya kobongola ekoki kobima ntango ozali na ebele ya bilembo oyo ezali na kati ya molɔngɔ na kati ya eloko moko ya moke, oyo mokomoko na yango ezali na inline-blockeloko na yango (lokola elembo). Nzela ya kosala likambo oyo ezali kosala display: inline-block;. Mpo na koyeba makambo oyo ezali na kati mpe ndakisa, talá #13219 .

Bomonisa na pete biloko ya sika to oyo etangami te na kobakisa a <span class="badge">na ba liens, Bootstrap navs, mpe mingi mosusu.

Boîte de réception42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

Komikwea

Ntango biloko ya sika to oyo etangami te ezali te, ba badges ekokwea kaka (na nzela ya :emptyselecteur ya CSS) soki contenus moko te ezali na kati.

Bokokani ya navigateur croisé

Badges eko self collapse te na Internet Explorer 8 po ezangi soutien ya :emptysélecteur.

Adapte na ba états nav actifs

Ba styles intégrés ezali na kati mpo na kotia ba badges na ba états actifs na ba navigations ya pilili.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

Eteni moko ya pɛpɛlɛ, oyo ekoki kobongwana oyo ekoki na bolingi na yango koyeisa monene esika mobimba ya kotala mpo na kolakisa makambo ya ntina na site na yo.

Mbote, mokili!

Oyo ezali unité ya elombe ya pete, composant ya style jumbotron ya pete pona kobenga attention supplémentaire na ba contenus to ba informations oyo elakisami.

Yekola makambo mosusu

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

Mpo na kosala jumbotron bonene mobimba, mpe kozanga ba coins arrondis, tia yango libanda ya .containers nionso mpe na esika na yango bakisa na .containerkati.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

Coquille moko ya pete mpo na h1mpo na esika oyo ebongi mpe kokabola biteni ya makambo na lokasa moko. Ekoki kosalela élément ya h1's default small, lokola pe mingi ya ba composants misusu (na ba styles ya kobakisa).

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

Bobakisa système ya grille ya Bootstrap na composant ya miniature mpo na kolakisa na pete ba grille ya bilili, ba vidéos, makomi, mpe mingi mosusu.

Soki ozali koluka kolakisa lokola Pinterest ya bililingi ya mikemike ya bosanda mpe/to bonene ekeseni, ekosɛnga osalela plugin ya moto mosusu lokola Masonry , Isotope , to Salvattore .

Ndakisa ya liboso

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

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

Contenu personnalisé

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.

Bouton Bouton

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.

Bouton Bouton

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.

Bouton Bouton

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

Pesa ba messages ya réaction contextuel pona ba actions typiques ya usager na loboko ya ba messages ya alerte oyo ezali pe flexible.

Bandakisa

Envelopper texte nionso mpe bouton ya démission optionnel na .alertmpe moko ya ba classes minei ya contexte (ndakisa, .alert-success) mpo na ba messages ya alerte ya base.

Classe ya défaut te

Ba alertes ezalaka na ba classes par défaut te, kaka ba classes ya base na modificateur. Alerte ya gris par défaut ezali na sens mingi te, yango wana esengeli o préciser type na nzela ya classe contextuelle. Pona na kati ya elonga, info, likebisi, to likama.

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

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

Likebisi! Mieux vaut omitala, ozali komonana malamu mingi te.

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

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

Ba alertes oyo ekoki ko rejeter

Tongela na alerte nionso na kobakisa .alert-dismissiblebouton optionnel mpe ya kokanga.

Esengaka plugin ya alerte ya JavaScript

Mpo na kosala malamu mpenza, makebisi oyo ekoki koboya, osengeli kosalela plugin JavaScript ya makebisi .

Likebisi! Mieux vaut omitala, ozali komonana malamu mingi te.

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Kosala ete bizaleli malamu na kati ya baaparɛyi nyonso

Bozala sûr ya kosalela <button>élément na data-dismiss="alert"attribut ya ba données.

Ba liens na ba alertes

Salelá .alert-linkkelasi ya utilitaire mpo na kopesa nokinoki ba liens ya langi oyo ekokani na kati ya likebisi nyonso.

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

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

Likebisi! Mieux vaut omitala, ozali komonana malamu mingi te .

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

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

Pesa makanisi ya sika na ntina ya bokende liboso ya mosala to mosala na ba barres ya bokende liboso ya pete kasi ya kobongola.

Bokokani ya navigateur croisé

Ba barres ya progrès esalela ba transitions ya CSS3 na ba animations pona kozua mua ba effets na yango. Makambo oyo esimbami te na Internet Explorer 9 mpe na nse to na ba versions ya kala ya Firefox. Opera 12 esimbaka ba animations te.

Bokokani ya Politiki ya bokengi ya makambo (CSP).

Soki site Internet na yo ezali na Politiki ya Bobateli ya Makambo (CSP) oyo epesaka nzela te style-src 'unsafe-inline', boye okozala na likoki te ya kosalela stylebizaleli ya kati mpo na kotya bonene ya barre ya bokóli ndenge emonisami na bandakisa na biso oyo ezali awa na nse. Ba méthodes mosusu ya kotiya ba largeurs oyo ekokani na ba CSP ya makasi ezali kosalela mwa JavaScript personnalisé (oyo etie element.style.width) to kosalela ba classes ya CSS personnalisé.

Ndakisa ya moboko

Barre ya progression par défaut.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

Na étiquette

Longola kelasi na <span>na .sr-onlykati ya barre ya bokende liboso mpo na kolakisa pourcentage oyo emonanaka.

60% ya .

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

Mpo na kosala ete makomi ya elembo etikala kotángama ata mpo na ba pourcentages ya nse, kanisá kobakisa a min-widthna barre ya bokóli.

0% .

2% .

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

Ba alternatives ya contexte

Ba barres ya progrès esalela mwa ndambo ya bouton moko mpe ba classes ya alerte mpo na ba styles oyo ezali constant.

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Ezali na bansinga

Esalelaka gradient mpo na kosala effet rayé. Ezali te na IE9 mpe na nse.

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Ezali na bomoi

Bakisa .activena mpo na .progress-bar-stripedko animer ba rayures droite à gauche. Ezali te na IE9 mpe na nse.

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

Ebele na ebele

Tia ba barres ebele na kati moko .progresspona ko stack yango.

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

Ba styles ya objet abstrait pona kotonga ba types ya ba composants ndenge na ndenge (lokola ba commentaires ya blog, ba Tweets, etc) oyo ezali na image oyo ezali aligné na gauche to na droite pembeni ya contenus textuel.

Media ya liboso

Media ya default elakisaka eloko ya media (bililingi, video, audio) na gauche to na droite ya bloc ya contenus.

Motó ya likambo ya bapanzi-nsango

Cras vandi amet nibh libero, na gravida nulla. Nulla vel metus scelerisque liboso ya kosamba. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis. Fusce condimentum nunc ac nisi oyo ezali na vulputate. Donec lacinia congue felis na kati ya faucibus.

Motó ya likambo ya bapanzi-nsango

Cras vandi amet nibh libero, na gravida nulla. Nulla vel metus scelerisque liboso ya kosamba. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis. Fusce condimentum nunc ac nisi oyo ezali na vulputate. Donec lacinia congue felis na kati ya faucibus.

Motó ya likambo ya media oyo ekangami

Cras vandi amet nibh libero, na gravida nulla. Nulla vel metus scelerisque liboso ya kosamba. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis. Fusce condimentum nunc ac nisi oyo ezali na vulputate. Donec lacinia congue felis na kati ya faucibus.

Motó ya likambo ya bapanzi-nsango

Cras vandi amet nibh libero, na gravida nulla. Nulla vel metus scelerisque liboso ya kosamba. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis.

Motó ya likambo ya bapanzi-nsango

Cras vandi amet nibh libero, na gravida nulla. Nulla vel metus scelerisque liboso ya kosamba. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis.

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

Ba classes .pull-leftmpe .pull-rightlisusu ezali mpe ezalaki liboso kosalelama lokola eteni ya composante ya media, kasi ezali deprecated mpo na bosaleli wana lokola ya v3.3.0. Bazali pene na ekokani na .media-leftmpe .media-right, longola se oyo .media-rightesengeli kotiama nsima ya na .media-bodykati ya html.

Alignment ya ba médias

Bililingi to biloko mosusu ekoki kozala na molɔngɔ likoló, na katikati to na nse. Défaut ezali top aligned.

Top aligné ba médias

Cras vandi amet nibh libero, na gravida nulla. Nulla vel metus scelerisque liboso ya kosamba. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis. Fusce condimentum nunc ac nisi oyo ezali na vulputate. Donec lacinia congue felis na kati ya faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus na magnis ya kobota, nascetur ridiculus mus.

Ba médias oyo ezali na aligné na kati

Cras vandi amet nibh libero, na gravida nulla. Nulla vel metus scelerisque liboso ya kosamba. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis. Fusce condimentum nunc ac nisi oyo ezali na vulputate. Donec lacinia congue felis na kati ya faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus na magnis ya kobota, nascetur ridiculus mus.

Ba médias aligné na se

Cras vandi amet nibh libero, na gravida nulla. Nulla vel metus scelerisque liboso ya kosamba. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis. Fusce condimentum nunc ac nisi oyo ezali na vulputate. Donec lacinia congue felis na kati ya faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus na magnis ya kobota, nascetur ridiculus mus.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

Liste ya ba médias

Na mwa marquage ya likolo, okoki kosalela media na kati ya liste (ezali na ntina mpo na ba threads ya ba commentaires to ba listes ya ba articles).

Motó ya likambo ya bapanzi-nsango

Cras vandi amet nibh libero, na gravida nulla. Nulla vel metus scelerisque liboso ya kosamba. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis.

Motó ya likambo ya media oyo ekangami
Cras vandi amet nibh libero, na gravida nulla. Nulla vel metus scelerisque liboso ya kosamba. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis.

Motó ya likambo ya media oyo ekangami
Cras vandi amet nibh libero, na gravida nulla. Nulla vel metus scelerisque liboso ya kosamba. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis.

Motó ya likambo ya media oyo ekangami
Cras vandi amet nibh libero, na gravida nulla. Nulla vel metus scelerisque liboso ya kosamba. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis.

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

Ba groupes ya liste ezali composante flexible mpe ya makasi mpo na kolakisa kaka ba listes simples ya ba éléments te, kasi oyo ya complexe na contenus personnalisé.

Ndakisa ya moboko

Lisanga ya liste ya moboko mingi ezali kaka liste oyo ezali na molongo te na biloko ya liste, mpe bakelasi oyo ebongi. Tongela likolo na yango na ba options oyo elandi, to CSS na yo moko soki esengeli.

Cras kaka odio
Dapibus ac facilisis na kati ya
Morbi leo risus
Porta ac consectetur oyo ezali na kati
Vestibulum na eros

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Badge ya ba badges

Bakisa composante ya ba badges na eloko nionso ya groupe ya liste mpe ekozala automatiquement positionné na droite.

14Cras kaka odio
2. 2Dapibus ac facilisis na kati ya
1. 1.Morbi leo risus

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Biloko oyo ezali na lien

Bokangisa biloko ya lisanga ya liste na kosalelaka bilembo ya anchor na esika ya biloko ya liste (yango elakisi mpe moboti na <div>esika ya <ul>). Pas besoin ya ba parents individuels autour ya élément moko na moko.

Cras kaka odio Dapibus ac facilisis na kati ya Morbi leo risus Porta ac consectetur oyo ezali na kati Vestibulum na eros

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Biloko ya bouton

Biloko ya etuluku ya liste ekoki kozala ba boutons na esika ya biloko ya liste (yango elakisi mpe moboti na <div>esika ya <ul>). Pas besoin ya ba parents individuels autour ya élément moko na moko. Kosalela ba .btnclasses standard awa te.

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

Biloko oyo ezali na bolɛmbu

Bakisa .disabledna a .list-group-itemmpo na kosala yango gris mpo emonana lokola ekangami.

Cras kaka odio Dapibus ac facilisis na kati ya Morbi leo risus Porta ac consectetur oyo ezali na kati Vestibulum na eros

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Ba kelasi ya contexte

Salelá bakelasi ya contexte mpo na kosala liste ya biloko, na ndenge ya liboso to oyo ezali na lien. Ezali mpe na .activel’Etat.

Dapibus ac facilisis na kati ya
Cras vanda amet nibh libero
Porta ac consectetur oyo ezali na kati
Vestibulum na eros

Dapibus ac facilisis na kati ya Cras vanda amet nibh libero Porta ac consectetur oyo ezali na kati Vestibulum na eros

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

Contenu personnalisé

Bakisa pene na HTML nyonso na kati, ata mpo na bituluku ya liste oyo ezali na boyokani lokola oyo ezali awa na nse.

Liste ya motó ya likambo ya eloko ya etuluku

Donec id elit non mi porta gravida na eget metus. Maecenas sed diam eget risus varius blandit ezalaka ndenge nini?

Liste ya motó ya likambo ya eloko ya etuluku

Donec id elit non mi porta gravida na eget metus. Maecenas sed diam eget risus varius blandit ezalaka ndenge nini?

Liste ya motó ya likambo ya eloko ya etuluku

Donec id elit non mi porta gravida na eget metus. Maecenas sed diam eget risus varius blandit ezalaka ndenge nini?

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

Atako ezali ntango nyonso na ntina te, ntango mosusu osengeli kotya DOM na yo na kati ya sanduku. Mpo na makambo wana, meká eteni ya panneau.

Ndakisa ya moboko

Par défaut, nionso oyo .panelesalaka ezali kosalela mwa frontière ya base mpe padding mpo na kozala na mwa contenus.

Ndakisa ya panneau ya base

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Panneau na motó ya likambo

Bakisa na pete récipient ya motó ya likambo na panneau na yo na .panel-heading. Okoki mpe kotia nyonso <h1>- <h6>na .panel-titlekelasi mpo na kobakisa motó ya likambo oyo esalemi liboso. Kasi, bonene ya makomi ya <h1>- <h6>elongolami na .panel-heading.

Mpo na kosala langi ya malamu ya ba liens, kobosana te kotya ba liens na mitó ya makambo na kati ya .panel-title.

Rubrique ya panneau sans titre

Contenu ya panneau

Titre ya panneau

Contenu ya panneau

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Panneau na pied

Zinga ba boutons to makomi ya mibale na .panel-footer. Yeba ete ba footers ya panneau e hériter ba couleurs na ba frontières te tango ya kosalela ba variations contextuelles lokola ezali te pona kozala na premier plan.

Contenu ya panneau

Panneau ya nse ya lokasa

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Ba alternatives ya contexte

Lokola ba composants misusu, sala facilement que panneau moko ezala na tina mingi na contexte moko particulier na kobakisa moko ya ba classes ya état contextuel.

Titre ya panneau

Contenu ya panneau

Titre ya panneau

Contenu ya panneau

Titre ya panneau

Contenu ya panneau

Titre ya panneau

Contenu ya panneau

Titre ya panneau

Contenu ya panneau

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

Na bamesa

Bakisa nionso oyo ezali na bordure te .tablena kati ya panneau moko pona design sans soudure. Soki ezali na .panel-body, tobakisaka ndelo mosusu na likoló ya tableau mpo na kokabwana.

Motó ya likambo ya panneau

Ba contenus ya panneau par défaut awa. Nulla vitae elit libero, oyo ezali na mbula-mpɛmbɛ oyo babengi pharetra augue. Lacinia ya énie bibendum oyo ezali na eloko te. Aenean eu leo quam. Ornare péllentesque sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies mituka ut id elit.

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

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Soki nzoto ya panneau ezali te, composant elongwaka na tête ya panneau na tableau sans interruption.

Motó ya likambo ya panneau

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

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Na bituluku ya liste

Kotia na pete bituluku ya liste ya bonene mobimba na kati ya panneau nionso.

Motó ya likambo ya panneau

Ba contenus ya panneau par défaut awa. Nulla vitae elit libero, oyo ezali na mbula-mpɛmbɛ oyo babengi pharetra augue. Lacinia ya énie bibendum oyo ezali na eloko te. Aenean eu leo quam. Ornare péllentesque sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies mituka ut id elit.

Cras kaka odio
Dapibus ac facilisis na kati ya
Morbi leo risus
Porta ac consectetur oyo ezali na kati
Vestibulum na eros

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Tika ba navigateurs ba déterminer ba dimensions ya vidéo to ya diaporama na kotalela largeur ya bloc oyo ezali na yango na kosala rapport intrinsèque oyo eko échelle malamu na appareil nionso.

Mibeko esalelami mbala moko na <iframe>, <embed>, <video>, mpe <object>biloko; optionnellement salela classe ya descendant explicite .embed-responsive-itemtango olingi ko correspondre na styling pona ba attributs misusu.

Pro-Toli ya kosala! Ozali na besoin te ya ko kotisa frameborder="0"na s na yo <iframe>lokola to override yango pona yo.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Default malamu

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

Talá, nazali na kati ya libulu moko!

<div class="well">...</div>

Ba kelasi oyo okoki kopona

Contrôle remplissage na ba coins arrondis na deux classes modificateurs optionnels.

Talá, nazali na libulu moko monene!

<div class="well well-lg">...</div>

Talá, nazali na kati ya libulu moko ya moke!

<div class="well well-sm">...</div>

Ba composants

Ba glyphicons

Ba glyphes oyo ezali

Ndenge ya kosalela

Kosangisa yango na biloko mosusu te

Kaka mpo na kosalela na ba éléments ya pamba

Kobongola esika ya makomi ya elembo

Ba icônes oyo ekoki kozuama

Bandakisa

Ba dropdowns ya kokita

Ndakisa

Kobongisa makambo

Ekoki kosɛnga kotya yango na esika mosusu

Alignment .pull-rightoyo esalemi lisusu te

Mitó ya makambo

Mokaboli

Biloko ya menu oyo ekangami

Ba groupes ya ba boutons

Tooltips & popovers na ba groupes ya boutons esengaka réglage spécial

Salá ete ezali malamu rolempe pesa elembo

Ndakisa ya moboko

Barre ya bisaleli ya bouton

Kosala bonene ya biloko

Kosala zumbu

Bokeseni ya semba

Ba groupes ya ba boutons justifiés

Kosimba bandelo

IE8 mpe bandelo

Na <a>ba éléments

Ba liens oyo ezali kosala lokola ba boutons

Na <button>ba éléments

Ba boutons oyo ezali kokita

Dépendance ya plugin

Ba dropdowns ya bouton moko

Ba déroulants ya bouton ya kokabola

Kosala bonene ya biloko

Variation ya dropup

Bituluku ya bokɔtisi

Textual <input>s kaka

Tooltips & popovers na ba groupes ya entrée esengaka réglage spécial

Kosangisa yango na biloko mosusu te

Bakisa ntango nyonso bilembo

Ndakisa ya moboko

Kosala bonene ya biloko

Ba cases ya kotiya elembo mpe ba addons ya radio

Ba addons ya bouton

Ba boutons na ba dropdowns

Ba boutons oyo ezali na biteni

Ba boutons ebele

Navs

Kosalela navs mpo na ba panneaux ya ba onglets esengaka plugin ya ba onglets JavaScript

Sala ba navs oyo basalelaka lokola navigation accessible

Ba onglets

Ba pilili

Elongisami

Safari na réponse justifiée navs

Ba liens oyo ekangami

Fonctionnalité ya lien e impacté te

Kosalela ba dropdowns

Ba onglets na ba dropdowns

Ba pilili na ba dropdowns

Navbar

Navbar ya liboso

Makambo oyo ezali kotonda

Esengaka plugin ya JavaScript

Kobongola esika ya kobuka navbar mobile oyo ekwei

Sala que ba navbars ezala accessible

Image ya marque

Baformilɛrɛ

Ba caveats ya appareil mobile

Bakisa ntango nyonso bilembo

Ba boutons

Kosalela yango na ndenge ya sikisiki

Nkoma

Ba liens oyo ezali nav te

Alignment ya ba composants

Alignment ya droite ya ba composants ebele

Fixé na likolo

Esengeli kosala padding ya nzoto

Ebongisami na nse

Alignment `.pull-right`oyo esalemi lisusu te

Salá ete ezali malamu `role`mpe pesa elembo

Na `<a>`ba éléments

Na `<button>`ba éléments

Textual `<input>`s kaka