Kuboneka glyphs

Harimo glyphs zirenga 250 muburyo bwimyandikire uhereye kuri Glyphicon Halflings. Glyphicons Halflings mubusanzwe ntabwo iboneka kubuntu, ariko uwashizeho yabashizeho kuboneka kuri Bootstrap kubusa. Nkurakoze , turasaba gusa ko washyiramo umurongo ugaruka kuri Glyphicons igihe cyose bishoboka.

glyphicon glyphicon-inyenyeri
glyphicon glyphicon-yongeyeho
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-gukuramo
glyphicon glyphicon-igicu
glyphicon glyphicon-ibahasha
glyphicon glyphicon-ikaramu
glyphicon glyphicon-ikirahure
glyphicon glyphicon-umuziki
glyphicon glyphicon-shakisha
glyphicon glyphicon-umutima
glyphicon glyphicon-inyenyeri
glyphicon glyphicon-inyenyeri-ubusa
glyphicon glyphicon-umukoresha
glyphicon glyphicon-firime
glyphicon glyphicon-th-nini
glyphicon glyphicon-th
glyphicon glyphicon-th-urutonde
glyphicon glyphicon-ok
glyphicon glyphicon-gukuramo
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-ikimenyetso
glyphicon glyphicon-cog
glyphicon glyphicon-imyanda
glyphicon glyphicon-murugo
glyphicon glyphicon-dosiye
glyphicon glyphicon-igihe
glyphicon glyphicon-umuhanda
glyphicon glyphicon-gukuramo-alt
glyphicon glyphicon-gukuramo
glyphicon glyphicon-yoherejwe
glyphicon glyphicon-inbox
glyphicon glyphicon-gukina-uruziga
glyphicon glyphicon-gusubiramo
glyphicon glyphicon-kugarura
glyphicon glyphicon-urutonde-alt
glyphicon glyphicon-gufunga
glyphicon glyphicon-ibendera
glyphicon glyphicon-na terefone
glyphicon glyphicon-ingano-yuzuye
glyphicon glyphicon-ingano-hasi
glyphicon glyphicon-hejuru-hejuru
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-igitabo
glyphicon glyphicon-ikimenyetso
glyphicon glyphicon-icapa
glyphicon glyphicon-kamera
glyphicon glyphicon-Imyandikire
glyphicon glyphicon-itinyutse
glyphicon glyphicon-italic
glyphicon glyphicon-inyandiko-y'uburebure
glyphicon glyphicon-inyandiko-ubugari
glyphicon glyphicon-ihuza-ibumoso
glyphicon glyphicon-ihuza-hagati
glyphicon glyphicon-ihuza-iburyo
glyphicon glyphicon-ihuza-gutsindishiriza
glyphicon glyphicon-urutonde
glyphicon glyphicon-indent-ibumoso
glyphicon glyphicon-indent-iburyo
glyphicon glyphicon-isura-videwo
glyphicon glyphicon-ifoto
glyphicon glyphicon-ikarita-yerekana
glyphicon glyphicon-ihindura
glyphicon glyphicon-tint
glyphicon glyphicon-guhindura
glyphicon glyphicon-umugabane
glyphicon glyphicon-kugenzura
glyphicon glyphicon-kwimuka
glyphicon glyphicon-intambwe-inyuma
glyphicon glyphicon-yihuta-inyuma
glyphicon glyphicon-inyuma
glyphicon glyphicon-gukina
glyphicon glyphicon-guhagarara
glyphicon glyphicon-guhagarara
glyphicon glyphicon-imbere
glyphicon glyphicon-yihuta-imbere
glyphicon glyphicon-intambwe-imbere
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-ibumoso
glyphicon glyphicon-chevron-iburyo
glyphicon glyphicon-yongeyeho-ikimenyetso
glyphicon glyphicon-gukuramo-ikimenyetso
glyphicon glyphicon-gukuramo-ikimenyetso
glyphicon glyphicon-ok-ikimenyetso
glyphicon glyphicon-ikibazo-ikimenyetso
glyphicon glyphicon-amakuru-ikimenyetso
glyphicon glyphicon-amashusho
glyphicon glyphicon-gukuramo-uruziga
glyphicon glyphicon-ok-uruziga
glyphicon glyphicon-ban-umuzenguruko
glyphicon glyphicon-umwambi-ibumoso
glyphicon glyphicon-umwambi-iburyo
glyphicon glyphicon-umwambi-hejuru
glyphicon glyphicon-umwambi-hasi
glyphicon glyphicon-gusangira-alt
glyphicon glyphicon-yuzuye-yuzuye
glyphicon glyphicon-guhindura-nto
glyphicon glyphicon-gutangaza-ikimenyetso
glyphicon glyphicon-impano
glyphicon glyphicon-amababi
glyphicon glyphicon-umuriro
glyphicon glyphicon-ijisho-rifunguye
glyphicon glyphicon-ijisho-hafi
glyphicon glyphicon-kuburira-ikimenyetso
glyphicon glyphicon-indege
glyphicon glyphicon-kalendari
glyphicon glyphicon-idasanzwe
glyphicon glyphicon-igitekerezo
glyphicon glyphicon-magnet
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-hasi
glyphicon glyphicon-retweet
glyphicon glyphicon-kugura-igare
glyphicon glyphicon-ububiko-hafi
glyphicon glyphicon-ububiko-fungura
glyphicon glyphicon-resize-vertical
glyphicon glyphicon-resize-itambitse
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-inzogera
glyphicon glyphicon-icyemezo
glyphicon glyphicon-igikumwe-hejuru
glyphicon glyphicon-igikumwe-hasi
glyphicon glyphicon-ukuboko-iburyo
glyphicon glyphicon-ukuboko-ibumoso
glyphicon glyphicon-ukuboko-hejuru
glyphicon glyphicon-hasi-hasi
glyphicon glyphicon-umuzenguruko-umwambi-iburyo
glyphicon glyphicon-umuzenguruko-umwambi-ibumoso
glyphicon glyphicon-umuzenguruko-umwambi-hejuru
glyphicon glyphicon-umuzenguruko-umwambi-hasi
glyphicon glyphicon-isi
glyphicon glyphicon-wrench
glyphicon glyphicon-imirimo
glyphicon glyphicon-muyunguruzi
glyphicon glyphicon-agasakoshi
glyphicon glyphicon-yuzuye
glyphicon glyphicon-ikibaho
glyphicon glyphicon-paperclip
glyphicon glyphicon-umutima-ubusa
glyphicon glyphicon-ihuza
glyphicon glyphicon-terefone
glyphicon glyphicon-gusunika
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-ubwoko
glyphicon glyphicon-itondekanya-by-inyuguti
glyphicon glyphicon-itondekanya-by-inyuguti-alt
glyphicon glyphicon-itondekanya-by-gahunda
glyphicon glyphicon-itondekanya-by-gahunda-alt
glyphicon glyphicon-itondekanya-by-ibiranga
glyphicon glyphicon-itondekanya-by-ibiranga-alt
glyphicon glyphicon-itagenzuwe
glyphicon glyphicon-kwagura
glyphicon glyphicon-gusenyuka-hasi
glyphicon glyphicon-gusenyuka-hejuru
glyphicon glyphicon-yinjira
glyphicon glyphicon-flash
glyphicon glyphicon-gusohoka
glyphicon glyphicon-shyashya-idirishya
glyphicon glyphicon-inyandiko
glyphicon glyphicon-ikiza
glyphicon glyphicon-ifungura
glyphicon glyphicon-yakijijwe
glyphicon glyphicon-itumiza mu mahanga
glyphicon glyphicon-yohereza hanze
glyphicon glyphicon-ohereza
glyphicon glyphicon-disiki-disiki
glyphicon glyphicon-floppy-yakijijwe
glyphicon glyphicon-floppy-gukuramo
glyphicon glyphicon-floppy-ikiza
glyphicon glyphicon-floppy-fungura
glyphicon glyphicon-ikarita-y'inguzanyo
glyphicon glyphicon-kwimura
glyphicon glyphicon-gukata
glyphicon glyphicon-umutwe
glyphicon glyphicon-compression
glyphicon glyphicon-gutwi
glyphicon glyphicon-terefone-alt
glyphicon glyphicon-umunara
glyphicon glyphicon-imibare
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-subtitles
glyphicon glyphicon-amajwi-stereo
glyphicon glyphicon-ijwi-dolby
glyphicon glyphicon-ijwi-5-1
glyphicon glyphicon-ijwi-6-1
glyphicon glyphicon-ijwi-7-1
glyphicon glyphicon-uburenganzira-ikimenyetso
glyphicon glyphicon-kwiyandikisha-ikimenyetso
glyphicon glyphicon-igicu-gukuramo
glyphicon glyphicon-igicu-cyohereza
glyphicon glyphicon-igiti-igiti
glyphicon glyphicon-igiti-kibabi
glyphicon glyphicon-cd
glyphicon glyphicon-kubika-dosiye
glyphicon glyphicon-ifungura-dosiye
glyphicon glyphicon-urwego-hejuru
glyphicon glyphicon-kopi
glyphicon glyphicon-paste
glyphicon glyphicon-imenyesha
glyphicon glyphicon-iringaniza
glyphicon glyphicon-king
glyphicon glyphicon-umwamikazi
glyphicon glyphicon-pawn
glyphicon glyphicon-musenyeri
glyphicon glyphicon-knight
glyphicon glyphicon-umwana-amata
glyphicon glyphicon-ihema
glyphicon glyphicon-ikibaho
glyphicon glyphicon-uburiri
glyphicon glyphicon-pome
glyphicon glyphicon-gusiba
glyphicon glyphicon-isaha yamasaha
glyphicon glyphicon-itara
glyphicon glyphicon-kwigana
glyphicon glyphicon-ingurube-banki
glyphicon glyphicon-imikasi
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-ruble
glyphicon glyphicon-rub
glyphicon glyphicon-igipimo
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-ice-lolly-uburyohe
glyphicon glyphicon-uburezi
glyphicon glyphicon-ihitamo-itambitse
glyphicon glyphicon-ihitamo-ihagaritse
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-idirishya
glyphicon glyphicon-amavuta
glyphicon glyphicon-ingano
glyphicon glyphicon-indorerwamo
glyphicon glyphicon-inyandiko-ingano
glyphicon glyphicon-inyandiko-ibara
glyphicon glyphicon-inyandiko-yinyuma
glyphicon glyphicon-ikintu-ihuza-hejuru
glyphicon glyphicon-ikintu-ihuza-hepfo
glyphicon glyphicon-ikintu-ihuza-itambitse
glyphicon glyphicon-ikintu-guhuza-ibumoso
glyphicon glyphicon-ikintu-gihuza-gihagaritse
glyphicon glyphicon-ikintu-ihuza-iburyo
glyphicon glyphicon-mpandeshatu-iburyo
glyphicon glyphicon-mpandeshatu-ibumoso
glyphicon glyphicon-mpandeshatu-hepfo
glyphicon glyphicon-mpandeshatu-hejuru
glyphicon glyphicon-konsole
glyphicon glyphicon-superscript
glyphicon glyphicon-abiyandikisha
glyphicon glyphicon-menu-ibumoso
glyphicon glyphicon-menu-iburyo
glyphicon glyphicon-menu-hasi
glyphicon glyphicon-menu-hejuru

