Grúpaí cnaipí

Úsáid grúpaí cnaipí chun cnaipí iolracha a cheangal le chéile mar chomhpháirt ilchodach amháin. Tóg iad le sraith <a>nó <button>eilimintí.

Na cleachtais is fearr

Molaimid na treoirlínte seo a leanas maidir le grúpaí cnaipí agus barraí uirlisí a úsáid:

• Bain úsáid as an eilimint chéanna i ngrúpa cnaipí amháin, <a>nó <button>.
• Ná measc cnaipí de dhathanna éagsúla sa ghrúpa cnaipí céanna.
• Úsáid deilbhíní i dteannta nó in ionad téacs, ach bí cinnte go gcuimseofar alt agus téacs teidil nuair is cuí.

Ba chóir grúpaí Cnaipe Gaolmhara le anuas (féach thíos) a ghlaoch amach ar leithligh agus cúram anuas a chur san áireamh i gcónaí chun iompar beartaithe a chur in iúl.

Sampla réamhshocraithe

Seo mar a lorgaíonn an HTML grúpa cnaipe caighdeánach a tógadh le cnaipí clib ancaire:

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

Sampla barra uirlisí

Comhcheangail tacair de <div class="btn-group">isteach i <div class="btn-toolbar">do chomhpháirteanna níos casta.

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

Blasanna ticbhosca agus raidió

Is féidir le grúpaí cnaipí feidhmiú mar raidiónna freisin, áit nach féidir ach cnaipe amháin a bheith gníomhach, nó ticbhoscaí, áit a bhféadfadh líon ar bith cnaipí a bheith gníomhach. Féach ar na doiciméid Javascript chuige sin.

Faigh javascript »

Anuas i ngrúpaí cnaipí

Cinnirí suas! Ní mór cnaipí le anuas a bheith fillte ina n-aonar .btn-grouplaistigh de le .btn-toolbarhaghaidh rindreála cuí.

Forbhreathnú agus samplaí

Bain úsáid as aon chnaipe chun roghchlár anuas a spreagadh trína chur laistigh de .btn-groupagus trí mharcáil ceart an roghchláir a sholáthar.

Marcáil shampla

Cosúil le grúpa cnaipí, úsáideann ár marcáil marcáil cnaipe rialta, ach le dornán breiseanna chun an stíl a bheachtú agus chun tacú le breiseán jQuery anuas Bootstrap.

<div class = "btn-group" > 
  <a class="btn dropdown-toggle" data-toggle = "titim" href="#"> _ _ _ _   
    Gníomh
    <span class = "caret" ></span> 
  </a>
  <ul class = "roghchlár anuas" > 
    <!-- naisc roghchláir anuas -->
  </ul>
</div>

Oibríonn sé le gach méid cnaipe

Oibríonn dropdowns cnaipe ar aon mhéid. méideanna do chnaipe chuig .btn-large, .btn-small, nó .btn-mini.

Tá javascript ag teastáil

Éilíonn anuas cnaipe an breiseán anuas Bootstrap chun feidhmiú.

I gcásanna áirithe—cosúil le soghluaiste — leathnófar biachláir anuas lasmuigh den radharc. Ní mór duit an t-ailíniú a réiteach de láimh nó le javascript saincheaptha.

Forbhreathnú agus samplaí

Ag tógáil ar stíleanna agus marcáil an ghrúpa cnaipe, is féidir linn cnaipe scoilte a chruthú go héasca. Tá gníomh caighdeánach ar chlé i gceist le cnaipí scoilte agus scorán anuas ar dheis le naisc chomhthéacsúla.

Méideanna

Bain úsáid as na ranganna breise cnaipe .btn-mini, .btn-small, nó .btn-largele haghaidh méide.

<div class = "btn-group" > 
  ...
  <ul class = "dropdown-menu pull-right" > 
    <!-- naisc roghchláir anuas -->
  </ul>
</div>

Marcáil shampla

Déanaimid leathnú ar na gnáth-anuasanna cnaipe chun an dara gníomh cnaipe a sholáthar a fheidhmíonn mar truicear anuas ar leith.

