Urugero

Toggleable, menu ya menu yo kwerekana urutonde rwihuza. Byakozwe bikorana na plugin ya javascript yamanutse .

<ul class = "dropdown-menu" uruhare = "menu" aria-labelledby = "dropmanMenu" >   
  <li> <a tabindex = "-1" href = "#"> Igikorwa </a> </li>  
  <li> <a tabindex = "-1" href = "#"> Ikindi gikorwa </a> </li>  
  <li> <a tabindex = "-1" href = "#"> Ikindi kintu hano </a> </li>  
  <li urwego = "umutandukanya" > </li> 
  <li> <a tabindex = "-1" href = "#"> Ihuza ritandukanye </a> </li>  
</ul>

Markup

Urebye gusa menu yamanutse, dore HTML isabwa. Ugomba gupfunyika ibimanuka byamanutse na menu yamanutse imbere .dropdown, cyangwa ikindi kintu gitangaza position: relative;. Noneho kora menu.

<div class = "guta" > 
  <! - Ihuza cyangwa buto kugirango uhindure ibitonyanga ->
  <ul class = "dropdown-menu" uruhare = "menu" aria-labelledby = "dLabel" >   
    <li> <a tabindex = "-1" href = "#"> Igikorwa </a> </li>  
    <li> <a tabindex = "-1" href = "#"> Ikindi gikorwa </a> </li>  
    <li> <a tabindex = "-1" href = "#"> Ikindi kintu hano </a> </li>  
    <li urwego = "umutandukanya" > </li> 
    <li> <a tabindex = "-1" href = "#"> Ihuza ritandukanye </a> </li>  
  </ul>
</div>

Amahitamo

Huza ibice iburyo hanyuma wongereho harimo urwego rwinyongera rwo guta.

Guhuza Ibikubiyemo

Ongeraho iburyo .pull-rightkugirango .dropdown-menuuhuze menu yamanutse.

<ul class = "guta-menu gukurura-iburyo" uruhare = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

Sub menus kumanuka

Ongeraho urwego rwinyongera rwibintu byamanutse, bigaragara kuri hover nkibya OS X, hamwe nibintu byoroshye byongeweho. Ongeraho icyaricyo .dropdown-submenucyose limuri menu ihari yo gutondeka byikora.

<ul class = "dropdown-menu" uruhare = "menu" aria-labelledby = "dLabel" >   
  ...
  <li urwego = "guta-submenu" > 
    <a tabindex = "-1" href = "#"> Amahitamo menshi </a>  
    <ul class = "ibitonyanga-menu" > 
      ...
    </ul>
  </li>
</ul>

Ingero

Amahitamo abiri yibanze, hamwe nibindi bibiri bitandukanye.

Itsinda rimwe rya buto

Kuzuza urukurikirane rwa buto hamwe .btnna .btn-group.

<div class = "btn-itsinda" > 
  <buto icyiciro = "btn" > 1 </button> 
  <buto icyiciro = "btn" > 2 </button> 
  <buto icyiciro = "btn" > 3 </button> 
</div>

Amatsinda menshi ya buto

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

<div class = "btn-toolbar" > 
  <div class = "btn-itsinda" > 
    ...
  </div>
</div>

Amatsinda ya buto ahagaritse

Kora urutonde rwa buto rugaragara ruhagaritse aho gutambuka.

<div class = "btn-itsinda btn-itsinda-rihagaze" > 
  ...
</div>

Kugenzura agasanduku na radiyo nziza

Amatsinda ya buto arashobora kandi gukora nka radio, aho buto imwe yonyine ishobora kuba ikora, cyangwa agasanduku, aho umubare uwo ariwo wose wa buto ushobora kuba ukora. Reba inyandiko ya Javascript kubyo.

Ibitonyanga mumatsinda ya buto

Umutwe! Utubuto dufite ibitonyanga bigomba kuba byiziritse kugiti cyabyo .btn-groupmuburyo .btn-toolbarbwo gutanga neza.

Incamake n'ingero

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

<div class = "btn-itsinda" > 
  <a class = "btn guta-toggle" data-toggle = "dropdown" href = "#">   
    Igikorwa
    <span class = "caret" > </span> 
  </a>
  <ul class = "ibitonyanga-menu" > 
    <! - Ibitonyanga byamanutse bihuza ->
  </ul>
</div>