Uburyo bwo gukoresha

Kubwimpamvu zimikorere, amashusho yose akenera urwego shingiro hamwe nicyiciro cyihariye. Gukoresha, shyira kode ikurikira hafi aho ariho hose. Wemeze gusiga umwanya hagati yigishushanyo ninyandiko kugirango padi ikwiye.

Ntukavange nibindi bice

Agashusho k'ishusho ntigashobora guhuzwa nibindi bice. Ntibagomba gukoreshwa hamwe nandi masomo kubintu bimwe. Ahubwo, ongeramo icyari <span>kandi ushyire mugishushanyo cyamasomo kuri <span>.

Gusa kugirango ukoreshe kubintu byubusa

Agashushondanga kagomba gukoreshwa gusa kubintu bitarimo inyandiko kandi bidafite abana.

Guhindura igishushanyo cyimyandikire

Bootstrap ifata amashusho yimyandikire yimyandikire izaba iri mububiko ../fonts/, ugereranije na dosiye ya CSS yakozwe. Kwimura cyangwa guhindura amazina yimyandikire yimyandikire bisobanura kuvugurura CSS murimwe muburyo butatu:

Hindura i @icon-font-pathna / cyangwa @icon-font-nameimpinduka mumasoko make dosiye.
Koresha isano ya URL ihitamo itangwa na Mukusanya.
Hindura url()inzira muri CSS yakozwe.

Koresha uburyo ubwo aribwo bwose bukwiranye niterambere ryihariye.

Udushushondanga

Uburyo bugezweho bwa tekinoroji ifasha izatangaza CSS ibyakozwe, kimwe na Unicode yihariye. Kugirango wirinde ibyateganijwe kandi bitesha umutwe ibisomwa bya ecran (cyane cyane iyo amashusho akoreshwa gusa mugushushanya), turabihisha hamwe na aria-hidden="true"kiranga.

Niba ukoresha igishushanyo kugirango ugaragaze ibisobanuro (aho kuba nkibintu bishushanya gusa), menya neza ko ubu busobanuro bwanagejejwe kubuhanga bufasha - urugero, shyiramo ibintu byongeweho, bigaragara neza hamwe .sr-onlynishuri.