<div class = "btn-group" > 
  <button class = "btn" > Gníomh </button> 
  <button class = "btn dropdown-toggle" data-toggle = "anuas" >  
    <span class = "caret" ></span> 
  </cnaipe>
  <ul class = "roghchlár anuas" > 
    <!-- naisc roghchláir anuas -->
  </ul>
</div>

Roghchláir dropup

Is féidir biachláir anuas a scoránú ón mbun aníos freisin trí rang amháin a chur le neasthuismitheoir .dropdown-menu. Smeachfaidh sé treo an .caretagus athshocróidh sé an roghchlár féin chun bogadh ón mbun aníos in ionad ón mbarr anuas.

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "anuas" >  
    <span class = "caret" ></span> 
  </cnaipe>
  <ul class = "roghchlár anuas" > 
    <!-- naisc roghchláir anuas -->
  </ul>
</div>

Bunrang cumhachtach

Roinneann na comhpháirteanna uile nav anseo - cluaisíní, piollaí, agus liostaí - an bonnmharcáil agus na stíleanna céanna tríd an .navrang.

Cathain a úsáid

Tá cluaisíní agus piollaí iontach le haghaidh codanna den ábhar nó le nascleanúint a dhéanamh idir leathanaigh d’ábhar gaolmhar.

Ailíniú comhpháirte

Chun naisc nascleanúna a ailíniú, úsáid na .pull-leftranganna .pull-rightfóntais. Cuirfidh an dá rang snámhán CSS sa treo sonraithe.

Cluaisíní bunúsacha

Glac líon rialta <ul>de naisc agus cuir leis .nav-tabs:

• Baile
• Próifíl
• Teachtaireachtaí

<ul class = "nav nav-cluaisíní" > 
  <li class = "active" > 
    <a href="#"> Bhaile </a> _ _ _ 
  </li>
  <li><a href = "#"> ... </a> < /li> 
  <li><a href = "#"> ... </a> < /li> 
</ul>

pills bunúsacha

Tóg an HTML céanna sin, ach úsáid .nav-pillsina ionad sin:

• Baile
• Próifíl
• Teachtaireachtaí

<ul class = "nav nav-pills" > 
  <li class = "active" > 
    <a href="#"> Bhaile </a> _ _ _ 
  </li>
  <li><a href = "#"> ... </a> < /li> 
  <li><a href = "#"> ... </a> < /li> 
</ul>

Conas iad a chruachadh

Toisc go bhfuil cluaisíní agus piollaí cothrománacha de réir réamhshocraithe, ní gá ach rang a dó, .nav-stacked, a chur leis chun iad a chur le feiceáil go hingearach.

Cluaisíní Cruachta

• Baile
• Próifíl
• Teachtaireachtaí

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

Pills cruachta

• Baile
• Próifíl
• Teachtaireachtaí

<ul class = "nav nav-pills nav-cruachta" > 
  ...
</ul>

Biachláir saibhir déanta éasca

Tá biachláir anuas i gcluaisíní agus piollaí Bootstrap thar a bheith éasca agus ní theastaíonn ach beagán HTML breise agus breiseán éadrom jQuery.

Téigh ar aghaidh chuig an leathanach Javascript chun na doiceanna a léamh maidir le híoslódálacha a thosú i Bootstrap.

Cluaisíní le dropdowns

• Baile
• Cabhrú
• Titim síos
  • Gníomh
  • Gníomh eile
  • Rud eile anseo
  • Nasc scartha

<ul class = "nav nav-cluaisíní" > 
  <li class = "dropdown" > 
    < a class = "dropdown-scoránaigh" 
       data-toggle = "titim anuas"
       href = "#" >
        Titim síos
        <b class = "caret" ></b> 
      </a>
    <ul class = "roghchlár anuas" > 
      <!-- naisc -->
    </ul>
  </li>
</ul>

Pills le dropdowns

• Baile
• Cabhrú
• Titim síos
  • Gníomh
  • Gníomh eile
  • Rud eile anseo
  • Nasc scartha

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    < a class = "dropdown-scoránaigh" 
       data-toggle = "titim anuas"
       href = "#" >
        Titim síos
        <b class = "caret" ></b> 
      </a>
    <ul class = "roghchlár anuas" > 
      <!-- naisc -->
    </ul>
  </li>