Akorana na buto zose zingana

Utubuto tumanuka dukora mubunini ubwo aribwo bwose .btn-large,,, .btn-smallcyangwa .btn-mini.

Irasaba javascript

Ibitonyanga bya buto bisaba Bootstrap yamanutse plugin kugirango ikore.

Rimwe na rimwe-nka mobile-ibimanuka bizamanuka hanze yukureba. Ugomba gukemura guhuza intoki cyangwa hamwe na javascript yihariye.

Gutandukanya buto yamanutse

Kubaka kuri buto yitsinda ryimiterere na marike, turashobora gukora byoroshye buto yo gutandukana. Gutandukanya utubuto tugaragaza ibikorwa bisanzwe ibumoso hamwe no kumanura iburyo iburyo hamwe nibihuza.

<div class = "btn-itsinda" > 
  <buto icyiciro = "btn" > Igikorwa </button> 
  <buto icyiciro = "btn kumanuka-guhinduranya" data-toggle = "igitonyanga" >  
    <span class = "caret" > </span> 
  </button>
  <ul class = "ibitonyanga-menu" > 
    <! - Ibitonyanga byamanutse bihuza ->
  </ul>
</div>

Ingano

Koresha inyongera ya buto y'ibyiciro .btn-mini, .btn-smallcyangwa .btn-largekubunini.

<div class = "btn-itsinda" > 
  <buto icyiciro = "btn btn-mini" > Igikorwa </button> 
  <buto icyiciro = "btn btn-mini kumanuka-guhinduranya" data-toggle = "igitonyanga" >  
    <span class = "caret" > </span> 
  </button>
  <ul class = "ibitonyanga-menu" > 
    <! - Ibitonyanga byamanutse bihuza ->
  </ul>
</div>

Ibitonyanga

Ibitonyanga byamanuka birashobora kandi guhindurwa kuva hasi hejuru wongeyeho icyiciro kimwe kubabyeyi ba hafi .dropdown-menu. Bizahindura icyerekezo cya i .caretno guhinduranya menu ubwayo kugirango yimuke kuva hasi hejuru aho hejuru hejuru.

<div class = "btn-itsinda ryamanutse" > 
  <buto icyiciro = "btn" > Igitonyanga </button> 
  <buto icyiciro = "btn kumanuka-guhinduranya" data-toggle = "igitonyanga" >  
    <span class = "caret" > </span> 
  </button>
  <ul class = "ibitonyanga-menu" > 
    <! - Ibitonyanga byamanutse bihuza ->
  </ul>
</div>

Umucyo woroshye usanzwe Ikimenyetso kimwe, ibyiciro bitandukanye

Ibice byose bya nav hano - tabs, ibinini, na lisiti - dusangire ikimenyetso kimwe shingiro hamwe nuburyo binyuze mumasomo .nav.

Ibanze

Fata imiyoboro isanzwe <ul>hanyuma wongereho .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li urwego = "rukora" > 
    <a href = "#"> Urugo </a> _ 
  </li>
  <li> <a href = "#"> ... </a> </li> 
  <li> <a href = "#"> ... </a> </li> 
</ul>

Ibinini by'ibanze

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

<ul class = "nav nav-ibinini" > 
  <li urwego = "rukora" > 
    <a href = "#"> Urugo </a> _ 
  </li>
  <li> <a href = "#"> ... </a> </li> 
  <li> <a href = "#"> ... </a> </li> 
</ul>

Leta yamugaye

Kubintu byose bigize ibice (tabs, ibinini, cyangwa urutonde), ongeraho imvi .disabledzumuhondo kandi nta ngaruka zigenda . Ihuza rizakomeza gukanda, ariko, keretse niba javascript yihariye yashyizwe mubikorwa kugirango ikumire.

<ul class = "nav nav-ibinini" > 
  ...
  <li urwego = "ubumuga" > <a href = "#"> Urugo </a> </li>  
  ...
</ul>

Guhuza ibice

Guhuza nav ihuza, koresha ibyiciro .pull-leftbyingirakamaro .pull-right. Ibyiciro byombi bizongeramo CSS ireremba muburyo bwerekanwe.

Birashoboka

Nka tabs n'ibinini bitambitse kubisanzwe, gusa ongeraho icyiciro cya kabiri .nav-stacked,, kugirango bigaragare bihagaritse.

Utubuto

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