Niba urimo gukora igenzura ntayindi nyandiko (nkiyi <button>irimo igishushanyo gusa), ugomba guhora utanga ubundi buryo kugirango umenye intego yubugenzuzi, kugirango byumvikane kubakoresha ikorana buhanga. Muri iki kibazo, ushobora kongeramo aria-labelikiranga kugenzura ubwacyo.

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

Ingero

Koresha muri buto, buto ya matsinda kubikoresho byabigenewe, kugendagenda, cyangwa ifishi yateguwe.

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

Agashusho gakoreshwa muburyo bwo kwerekana ko ari ubutumwa bwibeshya, hamwe .sr-onlyninyandiko yinyongera kugirango utange iki gitekerezo kubakoresha ikoranabuhanga rifasha.

Injiza imeri yemewe

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

Toggleable, menu ya menu yo kwerekana urutonde rwihuza. Byakozwe bikorana na plagin ya JavaScript .

Urugero

Kuzuza ibimanuka byamanutse na menu yamanutse imbere .dropdown, cyangwa ikindi kintu gitangaza position: relative;. Noneho ongeraho HTML ya menu.

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

Ibitonyanga byamanutse birashobora guhinduka kugirango byaguke hejuru (aho kumanuka) wongeyeho .dropupkubabyeyi.

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

Guhuza

Mburabuzi, menu yamanutse ihita ishyirwa 100% uhereye hejuru no kuruhande rwibumoso rwababyeyi. Ongeraho iburyo .dropdown-menu-rightkugirango .dropdown-menuuhuze menu yamanutse.

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

Imitwe

Ongeraho umutwe kumurango ibice byibikorwa muri menu yamanutse.

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

Gutandukanya

Ongeramo ibice kugirango utandukane urukurikirane rwihuza muri menu yamanutse.

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

Ibintu byahagaritswe

Ongeraho .disabledkuri a <li>kumanuka kugirango uhagarike umurongo.

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

Itsinda urukurikirane rwa buto hamwe kumurongo umwe hamwe na buto itsinda. Ongeraho kuri radio JavaScript itabishaka hamwe na cheque yisanduku yimyitwarire hamwe na buto yacu plugin .

Ibikoresho & popovers mumatsinda ya buto bisaba gushiraho bidasanzwe

Mugihe ukoresheje ibikoresho cyangwa popovers kubintu biri muri a .btn-group, ugomba kwerekana uburyo container: 'body'bwo kwirinda ingaruka zitifuzwa (nkibintu bigenda byiyongera kandi / cyangwa gutakaza impande zayo zegeranye mugihe ibikoresho cyangwa popover byatewe).

Menya neza `role`kandi utange ikirango

Kugirango tekinoroji ifasha - nk'abasoma ecran - kwerekana ko urukurikirane rwa buto rwashyizwe hamwe, roleikiranga gikwiye gutangwa. Kuri buto ya matsinda, ibi byaba role="group", mugihe ibikoresho byabigenewe bigomba kugira a role="toolbar".

Ikintu kimwe kidasanzwe ni amatsinda arimo igenzura rimwe gusa (urugero nkamatsinda ya buto yemewe afite <button>ibintu) cyangwa ibitonyanga.

Mubyongeyeho, amatsinda hamwe nibikoresho byabigenewe bigomba guhabwa ikirango cyeruye, kuko tekinoroji nyinshi zifasha ubundi ntizitangaze, nubwo hariho roleikiranga gikwiye. Mu ngero zitangwa hano, turakoresha aria-label, ariko ubundi nkibishobora aria-labelledbygukoreshwa.

Urugero rwibanze

Kuzuza urukurikirane rwa buto hamwe .btnna .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>

Huza <div class="btn-group">ibice bya a <div class="btn-toolbar">kubintu byinshi bigoye.

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

Ingano

Aho kugirango ushyireho buto ingero zamasomo kuri buri buto mumatsinda, gusa ongeraho .btn-group-*kuri buri .btn-group, harimo mugihe utera amatsinda menshi.

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

Icyari

Shira a .btn-groupmubindi .btn-groupmugihe ushaka ibitonyanga bivanze nurukurikirane rwa buto.

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

Guhindagurika

Kora urutonde rwa buto rugaragara ruhagaritse aho gutambuka. Gutandukanya buto yamanutse ntabwo ashyigikiwe hano.

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

Amatsinda ya buto yemewe

Kora itsinda rya buto urambure ku bunini bungana kugirango ugabanye ubugari bwose bwababyeyi. Ikora kandi hamwe na buto yamanutse mumatsinda ya buto.

Gukemura imipaka

Bitewe na HTML yihariye na CSS bikoreshwa mugusobanura buto (aribyo display: table-cell), imipaka hagati yabo ikubye kabiri. Mu matsinda asanzwe ya buto, margin-left: -1pxakoreshwa muguhuza imipaka aho kuyakuraho. Ariko, marginntabwo ikorana nayo display: table-cell. Nkigisubizo, ukurikije ibyo wihitiyemo kuri Bootstrap, urashobora gukuraho cyangwa kongera kurangi imipaka.

IE8 n'imbibi

Internet Explorer 8 ntabwo itanga imipaka kuri buto mumatsinda ya buto yemewe, yaba iri <a>cyangwa <button>ibice. Kugirango uzenguruke, uzenguruke buri buto murindi .btn-group.

Reba # 12476 kubindi bisobanuro.

Hamwe `<a>`nibintu

Kuzuza urukurikirane rwa .btns .btn-group.btn-group-justified.

Ibumoso Hagati Iburyo

Ibumoso Hagati

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

Ihuza ikora nka buto

Niba <a>ibintu bikoreshwa mugukora buto - gukurura page-page imikorere, aho kugana kurundi nyandiko cyangwa igice kiri kurupapuro rwubu - bagomba no guhabwa ibikwiye role="button".

Hamwe `<button>`nibintu

Kugirango ukoreshe amatsinda ya buto afite ishingiro <button>, ugomba kuzinga buri buto mumatsinda ya buto . Mucukumbuzi nyinshi ntabwo zikoresha neza CSS yacu kugirango yemeze <button>ibintu, ariko kubera ko dushyigikiye buto yamanutse, dushobora gukora hafi yibyo.

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

Koresha buto iyariyo yose kugirango utere menu yamanutse uyishyire muri a .btn-grouphanyuma utange menu ikwiye.

Amacomeka

Ibitonyanga bya buto bisaba plugin yamanutse kugirango ishyirwe muri verisiyo yawe ya Bootstrap.

Akabuto kamwe kamanuka

Hindura buto mubitonyanga bihindagurika hamwe nibintu byingenzi byahinduwe.

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

Gutandukanya buto yamanutse

Muri ubwo buryo, kora ibice bitandukanya ibice hamwe nibimenyetso bimwe bihinduka, gusa hamwe na buto itandukanye.

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

