Muenzaniso

Inobatika, yemenu yemukati yekuratidza rondedzero yezvinongedzo. Yakagadzirwa kupindirana nekudonhedza JavaScript plugin .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Chiito </a></li>  
  <li><a tabindex = "-1" href = "#" > Chimwe chiitiko </a></li>  
  <li><a tabindex = "-1" href = "#" > Chimwe chinhu pano </a></li>  
  <li kirasi = "divider" > </ li> 
  <li><a tabindex = "-1" href = "#" > Separated link </a></li>  
</ul>

Markup

Uchitarisa pane yekudonhedza menyu, heino HTML inodiwa. Iwe unofanirwa kuputira chinodonhedza chinokonzeresa uye yekudonha menyu mukati .dropdown, kana chimwe chinhu chinozivisa position: relative;. Zvadaro gadzira menyu.

<div kirasi = "kudonha" > 
  <!-- Batanidza kana bhatani rekushandura kudonhedza pasi -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Chiito </a></li>  
    <li><a tabindex = "-1" href = "#" > Chimwe chiitiko </a></li>  
    <li><a tabindex = "-1" href = "#" > Chimwe chinhu pano </a></li>  
    <li kirasi = "divider" > </ li> 
    <li><a tabindex = "-1" href = "#" > Separated link </a></li>  
  </ul>
</ div>

Options

Rongedza mamenu kurudyi uye wedzera zvinosanganisira mamwe mazinga ekudonha.

Kugadzirisa menyu

Wedzera .pull-rightkune a .dropdown-menukune kurudyi gadzirisa menyu yekudonha.

<ul class = "kudonha-menyu kudhonza-kurudyi" basa = "menyu" aria-labelledby = "dLabel" >   
  ...
</ul>

Zvakadzimwa menyu sarudzo

Wedzera .disabledkune a <li>mukudonhedza kudzima chinongedzo.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Regular link </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > Disabled link </a></li>   
  <li><a tabindex = "-1" href = "#" > Imwe link </a></li>  
</ul>

Sub menus pane dropdowns

Wedzera imwe nhanho yemamenu ekudonhedza, inoonekwa pane hover senge iyo yeOS X, iine zvimwe zviri nyore markup yekuwedzera. Wedzera .dropdown-submenukune chero limune iripo yekudonha menyu ye otomatiki styling.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "dropdown-submenu" > 
    <a tabindex = "-1" href = "#" > Dzimwe sarudzo </a>  
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Mienzaniso

Sarudzo mbiri dzekutanga, pamwe nemamwe maviri akasiyana akasiyana.

Boka rebhatani rimwechete

Putira mabhatani akatevedzana ne .btnin .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > Kuruboshwe </ bhatani> 
  <button class = "btn" > Pakati </button> 
  <button class = "btn" > Right </ button> 
</ div>

Mapoka emabhatani akawanda

Batanidza seti dzekuita <div class="btn-group">a <div class="btn-toolbar">kune zvimwe zvakaoma zvinoumba.

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

Mapoka emabhatani epamhepo

Itai kuti mabhatani aite seti akaturikidzana kwete akachinjika.

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

Checkbox uye redhiyo flavour

Mapoka emabhatani anogonawo kushanda seredhiyo, uko bhatani rimwe chete rinogona kunge richishanda, kana mabhokisi ekutarisa, uko chero nhamba yemabhatani inogona kushanda. Wona iyo JavaScript docs yeiyo.

Dropdowns mumapoka emabhatani

Musoro!Mabhatani ane anodonhedza anofanirwa kuputirwa ega .btn-groupmukati mawo .btn-toolbarkuti akwanise kupihwa.

Muchidimbu uye mienzaniso

Shandisa chero bhatani kukonzeresa menyu yekudonha nekuiisa mukati .btn-groupuye nekupa iyo yakakodzera menyu markup.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#">   
    Chiito
    <span class = "caret" > </ span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- dropdown menu links -->
  </ul>
</ div>

Inoshanda nemasaizi ese emabhatani

Mabhatani anodonhedza anoshanda chero saizi: .btn-large, .btn-small, kana .btn-mini.

Inoda JavaScript

Mabhatani anodonha anoda iyo Bootstrap inodonha plugin kuti ishande.

Mune zvimwe zviitiko, senge nharembozha-mamenu ekudonha anozowedzera kunze kwenzvimbo yekuona. Iwe unofanirwa kugadzirisa kurongeka nemaoko kana neJavaScript yakajairwa.