Ibinini byegeranye

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

Ibitonyanga

Ongeraho ibimanuka hamwe na HTML yinyongera hamwe na plugin ya javascript .

Tab hamwe nibitonyanga

<ul class = "nav nav-tabs" > 
  <li urwego = "kumanuka" > 
    < icyiciro = "guta-guhindagura" 
       data-toggle = "igitonyanga"
       href = "#" >
        Kumanuka
        <b urwego = "caret" > </b> 
      </a>
    <ul class = "ibitonyanga-menu" > 
      <! - amahuza ->
    </ul>
  </li>
</ul>

Ibinini hamwe nibitonyanga

<ul class = "nav nav-ibinini" > 
  <li urwego = "kumanuka" > 
    < icyiciro = "guta-guhindagura" 
       data-toggle = "igitonyanga"
       href = "#" >
        Kumanuka
        <b urwego = "caret" > </b> 
      </a>
    <ul class = "ibitonyanga-menu" > 
      <! - amahuza ->
    </ul>
  </li>
</ul>

Urutonde

Inzira yoroshye kandi yoroshye yo kubaka amatsinda ya nav ihuza imitwe idahwitse. Bakoreshwa neza kuruhande nka Finder muri OS X.

Urugero nav

Fata urutonde rwihuza hanyuma wongereho class="nav nav-list":

<ul class = "nav nav-urutonde" > 
  <li urwego = "nav-umutwe" > Urutonde rw'umutwe </li> 
  <li urwego = "rukora" > <a href = "#"> Urugo </a> </li>  
  <li> <a href = "#"> Isomero </a> </li> 
  ...
</ul>

Icyitonderwa Kubyari murutonde rwamato, shyiramo class="nav nav-list"icyaricyo cyose <ul>.

Ibice bitambitse

Ongeraho utandukanya utambitse mugukora urutonde rwubusa hamwe nurwego .divider, nka gutya:

<ul class = "nav nav-urutonde" > 
  ...
  <li urwego = "umutandukanya" > </li> 
  ...
</ul>

Imbonerahamwe nav

Zana tabs yawe mubuzima hamwe na plugin yoroshye yo guhinduranya hagati yibirimo ukoresheje tabs. Bootstrap ihuza tabs muburyo butandukanye: hejuru (isanzwe), iburyo, hepfo, n'ibumoso.

Urugero

Kugirango ukore tabs, kora .tab-paneindangamuntu idasanzwe kuri buri tab hanyuma uyizengere .tab-content.

<div class = "tabbable" > <! - Gusa bisabwa kubumoso / iburyo - -  
  <ul class = "nav nav-tabs" > 
    <li urwego = "rukora" > <a href = "#tab1" data-toggle = "tab"> Igice cya 1 </a> </li >   
    <li> <a href = "#tab2" data-toggle = "tab"> Igice cya 2 </a> </li>  
  </ul>
  <div class = "tab-ibirimo" > 
    <div class = "tab-pane ikora" id = "tab1" >  
      <p> Ndi mu gice cya 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Howdy, Ndi mu gice cya 2. </p>
    </div>
  </div>
</div>

Fade muri tabs

Kugirango utume gushira, ongera .fadekuri buri .tab-pane.

Irasaba plugin ya jQuery

Amababi yose ya tabbable akoreshwa na plugin yacu yoroheje ya jQuery. Soma byinshi kubyerekeranye no kuzana tabbable mubuzima kurupapuro rwa javascript .

Imbonerahamwe mu cyerekezo icyo ari cyo cyose

Utubuto hepfo

Kuramo urutonde rwa HTML hanyuma wongere urwego rwo gushyira tabs hepfo.

<div class = "tabs ya tabs-munsi" > 
  <div class = "tab-ibirimo" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Utubuto ibumoso

Hindura icyiciro kugirango ushyire tabs ibumoso.

<div class = "tabs ya tabs-ibumoso" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-ibirimo" > 
    ...
  </div>
</div>

Utubuto iburyo

Hindura icyiciro kugirango ushyire tabs iburyo.

<div class = "tabs ya tabs-iburyo" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-ibirimo" > 
    ...
  </div>
</div>

Shingiro navbar

Gutangira, navbars irahagaze (ntabwo yashyizwe hejuru) kandi ushizemo inkunga yizina ryumushinga hamwe nogukora shingiro. Shyira imwe ahantu hose muri a .container, ishyiraho ubugari bwurubuga rwawe nibirimo.