Ingano

Utubuto duto dukora hamwe na buto yubunini bwose.

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

Gutandukana kw'ibitonyanga

Imbarutso yo guta ibice hejuru yibintu wongeyeho .dropupkubabyeyi.

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

Ongera ifishi igenzura wongeyeho inyandiko cyangwa buto mbere, nyuma, cyangwa kumpande zombi zinyandiko zishingiye <input>. Koresha .input-grouphamwe na .input-group-addoncyangwa .input-group-btnkugirango witegure cyangwa wongere ibintu kuri kimwe .form-control.

Inyandiko `<input>`gusa

Irinde gukoresha <select>ibintu hano kuko bidashobora kuba byuzuye muburyo bwa mushakisha ya WebKit.

Irinde gukoresha <textarea>ibintu hano nkuko rowsibiranga bitazubahwa mubihe bimwe.

Ibikoresho & popovers mumatsinda yinjiza bisaba gushiraho bidasanzwe

Mugihe ukoresheje ibikoresho cyangwa popovers kubintu biri muri an .input-group, ugomba kwerekana uburyo container: 'body'bwo kwirinda ingaruka zitifuzwa (nkibintu bigenda byiyongera kandi / cyangwa gutakaza inguni zazengurutse mugihe ibikoresho cyangwa popover byatewe).

Ntukavange nibindi bice

Ntukavange amatsinda yo gushiraho cyangwa grid inkingi ibyiciro bitaziguye hamwe nitsinda ryinjiza. Ahubwo, shyira itsinda ryinjiza imbere yuburyo bwitsinda cyangwa gride ijyanye nibintu.

Buri gihe ongeraho ibirango

Abasomyi ba ecran bazagira ibibazo kumpapuro zawe niba udashyizemo ikirango kuri buri cyinjijwe. Kuri aya matsinda yinjiza, menya neza ko ikirango icyo aricyo cyose cyongeweho cyangwa imikorere yatanzwe muburyo bwa tekinoroji ifasha.

Tekinike nyayo igomba gukoreshwa (ibintu bigaragara <label>, <label>ibintu byihishe ukoresheje urwego , .sr-onlycyangwa gukoresha i ,,, aria-labelcyangwa ikiranga ) hamwe nandi makuru yinyongera azakenera gutangwa bizatandukana bitewe nubwoko nyabwo bwa widget ya interineti urimo ushyira mubikorwa. Ingero ziri muri iki gice zitanga ibitekerezo bike, uburyo bwihariye.aria-labelledbyaria-describedbytitleplaceholder

Urugero rwibanze

Shyira kongeramo imwe cyangwa buto kumpande zombi zinjiza. Urashobora kandi gushyira imwe kumpande zombi zinjiza.

Ntabwo dushyigikiye ibyongeweho byinshi ( .input-group-addoncyangwa .input-group-btn) kuruhande rumwe.

Ntabwo dushyigikiye uburyo bwinshi-bugenzura mumatsinda imwe yinjiza.

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

Ingano

Ongeraho ifishi igereranya ibyiciro .input-groupubwabyo nibirimo imbere bizahita bihinduka - nta mpamvu yo gusubiramo ifishi yo kugenzura ingano kuri buri kintu.

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

Agasanduku k'isanduku hamwe na radiyo

Shira agasanduku ako ari ko kose cyangwa radio ihitamo mumatsinda yinjiza ya addon aho kwandika.

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

Utubuto

Utubuto mumatsinda yinjiza aratandukanye gato kandi bisaba urwego rumwe rwinyongera rwo guturamo. Aho kugirango .input-group-addon, uzakenera gukoresha .input-group-btnkugirango uzingire buto. Ibi birasabwa bitewe nuburyo busanzwe bwa mushakisha budashobora kurengerwa.

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

Utubuto hamwe nibitonyanga

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

Utubuto

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

Utubuto twinshi

Mugihe ushobora kugira inyongera imwe kuruhande, urashobora kugira buto nyinshi imbere murimwe .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 iboneka muri Bootstrap basangiye marike, bahereye kumurongo shingiro .nav, kimwe na leta zisangiwe. Swap modifier ibyiciro kugirango uhindure hagati yuburyo bwose.

Gukoresha navs kumwanya wibisobanuro bisaba JavaScript tabs plugin

Kubisobanuro hamwe nibice byimbonerahamwe, ugomba gukoresha tabs ya JavaScript plugin . Ikimenyetso kizakenera kandi roleibiranga ARIA - reba urugero rwa plugin kurugero rwibindi bisobanuro.

Kora amato akoreshwa nkigendagenda neza

Niba ukoresha navs kugirango utange inzira yo kugendagenda, menya neza ko wongeramo a role="navigation"kubintu byumvikana byababyeyi byabigenewe <ul>, cyangwa <nav>uzenguruke ikintu hafi yikigenda cyose. Ntukongere uruhare <ul>rwonyine, kuko ibi byakubuza gutangazwa nkurutonde nyarwo hakoreshejwe ikoranabuhanga rifasha.

Tab

Menyako .nav-tabsicyiciro gisaba icyiciro .navshingiro.

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

Ibinini

Fata iyo HTML imwe, ariko ukoreshe .nav-pillsaho:

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

Ibinini nabyo birahagaritse. Ongeraho .nav-stacked.

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

Bifite ishingiro

Byoroshye gukora tabs cyangwa ibinini ubugari bungana bwababyeyi babo kuri ecran yagutse kurenza 768px hamwe .nav-justified. Kuri ecran ntoya, imiyoboro ya nav irashyizwe hamwe.

Imiyoboro ya navbar ifite ishingiro ntabwo ishyigikiwe.

Safari kandi yishura neza bifite ishingiro

Kuva kuri v9.1.2, Safari yerekana ikosa aho guhindura imiterere ya mushakisha yawe mu buryo butambitse bitera gutanga amakosa muri nav yemewe yemejwe neza. Aka gakosa kandi karerekanwa murugero rufite ishingiro .

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

Guhuza

Kubintu byose bya nav (tabs cyangwa ibinini), ongeraho imvi .disabledzumuhondo kandi nta ngaruka zigenda .

Imikorere ihuza ntabwo igira ingaruka

Urwego ruzahindura gusa <a>isura, ntabwo imikorere yayo. Koresha JavaScript yihariye kugirango uhagarike amahuza hano.

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

Gukoresha ibitonyanga

Ongeraho ibimanuka hamwe na HTML yongeyeho na plugin ya JavaScript .

Tab hamwe nibitonyanga

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

Ibinini hamwe nibitonyanga

<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 isubiza meta ibice bikora nkumutwe wo kugendana porogaramu yawe cyangwa urubuga. Batangira gusenyuka (kandi birashobora guhindurwa) muburyo bwa mobile hanyuma bigahinduka horizontal nkuko ubugari bwaboneka bwiyongera.