</ul>

Nascleanúint feidhmchláir

Soláthraíonn liostaí nascleanúna bealach simplí agus éasca chun grúpaí de naisc loingseoireachta a chruthú le ceanntásca roghnacha. Is fearr iad a úsáid i barraí taoibh mar an Aimsitheoir in OS X.

Go struchtúrach, tá siad bunaithe ar na stíleanna lárnacha nascleanúna céanna le cluaisíní agus piollaí, agus mar sin tá úsáid agus saincheapadh simplí.

Le deilbhíní

Is furasta liostaí nascleanúna a threalmhú le deilbhíní freisin. Cuir an <i>chlib cheart leis an rang agus tá tú socraithe.

Roinneoirí cothrománacha

Cuir roinnteoir cothrománach leis trí mhír liosta folamh a chruthú leis an rang .divider, mar seo a leanas:

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

Sampla liosta nav

Glac liosta naisc agus cuir leis class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Ceanntásc liosta
  </li>
  <li class = "active" > 
    <a href="#"> Bhaile </a> _ _ _ 
  </li>
  <li>
    <a href="#"> Leabharlann </a> _ _ _ 
  </li>
  ...
</ul>

Sampla le deilbhíní

Sampla céanna, ach le <i>clibeanna le haghaidh deilbhíní.

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

Cad atá san áireamh

Cuir do chuid cluaisíní ar an saol le breiseán simplí chun scoránaigh idir ábhar trí chluaisíní. Comhtháthaíonn Bootstrap cluaisíní cluaisíní i gceithre stíl: barr (réamhshocraithe), ar dheis, ar bhun agus ar chlé.

Is furasta iad a athrú agus ní gá ach fíorbheagán marcála a athrú.

Céimnithe i gcluaisíní

Chun cluaisíní a dhéanamh céimnithe isteach, cuir .fadele gach .tab-pane.

Tá breiseán jQuery ag teastáil

Tá gach cluaisín cluaisín faoi thiomáint ag ár mbreiseán éadrom jQuery. Léigh tuilleadh faoi conas cluaisíní a thabhairt chun beochta ar leathanach na ndoiciméad javascript .

Faigh an javascript →

Sampla tábla

Chun cluaisíní a dhéanamh inchurtha, cruthaigh .tab-paneID uathúil do gach cluaisín agus fillte isteach iad .tab-content.

Le haghaidh cluaisíní ailínithe ar dheis nó ar chlé, fillte an .nav-tabsagus .tab-contentisteach .tabbable.

Marcáil simplí

Teastaíonn div fillte, sraith cluaisíní, agus sraith ábhar cluaisíní le cluaisíní tabbable a úsáid.

<div class = "tabable" > <-- Ní gá ach do na cluaisíní clé/deas --> 
  <ul class = "nav nav-cluaisíní" > 
    <li class = "active" < a href = "#tab1 " data- toggle = "cluaisín" > Roinn 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "cluaisín" > Roinn 2 </a></li>  
  </ul>
  <div class = "cluaisín-ábhar" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Tá mé i Roinn 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Howdy, tá mé i Roinn 2. </p>
    </div>
  </div>
</div>

Cluaisíní ar an mbun

Smeach ord an HTML agus cuir rang leis chun cluaisíní a chur ar an mbun.

<div class = "cluaisíní tabable-thíos" > 
  <div class = "cluaisín-ábhar" > 
    ...
  </div>
  <ul class = "nav nav-cluaisíní" > 
    ...
  </ul>
</div>

Cluaisíní ar thaobh na láimhe clé

Malartaigh an rang chun cluaisíní a chur ar thaobh na láimhe clé.

<div class = "cluaisíní-clé" > 
  <ul class = "nav nav-cluaisíní" > 
    ...
  </ul>
  <div class = "cluaisín-ábhar" > 
    ...
  </div>
</div>

Cluaisíní ar dheis

Malartaigh an rang chun cluaisíní a chur ar dheis.