<div class = "navbar" > 
  <div class = "navbar-imbere" > 
    <a class = "brand" href = "#"> Umutwe </a> _  
    <ul class = "nav" > 
      <li urwego = "rukora" > <a href = "#"> Urugo </a> </li>  
      <li> <a href = "#"> Ihuza </a> </li> 
      <li> <a href = "#"> Ihuza </a> </li> 
    </ul>
  </div>
</div>

Ibikoresho bya Navbar

Ikirango

Ihuza ryoroshye ryerekana ikirango cyawe cyangwa izina ryumushinga bisaba gusa ikirango.

<a class = "brand" href = "#"> Izina ryumushinga </a>  

Imiyoboro

Ibintu byoroheje biroroshye kongeramo ukoresheje urutonde rutagabanijwe.

<ul class = "nav" > 
  <li urwego = "rukora" > 
    <a href = "#"> Urugo </a> _ 
  </li>
  <li> <a href = "#"> Ihuza </a> </li> 
  <li> <a href = "#"> Ihuza </a> </li> 
</ul>

Urashobora kongeramo byoroshye abatandukanya kumurongo wawe hamwe nurutonde rwubusa hamwe nicyiciro cyoroshye. Gusa ongeraho ibi hagati yibihuza:

<ul class = "nav" > 
  ...
  <li urwego = "divider-vertical" > </li> 
  ...
</ul>

Ifishi

Kugirango ubone neza kandi ushireho ifishi muri navbar, ongeramo ibyiciro bikwiye nkuko bigaragara hano hepfo. Ifishi isanzwe, shyiramo .navbar-formkandi haba .pull-leftcyangwa .pull-rightkugirango uyihuze neza.

<form class = "navbar-form gukurura-ibumoso" > 
  < ubwoko bwinjiza = "inyandiko" urwego = "span2" >  
  <buto ubwoko = "gutanga" urwego = "btn" > Tanga </button>  
</form>

Ifishi yo gushakisha

Kuburyo bwihariye bwo gushakisha, ongeraho .navbar-searchkuri formno .search-querykwinjiza muburyo bwihariye muri navbar.

<form class = "navbar-shakisha gukurura-ibumoso" > 
  <iyinjiza ubwoko = "inyandiko" urwego = "gushakisha-kubaza" umwanya = "Shakisha" >   
</form>

Guhuza ibice

.pull-leftHuza nav ihuza, ifishi yishakisha, cyangwa inyandiko, koresha .pull-rightibyiciro byingirakamaro. Ibyiciro byombi bizongeramo CSS ireremba muburyo bwerekanwe.

Gukoresha ibitonyanga

Ongeraho ibitonyanga nibitonyanga kuri nav hamwe na marike nkeya hamwe na plugin ya javascript .

<ul class = "nav" > 
  <li urwego = "kumanuka" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"> _   
      Konti
      <b urwego = "caret" > </b> 
    </a>
    <ul class = "ibitonyanga-menu" > 
      ...
    </ul>
  </li>
</ul>

Sura javascript yamanutse inyandiko kugirango ubone ibimenyetso byinshi hamwe namakuru yo guhamagara ibitonyanga.

Inyandiko

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

Guhitamo kwerekana gutandukana

Kosora navbar hejuru cyangwa hepfo ya viewport hamwe ninyongera yinyongera kumurongo wo hanze , .navbar.

Bishyizwe hejuru

Ongeraho .navbar-fixed-topkandi wibuke kubara kumwanya wihishe munsi yacyo wongeyeho byibuze 40px paddingkuri <body>. Wemeze kongeramo ibi nyuma yibanze ya Bootstrap CSS na mbere ya CSS itabishaka.

<div class = "navbar navbar-ikosorwa-hejuru" > 
  ...
</div>

Bishyizwe hasi

Ongeraho .navbar-fixed-bottom.

<div class = "navbar navbar-ikosorwa-hepfo" > 
  ...
</div>

Ikibaho cyo hejuru

Kora ubugari bwuzuye navbar izenguruka hamwe nurupapuro wongeyeho .navbar-static-top. Bitandukanye .navbar-fixed-topnishuri, ntukeneye guhindura padi iyo ari yo yose kuri body.

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

Navbar

