Glyphicons

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

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

Ibitonyanga

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

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>

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

Birashobora gusaba imyanya yinyongera

Ibitonyanga bihita bishyirwa kuri CSS muburyo busanzwe bwinyandiko. Ibi bivuze ko ibitonyanga bishobora guhingwa nababyeyi bafite overflowimitungo runaka cyangwa kugaragara kurenga imipaka. Kemura ibyo bibazo wenyine wenyine uko bivutse.

Guhuza .pull-rightagaciro

Nko kuri v3.1.0, twataye agaciro .pull-rightkuri menu yamanutse. Kugirango uhuze iburyo, koresha .dropdown-menu-right. Iburyo-buhuza ibice bigize navbar ukoreshe mixin verisiyo yiri shuri kugirango uhite uhuza menu. Kurenga, koresha .dropdown-menu-left.

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

Ongeraho umutwe kumurango ibice byibikorwa muri menu yamanutse.

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

Ongeramo ibice kugirango utandukane urukurikirane rwihuza muri menu yamanutse.

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

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>

Amatsinda ya buto

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

Umwanyabikoresho

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.

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

Ibitonyanga

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

Na none, kora ibice bitandukanya ibice byamanutse 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>

Amatsinda yinjiza

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.

@

@ urugero.com

$ .00

https://urugero.com/abakoresha/
<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

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.

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>

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>

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>

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>

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>

Navbar

Navbars isubiza meta ibice bikora nkimitwe yo 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 wibirimo muri navbar yawe ikeneye, urashobora guhura nibibazo birimo ibintu bipfunyitse kumurongo wa kabiri. Kugira ngo iki kibazo gikemuke, urashobora:

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

Irasaba plugin ya JavaScript

Niba JavaScript ihagaritswe kandi kureba ni bigufi bihagije kuburyo navbar isenyuka, ntibizashoboka kwagura navbar no kureba ibiri muri .navbar-collapse.

Navbar isubiza isaba gusenyuka plugin kugirango ishyirwe muri verisiyo yawe ya Bootstrap.

Guhindura mobile mobile navbar yaguye

Navbar isenyuka muburyo bwa verisiyo igendanwa iyo ibona ari ndende kuruta @grid-float-breakpoint, kandi ikaguka muri horizontal yayo itari mobile igendanwa iyo ibiboneka byibuze @grid-float-breakpointmubugari. Hindura iyi variable mumasoko make yo kugenzura mugihe navbar yaguye / yagutse. Agaciro gasanzwe ni 768px(ecran "ntoya" cyangwa "tablet" ecran).

Kora ubwato buboneka

Wemeze gukoresha ikintu <nav>cyangwa, niba ukoresheje ibintu rusange nka a <div>, ongeramo a role="navigation"kuri buri navbar kugirango ubigaragaze neza nkakarere k’ingenzi kubakoresha ikoranabuhanga rifasha.

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

Igikoresho kigendanwa

Hano hari caveats zijyanye no gukoresha form igenzura mubintu byagenwe kubikoresho bigendanwa. Reba amashakiro yacu ashyigikira doc kubisobanuro birambuye.

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>

Imikoreshereze yihariye

Nka buto isanzwe ya buto , irashobora .navbar-btngukoreshwa kubintu . Ariko, ntanubwo cyangwa ibyiciro bisanzwe byamasomo bigomba gukoreshwa kubintu biri imbere .<a><input>.navbar-btn<a>.navbar-nav

Gupfundikanya 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 nibisanzwe bya navbar.

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

Guhuza iburyo ibice byinshi

Navbars kuri ubu ifite aho igarukira hamwe .navbar-rightnamasomo menshi. Kugirango ibirimo umwanya neza, dukoresha margin kubintu byanyuma .navbar-right. Iyo hari ibintu byinshi ukoresheje urwo rwego, iyi marge ntabwo ikora nkuko byateganijwe.

Tuzabisubiramo mugihe dushobora kongera kwandika kiriya gice muri v4.

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>

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>

Ibirango

Urugero

Urugero umutwe mushya

Urugero umutwe mushya

Urugero umutwe mushya

Urugero umutwe mushya

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

Kuboneka bitandukanye

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 .

Ikarita

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 kumutoranya wa CSS :empty) mugihe nta kintu kirimo imbere.

Guhuza-mushakisha

Badges ntizishobora gusenyuka muri Internet Explorer 8 kuko ibuze inkunga ya:empty kubatoranya.

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>

Jumbotron

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>

Urupapuro

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>

Thumbnail

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.

100% x200

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

100% x200

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

100% x200

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>

Imenyesha

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.

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

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

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

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

Utubari twiterambere

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.

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

40% Byuzuye (intsinzi)
20% Byuzuye
60% Byuzuye (kuburira)
80% Byuzuye (akaga)
<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.

40% Byuzuye (intsinzi)
20% Byuzuye
60% Byuzuye (kuburira)
80% Byuzuye (akaga)
<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.

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

35% Byuzuye (intsinzi)
20% Byuzuye (kuburira)
10% Byuzuye (akaga)
<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>

Ikintu cyitangazamakuru

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>

Andika itsinda

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 ibimenyetso bya ankeri aho gukoresha urutonde (bivuze kandi umubyeyi <div>aho kuba an <ul>). Ntibikenewe kubabyeyi kugiti cyabo hafi ya buri kintu.

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

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

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

Ikibaho

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

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>

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

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

Igisubizo

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>

Iriba

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>