Split button dropdowns

Kuvaka pamabhatani emapoka masitayipi uye markup, isu tinogona nyore kugadzira bhatani rekuparadzanisa. Split mabhatani anoratidza chiitiko chakajairwa kuruboshwe uye kudonhedza chinja kurudyi nemamiriro ekubatanidza.

<div class = "btn-group" > 
  <button class = "btn" > Chiito </ button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" > </ span> 
  </ button>
  <ul class = "dropdown-menu" > 
    <!-- dropdown menu links -->
  </ul>
</ div>

Saizi

Shandisa mamwe mabhatani makirasi .btn-mini, .btn-smallkana .btn-largekuti saizi.

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Chiito </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "kudonha" >  
    <span class = "caret" > </ span> 
  </ button>
  <ul class = "dropdown-menu" > 
    <!-- dropdown menu links -->
  </ul>
</ div>

Dropup menus

Mamenu ekudonhedza anogona zvakare kuchinjika kubva pasi kumusoro nekuwedzera kirasi imwechete kumubereki wepedyo we .dropdown-menu. Ichapenengura kutungamira kweiyo .caretuye kuisazve menyu pachayo kuti ifambe kubva pasi kumusoro pane kumusoro pasi.

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </ button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" > </ span> 
  </ button>
  <ul class = "dropdown-menu" > 
    <!-- dropdown menu links -->
  </ul>
</ div>

Lightweight defaults Same markup, makirasi akasiyana

Zvese zviri pano zve nav — ma tabo, mapiritsi, uye rondedzero — anogovera zvakafanana base markup uye masitaera kuburikidza .navnekirasi.

Basic tabs

Tora zvakajairwa <ul>zvehukama uye wedzera .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li class = "active" > 
    <a href = "#" > Kumba </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Mapiritsi ekutanga

Tora iyo HTML yakafanana, asi shandisa .nav-pillspachinzvimbo:

<ul class = "nav nav-mapiritsi" > 
  <li class = "active" > 
    <a href = "#" > Kumba </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Disabled state

Kune chero chinhu che nav (matabo, mapiritsi, kana runyorwa), wedzera .disabledkune grey link uye hapana hover mhedzisiro . Zvisungo zvinoramba zvichidzvanywa, zvisinei, kunze kwekunge wabvisa hrefhunhu. Neimwe nzira, unogona kuita tsika JavaScript kudzivirira iwo mabhatani.

<ul class = "nav nav-mapiritsi" > 
  ...
  <li class = "disabled" ><a href = "#" > Home </a></li>  
  ...
</ul>

Component alignment

Kuti uenzanise nav links, shandisa iyo .pull-leftkana .pull-rightutility makirasi. Makirasi ese ari maviri anozowedzera CSS inoyangarara munzira yakatarwa.

Stackable

Sezvo ma tabo nemapiritsi zvakachinjika nekusarudzika, ingo wedzera yechipiri kirasi, .nav-stacked, kuti iite kuti ioneke yakaturikidzana.

Stacked tabs

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

Mapiritsi akaturikidzana

<ul class = "nav nav-mapiritsi nav-akaturikidzana" > 
  ...
</ul>

Dropdowns

Wedzera mamenu ekudonhedza nekamwe HTML kadiki uye anodonhedza JavaScript plugin .

Tabs ane dropdowns

<ul class = "nav nav-tabs" > 
  <li kirasi = "kudonha" > 
    <a class = "kudonha-toggle" 
       data-toggle = "kudonha"
       href = "#" >
        Dropdown
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- links -->
    </ul>
  </li>
</ul>

Mapiritsi ane dropdowns

<ul class = "nav nav-mapiritsi" > 
  <li kirasi = "kudonha" > 
    <a class = "kudonha-toggle" 
       data-toggle = "kudonha"
       href = "#" >
        Dropdown
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- links -->
    </ul>
  </li>
</ul>

Nav lists

Nzira iri nyore uye iri nyore yekuvaka mapoka e nav link ane sarudzo dzemusoro. Iwo anoshandiswa zvakanyanya mumaparutivi senge Finder muOS X.

Muenzaniso nav list

Tora runyoro rwezvekubatanidza uye wedzera class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > Rondedzera musoro </li> 
  <li class = "active" ><a href = "#"> Kumba </a></li >  
  <li><a href = "#"> Raibhurari </a> </li> 
  ...