Kugirango ushyire mubikorwa gusenyuka gusubiza hamwe, funga ibiri muri navbar yawe irimo div .nav-collapse.collapse, hanyuma wongereho na navbar toggle buto , .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-imbere" > 
    <div class = "kontineri" > 
 
      <! - .btn-navbar ikoreshwa nka guhindagura ibintu bya navbar yaguye ->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse">   
        <span class = "agashusho-bar" > </span> 
        <span class = "agashusho-bar" > </span> 
        <span class = "agashusho-bar" > </span> 
      </a>
 
      <! - Witondere gusiga ikirango hanze niba ushaka ko cyerekanwa ->
      <a class = "brand" href = "#"> Izina ryumushinga </a>  
 
      <! - Ikintu cyose ushaka cyihishe kuri 940px cyangwa munsi, shyira imbere hano ->
      <div class = "nav-gusenyuka" > 
        <! - .nav, .navbar-gushakisha, .navbar-form, nibindi ->
      </div>
 
    </div>
  </div>
</div>

Guhindagurika

Hindura isura ya navbar wongeyeho .navbar-inverse.

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

Ingero

Urugero rumwe rwerekanwe nkuko rushobora kwerekanwa kurupapuro rwinshi.

<ul class = "umutsima" > 
  <li> <a href = "#"> Urugo </a> < span class = " divider " > / < / span> </li>   
  <li> <a href = "#"> Isomero </a> < span class = " divider " > / < / span> </li>   
  <li urwego = "rukora" > Amakuru </li> 
</ul>

Ubusanzwe

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

<div class = "pagination" > 
  <ul>
    <li> <a href = "#"> Ibanza </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 = "#"> Ibikurikira </a> </li> 
  </ul>
</div>

Amahitamo

Abamugaye kandi bakora

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

<div class = "pagination" > 
  <ul>
    <li class = "ubumuga" > <a href = "#"> Ibanza </a> < /li>  
    <li urwego = "rukora" > <a href = "#"> 1 </a> </li>  
    ...
  </ul>
</div>

Guhuza

Ongeramo rimwe mubyiciro bibiri bidahwitse kugirango uhindure guhuza pagination ihuza: .pagination-centeredna .pagination-right.

<div class = "pagination pagination-ishingiye" > 
  ...
</div>

<div class = "pagination pagination-iburyo" > 
  ...
</div>

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.

<ul class = "pager" > 
  <li> <a href = "#"> Mbere </a> </li> 
  <li> <a href = "#"> Ibikurikira </a> </li> 
</ul>

Guhuza

Ubundi, urashobora guhuza buri murongo kumpande:

<ul class = "pager" > 
  <li urwego = "ubanza" > 
    <a href = "#"> & larr ; Umusaza </a> 
  </li>
  <li urwego = "ubutaha" > 
    <a href = "#"> Gishya & rarr ; </a> 
  </li>
</ul>

Leta ihitamo ubumuga

Ipaji ihuza kandi ikoresha icyiciro rusange .disabledcyingirakamaro kuva kuri pagination.

<ul class = "pager" > 
  <li urwego = "ubumuga bwambere" > 
    <a href = "#"> & larr ; Umusaza </a> 
  </li>
  ...
</ul>

Ibirango

Ikarita

Igice cyintwari

Ikintu cyoroshye, cyoroshye kugirango kigaragaze ibintu byingenzi kurubuga rwawe. Ikora neza kubucuruzi no kurubuga-ruremereye.

<div class = "intwari-ubumwe" > 
  <h1> Umutwe </h1>
  <p> Tagine </p>
  <p>
    <a class = "btn btn- primaire btn-large"> 
      Wige byinshi
    </a>
  </p>
</div>

Urupapuro

Igikonoshwa cyoroheje h1kugirango kibe umwanya ukwiye hamwe nigice cyibigize kurupapuro. Irashobora gukoresha h1'Mburabuzi small, Ikintu Nka Ibindi Byinshi (hamwe nuburyo bwinyongera).

<div class = "page-umutwe" > 
  <h1> Urugero rwumutwe wurupapuro </h1>
</div>

Mburabuzi

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

Birashoboka cyane

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

Kuki ukoresha igikumwe

Thumbnail (mbere .media-gridkugeza kuri v1.4) nibyiza kuri gride yamafoto cyangwa videwo, ibisubizo byo gushakisha amashusho, ibicuruzwa bicuruzwa, portfolios, nibindi byinshi. Birashobora kuba amahuza cyangwa ibirimo bihamye.

