Mabhatani mapoka

Shandisa mabhatani mapoka kuti ubatanidze akawanda mabhatani pamwechete sechinhu chimwe chinoumbwa. Zvivake nenhevedzano yezvinhu <a>kana <button>zvinhu.

Maitiro akanaka

Tinokurudzira nhungamiro dzinotevera dzekushandisa mabhatani mapoka nematurusi:

• Gara uchishandisa chinhu chimwe chete muboka remabhatani, <a>kana <button>.
• Usasanganise mabhatani emavara akasiyana muboka remabhatani rimwechete.
• Shandisa zvidhori mukuwedzera kune kana kuti pachinzvimbo chemavara, asi iva nechokwadi chokuti unosanganisira alt uye zvinyorwa zvemusoro pazvinenge zvakakodzera.

Mapoka emaBhatani ane hukama ane zvinodonhedza (ona pazasi) anofanirwa kudaidzwa akaparadzana uye anogara achisanganisira kudonhedza caret kuratidza maitiro anotarisirwa.

Default muenzaniso

Heano maitiro eHTML anotarisa kune akajairwa bhatani boka rakavakwa nema anchor tag mabhatani:

<div class = "btn-group" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</ div>

Toolbar muenzaniso

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>

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.

Tora javascript »

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.

Muenzaniso markup

Zvakafanana neboka remabhatani, yedu markup inoshandisa yakajairwa bhatani markup, asi ine mashoma ekuwedzera kukwenenzvera chimiro uye kutsigira Bootstrap yekudonha jQuery plugin.

<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. mabhatani ako saizi kusvika .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.

Muchidimbu uye mienzaniso

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

Saizi

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

<div class = "btn-group" > 
  ...
  <ul class = "kudonha-menyu kudhonza-kurudyi" > 
    <!-- dropdown menu links -->
  </ul>
</ div>

Muenzaniso markup

Isu tinowedzera pane zvakajairika bhatani kudonhedza kuti tipe yechipiri bhatani chiito chinoshanda seyakasiyana yekudonhedza trigger.

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

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>

Simba base class

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

Nguva yekushandisa

Matebhu nemapiritsi akanakira zvikamu zvemukati kana kufamba pakati pemapeji ane hukama.

Component alignment

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

Basic tabs

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

• Kumba
• Profile
• Mharidzo

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

• Kumba
• Profile
• Mharidzo

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

Nzira yekuisa sei 'em

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

Stacked tabs

• Kumba
• Profile
• Mharidzo

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

Mapiritsi akaturikidzana

• Kumba
• Profile
• Mharidzo

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

Mamenu akapfuma akagadzirwa nyore

Mamenu ekudonhedza muBootstrap tabs nemapiritsi ari nyore kwazvo uye anongoda imwe shoma yekuwedzera HTML uye yakareruka jQuery plugin.

Tungamira kuJavascript peji kuti uverenge zvinyorwa zvekutanga kudonha muBootstrap .

Tabs ane dropdowns

• Kumba
• Help
• Dropdown
  • Chiito
  • Chimwe chiito
  • Chimwe chinhu pano
  • Separated link

<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

• Kumba
• Help
• Dropdown
  • Chiito
  • Chimwe chiito
  • Chimwe chinhu pano
  • Separated link

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

Application-style navigation

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

Zvimiro, ivo vakavakirwa pane imwechete musimboti nav masitayipi sematebhu nemapiritsi, saka kushandiswa uye kugadzirisa kwakatwasuka.

Nezvidhori

Nav rondedzero zvakare iri nyore kushongedza nemifananidzo. Wedzera iyo yakakodzera <i>tag nekirasi uye wagadzirira.

Horizontal dividers

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

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

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>

Muenzaniso une zvidhori

Muenzaniso wakafanana, asi nema <i>tag ezvidhori.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" > </i> 
      Library
    </a>
  </li>
  ...
</ul>

Chii chinosanganisirwa

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.