</ul>

CherechedzaKuti ugare mukati me nav list, sanganisira class="nav nav-list"pane chero nested <ul>.

Horizontal dividers

Wedzera yakatwasuka divider nekugadzira isina chinhu chinyorwa chinhu nekirasi .divider, sekudaro:

<ul class = "nav nav-list" > 
  ...
  <li kirasi = "divider" > </ li> 
  ...
</ul>

Tabable nav

Hunza matabo ako kuhupenyu neiyo plugin yakapusa yekushandura pakati pezviri mukati kuburikidza nematebhu. Bootstrap inobatanidza ma tabhebhu mumataera mana: pamusoro (default), kurudyi, pasi, uye kuruboshwe.

Tabble muenzaniso

Kuita kuti ma tabo agone kuoneka, gadzira .tab-paneine ID yakasarudzika yetabhu yega yega uye woiputira mu .tab-content.

Ndiri muChikamu 1.

Makadii, ndiri muChikamu 2.

Waita sei musikana, ichi Section 3.

<div class = "tabable" > <!-- Inongodiwa chete kune kuruboshwe / kurudyi tab -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab"> Chikamu 1 </a></li >   
    <li><a href = "#tab2" data-toggle = "tab"> Chikamu 2 </a></li >  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane inoshanda" id = "tab1" >  
      <p> Ndiri muChikamu 1. </p>
    </ div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Makadii, ndiri muChikamu 2. </p>
    </ div>
  </ div>
</ div>

Kupera mumatabo

Kuita kuti ma tabo asvike mukati, wedzera .fadekune imwe neimwe .tab-pane.

Inoda jQuery plugin

Matebu ese anobatika anofambiswa neakareruka jQuery plugin yedu. Verenga zvakawanda nezve maitiro ekuunza ma tabable tabs kuhupenyu pane JavaScript docs peji .

Tabble mune chero nzira

Tabs pasi

Flip kurongeka kweHTML uye wedzera kirasi kuti uise ma tabo pazasi.

Ndiri muChikamu A.

Makadii, ndiri muChikamu B.

Waita sei musikana, ichi ndicho Chikamu C.

<div kirasi = "matabhu anogoneka-pazasi" > 
  <div class = "tab-content" > 
    ...
  </ div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</ div>

Matebhu ari kuruboshwe

Chinjana kirasi kuti uise ma tabo kuruboshwe.

Ndiri muChikamu A.

Makadii, ndiri muChikamu B.

Waita sei musikana, ichi ndicho Chikamu C.

<div kirasi = "tabhebhi tabhu-kuruboshwe" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </ div>
</ div>

Tabs kurudyi

Chinjana kirasi kuti uise ma tabo kurudyi.

Ndiri muChikamu A.

Makadii, ndiri muChikamu B.

Waita sei musikana, ichi ndicho Chikamu C.

<div kirasi = "tabhebhi tabs-kurudyi" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </ div>
</ div>

Basic navbar

Kutanga, ma navbars ane static (haana kuisirwa kumusoro) uye anosanganisira tsigiro yezita reprojekiti uye yekutanga navigation. Isa imwe chero kupi mukati me .container, iyo inoisa hupamhi hwesaiti yako uye zvirimo.

<div class = "navbar" > 
  <div kirasi = "navbar-mukati" > 
    <a class = "brand" href = "#" > Title </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#"> Kumba </a></li >  
      <li><a href = "#"> Link </a> </li> 
      <li><a href = "#"> Link </a> </li> 
    </ul>
  </ div>
</ div>

Navbar components

Brand

Chinongedzo chiri nyore kuratidza brand yako kana zita reprojekiti inongoda anchor tag.

<a class = "brand" href = "#"> Zita rechirongwa </a>

Nav links

Nav zvinhu zviri nyore kuwedzera kuburikidza nemazita asina kurongeka.

<ul class = "nav" > 
  <li class = "active" > 
    <a href = "#" > Kumba </a> 
  </li>
  <li><a href = "#"> Link </a> </li> 
  <li><a href = "#"> Link </a> </li> 
</ul>

Iwe unogona nyore kuwedzera kupatsanura kune yako nav link ine isina chinhu chinyorwa chinhu uye kirasi yakapusa. Ingo wedzera izvi pakati pezvibatanidza:

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

Mafomu