Ikimenyetso cyoroshye, cyoroshye

Thumbnail marup iroroshye - a ulhamwe numubare uwo ariwo wose liwibintu byose bisabwa. Nibindi byoroshye guhinduka, kwemerera ubwoko bwibirimo byose hamwe nibimenyetso byinshi byo gupfunyika ibikubiyemo.

Koresha grid inkingi ingano

Ubwanyuma, igikumwe gikoresha sisitemu ya gride ya sisitemu isanzwe-nka .span2cyangwa .span3-kugenzura ibipimo bya thumbnail.

Markup

Nkuko byavuzwe mbere, ibimenyetso bisabwa kuri thumbnail biroroshye kandi byoroshye. Hano reba uburyo busanzwe bwo gushiraho amashusho :

<ul class = "igikumwe" > 
  <li urwego = "span4" > 
    <a href = "#" class = "thumbnail"> _  
      <img src = "https://placehold.it/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

Kubisanzwe HTML yibirimo muri thumbnail, marike ihinduka gato. Kwemerera guhagarika urwego urwego aho ariho hose, twahinduye i <a>kubintu <div>nkibi:

<ul class = "igikumwe" > 
  <li urwego = "span4" > 
    <div class = "igikumwe" > 
      <img src = "https://placehold.it/300x200" alt = "" >  
      <h3> Ikirango cya Thumbnail </h3>
      <p> Inyandiko ntoya ... </p>
    </div>
  </li>
  ...
</ul>

Ingero nyinshi

Shakisha amahitamo yawe yose hamwe nibyiciro bitandukanye bya gride ushobora kubona. Urashobora kandi kuvanga no guhuza ubunini butandukanye.

Mburabuzi

Kuzuza inyandiko iyariyo yose na buto yo kwirukana .alertkubutumwa bwibanze bwo kuburira.

<div class = "menyesha" > 
  <buto ubwoko = "buto" urwego = "gufunga" data-gusezerera = "kumenyesha" > × </button>   
  <strong> Iburira! </strong> Kugenzura neza yo wenyine, ntabwo ureba neza.
</div>

Kwirukana buto

Terefone igendanwa ya Safari na Mobile Opera, usibye data-dismiss="alert"ikiranga, bisaba an href="#"yo kwirukana imenyesha mugihe ukoresheje <a>tagi.

<a href = "#" class = "close" data-dismiss = "alert"> × </button >   

Ubundi, urashobora gukoresha ikintu <button>hamwe namakuru yikiranga, twahisemo gukora kubitabo byacu. Mugihe ukoresha <button>, ugomba gushiramo type="button"cyangwa impapuro zawe ntizishobora gutanga.

<buto ubwoko = "buto" urwego = "gufunga" data-gusezerera = "kumenyesha" > × </button>   

Kwirukana imenyesha ukoresheje javascript

Koresha imenyesha jQuery plugin kugirango byihuse kandi byoroshye kwirukana integuza.

Amahitamo

Kubutumwa burebure, ongera padi hejuru no hepfo yumwitozo wongeyeho wongeyeho .alert-block.

<div class = "kumenyesha integuza-guhagarika" > 
  <buto ubwoko = "buto" urwego = "gufunga" data-gusezerera = "kumenyesha" > × </button>   
  <h4> Kuburira! </h4>
  Byiza kugenzura yo wenyine, ntabwo uri ...
</div>

Ibindi bisobanuro

Ongeraho amasomo atabishaka kugirango uhindure ibisobanuro.

Ikosa cyangwa akaga

<div class = "kumenyesha-kwibeshya" > 
  ...
</div>

Intsinzi

<div class = "kumenyesha-gutsinda" > 
  ...
</div>

Amakuru

<div class = "kumenyesha amakuru-amakuru" > 
  ...
</div>

Ingero na marike

Shingiro

Mburabuzi Iterambere umurongo hamwe na vertical gradient.

<div class = "iterambere" > 
  <div class = "bar" style = " ubugari : 60 %; " > </div>   
</div>

Yanditse

Koresha icyiciro kugirango ukore ingaruka. Ntiboneka muri IE7-8.

<div class = "amajyambere atera imbere" > 
  <div class = "bar" style = " ubugari : 20 %; " > </div>   