Kuchinja pakati pavo kuri nyore uye kunongoda kushandura zvishoma markup.

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 .

Tora javascript →

Tabble muenzaniso

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

Zvekurudyi kana kuruboshwe tabo dzakarongeka, peta iyo .nav-tabsuye .tab-contentmukati .tabbable.

Yakatwasuka markup

Kushandisa tabbable tabs kunoda kuputira div, seti yematabo, uye seti yetabheble panes zvemukati.

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

Tabs pasi

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

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

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

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

Navbar scaffolding

Iyo navbar inoda chete mashoma div kuti aigadzirise zvakanaka kune static kana yakagadziriswa kuratidza.

<div class = "navbar" > 
  <div kirasi = "navbar-mukati" > 
    <div kirasi = "mudziyo" > 
      ...
    </ div>
  </ div>
</ div>

Fixed navbar

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

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

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

Paunonamira navbar, yeuka kuzvidavirira kune yakavanzika nzvimbo pazasi. Wedzera 40px kana kupfuura yepadding kune iyo <body>. Ita shuwa yekuwedzera izvi mushure meiyo yakakosha Bootstrap CSS uye isati yasarudzwa inopindura CSS.

Zita rechiratidzo

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

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

Mafomu mu navbar

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

Optional responsive variation

Zvichienderana nehuwandu hwemukati mubarbar yako, ungangoda kuita sarudzo dzinopindura. Kuti uite kudaro, putira yako nav zvirimo mune ine div, .nav-collapse.collapse, uye wedzera navbar toggle bhatani, .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" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </ div>
 
    </ div>
  </ div>
</ div>

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>

Component alignment

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

Kuwedzera mamenu ekudonha

Kuwedzera kudonhedza uye kudonhedza kune nav kuri nyore kwazvo, asi zvinoda kushandiswa kwejavascript plugin yedu .

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

Tora javascript →

Mavara ari mubhara rekuona

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

Sei kuzvishandisa

Breadcrumb navigation inoshandiswa senzira yekuratidza vashandisi pavanenge vari mukati meapp kana saiti, asi kwete yekutanga navigation. Chengetedza kushandiswa kwavo kushoma uye kwakapfupika kuti kuve kwakanyanya kushanda.

Mienzaniso

Muenzaniso mumwechete unoratidzwa sezvo uchigona kuratidzwa pamapeji akawanda.

• Kumba

• Kumba /
• Library

• Kumba /
• Raibhurari /
• Data

Markup

HTML ndiyo yako yakajairika isina kurongeka runyorwa ine zvinongedzo.

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

Nguva yekushandisa

Ultra yakapfava uye ine diki styled pagination yakafemerwa neRdio, yakanakira maapplication uye mitsva yekutsvaga. Iyo yakakura block inonetsa kupotsa, nyore scalable, uye inopa hombe yekudzvanya nzvimbo.

Stateful peji zvinongedzo

Zvisungo zvinogoneka uye zvinoshanda mune akati wandei mamiriro nekirasi chaiyo. .disabledzvemalink asingabatike uye .activenepeji yazvino.

Flexible alignment

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

Mienzaniso

The default pagination chikamu chinoshanduka uye chinoshanda mune akati wandei akasiyana.

Markup

Yakaputirwa mu <div>, pegination ingori <ul>.

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

About pager

Iyo pager chikamu iseti yezvinongedzo zvezviri nyore pagination mashandisirwo ane mwenje markup uye kunyange akareruka masitayera. Yakanakira masaiti akareruka senge mablogiki kana magazini.

Optional disabled state

Pager zvinongedzo zvinoshandisawo general .disabledkirasi kubva pagination.

Default muenzaniso

Nekumisikidza, iyo pager inoisa zvinongedzo.

• Previous
• Next

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

• ← Vakuru
• Zvitsva →

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

About