Kuti utore zvakanaka uye uise fomu mukati mebhara rekufamba, wedzera makirasi akakodzera sekuratidzwa pazasi. Kuti uwane fomu rekutanga, sanganisira .navbar-formuye pamwe .pull-leftkana .pull-rightkuigadzirisa zvakanaka.

<fomu kirasi = "navbar-fomu dhonza-kuruboshwe" > 
  <input type = "text" class = "span2" >  
  <button type = "submit" class = "btn" > Tumira </button>  
</ fomu>

Tsvaga fomu

Kuti uwane imwe yakagadziridzwa yekutsvaga fomu, wedzera .navbar-searchkune iyo formuye .search-querykune iyo yekuisa kune yakasarudzika masitaera mubhara.

<fomu kirasi = "navbar-tsvaga dhonza-kuruboshwe" > 
  <input type = "text" class = "search-query" placeholder = "Tsvaga" >   
</ fomu>

Component alignment

Rongedza nav zvinongedzo, fomu yekutsvaga, kana zvinyorwa, shandisa iwo .pull-leftkana .pull-rightmakirasi ekushandisa. Makirasi ese ari maviri anozowedzera CSS inoyangarara munzira yakatarwa.

Kushandisa dropdowns

Wedzera zvinodonhedza uye zvinodonhedza kune nav nekamwe markup uye inodonhedza JavaScript plugin .

<ul class = "nav" > 
  <li kirasi = "kudonha" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"> _   
      Account
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Shanyira zvinyorwa zvekudonhedza zveJavaScript kuti uwane mamwe makeup uye ruzivo rwekufona kudonhedza.

Text

Putira tambo dzemavara nechinhu ne .navbar-text, kazhinji <p>pategi yekutungamira uye ruvara rwakafanira.

Optional kuratidza kusiyana

Gadzirisa navbar kumusoro kana kuzasi kwenzvimbo yekuona nekirasi yekuwedzera pane yekunze div, .navbar.

Yakagadziriswa kumusoro

Wedzera .navbar-fixed-topuye rangarira kuzvidavirira yenzvimbo yakavanzika pasi payo nekuwedzera kanenge 40px paddingkune iyo <body>. Ita shuwa yekuwedzera izvi mushure meiyo yakakosha Bootstrap CSS uye isati yasarudzwa inopindura CSS.

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

Yakagadziriswa kusvika pasi

Wedzera .navbar-fixed-bottompanzvimbo.

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

Static yepamusoro navbar

Gadzira yakazara-yakafara navbar inotenderera ichienda kure nepeji nekuwedzera .navbar-static-top. Kusiyana .navbar-fixed-topnekirasi, haufanire kushandura chero padding pane body.

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

Inopindura navbar

Kuti ushandise bhatani rinodavirwa rinodonha, peta zvemukati zvemukati mune ine div, .nav-collapse.collapse, uye wedzera bhatani rekutambisa navbar, .btn-navbar.

<div class = "navbar" > 
  <div kirasi = "navbar-mukati" > 
    <div kirasi = "mudziyo" > 
 
      <!-- .btn-navbar inoshandiswa sekushandura kwezvakaputsika zvebhara remvura -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse">   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Iva nechokwadi chekusiya brand kunze uko kana uchida kuti iratidzwe -->
      <a class = "brand" href = "#"> Zita rechirongwa </a>  
 
      <!-- Zvese zvaunoda zvakavigwa pa940px kana zvishoma, isa mukati mepano -->
      <div class = "nav-collapse collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </ div>
 
    </ div>
  </ div>
</ div>

Musoro! Iyo inopindura navbar inoda kudonha plugin uye inopindura Bootstrap CSS faira .

Inverted variation

Shandura chitarisiko che navbar nekuwedzera .navbar-inverse.

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

Mienzaniso

Muenzaniso mumwechete unoratidzwa sezvo uchigona kuratidzwa pamapeji akawanda.

<ul class = "breadcrumb" > 
  <li><a href = "#" > Kumba </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Library </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Data </li> 
</ul>

Standard pagination

Yakareruka pagination yakafemerwa neRdio, yakanakira maapplication uye mhinduro dzekutsvaga. Iyo yakakura block inonetsa kupotsa, nyore scalable, uye inopa hombe yekudzvanya nzvimbo.

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

Options

Yakaremara uye inoshanda nyika

Zvisungo zvinogoneka kune akasiyana mamiriro. Shandisa .disabledkune unclickable links uye .activekuratidza peji iripo.