</div>

Animated

Ongeraho .activekugirango .progress-stripedushushanye imirongo iburyo cyangwa ibumoso. Ntiboneka muri verisiyo zose za IE.

<div class = "iterambere ryiterambere-rigizwe nibikorwa" > 
  <div class = "bar" style = " ubugari : 40 %; " > </div>   
</div>

Bishyizwe hamwe

Shira utubari twinshi murimwe .progresskugirango ubishyire hamwe.

<div class = "iterambere" > 
  <div class = "bar bar-intsinzi" style = " ubugari : 35 %; " > </div>   
  <div class = "umurongo wo kuburira" style = " ubugari : 20 %; " > </div>   
  <div class = "bar bar-danger" style = " ubugari : 10 %; " > </div>   
</div>

Amahitamo

Amabara yinyongera

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

<div class = "iterambere ryiterambere-amakuru" > 
  <div class = "bar" style = " ubugari : 20 % " > </div>   
</div>
<div class = "iterambere ryiterambere-intsinzi" > 
  <div class = "bar" style = " ubugari : 40 % " > </div>   
</div>
<div class = "iterambere ryiterambere-kuburira" > 
  <div class = "bar" style = " ubugari : 60 % " > </div>   
</div>
<div class = "iterambere ryiterambere-akaga" > 
  <div class = "bar" style = " ubugari : 80 % " > </div>   
</div>

Utubari

Bisa namabara akomeye, twagiye dutandukanya imirongo yiterambere.

<div class = "iterambere ryiterambere-amakuru yiterambere-umurongo" > 
  <div class = "bar" style = " ubugari : 20 % " > </div>   
</div>
<div class = "iterambere ryiterambere-intsinzi iterambere-ryambuwe" > 
  <div class = "bar" style = " ubugari : 40 % " > </div>   
</div>
<div class = "iterambere ryiterambere-kuburira iterambere-umurongo" > 
  <div class = "bar" style = " ubugari : 60 % " > </div>   
</div>
<div class = "iterambere ryiterambere-akaga iterambere-ryambuwe" > 
  <div class = "bar" style = " ubugari : 80 % " > </div>   
</div>

Inkunga ya mushakisha

Utubari twiterambere dukoresha CSS3 gradients, inzibacyuho, na animasiyo kugirango ugere ku ngaruka zabo zose. Ibiranga ntabwo bishyigikiwe muri IE7-9 cyangwa verisiyo ishaje ya Firefox.

Imirongo mbere ya Internet Explorer 10 na Opera 12 ntabwo ishigikira animasiyo.

Iriba

Koresha neza nkibintu byoroshye kubintu kugirango utange inset.

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

Amasomo atabishaka

Igenzura padding hamwe nu mpande zegeranye hamwe nibyiciro bibiri byahinduwe.

<div class = "neza-nini-nini" > 
  ...
</div>

<div class = "neza-nto" > 
  ...
</div>

Funga agashusho

Koresha igishushanyo rusange cyo gufunga kugirango wirukane ibirimo nka moderi no kumenyesha.

<buto icyiciro = "gufunga" > & ibihe; </button> 

Ibikoresho bya iOS bisaba href = "#" kugirango ukande ibyabaye niba uhisemo gukoresha inanga.

<a class = "close" href = "#"> & ibihe; </a>  

Amasomo y'abafasha

Byoroheje, byibanze kumasomo mato yerekanwe cyangwa imyitwarire ihindagurika.

.kuramo-ibumoso

Fata ikintu gisigaye

icyiciro = "gukurura-ibumoso"

. gukurura - ibumoso {
  kureremba : ibumoso ;
}

.kuramo-iburyo

Fata ikintu neza

icyiciro = "gukurura-iburyo"

. gukurura - iburyo {
  kureremba : iburyo ;
}

.mute

Hindura ibara ryibintu kuri#999

icyiciro = "ucecetse"

. muted {
  ibara : # 999; 
}

.ibisobanuro

Kuraho i ikintu floaticyo ari cyo cyose

icyiciro = "ibisobanuro"

. Ibisobanuro {
  * zoom : 1 ; 
  &: mbere ,
  &: nyuma {
    kwerekana : imbonerahamwe ;
    ibirimo : "" ; 
  }
  &: nyuma {
    bisobanutse : byombi ;
  }
}