Imiyoboro ya navbar ifite ishingiro ntabwo ishyigikiwe.

Ibirimo byuzuye

Kubera ko Bootstrap itazi umwanya wibiri muri navbar yawe ikeneye, urashobora guhura nibibazo birimo ibintu bipfunyitse kumurongo wa kabiri. Kugira ngo iki kibazo gikemuke, urashobora:

Mugabanye umubare cyangwa ubugari bwibintu bya navbar.
Hisha ibintu bimwe na bimwe bya navbar mubunini bwa ecran ukoresheje amasomo yingirakamaro .
Hindura ingingo aho navbar yawe ihinduranya hagati yaguye nuburyo butambitse. Hindura @grid-float-breakpointimpinduka cyangwa ongeraho ikibazo cyawe cyitangazamakuru.

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

Simbuza ikirango cya navbar nishusho yawe bwite uhinduranya inyandiko kuri an <img>. Kubera ko .navbar-brandUwiteka afite padi nuburebure bwacyo, urashobora gukenera kurenga CSS bitewe nishusho yawe.

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

Shyira ibirimo muburyo .navbar-formbukwiye kugirango uhuze neza kandi imyitwarire yaguye muburyo buboneye. Koresha uburyo bwo guhuza kugirango uhitemo aho ituye mubirimo navbar.

Nkumutwe hejuru, .navbar-formugabana byinshi muri code yawo .form-inlineukoresheje mixin. Ifishi imwe nimwe igenzura, nkitsinda ryinjiza, irashobora gusaba ubugari buhamye kugirango yerekanwe neza muri 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>

Buri gihe ongeraho ibirango

Abasomyi ba ecran bazagira ikibazo kumpapuro zawe niba udashyizemo ikirango kuri buri cyinjijwe. Kuri iyi fomu yumurongo, urashobora guhisha ibirango ukoresheje urwego .sr-only. Hariho ubundi buryo butandukanye bwo gutanga ikirango cya tekinoroji ifasha, nka aria-label, aria-labelledbycyangwa titleikiranga. Niba nta na kimwe muri ibyo gihari, abasomyi ba ecran barashobora kwitabaza gukoresha placeholderikiranga, niba gihari, ariko menya ko gukoresha placeholdernkuwasimbuye ubundi buryo bwo kuranga ibimenyetso bitagiriwe inama.

Ongeraho urwego .navbar-btnkubintu <button>bitaba muri a <form>kugirango uhagarike hagati muri navbar.

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

Gupfunyika imirongo yinyandiko mubintu hamwe .navbar-text, mubisanzwe kumurongo <p>kugirango uyobore neza nibara.

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

Kubantu mukoresheje amahuza asanzwe atari murwego rusanzwe rwo kugendana nogukoresha, koresha urwego .navbar-linkkugirango wongere amabara akwiye kubisanzwe kandi bihindagurika.

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

.navbar-leftHuza nav ihuza, imiterere, buto, cyangwa inyandiko, ukoresheje .navbar-rightibyiciro byingirakamaro. Ibyiciro byombi bizongeramo CSS ireremba muburyo bwerekanwe. Kurugero, guhuza nav ihuza, ubishyire muburyo butandukanye <ul>hamwe nibikorwa byingirakamaro byashyizwe mu bikorwa.

Aya masomo ni mixin-ed verisiyo ya .pull-leftna .pull-right, ariko zashyizwe mubibazo byibitangazamakuru kugirango byoroshye gukemura ibice bya navbar mubunini bwibikoresho.

Ongeraho .navbar-fixed-topkandi ushiremo .containercyangwa cyangwa .container-fluidhagati na pad navbar ibirimo.

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

Umubiri ukenewe

Navbar ihamye izarenga ibindi bikubiyemo, keretse niba wongeyeho paddinghejuru ya <body>. Gerageza indangagaciro zawe cyangwa ukoreshe agace kacu hepfo. Impanuro: Mubisanzwe, navbar ni 50px hejuru.

body { padding-top: 70px; }

Witondere gushyiramo ibi nyuma yibanze ya Bootstrap CSS.

Ongeraho .navbar-fixed-bottomkandi ushiremo .containercyangwa cyangwa .container-fluidhagati na pad navbar ibirimo.

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

Umubiri ukenewe

Navbar ihamye izarenga ibindi bikubiyemo, keretse niba wongeyeho paddinghepfo ya <body>. Gerageza indangagaciro zawe cyangwa ukoreshe agace kacu hepfo. Impanuro: Mubisanzwe, navbar ni 50px hejuru.

body { padding-bottom: 70px; }

Witondere gushyiramo ibi nyuma yibanze ya Bootstrap CSS.

Kora ubugari bwuzuye navbar izenguruka hamwe nurupapuro wongeyeho .navbar-static-topkandi ushizemo a .containercyangwa .container-fluidkuri centre na pad navbar.

Bitandukanye .navbar-fixed-*n'amasomo, ntukeneye guhindura padi iyo ari yo yose kuri body.

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

Hindura isura ya navbar wongeyeho .navbar-inverse.

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

Imitsima

Erekana urupapuro rwubu ruri murwego rwo kuyobora.

Abitandukanya bahita bongerwaho muri CSS binyuze :beforena content.

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

Pagination

Tanga amahuza ya paji kurubuga rwawe cyangwa porogaramu hamwe nimpapuro nyinshi zo kugereranya, cyangwa ubundi buryo bworoshye bwa pager .

Mburabuzi

Kwiyoroshya byoroshye byahumetswe na Rdio, byiza kuri porogaramu n'ibisubizo by'ishakisha. Inzitizi nini iragoye kubura, byoroshye kugereranywa, kandi itanga ahantu hanini ho gukanda.

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

Kuranga ibice

Igice cya pagination kigomba gupfunyika <nav>mubintu kugirango kimenyekane nkigice cyo kugendana kugirango ugaragaze abasomyi nubundi buryo bwikoranabuhanga bufasha. Mubyongeyeho, nkurupapuro rushobora kuba rufite ibirenze kimwe murwego rwo kugendana (nkibisanzwe byibanze mumutwe, cyangwa kuruhande rwo kuruhande), nibyiza gutanga ibisobanuro aria-labelbyerekana <nav>intego yacyo. Kurugero, niba ibice bya pagination bikoreshwa mukugenda hagati yishakisha ryibisubizo, ikirango gikwiye gishobora aria-label="Search results pages".

Abamugaye kandi bakora

Ihuza rirashobora guhinduka mubihe bitandukanye. Koresha .disabledimiyoboro idahinduka no .activekwerekana urupapuro rwubu.

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