<div class = "pagination" > 
  <ul>
    <li class = "disabled" ><a href = "#" > « </a></li>  
    <li class = "active" ><a href = "#"> 1 </a></li >  
    ...
  </ul>
</ div>

Iwe unogona kusarudza chinjanisa anoshanda kana akaremara anchors kune spans kuti ubvise kudzvanya mashandiro uchichengeta zvitaera zvakatarisirwa.

<div class = "pagination" > 
  <ul>
    <li kirasi = "yakaremara" ><span> « </ span> </ li> 
    <li class = "active" ><span> 1 </span></li> 
    ...
  </ul>
</ div>

Saizi

Fancy yakakura kana diki pagination? Wedzera .pagination-large, .pagination-small, kana .pagination-minimamwe masaizi.

<div class = "pagination pagination-guru" > 
  <ul>
    ...
  </ul>
</ div>
<div class = "pagination" > 
  <ul>
    ...
  </ul>
</ div>
<div kirasi = "pagination pagination-diki" > 
  <ul>
    ...
  </ul>
</ div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</ div>

Alignment

Wedzera imwe yemakirasi maviri esarudzo kuti uchinje kurongeka kwepagination link: .pagination-centereduye .pagination-right.

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

<div kirasi = "pagination pagination-kurudyi" > 
  ...
</ div>

Pager

Kurumidza yapfuura uye inotevera zvinongedzo zvekushandisa zviri nyore pagination ine mwenje markup uye masitaera. Yakanakira masaiti akareruka senge mablogiki kana magazini.

Default muenzaniso

Nekumisikidza, iyo pager inoisa zvinongedzo.

<ul class = "pager" > 
  <li><a href = "#" > Yakapfuura </a> < /li> 
  <li><a href = "#"> Inotevera </a> </li> 
</ul>

Aligned links

Neimwe nzira, unogona kuenzanisa chinongedzo chimwe nechimwe kumativi:

<ul class = "pager" > 
  <li kirasi = "yapfuura" > 
    <a href = "#" > ← Vakuru </a> 
  </li>
  <li class = "inotevera" > 
    <a href = "#" > Nyowani → </a> 
  </li>
</ul>

Optional disabled state

Pager zvinongedzo zvinoshandisawo general .disabledutility kirasi kubva kupeji.

<ul class = "pager" > 
  <li class = "kare yakaremara" > 
    <a href = "#" > ← Vakuru </a> 
  </li>
  ...
</ul>

Labels

Labels	Markup
Default	`<span class="label">Default</span>`
Success	`<span class="label label-success">Success</span>`
Yambiro	`<span class="label label-warning">Warning</span>`
Zvakakosha	`<span class="label label-important">Important</span>`
Info	`<span class="label label-info">Info</span>`
Inverse	`<span class="label label-inverse">Inverse</span>`

Mabheji

Zita	Muenzaniso	Markup
Default	1	`<span class="badge">1</span>`
Success	2	`<span class="badge badge-success">2</span>`
Yambiro	4	`<span class="badge badge-warning">4</span>`
Zvakakosha	6	`<span class="badge badge-important">6</span>`
Info	8	`<span class="badge badge-info">8</span>`
Inverse	10	`<span class="badge badge-inverse">10</span>`

Zviri nyore kuputsika