<div class = "cluaisíní tabable-deas" > 
  <ul class = "nav nav-cluaisíní" > 
    ...
  </ul>
  <div class = "cluaisín-ábhar" > 
    ...
  </div>
</div>

Scafall Navbar

Níl ach cúpla div ag teastáil ón mbarra loingseoireachta chun é a struchtúrú go maith le haghaidh taispeáint statach nó sheasta.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
      ...
    </div>
  </div>
</div>

Navbar seasta

Deisigh an barra nascleanúna ar bharr nó bun an amhairc le rang breise ar an div is forimeallaí, .navbar.

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

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

Nuair a ghreamaíonn tú an barra nascleanúna, cuimhnigh cuntas a thabhairt ar an limistéar folaithe thíos. Cuir 40px nó níos mó de stuáil leis an <body>. Bí cinnte é seo a chur leis tar éis an CSS Bootstrap lárnach agus roimh an CSS freagrúil roghnach.

Ainm branda

Ní theastaíonn ach clib ancaire le nasc simplí chun do bhranda nó d’ainm tionscadail a thaispeáint.

<a class="brand" href="#"> _ _ _ _ _  
  Ainm an tionscadail
</a>

Foirmeacha i navbar

Chun foirm a stíliú agus a shuíomh i gceart laistigh den bharra nascleanúna, cuir na haicmí cuí leis mar a thaispeántar thíos. Le haghaidh foirm réamhshocraithe, cuir san áireamh .navbar-formagus ceachtar acu .pull-leftnó .pull-rightchun é a ailíniú i gceart.

<form class = "navbar-form tarraingt-chlé" > 
  <input type = "text" class = "span2" >  
</form>

Chun foirm chuardaigh níos saincheaptha a fháil, cuir .navbar-searchleis an ionchur formagus .search-queryleis an ionchur do stíleanna speisialaithe sa bharra nascleanúna.

<form class = "navbar-search tarraingt-chlé" > 
  <input type = "text" class = "search-query" placeholder = "Cuardaigh" >   
</form>

Athrú sofhreagrach roghnach

Ag brath ar an méid ábhair i do bharrbharra, b'fhéidir gur mhaith leat na roghanna sofhreagracha a chur i bhfeidhm. Chun é sin a dhéanamh, fillte do chuid ábhar nav i div, .nav-collapse.collapse, agus cuir an cnaipe scoránaigh an bharra nascleanúna, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      Úsáidtear <!-- .btn-navbar mar an scoránaigh le haghaidh ábhar an bharra nascleanúna tite -->
      <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>
 
      <!-- Bí cinnte an branda a fhágáil amach ansin más mian leat é a thaispeáint -->
      <a class="brand" href="#"> Ainm an tionscadail </a> _ _ _  
 
      <!-- Gach rud atá uait i bhfolach ag 940px nó níos lú, cuir isteach anseo -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, srl -->
      </div>
 
    </div>
  </div>
</div>

Naisc Nav

Is furasta míreanna nascleanúna a chur leis trí liostaí neamhordaithe.

<ul class = "nav" > 
  <li class = "active" > 
    <a href="#"> Bhaile </a> _ _ _ 
  </li>
  <li><a href="#"> Nasc </a> < / li > 
  <li><a href="#"> Nasc </a> < / li > 
</ul>

Is féidir leat roinnteoirí a chur le do naisc nascleanúna go héasca le mír liosta folamh agus rang simplí. Cuir é seo idir naisc:

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

Ailíniú comhpháirte

Chun nav, foirm chuardaigh, nó téacs a ailíniú, úsáid na ranganna .pull-leftnó .pull-rightfóntais. Cuirfidh an dá rang snámhán CSS sa treo sonraithe.

Ag cur roghchláir anuas leis

Tá sé thar a bheith simplí anuas agus dropups a chur leis an nascleanúint, ach ní mór úsáid a bhaint as ár mbreiseán javascript .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" 
          aicme = "dropdown-toggle"
          data-toggle = "titim anuas" >
          Cuntas
          <b class = "caret" ></b> 
    </a>
    <ul class = "roghchlár anuas" > 
      ...
    </ul>
  </li>
</ul>