Turagusaba ko wasimbuza inanga zikora cyangwa zamugaye kuri <span>, cyangwa kureka inanga mugihe cyibihe byabanjirije / ubutaha, kugirango ukureho imikorere mugihe ugumanye uburyo bugenewe.

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

Ingano

Ibyiza binini cyangwa bito? Ongeraho .pagination-lgcyangwa .pagination-smkubunini bwinyongera.

<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

Byihuse byambere nibikurikira bihuza byoroshye pagination gushyira mubikorwa hamwe nurumuri nuburyo. Nibyiza kurubuga rworoshye nka blog cyangwa ibinyamakuru.

Urugero rusanzwe

Mburabuzi, pager hagati ihuza.

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

Guhuza

Ubundi, urashobora guhuza buri murongo kumpande:

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

Leta ihitamo ubumuga

Ipaji ihuza kandi ikoresha icyiciro rusange .disabledcyingirakamaro kuva kuri 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>

Urugero

Urugero umutwe mushya

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

Bihari

Ongeramo icyaricyo cyose cyavuzwe haruguru cyo guhindura ibyiciro kugirango uhindure isura yikirango.

Mburabuzi Intsinzi Yibanze Amakuru Yumuburo _

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

Ufite toni ya labels?

Gutanga ibibazo birashobora kuvuka mugihe ufite ibirango byinshi byumurongo mubikoresho bigufi, buri kimwe kirimo inline-blockikintu cyacyo (nkigishushanyo). Inzira ikikije iyi ni gushiraho display: inline-block;. Kubireba nurugero, reba # 13219 .

Byoroshye kwerekana ibintu bishya cyangwa bidasomwe wongeyeho <span class="badge">ahuza, Bootstrap navs, nibindi byinshi.

Inbox42

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

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

Kwikubita hasi

Mugihe nta kintu gishya cyangwa kidasomwe, badge izasenyuka gusa (binyuze mumutoranya wa CSS :empty) mugihe ntakintu kibaho imbere.

Guhuza-mushakisha

Badges ntizishobora gusenyuka muri Internet Explorer 8 kuko ibuze inkunga :emptykubatoranya.

Ihuza na leta ikora

Imyubakire yubatswe irimo gushyiramo badge muri reta ikora mubiyobora ibinini.

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

Ikintu cyoroshye, cyoroshye gishobora guhitamo kwagura ibintu byose kugirango werekane ibintu byingenzi kurubuga rwawe.

Mwaramutse, isi!

Nibintu byintwari byoroheje, byoroshye jumbotron-yuburyo bwo guhamagarira kwitondera cyane ibintu bigaragara cyangwa amakuru.

Wige byinshi

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

Gukora jumbotron ubugari bwuzuye, kandi nta mpande zegeranye, shyira hanze .containerya s zose hanyuma wongere .containerimbere.

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

Igikonoshwa cyoroheje h1kugirango kibe umwanya ukwiye hamwe nigice cyibigize kurupapuro. Irashobora gukoresha h1'i Mburabuzi smallIkintu, Nka Ibindi Byinshi (hamwe n’inyongera).

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

Ongera sisitemu ya gride ya Bootstrap hamwe na thumbnail kugirango ugaragaze byoroshye gride yamashusho, videwo, inyandiko, nibindi byinshi.

Niba ushakisha Pinterest-yerekana kwerekana igikumwe cyuburebure butandukanye na / cyangwa ubugari, uzakenera gukoresha plugin-y-igice nka Masonry , Isotope , cyangwa Salvattore .

Urugero rusanzwe

Mburabuzi, Bootstrap's thumbnail yagenewe kwerekana amashusho ahujwe nibimenyetso bike bisabwa.

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

Ibirimo

Hamwe na bike byongeweho, birashoboka kongeramo ubwoko ubwo aribwo bwose bwa HTML nkimitwe, paragarafu, cyangwa buto muri thumbnail.

Ikimenyetso cya Thumbnail

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

Button Button

Ikimenyetso cya Thumbnail

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

Button Button

Ikimenyetso cya Thumbnail

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

Button Button

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

Tanga ibitekerezo byubutumwa bwibikorwa kubikorwa bisanzwe byabakoresha hamwe nubutumwa buboneka kandi bworoshye bwo kumenyesha.

Ingero

Kuzuza inyandiko iyariyo yose hamwe na buto yo kwirukana muburyo .alertbumwe hamwe muribyiciro bine byerekeranye (urugero, .alert-success) kubutumwa bwibanze bwo kumenyesha.

Nta cyiciro gisanzwe

Imenyesha ntirigira ibyiciro bisanzwe, gusa shingiro nicyiciro cyo guhindura. Mburabuzi imvi zidasanzwe ntabwo zumvikana cyane, urasabwa rero kwerekana ubwoko ukoresheje icyiciro gikubiyemo. Hitamo kubitsinzi, amakuru, kuburira, cyangwa akaga.

Muraho neza! Urasoma neza ubu butumwa bwingenzi bwo kumenyesha.

Umutwe! Uku kumenyesha gukeneye kwitabwaho, ariko ntabwo ari ngombwa cyane.

Iburira! Byiza kwisuzumisha, ntabwo ureba neza.

Yoo! Hindura ibintu bike hanyuma ugerageze kongera gutanga.

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

Kumenyesha

Wubake kubimenyesha byose wongeyeho kubushake .alert-dismissibleno gufunga buto.

Irasaba plugin ya JavaScript

Kubikorwa byuzuye, birukanwa byamenyeshejwe, ugomba gukoresha imenyesha rya plugin ya JavaScript .

Iburira! Byiza kwisuzumisha, ntabwo ureba neza.

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

Menya imyitwarire ikwiye mubikoresho byose

Wemeze gukoresha ikintu <button>hamwe data-dismiss="alert"namakuru yimiterere.

Ihuza mubimenyesha

Koresha urwego .alert-linkrwingirakamaro kugirango utange byihuse guhuza amabara muburyo ubwo aribwo bwose.

Muraho neza! Urasoma neza ubu butumwa bwingenzi bwo kumenyesha .

Umutwe! Uku kumenyesha gukeneye kwitabwaho , ariko ntabwo ari ngombwa cyane.

Iburira! Byiza kwisuzumisha, ntabwo ureba neza .

Yoo! Hindura ibintu bike hanyuma ugerageze kongera gutanga.

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

Tanga ibitekerezo bigezweho kubijyanye niterambere ryakazi cyangwa ibikorwa hamwe niterambere ryoroshye ariko ryoroshye.

Guhuza-mushakisha

Utubari twiterambere dukoresha inzibacyuho ya CSS3 na animasiyo kugirango tugere ku ngaruka zimwe na zimwe. Ibiranga ntibishyigikiwe muri Internet Explorer 9 no munsi cyangwa verisiyo ishaje ya Firefox. Opera 12 ntabwo ishigikira animasiyo.

Politiki yumutekano yibirimo (CSP) guhuza