Kuti zviitwe zviri nyore, mavara nemabheji zvinongodonha (kuburikidza neCSS's :emptyselector) kana pasina zvirimo mukati.

Hero chikwata

Chinhu chisina kuremerwa, chinochinjika kuratidza zvakakosha zvemukati pane yako saiti. Inoshanda zvakanaka pakushambadzira uye zvemukati-zvinorema masaiti.

Mhoro, nyika!

Iri rakareruka gamba yuniti, iri nyore jumbotron-maitiro chikamu chekudaidza yakawedzera kutarisisa kune zvakaratidzwa zvirimo kana ruzivo.

Dzidza zvimwe

<div kirasi = "gamba-chikamu" > 
  <h1> Musoro </h1>
  <p> Tagline </p>
  <p>
    <a class = "btn btn-primary btn-large"> 
      Dzidza zvimwe
    </a>
  </ p>
</ div>

Musoro wepeji

Shell yakapfava h1yenzvimbo yakakodzera kunze uye zvikamu zvemukati pane peji. Inogona kushandisa iyo h1's default small, element pamwe nezvimwe zvakawanda zvinoumba (nemamwe masitayera).

<div class = "peji-musoro" > 
  <h1> Muenzaniso wemusoro wepeji <small> Subtext yemusoro </small></h1>
</ div>

Default thumbnails

Nekumisikidza, zvigunwe zveBootstrap zvakagadzirirwa kuratidza mifananidzo yakabatana ine shoma inodiwa markup.

Yakanyanya customizable

Nechimwe chekuwedzera markup, zvinokwanisika kuwedzera chero mhando yezvinyorwa zveHTML senge misoro, ndima, kana mabhatani muzvigunwe.

Thumbnail label

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

Chiito Chiito
Thumbnail label

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

Chiito Chiito
Thumbnail label

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

Chiito Chiito

Sei kushandisa thumbnails

Thumbnails (yaimbova .media-gridkusvika v1.4) yakanaka kune magiradhi emifananidzo kana mavhidhiyo, mitsva yekutsvaga mifananidzo, zvigadzirwa zvekutengesa, mapotifolio, nezvimwe zvakawanda. Anogona kunge ari malink kana static content.

Nyore, inochinjika markup

Thumbnail markup iri nyore-a uline chero nhamba liyezvinhu ndizvo zvese zvinodiwa. Iyo zvakare inochinjika zvakanyanya, ichibvumira kune chero mhando yezvinyorwa ine zvishoma zvishoma markup yekuputira zvirimo.

Inoshandisa grid column saizi

Chekupedzisira, chikamu chezvigunwe chinoshandisa grid system makirasi aripo- senge .span2kana - .span3pakutonga kwezvigunwe zvimiro.

Markup

Sezvambotaurwa, iyo markup inodiwa yezvigunwe yakareruka uye yakatwasuka. Heino tarisa kune iyo default setup yemifananidzo yakabatana :

<ul class = "thumbnails" > 
  <li kirasi = "span4" > 
    <a href = "#" class = "thumbnail"> _  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

Kune yetsika HTML yemukati muzvigunwe, iyo markup inochinja zvishoma. Kuti tibvumire block level yemukati chero kupi, isu tinochinjanisa iyo <a>seyakadaro <div>:

<ul class = "thumbnails" > 
  <li kirasi = "span4" > 
    <div kirasi = "chigunwe" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Thumbnail label </h3>
      <p> Thumbnail caption... </p>
    </ div>
  </li>
  ...
</ul>

Mimwe mienzaniso

Ongorora zvese zvaunogona kuita nemakirasi egidhi akasiyana anowanikwa kwauri. Iwe unogona zvakare kusanganisa uye kuenzanisa hukuru hwakasiyana.

Default chenjedzo

Putira chero mavara uye bhatani raunosarudza rekudzinga mukati .alertmemeseji yechenjedzo yakakosha.

Yambiro! Best check yo self, hausi kunyanyonaka.

<div kirasi = "chenjedzo" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </ button>   
  <strong> Yambiro! </strong> Best check yo self, hausi kunyanyonaka.
</ div>

Ramba mabhatani

Nharembozha Safari uye Mobile Opera mabhurawuza, kuwedzera kune data-dismiss="alert"hunhu, inoda href="#"kudzingwa kweyambiro kana uchishandisa <a>teki.

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

Neimwe nzira, unogona kushandisa <button>chinhu chine data hunhu, izvo isu takasarudza kuitira zvinyorwa zvedu. Paunenge uchishandisa <button>, unofanirwa kusanganisira type="button"kana mafomu ako anogona kusaendesa.

<button type = "button" class = "close" data-dismiss = "alert" > × </ button>

Ramba chenjedzo uchishandisa JavaScript

Shandisa chenjedzo jQuery plugin yekukurumidza uye nyore kudzinga zviziviso.

Options

Kune mameseji akareba, wedzera padding kumusoro uye pasi peyambiro wrapper nekuwedzera .alert-block.

Yambiro!

Best check yo self, hausi kunyanyonaka. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<div kirasi = "alert alert-block" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </ button>   
  <h4> Yambiro! </ h4>
  Best check yo self, hausi...
</ div>

Contextual dzimwe nzira

Wedzera makirasi esarudzo kuti uchinje chirevo chechenjedzo.

Kukanganisa kana ngozi

Oh snap! Shandura zvinhu zvishoma uye edza kutumira zvakare.

<div class = "alert alert-error" > 
  ...
</ div>

Success

Kuita zvakanaka! Iwe wakabudirira kuverenga iyi yakakosha meseji yekuzivisa.

<div kirasi = "yambiro alert-kubudirira" > 
  ...
</ div>

Information

Musoro! Yambiro iyi inoda kutariswa newe, asi haina kukosha zvakanyanya.

<div kirasi = "yambiro yekuzivisa-ruzivo" > 
  ...
</ div>

Mienzaniso uye markup

Basic

Default bhaa yekufambira mberi ine yakatwasuka gradient.

<div kirasi = "kufambira mberi" > 
  <div class = "bar" style = " hupamhi : 60 %; " ></div>   
</ div>

Striped

Inoshandisa gradient kugadzira mitsetse. Haisi kuwanikwa muIE7-8.

<div class = "progress progress-striped" > 
  <div class = "bar" style = " upamhi : 20 %; " ></div>   
</ div>

Animated

Wedzera .activekune .progress-stripedkumutsa mitsetse kurudyi kuruboshwe. Haiwanikwi mushanduro dzese dzeIE.

<div kirasi = "kufambira mberi-kufambiswa kunoshanda" > 
  <div class = "bar" style = " hupamhi : 40 %; " ></div>   
</ div>

Stacked

Isa mabhawa akawanda mune imwechete .progresskuti aaise.

<div kirasi = "kufambira mberi" > 
  <div class = "bar-success" style = " hupamhi : 35 %; " ></div>   
  <div class = "bar-warning" style = " hupamhi : 20 %; " ></div>   
  <div class = "bar-danger" style = " hupamhi : 10 %; " ></div>   
</ div>

Options

Mamwe mavara

Mabhawa ekufambira mberi anoshandisa mamwe bhatani rimwe chete uye makirasi ekuzivisa kune anowirirana masitaera.

<div kirasi = "kufambira mberi-ruzivo" > 
  <div class = "bar" style = " width : 20 % > </div>   
</ div>
<div class = "kufambira mberi-kubudirira" > 
  <div class = "bar" style = " width : 40 % > </div>   
</ div>
<div class = "kufambira mberi-yambiro" > 
  <div class = "bar" style = " width : 60 % > </div>   
</ div>
<div class = "kufambira mberi-njodzi" > 
  <div class = "bar" style = " width : 80 % > </div>   
</ div>

Mazariro ane mitsetse

Zvakafanana nemavara akasimba, isu tine mitsetse yakasiyana-siyana yekufambira mberi.

<div kirasi = "kufambira mberi-ruzivo kufambira mberi-mitsetse" > 
  <div class = "bar" style = " width : 20 % > </div>   
</ div>
<div class = "kufambira mberi-kubudirira kufambira mberi-striped" > 
  <div class = "bar" style = " width : 40 % > </div>   
</ div>
<div class = "kufambira mberi-yambiro kufambira mberi-yakatemwa" > 
  <div class = "bar" style = " width : 60 % > </div>   
</ div>
<div kirasi = "kufambira mberi-njodzi kufambira mberi-yakatemwa" > 
  <div class = "bar" style = " width : 80 % > </div>   
</ div>

Browser rutsigiro

Mabhawa ekufambira mberi anoshandisa CSS3 gradients, shanduko, uye animations kuti vakwanise kuita zvese zvavanoita. Aya maficha haatsigirwe muIE7-9 kana ekare shanduro dzeFirefox.

Mavhezheni ekutanga kupfuura Internet Explorer 10 uye Opera 12 haatsigire mifananidzo.

Abstract chinhu masitaera ekuvaka akasiyana marudzi ezvikamu (seblog blog, maTweets, nezvimwewo) ane mufananidzo wekuruboshwe- kana kurudyi-padivi pezvinyorwa.

Default muenzaniso

Iyo yakasarudzika midhiya inobvumira kuyangarara chinhu che media (mifananidzo, vhidhiyo, odhiyo) kuruboshwe kana kurudyi rwemukati block.

Musoro wenhau

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

Musoro wenhau

<div class = "media" > 
  <a class = "dhonza-kuruboshwe" href = "#"> _  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Musoro wenhau </h4> 
    ...
 
    <!-- Nested media chinhu -->
    <div class = "media" > 
      ...
    </ div>
  </ div>
</ div>

Media list

Neine imwe yekuwedzera markup, unogona kushandisa midhiya mukati rondedzero (inobatsira kune ekutaura tambo kana zvinyorwa zvinyorwa).

Musoro wenhau

Cras sit amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading
Cras sit amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading
Cras sit amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading
Cras sit amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Musoro wenhau
Cras sit amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<ul class = "media-list" > 
  <li class = "media" > 
    <a class = "dhonza-kuruboshwe" href = "#"> _  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Musoro wenhau </h4> 
      ...
 
      <!-- Nested media chinhu -->
      <div class = "media" > 
        ...
     </ div>
    </ div>
  </li>
</ul>

Wells

Shandisa tsime seyakapusa mhedzisiro pane chinhu kuti upe iyo inset maitiro.

Tarirai, ndiri mutsime!

<div kirasi = "zvakanaka" > 
  ...
</ div>

Optional makirasi

Dzora padding uye makona akatenderedzwa ane maviri esarudzo modifier makirasi.

Tarirai, ndiri mutsime!

<div kirasi = "zvakanaka-yakakura" > 
  ...
</ div>

Tarirai, ndiri mutsime!

<div kirasi = "zvakanaka-zvidiki" > 
  ...
</ div>

Close icon

Shandisa generic yekuvhara icon yekudzinga zvirimo senge modal uye chenjedzo.

<button class = "close" > × </ button>

iOS zvishandiso zvinoda href="#"yekudzvanya zviitiko kana iwe uchida kushandisa anchor.

<a class = "close" href = "#" > × </a>

Makirasi ekubatsira

Akareruka, akatarisana makirasi ediki kuratidza kana maitiro tweaks.

.dhonza-kuruboshwe

Fonera chinhu kuruboshwe

kirasi = "dhonza-kuruboshwe"

. dhonza - kuruboshwe {
  float : left ;
}

.dhonza-kurudyi

Fonera chinhu kurudyi

kirasi = "dhonza-kurudyi"

. dhonza - kurudyi {
  kuyangarara : kurudyi ;
}

.muted

Shandura ruvara rwechimwe chinhu kuti#999

kirasi = "yakanyarara"

. nyarara {
  ruvara : #999; 
}

.clearfix

Bvisa iyo floatpane chero chinhu

kirasi = "clearfix"

. clearfix {
  * zoom : 1 ; 
  &: pamberi ,
  &: mushure me {
    kuratidza : tafura ;
    content : "" ; 
  }
  &: mushure me {
    clear : zvese ;
  }
}

Dropdown menus

Muenzaniso

Markup

Options

Kugadzirisa menyu

Zvakadzimwa menyu sarudzo

Sub menus pane dropdowns

Mabhatani mapoka

Mienzaniso

Boka rebhatani rimwechete

Mapoka emabhatani akawanda

Mapoka emabhatani epamhepo

Checkbox uye redhiyo flavour

Dropdowns mumapoka emabhatani

Bhatani rekudonhedza menyu

Muchidimbu uye mienzaniso

Inoshanda nemasaizi ese emabhatani

Inoda JavaScript

Split button dropdowns

Saizi

Dropup menus

Nav: tabs, mapiritsi, uye zvinyorwa

Lightweight defaults Same markup, makirasi akasiyana

Basic tabs

Mapiritsi ekutanga

Disabled state

Component alignment

Stackable

Stacked tabs

Mapiritsi akaturikidzana

Dropdowns

Tabs ane dropdowns

Mapiritsi ane dropdowns

Nav lists

Muenzaniso nav list

Horizontal dividers

Tabable nav

Tabble muenzaniso

Kupera mumatabo

Inoda jQuery plugin

Tabble mune chero nzira

Tabs pasi

Matebhu ari kuruboshwe

Tabs kurudyi

Navbar

Basic navbar

Navbar components

Brand

Nav links

Mafomu

Tsvaga fomu

Component alignment

Kushandisa dropdowns

Text

Optional kuratidza kusiyana

Yakagadziriswa kumusoro

Yakagadziriswa kusvika pasi

Static yepamusoro navbar

Inopindura navbar

Inverted variation

Zvimedu zvechingwa

Mienzaniso

Pagination Nzira mbiri dzekupeja kuburikidza nezviri mukati

Standard pagination

Options

Yakaremara uye inoshanda nyika

Saizi

Alignment

Pager

Default muenzaniso

Aligned links

Optional disabled state

Mapepa nemabheji

Labels

Mabheji

Zviri nyore kuputsika

Typographic components

Hero chikwata

Mhoro, nyika!

Musoro wepeji