Muenzaniso

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

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> 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 class="dropdown"> 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="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel"> kirasi = "kudonha-menyu kudhonza-kurudyi" basa = "menyu" aria-labelledby = "dLabel" >  
  ...
</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"> 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"> class = "btn-group" >
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </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"> 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"> 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"> 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 neyakajairwa javascript.

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"> 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"> 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"> 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"> 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-pills"> 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 . Manongedzo acharamba achidzvanya, zvisinei, kunze kwekunge tsika javascript ikaiswa kudzivirira kudzvanya ikoko.

<ul class="nav nav-pills"> 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-tabs nav-stacked"> class = "nav nav-tabs nav-yakaturikidzana" >
  ...
</ul>

Mapiritsi akaturikidzana

<ul class="nav nav-pills nav-stacked"> 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"> 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-pills"> 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-list"> 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>

Note Zvekuchengeta 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-list"> 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.

<div class="tabbable"> <!-- Inodiwa chete kumatabo ekuruboshwe/kurudyi --> class = "tabable" > <!-- Inongodiwa 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 zvimwe nezve maitiro ekuita kuti ma tabbable aite hupenyu pane javascript docs peji .

Tabble mune chero nzira

Tabs pasi

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

<div class="tabbable tabs-pazasi"> 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.

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

Tabs kurudyi

Chinjana kirasi kuti uise ma tabo kurudyi.

<div class="tabbable tabs-right"> class = "tabable 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"> 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="#">Project name</a>
 class = "brand" href = "#" > Zita rechirongwa </a> 

Nav links

Nav zvinhu zviri nyore kuwedzera kuburikidza nemazita asina kurongeka.

<ul class="nav"> 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"> 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.

<form class="navbar-form pull-left"> 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.

<form class="navbar-search pull-left"> 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"> 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"> class = "navbar navbar-fixed-top" >
  ...
</ div>

Yakagadziriswa kusvika pasi

Wedzera .navbar-fixed-bottompanzvimbo.

<div class="navbar navbar-fixed-bottom"> kirasi = "navbar navbar-yakagadziriswa-pasi" >
  ...
</ 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"> 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"> 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" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </ div>
    </ div>
  </ div>
</ div>

Inverted variation

Shandura chitarisiko che navbar nekuwedzera .navbar-inverse.

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

Mienzaniso

Muenzaniso mumwechete unoratidzwa sezvo uchigona kuratidzwa pamapeji akawanda.

<ul class="breadcrumb"> kirasi = "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"> kirasi = "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 = "#"> 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"> class = "pagination" >
  <ul>
    <li class = "disabled" ><a href = "#"> Prev </a></li >  
    <li class = "active" ><a href = "#"> 1 </a></li >  
    ...
  </ul>
</ div>

Alignment

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

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

<div class="pagination pagination-right"> 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"> 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"> 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"> class = "pager" >
  <li class = "kare yakaremara" > 
    <a href = "#" > ← Vakuru </a> 
  </li>
  ...
</ul>

Labels

Mabheji

Hero chikwata

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

<div class="hero-unit"> 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"> kirasi = "peji-musoro" >
  <h1> Muenzaniso wemusoro wepeji </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.

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"> class = "thumbnails" >
  <li kirasi = "span4" > 
    <a href = "#" class = "thumbnail"> _  
      <img src = "https://placehold.it/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"> class = "thumbnails" >
  <li kirasi = "span4" > 
    <div kirasi = "chigunwe" > 
      <img src = "https://placehold.it/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.

<div class="alert"> 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">×</button> href = "#" class = "close" data-dismiss = "chenjedzo" > × </button>  

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> type = "button" class = "close" data-dismiss = "chenjedzo" > × </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.

<div class="alert alert-block"> class = "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

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

Success

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

Information

<div class="alert alert-info"> kirasi = "alert alert-info" >
  ...
</ div>

Mienzaniso uye markup

Basic

Default bhaa yekufambira mberi ine yakatwasuka gradient.

<div class="progress"> 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"> 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 class="progress progress-striped active"> class = "progress progress-striped active" >
  <div class = "bar" style = " hupamhi : 40 %; " ></div>   
</ div>

Stacked

Isa mabhawa akawanda mune imwechete .progresskuti aaise.

<div class="progress"> 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 class="progress progress-info"> 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.

Wells

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

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

Optional makirasi

Dzora padding uye makona akatenderedzwa ane maviri esarudzo modifier makirasi.

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

<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="#" zvekudzvanya 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 ;
  }
}