Niba urubuga rwawe rufite Politiki yumutekano (CSP) itabemerera style-src 'unsafe-inline', ntushobora gukoresha styleibiranga umurongo kugirango ushireho ubugari bwiterambere nkuko bigaragara murugero rwacu hepfo. Ubundi buryo bwo gushiraho ubugari bujyanye na CSP zikomeye zirimo gukoresha JavaScript yihariye (ishyiraho element.style.width) cyangwa gukoresha amasomo yihariye ya CSS.

Urugero rwibanze

Ibisanzwe byiterambere.

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

Kuraho icyiciro <span>hamwe .sr-onlymurwego rwo gutera imbere kugirango werekane ijanisha rigaragara.

60%

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

Kugirango umenye neza ko ikirango cyanditse kiguma gisomeka nubwo kiri hasi yijana, tekereza kongeramo a min-widthkumurongo witerambere.

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>

Ibindi bisobanuro

Utubari twiterambere dukoresha bimwe mubuto bumwe no kumenyesha ibyiciro kuburyo buhoraho.

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

Yanditse

Koresha icyiciro kugirango ukore ingaruka. Ntiboneka muri IE9 no hepfo.

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

Animated

Ongeraho .activekugirango .progress-bar-stripedushushanye imirongo iburyo cyangwa ibumoso. Ntiboneka muri IE9 no hepfo.

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

Bishyizwe hamwe

Shira utubari twinshi murimwe .progresskugirango ubishyire hamwe.

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

Uburyo bukuramo ibintu byubaka ubwoko butandukanye bwibigize (nkibitekerezo bya blog, Tweets, nibindi) biranga ishusho ibumoso cyangwa iburyo-ihuza ishusho hamwe nibirimo.

Ibitangazamakuru bisanzwe

Itangazamakuru risanzwe ryerekana ikintu cyitangazamakuru (amashusho, videwo, amajwi) ibumoso cyangwa iburyo bwibice.

Umutwe w'itangazamakuru

Cras icara amet nibh libero, muri gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum muri vulputate kuri, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis muri faucibus.

Umutwe w'itangazamakuru

Cras icara amet nibh libero, muri gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum muri vulputate kuri, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis muri faucibus.

Icyerekezo cyitangazamakuru

Cras icara amet nibh libero, muri gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum muri vulputate kuri, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis muri faucibus.

Umutwe w'itangazamakuru

Cras icara amet nibh libero, muri gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum muri vulputate kuri, tempus viverra turpis.

Umutwe w'itangazamakuru

Cras icara amet nibh libero, muri gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum muri vulputate kuri, 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>

Amasomo .pull-leftkandi .pull-rightnayo arahari kandi mbere yakoreshejwe nkigice cyitangazamakuru, ariko arateshwa agaciro kugirango akoreshwe guhera v3.3.0. Bingana hafi .media-leftna .media-right, usibye ibyo .media-rightbigomba gushyirwa nyuma ya .media-bodymuri html.

Guhuza itangazamakuru

Amashusho cyangwa ibindi bitangazamakuru birashobora guhuzwa hejuru, hagati, cyangwa hepfo. Mburabuzi ni hejuru.

Itangazamakuru ryo hejuru

Cras icara amet nibh libero, muri gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum muri vulputate kuri, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis muri faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur comiculus mus.

Itangazamakuru rihuza

Cras icara amet nibh libero, muri gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum muri vulputate kuri, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis muri faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur comiculus mus.

Hasi ihuza itangazamakuru

Cras icara amet nibh libero, muri gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum muri vulputate kuri, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis muri faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur comiculus 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>

Urutonde rw'itangazamakuru

Hamwe na marike yinyongera, urashobora gukoresha itangazamakuru imbere murutonde (ingirakamaro kubitekerezo cyangwa ibitekerezo byurutonde).

Umutwe w'itangazamakuru

Cras icara amet nibh libero, muri gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum muri vulputate kuri, tempus viverra turpis.

Icyerekezo cyitangazamakuru
Cras icara amet nibh libero, muri gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum muri vulputate kuri, tempus viverra turpis.

Icyerekezo cyitangazamakuru
Cras icara amet nibh libero, muri gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum muri vulputate kuri, tempus viverra turpis.

Icyerekezo cyitangazamakuru
Cras icara amet nibh libero, muri gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum muri vulputate kuri, 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>

Amatsinda yurutonde nibintu byoroshye kandi bikomeye kugirango yerekane gusa urutonde rworoshye rwibintu, ariko nibintu bigoye hamwe nibirimo byihariye.

Urugero rwibanze

Urutonde rwibanze rwitsinda ni urutonde rudafite urutonde rwibintu, hamwe nibyiciro bikwiye. Wiyubakire hamwe namahitamo akurikira, cyangwa CSS yawe nkuko bikenewe.

Cras justo odio
Dapibus ac facilisis muri
Morbi leo risus
Porta ac consectetur ac
Vestibulum kuri 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>

Ikarita

Ongeraho ibirango kubintu byose byurutonde rwitsinda kandi bizahita bihagarara iburyo.

14Cras justo odio
2Dapibus ac facilisis muri
1Morbi leo risus

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

Ibintu bihujwe

Huza urutonde rwibintu ukoresheje ibirango bya ankeri aho gukoresha urutonde (bivuze kandi umubyeyi <div>aho kuba an <ul>). Ntibikenewe kubabyeyi kugiti cyabo hafi ya buri kintu.

Cras justo odio Dapibus ac facilisis muri Morbi leo risus Porta ac consectetur ac Vestibulum kuri 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>

Ibintu bya buto

Andika ibintu mumatsinda bishobora kuba buto aho kuba urutonde (bivuze kandi umubyeyi <div>aho kuba an <ul>). Ntibikenewe kubabyeyi kugiti cyabo hafi ya buri kintu. Ntukoreshe .btnamasomo asanzwe hano.

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

Ibintu byahagaritswe

Ongeraho .disabledkumurongo .list-group-itemkugirango ugaragare ko wamugaye.

Cras justo odio Dapibus ac facilisis muri Morbi leo risus Porta ac consectetur ac Vestibulum kuri 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>

Amasomo ajyanye

Koresha amasomo ajyanye nuburyo bwo gutondekanya ibintu, bisanzwe cyangwa bihujwe. Harimo na .activeleta.

Dapibus ac facilisis muri
Cras bicara amet nibh libero
Porta ac consectetur ac
Vestibulum kuri eros

Dapibus ac facilisis muri Cras bicara amet nibh libero Porta ac consectetur ac Vestibulum kuri 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>

Ibirimo

Ongeraho hafi HTML yose imbere, ndetse no kumurwi uhuza urutonde nkurwo hepfo.

Andika itsinda ryumutwe