Mabheji madiki, ari nyore zvikamu zvekuratidza chiratidzo kana kuverenga kweimwe mhando. Iwo anowanzo kuwanikwa mune email vatengi seMail.app kana panharembozha yezviziviso zvepush.

Makirasi aripo

Bootstrap inopa yakareruka, inoshanduka chikamu chinonzi gamba unit kuratidza zvirimo pane yako saiti. Inoshanda zvakanaka pakushambadzira uye zvemukati-zvinorema masaiti.

Markup

Peta zvemukati senge div:

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

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

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.

The markup

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

<ul class = "thumbnails" > 
  <li kirasi = "span3" > 
    <a href = "#" class = "thumbnail"> _  
      <img src = "https://placehold.it/260x180" 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 = "span3" > 
    <div kirasi = "chigunwe" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Thumbnail label </h5>
      <p> Thumbnail caption ipo pano... </p>
    </ div>
  </li>
  ...
</ul>

Mimwe mienzaniso

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

Rewritten base class

NeBootstrap 2, takarerutsa kirasi yepasi: .alertpachinzvimbo che .alert-message. Isu takadzikisawo hudiki hunodiwa markup — kwete <p>inodiwa nekusarudzika, yekunze chete <div>.

Meseji yekuzivisa imwe chete

Kuti uwane chikamu chakasimba chine kodhi shoma, tabvisa kutarisa kwekusiyanisa kwe block block, mameseji anouya neakawanda padding uye kazhinji mamwe mavara. Kirasi yachinjawo kuita .alert-block.

Inoenda zvakanaka nejavascript

Bootstrap inouya neyakakura jQuery plugin inotsigira mameseji echenjedzo, zvichiita kuti kuvadzinga nekukurumidza uye nyore.

Tora iyo plugin »

Muenzaniso chenjedzo

Peta meseji yako uye sarudzo yekuvhara icon mune div ine kirasi yakapusa.

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

Musoro! iOS zvishandiso zvinoda href="#"kudzingwa kwezviziviso. Ita shuwa yekuisanganisira iyo uye data hunhu hweanchor close icons. 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.

Wedzera zviri nyore iyo yakajairwa yambiro meseji nemakirasi maviri esarudzo: .alert-blockkune mamwe padding uye mameseji ekudzora uye .alert-headingyeinoenderana musoro.

<div kirasi = "alert alert-block" > 
  <a class = "close" data-dismiss = "alert" href = "#" > × </a>   
  <h4 kirasi = "yambiro-musoro" > Yambiro! </ h4> 
  Best check yo self, hausi...
</ div>

Kukanganisa kana ngozi

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

Success

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

Information

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

Basic

Default bhaa yekufambira mberi ine yakatwasuka gradient.

<div kirasi = "kufambira mberi" > 
  <div kirasi = "bha" 
       style = " upamhi : 60 %; " ></div> 
</ div>

Striped

Inoshandisa gradient kugadzira mitsetse mhedzisiro (hapana IE).

<div class = "progress progress-striped" > 
  <div kirasi = "bha" 
       style = " hupamhi : 20 %; " ></div> 
</ div>

Animated

Inotora iwo ane mitsetse muenzaniso uye inouita (hapana IE).

<div kirasi = "kufambira mberi-kufambira mberi 
     inoshanda" >
  <div kirasi = "bha" 
       style = " hupamhi : 40 %; " ></div> 
</ div>

Mamwe mavara

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

Mazariro ane mitsetse

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

Maitiro

Mabhawa ekufambira mberi anoshandisa CSS3 shanduko, saka kana iwe ukagadzirisa hupamhi kuburikidza nejavascript, ichaita saizi zvakanaka.

Kana iwe ukashandisa .activekirasi, mabara ako .progress-stripedekufambira mberi anosimudzira mitsetse kuruboshwe kuenda kurudyi.

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.

Opera neIE havatsigire mifananidzo panguva ino.

Wells

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

<div kirasi = "zvakanaka" > 
  ...
</ 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>