Ba glyphicons

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.

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

Ba dropdowns ya kokita

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

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>

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.

Ekoki kosɛnga kotya yango na esika mosusu

Ba dropdowns e positionner automatiquement via CSS na kati ya flux normal ya document. Yango elingi koloba ete ba dropdowns ekoki kozala cropped na baboti na ba overflowpropriétés mosusu to kobima libanda ya ndelo ya viewport. Salá yo moko makambo yango ntango ezali kobima.

Alignment .pull-rightoyo esalemi lisusu te

Kobanda na v3.1.0, tosili kosala déprecated .pull-rightna ba menu oyo ezali kokita. Mpo na kosala menu moko na lobɔkɔ ya mobali, salelá .dropdown-menu-right. Ba composants nav oyo ezali na droite na barre ya nav esalela version mixin ya classe oyo pona ko aligner automatiquement menu. Mpo na koboya yango, salelá .dropdown-menu-left.

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

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>

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>

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>

Ba groupes ya ba boutons

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 rolempe 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>

Barre ya bisaleli ya bouton

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>

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.

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>

Bituluku ya bokɔtisi

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.

@

@ndakisa.com

$ .00

https://ndakisa.com/basaleli/ 
<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

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.

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>

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>

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>

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>

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>

Navbar

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:

  1. Kitisa motango to bonene ya biloko ya navbar.
  2. Bomba biloko mosusu ya navbar na ba taille ya écran mosusu na kosalelaka ba classes ya utilitaires oyo ezo répondre .
  3. 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.

Esengaka plugin ya JavaScript

Soki JavaScript ekangami mpe esika ya kotala ezali moke mpenza mpo navbar ekwea, ekozala mpasi mpo na kopanzana ya navbar mpe kotala makambo oyo ezali na kati ya .navbar-collapse.

Navbar oyo ezo répondre esengaka plugin ya collapse ezala na version na yo ya Bootstrap.

Kobongola esika ya kobuka navbar mobile oyo ekwei

Navbar ekiti na botali na yango ya mobile vertical tango port ya botali ezali moke koleka @grid-float-breakpoint, mpe epanzani na botali na yango ya horizontal oyo ezali mobile te tango port ya botali ezali ata @grid-float-breakpointna bonene. Bongisa variable oyo na source Moins pona ko contrôler tango navbar eko collapser/e panza. Valeur ya défaut ezali 768px(écran ya "moke" to "tablette" ya moke).

Sala que ba navbars ezala accessible

Sala makasi ya kosalela <nav>eleman moko to, soki ozali kosalela eleman moko ya monene mingi lokola a <div>, bakisa a role="navigation"na navbar nyonso mpo na koyeba yango polele lokola etuka ya esika ya ntina mpo na basaleli ya tekiniki ya kosunga.

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

Ba caveats ya appareil mobile

Ezali na mwa ba caveats na oyo etali kosalela ba contrôles ya formulaire na kati ya ba éléments fixes na ba appareils mobiles. Tala ba docs na biso ya soutien ya navigateur pona ba détails.

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>

Kosalela yango na ndenge ya sikisiki

Lokola ba classes ya bouton standard , .navbar-btnekoki kosalelama na <a>mpe <input>ba éléments. Kasi, .navbar-btnesengeli te kosalela to bakelasi ya bouton standard na ba <a>éléments oyo ezali na kati ya .navbar-nav.

Nkoma

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.

Alignment ya droite ya ba composants ebele

Navbars ezali na limitation na tango oyo na ba .navbar-rightclasses ebele. Mpo na kopesa esika malamu na makambo oyo ezali na kati, tosalelaka marge négative na .navbar-rightélément ya nsuka. Tango ezali na ba éléments ebele oyo ezali kosalela classe wana, ba marges wana esalaka te ndenge ekanamaki.

Tokozongela likambo oyo tango tokoki kokoma lisusu composant wana na v4.

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.

  1. Ndako
  1. Ndako
  2. Biblioteke
  1. Ndako
  2. Biblioteke
  3. Bansango
<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>

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>

Ba étiquettes

Ndakisa

Ndakisa ya motó ya likambo Ya sika

Ndakisa ya motó ya likambo Ya sika

Ndakisa ya motó ya likambo Ya sika

Ndakisa ya motó ya likambo Ya sika

Ndakisa ya motó ya likambo Ya sika
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.

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 .

Badge ya ba badges

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>

Jumbotron oyo azali

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>

Motó ya likambo ya lokasa

Shell 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).

Ndakisa motó ya lokasa Sous-texte mpo na motó ya likambo

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

Ba bililingi ya mike

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.

100%x180 ezali
100%x180 ezali
100%x180 ezali
100%x180 ezali 
<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.

100%x200 ezali

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

100%x200 ezali

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

100%x200 ezali

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>

Ba alertes

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.

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

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

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

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

Ba barres ya progrès

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.

60% Esili 
<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.

40% Complet (succès) .
20% Esili
60% Esili (kebisi) .
80% Complet (likama) . 
<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.

40% Complet (succès) .
20% Esili
60% Esili (kebisi) .
80% Complet (likama) . 
<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.

45% Esili 
<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.

35% Esili (elonga) .
20% Esili (kebisi) .
10% Complet (likama) . 
<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>

Objet ya media

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.

64x64 ezali

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.
64x64 ezali

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.
64x64 ezali

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.
64x64 ezali
64x64 ezali

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.
64x64 ezali 
<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.

64x64 ezali

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.

64x64 ezali

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.

64x64 ezali

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

  • 64x64 ezali

    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.

    64x64 ezali

    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.
    64x64 ezali

    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.
    64x64 ezali

    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>

Liste ya groupe

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>

Ba panneaux

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>

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>

Embed oyo ezo répondre

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>

Mabulu ya mai

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>