Donec id elit non mi porta gravida kuri eget metus. Maecenas sed diam eget risus varius blandit.

Andika itsinda ryumutwe

Donec id elit non mi porta gravida kuri eget metus. Maecenas sed diam eget risus varius blandit.

Andika itsinda ryumutwe

Donec id elit non mi porta gravida kuri eget metus. Maecenas sed diam eget risus varius blandit.

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

Nubwo atari ngombwa buri gihe, rimwe na rimwe ugomba gushyira DOM yawe mu gasanduku. Kuri ibyo bihe, gerageza ibice bigize.

Urugero rwibanze

Mburabuzi, ibyakozwe byose .panelni ugukoresha imipaka shingiro na padding kugirango bikubiyemo ibintu bimwe.

Urugero rwibanze

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

Ikibaho gifite umutwe

Byoroshye kongeramo ikintu cyumutwe kumwanya wawe hamwe .panel-heading. Urashobora kandi gushiramo icyaricyo cyose <h1>- <h6>hamwe .panel-titlenishuri ryo kongeramo imitwe yabanjirije. Nyamara, Imyandikire ingano ya <h1>- <h6>irengerwa na .panel-heading.

Kugirango uhuze neza amabara, menya neza gushyira amahuza mumutwe imbere .panel-title.

Umutwe wumutwe udafite umutwe

Ibirimo

Umutwe

Ibirimo

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

Ikibaho hamwe na paji

Gupfunyika buto cyangwa inyandiko ya kabiri muri .panel-footer. Menya neza ko ikibaho cyumurage kitaragwa amabara nimbibi mugihe ukoresheje itandukaniro ryimiterere nkuko bitagenewe kuba imbere.

Ibirimo

Ikibaho

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

Ibindi bisobanuro

Kimwe nibindi bice, byoroshye gukora akanama karushijeho gusobanura kumurongo runaka wongeyeho icyaricyo cyose cyamasomo ya leta.

Umutwe

Ibirimo

Umutwe

Ibirimo

Umutwe

Ibirimo

Umutwe

Ibirimo

Umutwe

Ibirimo

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

Hamwe nameza

Ongeramo icyaricyo cyose kitagira umupaka .tablemuburyo bwo gushushanya. Niba hari a .panel-body, twongeyeho umupaka wongeyeho kumeza yo gutandukana.

Umutwe

Ibice bimwe bidasanzwe hano. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#	Izina	Izina ryanyuma	Izina ryukoresha
1	Ikimenyetso	Otto	@mdo
2	Yakobo	Thornton	@fat
3	Larry	Inyoni	@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>

Niba ntamwanya uhari, ibice byimuka biva kumutwe ujya kumeza nta nkomyi.

Umutwe

#	Izina	Izina ryanyuma	Izina ryukoresha
1	Ikimenyetso	Otto	@mdo
2	Yakobo	Thornton	@fat
3	Larry	Inyoni	@twitter

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

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

Hamwe nitsinda ryamatsinda

Byoroshe gushyiramo ubugari bwuzuye urutonde mumatsinda yose.

Umutwe

Ibice bimwe bidasanzwe hano. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

Cras justo odio
Dapibus ac facilisis muri
Morbi leo risus
Porta ac consectetur ac
Vestibulum kuri 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>

Emerera mushakisha kumenya ibipimo bya videwo cyangwa slideshow ukurikije ubugari bwibihagaritse birimo gukora igipimo cyimbere kizapima neza igikoresho icyo aricyo cyose.

Amategeko akoreshwa muburyo butaziguye <iframe>,,, nibintu <embed>; guhitamo koresha ibyiciro byabakomokaho mugihe ushaka guhuza styling kubindi biranga.<video><object>.embed-responsive-item

Impanuro! Ntugomba gushyiramo frameborder="0"muri <iframe>s nkuko tubirengaho kubwawe.

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

Mburabuzi neza

Koresha neza nkibintu byoroshye kubintu kugirango utange inset.

Dore ndi mu iriba!

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

Amasomo atabishaka

Igenzura padding hamwe nu mpande zegeranye hamwe nibyiciro bibiri byahinduwe.

Reba, ndi mu iriba rinini!

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

Reba, ndi mu iriba rito!

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

Ibigize

Glyphicons

Kuboneka glyphs

Uburyo bwo gukoresha

Ntukavange nibindi bice

Gusa kugirango ukoreshe kubintu byubusa

Guhindura igishushanyo cyimyandikire

Udushushondanga

Ingero

Ibitonyanga

Urugero

Guhuza

Birashobora gusaba imyanya yinyongera

Guhuza .pull-rightagaciro

Imitwe

Gutandukanya

Ibintu byahagaritswe

Amatsinda ya buto

Ibikoresho & popovers mumatsinda ya buto bisaba gushiraho bidasanzwe

Menya neza rolekandi utange ikirango

Urugero rwibanze

Umwanyabikoresho

Ingano

Icyari

Guhindagurika

Amatsinda ya buto yemewe

Gukemura imipaka

IE8 n'imbibi

Hamwe <a>nibintu

Ihuza ikora nka buto

Hamwe <button>nibintu

Ibitonyanga

Amacomeka

Akabuto kamwe kamanuka

Gutandukanya buto yamanutse

Ingano

Gutandukana kw'ibitonyanga

Amatsinda yinjiza

Inyandiko <input>gusa

Ibikoresho & popovers mumatsinda yinjiza bisaba gushiraho bidasanzwe

Ntukavange nibindi bice

Buri gihe ongeraho ibirango

Urugero rwibanze

Ingano

Agasanduku k'isanduku hamwe na radiyo

Utubuto

Utubuto hamwe nibitonyanga

Utubuto

Utubuto twinshi

Navs

Gukoresha navs kumwanya wibisobanuro bisaba JavaScript tabs plugin

Kora amato akoreshwa nkigendagenda neza

Tab

Ibinini

Bifite ishingiro

Safari kandi yishura neza bifite ishingiro

Guhuza

Imikorere ihuza ntabwo igira ingaruka

Gukoresha ibitonyanga

Tab hamwe nibitonyanga

Ibinini hamwe nibitonyanga

Navbar

Mburabuzi

Ibirimo byuzuye

Irasaba plugin ya JavaScript

Guhindura mobile mobile navbar yaguye

Kora ubwato buboneka

Ishusho

Ifishi

Igikoresho kigendanwa

Buri gihe ongeraho ibirango

Utubuto

Imikoreshereze yihariye

Inyandiko

Imiyoboro itari nav

Guhuza ibice

Guhuza iburyo ibice byinshi

Bishyizwe hejuru

Umubiri ukenewe

Bishyizwe hasi

Guhuza `.pull-right`agaciro

Menya neza `role`kandi utange ikirango

Hamwe `<a>`nibintu

Hamwe `<button>`nibintu

Inyandiko `<input>`gusa