Faigh an javascript →

Téacs sa bharra loingseoireachta

Wrap teaghráin de théacs i <.navbar-text>, de ghnáth ar <p>chlib chun tosaigh agus dath cuí.

Cén fáth iad a úsáid

Úsáidtear loingseoireacht arán mar bhealach chun úsáideoirí a thaispeáint cá bhfuil siad laistigh d’aip nó de shuíomh, ach ní le haghaidh loingseoireachta príomhúil. Coinnigh a n-úsáid gann agus gonta le bheith ar an mbealach is éifeachtaí.

Samplaí

Taispeántar sampla amháin mar go bhféadfaí é a thaispeáint thar leathanaigh iolracha.

• Baile

• Baile /
• Leabharlann

• Baile /
• Leabharlann /
• Sonraí

Marcáil

Is é HTML do liosta caighdeánach neamhordaithe le naisc.

<ul class = "breadcrumb" > 
  <li>
    <a href="#"> Abhaile < /span> <span class = " divider " > / < / span>   
  </li>
  <li>
    <a href="#"> Leabharlann < / span > <span class = "divider" > / < /span>   
  </li>
  <li class = "active" > Sonraí </li> 
</ul>

Cathain a úsáid

Leathanach uimhriúcháin ultra-simplí agus íostach spreagtha ag Rdio, iontach le haghaidh apps agus torthaí cuardaigh. Is deacair an bloc mór a chailleann, inscálaithe go héasca, agus soláthraíonn sé limistéir mhóra cliceáil.

Naisc leathanach ráiteasacha

Is féidir naisc a shaincheapadh agus oibríonn siad i roinnt cúinsí leis an rang ceart. .disabledle haghaidh naisc nach féidir a chliceáil agus .activele haghaidh an leathanaigh reatha.

Ailíniú solúbtha

Cuir ceachtar den dá rang roghnach leis chun ailíniú naisc uimhriúcháin a athrú: .pagination-centeredagus .pagination-right.

Samplaí

Tá an chomhpháirt uimhriúcháin réamhshocraithe solúbtha agus oibríonn sé i roinnt éagsúlachtaí.

Marcáil

Fillte i <div>leathanach , níl ann ach leathanach <ul>.

<div class = "leathanach" > 
  <ul>
    <li><a href = " #"> Roimhe </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 = " #"> Ar Aghaidh </a> < /li> 
  </ul>
</div>

Maidir le glaoire

Is é atá sa chomhpháirt glaoire ná sraith nasc le haghaidh cur i bhfeidhm leathanach simplí le marcáil éadrom agus fiú stíleanna níos éadroime. Tá sé iontach do shuímh simplí cosúil le blaganna nó irisí.

Staid díchumasaithe roghnach

Úsáideann naisc ghlaoch freisin an .disabledrang ginearálta ón leathanach.

Sampla réamhshocraithe

De réir réamhshocraithe, díríonn an glaoire naisc.

• Roimhe Seo
• Ar aghaidh

<ul class = "pager" > 
  <li>
    <a href="#"> Roimhe </a> _ _ _ 
  </li>
  <li>
    <a href="#"> Ar Aghaidh </a> _ _ 
  </li>
</ul>

Naisc ailínithe

Nó, is féidir leat gach nasc a ailíniú leis na taobhanna:

• ← Níos sine
• Níos nuaí →

<ul class = "pager" > 
  <li class = "previous" > 
    <a href="#"> & larr ; _ Níos sine </a> 
  </li>
  <li rang = "ar aghaidh" > 
    <a href="#"> Níos nuaí & rarr ; </a> 
  </li>
</ul>

Faoi

Is comhpháirteanna beaga simplí iad suaitheantais chun táscaire nó comhaireamh de shaghas éigin a thaispeáint. Faightear iad go coitianta i gcliant ríomhphoist amhail Mail.app nó ar aipeanna móibíleacha le haghaidh fógraí brú.

Ranganna ar fáil

Soláthraíonn Bootstrap comhpháirt éadrom, solúbtha ar a dtugtar aonad laoch chun ábhar ar do shuíomh a thaispeáint. Oibríonn sé go maith ar mhargaíocht agus ar shuímh atá trom le hábhar.

Marcáil

Wrap d'inneachar divmar sin:

<div class = "laoch-aonad" > 
  <h1> Ceannteideal </h1>
  <p> Cliblíne </p>
  <p>
    <a class="btn btn-bunscoil btn-large"> _ 
      Foghlaim níos mó
    </a>
  </p>
</div>

Sliogán simplí le spásáil a dhéanamh h1go cuí agus codanna den ábhar a dheighilt ar leathanach. Is féidir é a úsáid h1réamhshocraithe small, eilimint chomh maith leis an chuid is mó comhpháirteanna eile (le stíleanna breise).

<div class = "page-header" > 
  <h1> Ceanntásc leathanaigh samplach </h1>
</div>

Mionsamhlacha réamhshocraithe

De réir réamhshocraithe, tá mionsamhlacha Bootstrap deartha chun íomhánna nasctha a thaispeáint le híosmhéid marcála riachtanach.

An-customizable

Le beagán marcála breise, is féidir aon chineál ábhar HTML cosúil le ceannteidil, ailt, nó cnaipí a chur isteach i mionsamhlacha.

• 

  Lipéad mionsamhlacha

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

  Gníomh Gníomh

• 

  Lipéad mionsamhlacha

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

  Gníomh Gníomh

Cén fáth mionsamhlacha a úsáid

Tá mionsamhlacha ( .media-gridgo dtí v1.4 roimhe seo) iontach do ghreillí grianghraif nó físeáin, torthaí cuardaigh íomhá, táirgí miondíola, punanna, agus go leor eile. Is féidir iad a bheith ina naisc nó ina n-ábhar statach.

Simplí, marcáil solúbtha

Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

Uses grid column sizes

Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

The markup

As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

<ul class="thumbnails">
  <li class="span3">
    <a href="#" class="thumbnail">
      <img src="https://placehold.it/260x180" alt="">
    </a>
  </li>
  ...
</ul>

For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

<ul class="thumbnails">
  <li class="span3">
    <div class="thumbnail">
      <img src="https://placehold.it/260x180" alt="">
      <h5>Thumbnail label</h5>
      <p>Thumbnail caption right here...</p>
    </div>
  </li>
  ...
</ul>

More examples

Explore all your options with the various grid classes available to you. You can also mix and match different sizes.

Rewritten base class

With Bootstrap 2, we've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outer <div>.

Single alert message

For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to .alert-block.

Goes great with javascript

Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.

Get the plugin »

Example alerts

Wrap your message and an optional close icon in a div with simple class.

<div class="alert">
  <button class="close" data-dismiss="alert">×</button>
  <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>

Heads up! iOS devices require an href="#" for the dismissal of alerts. Be sure to include it and the data attribute for anchor close icons. Alternatively, you may use a button element with the data attribute, which we have opted to do for our docs.

Easily extend the standard alert message with two optional classes: .alert-block for more padding and text controls and .alert-heading for a matching heading.

<div class="alert alert-block">
  <a class="close" data-dismiss="alert" href="#">×</a>
  <h4 class="alert-heading">Warning!</h4>
  Best check yo self, you're not...
</div>

Error or danger

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

Success

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

Information

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

Basic

Default progress bar with a vertical gradient.

<div class="progress">
  <div class="bar"
       style="width: 60%;"></div>
</div>

Striped

Uses a gradient to create a striped effect (no IE).

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

Animated

Takes the striped example and animates it (no IE).

<div class="progress progress-striped
     active">
  <div class="bar"
       style="width: 40%;"></div>
</div>

Additional colors

Progress bars use some of the same button and alert classes for consistent styles.

Striped bars

Similar to the solid colors, we have varied striped progress bars.

Behavior

Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.

If you use the .active class, your .progress-striped progress bars will animate the stripes left to right.

Browser support

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

Opera and IE do not support animations at this time.

Wells

Use the well as a simple effect on an element to give it an inset effect.

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

Close icon

Use the generic close icon for dismissing content like modals and alerts.

×

<button class="close">&times;</button>

iOS devices require an href="#" for click events if you rather use an anchor.

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