singa

Ny singa azo ampiasaina am-polony dia natsangana ao amin'ny Bootstrap mba hanomezana fitetezana, fanairana, popover, ary maro hafa.

Vondrona bokotra

Mampiasà vondrona bokotra hanambatra bokotra maromaro ho singa mitambatra. Amboary miaraka amin'ny andiana <a>na <button>singa izy ireo.

Fomba fanao tsara indrindra

Manolotra ireto torolalana manaraka ireto izahay amin'ny fampiasana vondrona bokotra sy bara fitaovana:

Ampiasao foana ny singa mitovy amin'ny vondrona bokotra tokana, <a>na <button>.
Aza afangaro ny bokotra samy hafa loko ao amin'ny vondrona bokotra iray ihany.
Mampiasà kisary ho fanampin'ny lahatsoratra na ho solon'ny lahatsoratra, fa aoka ho azo antoka fa ampidirina lahatsoratra alt sy lohateny raha mety.

Ny vondrona Button mifandraika amin'ny fidina (jereo eto ambany) dia tokony hantsoina misaraka ary ampidiro foana ny tsipika midina mba hanondroana ny fitondrantena kasaina.

Ohatra default

Toy izao ny fomba itadiavan'ny HTML vondrona bokotra manara-penitra natsangana miaraka amin'ny bokotra marika vatofantsika:

ANKA MOYEN- TSARA

<div class = "btn-group" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</div>

Ohatra amin'ny Toolbar

Ampifandraiso <div class="btn-group">amin'ny a <div class="btn-toolbar">ho an'ny singa sarotra kokoa.

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

Toeram-pisakafoanana sy radio

Ny vondrona bokotra dia afaka miasa toy ny radio ihany koa, izay bokotra iray ihany no miasa, na boaty fisavana, izay misy bokotra maromaro mety miasa. Jereo ny docs Javascript momba izany.

Raiso ny javascript »

Fampitandremana

Ny CSS ho an'ny vondrona bokotra dia ao anaty rakitra misaraka, button-groups.less.

Bokotra midina

Mampiasà bokotra iray hanosika ny menio midina amin'ny alàlan'ny fametrahana azy ao anatin'ny iray .btn-groupary manome ny mari-pamantarana sakafo mety.

Fampitandremana! Ny fidina bokotra dia mitaky ny plugin Bootstrap dropdown mba hiasa.

Ohatra marika

Mitovy amin'ny vondrona bokotra, ny marikay dia mampiasa marika bokotra mahazatra, saingy miaraka amin'ny fanampim-panampiana vitsivitsy hanatsara ny fomba sy hanohanana ny plugin jQuery nidina an'i Bootstrap.

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

Fizarana bokotra midina

Miorina amin'ny fomba sy marika vondrona bokotra, afaka mamorona bokotra mizara mora foana isika. Ny bokotra fisarahana dia misy hetsika mahazatra eo amin'ny ankavia ary fidinana midina eo ankavanana miaraka amin'ny rohy contextual.

Ohatra marika

Mivelatra amin'ny fandatsahana bokotra mahazatra izahay mba hanomezana hetsika bokotra faharoa izay miasa ho toy ny trigger midina misaraka.

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

Maivana defaults Mitovy marika, samy hafa kilasy

Kilasy fototra matanjaka

Ny singa nav rehetra eto—tabilao, pilina ary lisitra— dia mizara marika fototra sy fomba mitovy amin'ny .navkilasy.

Rahoviana no hampiasaina

Ny tabilao sy ny pilina dia tsara ho an'ny fizarana votoaty na fitetezana eo anelanelan'ny pejy misy votoaty mifandraika.

Fandrindrana singa

Mba hampifanaraka ny rohy nav dia ampiasao ny kilasy .pull-leftna .pull-rightutility. Ireo kilasy roa ireo dia hanampy mitsingevana CSS amin'ny lalana voafaritra.

Kiheba fototra

Makà <ul>rohy tsy tapaka ary ampio .nav-tabs:

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

Pills fototra

Raiso io HTML io ihany, fa ampiasao .nav-pillskosa:

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

Stackable Ataovy mitsangana ny tabilao na pilina

Ahoana ny fametrahana azy ireo

Satria ny tabilao sy ny pilina dia mitsivalana amin'ny alàlan'ny default, ampio kilasy faharoa fotsiny, .nav-stacked, mba hahatonga azy ireo hiseho mitsangana mitsangana.

Kiheba mitambatambatra

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

Pills stacked

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

Dropdowns Ho an'ny singa nav mandroso

Nanamora ny sakafo manankarena

Ny menus dropdown ao amin'ny tabilao Bootstrap sy ny pilina dia tena mora ary mila HTML kely fanampiny sy plugin jQuery maivana.

Mankanesa any amin'ny pejin'ny Javascript raha te hamaky ny doka momba ny fanombohana ny fidinana ao amin'ny Bootstrap.

Kiheba misy fidinana

<ul class = "nav nav-tabs" > 
  <li class = "midina" > 
    <a class = ""dropdown-toggle" 
       data-toggle = "midina"
       href = "#" >
        Velarina
        <b class = "caret" ></b> 
      </a>
    <ul class = "menu dropdown" > 
      <!-- rohy -->
    </ul>
  </li>
</ul>

Pills misy dropdowns

<ul class = "nav nav-pills" > 
  <li class = "midina" > 
    <a class = ""dropdown-toggle" 
       data-toggle = "midina"
       href = "#" >
        Velarina
        <b class = "caret" ></b> 
      </a>
    <ul class = "menu dropdown" > 
      <!-- rohy -->
    </ul>
  </li>
</ul>

Lisitr'i Nav Manamboara nav tsotra mivangongo, tsara ho an'ny sidebars

Fikarohana fomba fampiharana

Ny lisitry ny Nav dia manome fomba tsotra sy mora hananganana vondrona rohy nav miaraka amin'ny lohapejy azo atao. Izy ireo no tsara indrindra ampiasaina amin'ny sidebars toy ny Finder ao amin'ny OS X.

Amin'ny lafiny ara-drafitra, izy ireo dia miorina amin'ny endrika nav fototra mitovy amin'ny tabilao sy pilina, noho izany dia tsotra ny fampiasana sy ny fanamboarana azy.

Miaraka amin'ny kisary

Ny lisitry ny Nav koa dia mora ampitaovana amin'ny kisary. Ampio ny <i>marika mety amin'ny kilasy dia vonona ianao.

Ohatra nav list

Makà lisitry ny rohy ary ampio class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Lohatenin'ny lisitra
  </li>
  <li class = "active" > 
    <a href = "#" > Trano </a> 
  </li>
  <li>
    <a href = "#" > Tranomboky </a> 
  </li>
  ...
</ul>

Ohatra misy kisary

Ohatra mitovy, fa misy <i>marika ho an'ny kisary.

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

Tabbable nav Ampiaina amin'ny alàlan'ny javascript ny tabilao

Inona no tafiditra

Ampahafantaro ny kihebao miaraka amin'ny plugin tsotra hivezivezy eo amin'ny atiny amin'ny alàlan'ny tabilao. Bootstrap dia mampiditra tabilao misy tabilao amin'ny endrika efatra: ambony (default), havanana, ambany ary ankavia.

Ny fanovana eo amin'izy ireo dia mora ary mila manova marika kely fotsiny.

Ohatra tabbable

Mba hahatonga ny tabilao ho tabbable, aforeto amin'ny .nav-tabsdiv hafa miaraka amin'ny class .tabbable.

Ao amin'ny Fizarana 1 aho.

Manahoana, ao amin'ny Fizarana 2 aho.

Ahoana ry zazavavy, Fizarana 3 ity.

Custom jQuery plugin

Ny tabilao misy tabilao rehetra dia ampiasain'ny plugin jQuery maivana. Vakio bebe kokoa momba ny fomba famelomana ireo tabilao azo vakiana ao amin'ny pejy docs javascript.

Raiso ny javascript →

Marika mahitsy

Ny fampiasana ny tabilao misy tabilao dia mitaky div famonosana, andian-kiheba ary andiana atiny azo vakiana.

<div class = "tabbable" > 
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#1" data-toggle = "tab" > Fizarana 1 </a></li>   
    <li><a href = "#2" data-toggle = "tab" > Fizarana 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "1" >  
      <p> Ao amin'ny Fizarana 1 aho. </p>
    </div>
    <div class = "tab-pane" id = "2" >  
      <p> Manahoana , ao amin'ny Fizarana 2 aho. </p>
    </div>
  </div>
</div>

Tabbable amin'ny lafiny rehetra

Tabs eo amin'ny farany ambany

Atsipazo ny filaharan'ny HTML ary ampio kilasy hametraka tabilao eo amin'ny farany ambany.

Ao amin'ny fizarana A aho.

Manahoana, ao amin'ny Fizarana B aho.

Ahoana ry zazavavy, ity ny Fizarana C.

<div class = "tabbable tabs-ambany" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Kiheba eo ankavia

Ampifamadiho ny kilasy hametraka tabilao eo ankavia.

Ao amin'ny fizarana A aho.

Manahoana, ao amin'ny Fizarana B aho.

Ahoana ry zazavavy, ity ny Fizarana C.

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

Kiheba eo ankavanana

Ampifamadiho ny kilasy hametraka tabilao eo ankavanana.

Ao amin'ny fizarana A aho.

Manahoana, ao amin'ny Fizarana B aho.

Ahoana ry zazavavy, ity ny Fizarana C.

<div class = "tabbable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Ohatra static navbar

Ohatra iray amin'ny navbar static (tsy raikitra amin'ny tampony) miaraka amin'ny anaran'ny tetikasa, fitetezana ary endrika fikarohana.

Navbar scaffolding

Ny navbar dia mila div vitsivitsy fotsiny mba handrafetana azy tsara ho an'ny fampisehoana static na raikitra.

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

Navbar raikitra

Mba hahatonga ny navbar ho raikitra eo an-tampon'ny viewport, ampio .navbar-fixed-topny div ivelany indrindra, .navbar.

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

Ao amin'ny CSS-nao, ianao koa dia mila mitanisa ny fifaninihana aterak'izany amin'ny fampidirana 40px na mihoatra ny padding amin'ny <body>. Ataovy azo antoka fa ampio ity aorian'ny CSS Bootstrap fototra ary alohan'ny CSS mamaly safidy.

Anarana marika

Ny rohy tsotra hanehoana ny marika na ny anaran'ny tetikasa dia mila marika vatofantsika ihany.

<a class = "marika" href = "#" >  
  Anaran'ny tetikasa
</a>

Taratasy fikarohana

Ny endrika karoka dia mahazo fomba fanao ao amin'ny navbar miaraka amin'ny .navbar-searchkilasy. Ampidiro .pull-leftna .pull-righteo amin'ny formfampifanarahana izany.

<form class = "navbar-search pull-left" > 
  < type input = "text" class = "search-query" placeholder = "Search" >   
</form>

Variation mamaly safidy

Miankina amin'ny habetsaky ny votoaty ao amin'ny topbar-nao, azonao atao ny mampihatra ireo safidy mamaly. Mba hanaovana izany, aforeto ao anaty div misy ny votoatinao nav .nav-collapse.collapse, ary ampio ny bokotra toggle navbar, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar dia ampiasaina ho toggle ho an'ny atiny navbar nirodana -->
      <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>
 
      <!-- Aza adino ny mamela ny marika raha tianao haseho -->
      <a class = "marika" href = "#" > Anaran'ny tetikasa </a>  
 
      <!-- Izay rehetra tianao hafenina amin'ny 940px na latsaka, apetraho eto -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, sns -->
      </div>
 
    </div>
  </div>
</div>

Fampitandremana! Ny navbar responsive dia mitaky ny plugin collapse .

Rohy nav

Ny singa Nav dia mora ampiana amin'ny alàlan'ny lisitra tsy voalamina.

<ul class = "nav" > 
  <li class = "active" > 
    <a href = "#" > Trano </a> 
  </li>
  <li><a href = "#" > Rohy </a></li> 
  <li><a href = "#" > Rohy </a></li> 
</ul>

Azonao atao ny manampy mpizara mora foana amin'ny rohy nav anao miaraka amin'ny singa lisitra poakaty sy kilasy tsotra. Ampio fotsiny ity eo anelanelan'ny rohy:

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

Fandrindrana singa

Mba hampifanitsiana ny nav, ny endrika karoka, na ny lahatsoratra, ampiasao ny kilasy .pull-leftor .pull-rightutility. Ireo kilasy roa ireo dia hanampy mitsingevana CSS amin'ny lalana voafaritra.

Manampy dropdowns

Tsotra be ny fampidirana dropdown amin'ny nav, fa mitaky ny fampiasana ny plugin javascript .

<ul class = "nav" > 
  <li class = "midina" > 
    <a href = "#" 
          class = "midina-toggle"
          data-toggle = "midina" >
          TANTARA
          <b class = "caret" ></b> 
    </a>
    <ul class = "menu dropdown" > 
      ...
    </ul>
  </li>
</ul>

Raiso ny javascript →

Nahoana no mampiasa azy ireo

Ny navigateur Breadcrumb dia ampiasaina ho fomba iray hanehoana amin'ny mpampiasa ny toerana misy azy ao anatin'ny fampiharana na tranokala iray, fa tsy ho an'ny fitetezana voalohany. Tazony ho vitsy sy fohy ny fampiasana azy mba hahomby indrindra.

OHATRA

Ohatra tokana aseho fa mety haseho amin'ny pejy maro.

fanamarihana

HTML no lisitra tsy voalamina mahazatra misy rohy.

<ul class = "mofo" > 
  <li>
    <a href = "#" > Home </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Tranomboky </a> <span class = "divider" > / </span>   
  </li>
  <li class = "active" > 
    <a href = "#" > Data </a> 
  </li>
</ul>

Multicon-pejy pagination

Rahoviana no hampiasaina

pagination faran'izay tsotra sy bitika indrindra aingam-panahy avy amin'ny Rdio, tsara ho an'ny fampiharana sy valin'ny fikarohana. Ny sakana lehibe dia sarotra adino, mora miendrika, ary manome faritra kitiho lehibe.

Rohy pejy feno fanjakana

Ny rohy dia azo zahana ary miasa amin'ny toe-javatra maro miaraka amin'ny kilasy mety. .disabledho an'ny rohy tsy azo kitihina sy .activeho an'ny pejy ankehitriny.

Fandrindrana mora azo

Ampio ny iray amin'ireo kilasy roa azo atao hanovana ny fampifanarahana ny rohy pagination: .pagination-centeredary .pagination-right.

OHATRA

Ny singa pagination default dia miovaova ary miasa amin'ny karazany maro.

fanamarihana

Voafono anaty <div>, pagination dia <ul>.

<div class = "pagination" > 
  <ul>
    <li><a href = "#" > Teo aloha </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 = "#" > Manaraka </a></li> 
  </ul>
</div>

Pager Ho an'ny rohy teo aloha sy manaraka

Momba ny pager

Ny singa pager dia andiana rohy ho an'ny fampiharana pagination tsotra miaraka amin'ny marika maivana ary na dia endrika maivana kokoa aza. Tena tsara ho an'ny tranokala tsotra toy ny bilaogy na gazetiboky.

Ohatra default

Amin'ny alàlan'ny default, ny pager dia mametraka rohy.

<ul class = "pager" > 
  <li>
    <a href = "#" > Teo aloha </a> 
  </li>
  <li>
    <a href = "#" > Manaraka </a> 
  </li>
</ul>

Rohy mirindra

Azonao atao koa ny mampifanaraka ny rohy tsirairay amin'ny sisiny:

<ul class = "pager" > 
  <li class = "teo aloha" > 
    <a href = "#" > ← Antitra </a> 
  </li>
  <li class = "manaraka" > 
    <a href = "#" > Vaovao → </a> 
  </li>
</ul>

etikety	fanamarihana
toerana misy anao	`<span class="label">Default</span>`
FETY	`<span class="label label-success">Success</span>`
FAMPITANDREMANA	`<span class="label label-warning">Warning</span>`
ZAVA-DEHIBE	`<span class="label label-important">Important</span>`
Info	`<span class="label label-info">Info</span>`

Hero unit

Ny Bootstrap dia manome singa maivana sy malefaka antsoina hoe vondrona mahery fo hanehoana votoaty ao amin'ny tranokalanao. Miasa tsara amin'ny tranokala marketing sy votoaty izy io.

fanamarihana

Fenoy toy izao ny atiny div:

<div class = "hero-unit" > 
  <h1> Lohateny </h1>
  <p> Teny filamatra </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Hamantatra bebe kokoa
    </a>
  </p>
</div>

Hello World!

Ity dia singa mahery fo tsotra, singa tsotra amin'ny fomba jumbotron mba hisarika ny saina bebe kokoa amin'ny votoaty na fampahalalana nasongadina.

Hamantatra bebe kokoa

Lohatenin'ny pejy

Akorandriaka tsotsotra ho an'ny filaharana amin'ny fomba h1mety sy fizarana fizarana votoaty amin'ny pejy iray. Izy io dia afaka mampiasa ny h1default small, singa ary koa ny ankamaroan'ny singa hafa (miaraka amin'ny fomba fanampiny).

<div class = "page-haeder" > 
  <h1> Lohatenin'ny pejy ohatra </h1>
</div>

Tsipika mahazatra

Amin'ny alàlan'ny default, ny thumbnail an'ny Bootstrap dia natao hanehoana sary mifandray miaraka amin'ny marika kely ilaina.

Tena azo namboarina

Miaraka amin'ny marika fanampiny, azo atao ny manampy karazana votoaty HTML toy ny lohateny, fehintsoratra, na bokotra ao anaty thumbnail.

Etikety thumbnail

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

Action Action
Etikety thumbnail

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

Action Action

Nahoana no mampiasa thumbnails

Ny thumbnails (teo aloha .media-gridhatramin'ny v1.4) dia tsara ho an'ny grids misy sary na horonan-tsary, valin'ny fikarohana sary, vokatra antsinjarany, portfolios, ary maro hafa. Mety ho rohy na votoaty static izy ireo.

Fanamafisana tsotra sy miovaova

Tsotra ny fanamarihan'ny thumbnail—a ulmisy lisinga maromaro no ilaina. Izy io koa dia tena malefaka, mamela ny karazana atiny rehetra miaraka amin'ny marika kely kokoa hamenoana ny atiny.

Mampiasa ny haben'ny tsanganana grid

Farany, ny singa thumbnails dia mampiasa ny kilasy misy rafitra grid — toa .span2na .span3— mba hifehezana ny refin'ny thumbnail.

Ny marika

Araka ny voalaza teo aloha, ny marika ilaina amin'ny thumbnails dia maivana sy mahitsy. Ity ny fijerena ny fametrahana default ho an'ny sary mifandray :

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

Ho an'ny atiny HTML mahazatra amin'ny thumbnails, miova kely ny marika. Mba hamelana ny votoatin'ny sakana na aiza na aiza, dia avadikay <a>ho <div>toy izao ny:

<ul class = "thumbnails" > 
  <li class = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> etikety thumbnail </h5>
      <p> Famaritana an-tsary eto... </p>
    </div>
  </li>
  ...
</ul>

Ohatra bebe kokoa

Tadiavo ny safidinao rehetra miaraka amin'ireo kilasin'ny grid isan-karazany azonao. Azonao atao ihany koa ny mampifangaro sy mampifanaraka habe samihafa.

Default maivana

Kilasy fototra nosoratana indray

Miaraka amin'ny Bootstrap 2, nanatsotra ny kilasy fototra izahay: .alertfa tsy .alert-message. Nahenanay ihany koa ny mari-pamantarana kely indrindra ilaina — tsia <p>no takiana amin'ny alàlan'ny default, ny ivelany fotsiny <div>.

Hafatra fanairana tokana

Ho an'ny singa maharitra kokoa miaraka amin'ny kaody kely kokoa, dia nesorinay ny fijery manavaka ny fanairana sakana, hafatra miaraka amin'ny padding bebe kokoa ary matetika lahatsoratra maro kokoa. Niova ho .alert-block.

Mandeha tsara amin'ny javascript

Ny Bootstrap dia miaraka amin'ny plugin jQuery lehibe izay manohana ireo hafatra fanairana, mahatonga ny fandroahana azy ireo haingana sy mora.

Raiso ny plugin »

Fampandrenesana ohatra

Fenoy ny hafatrao sy ny kisary akaiky azo atao ao anaty div misy kilasy tsotra.

× fampitandremana! Jereo tsara ny tenanao, tsy dia tsara loatra ianao.

<div class = "alert" > 
  <a class = "close" data-dismiss = "alert" > × </a>  
  <strong> Fampitandremana! </strong> Jereo tsara ny tenanao, tsy dia tsara loatra ianao.
</div>

Hanitatra mora foana ny hafatra fanairana manara-penitra miaraka amin'ny kilasy roa azo atao: .alert-blockho an'ny fifehezana padding sy lahatsoratra ary .alert-headingho an'ny lohateny mifanandrify.

fampitandremana!

Jereo tsara ny tenanao, tsy dia tsara loatra ianao. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<div class = "alert alert-block" > 
  <a class = "close" data-dismiss = "alert" > × </a>  
  <h4 class = "lohahevitra fanairana" > Fampitandremana! </h4> 
  Jereo tsara ny tenanao, tsy ianao...
</div>

Alternatives contextual Ampio kilasy azo atao hanovana ny hevitry ny fanairana

Fahadisoana na loza

× Oh snap! Ovay zavatra vitsivitsy ary andramo mandefa indray.

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

FETY

× Vita tsara! Namaky soa aman-tsara ity hafatra fanairana manan-danja ity ianao.

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

Information

× Fampitandremana! Mila ny fifantohanao ity fanairana ity, saingy tsy dia zava-dehibe loatra.

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

Ohatra sy marika

Basic

Bara fandrosoan'ny default misy gradient mitsangana.

<div class = "fandrosoana" > 
  <div class = "bar" 
       style = " sakany : 60 %; " ></div> 
</div>

mitsipitsipika

Mampiasa gradient mba hamoronana vokatra mitsipika.

<div class = "fandrosoana-info 
     mandroso" >
  <div class = "bar" 
       style = " sakany : 20 %; " ></div> 
</div>

animation

Raiso ny ohatra misy miolakolaka ary amelombelona azy.

<div class = "fandrosoana-loza 
     fandrosoan-dalana mavitrika" >
  <div class = "bar" 
       style = " sakany : 40 %; " ></div> 
</div>

Safidy sy fanohanan'ny navigateur

loko fanampiny

Mampiasa ny sasany amin'ireo anarana kilasy mitovy amin'ny bokotra sy fampandrenesana ho an'ny endrika mitovy ny bara fandrosoana.

.progress-info
.progress-success
.progress-danger

Raha tsy izany, azonao atao ny manamboatra ny rakitra LESS ary manodina ny lokonao sy ny habenao.

FITONDRANTENA

Mampiasa fifindran'ny CSS3 ny bara fandrosoana, ka raha manitsy ny sakany amin'ny alàlan'ny javascript ianao dia hanova ny habeny.

Raha mampiasa ny .activekilasy ianao, ny .progress-stripedbara fandrosoanao dia hampihetsika ny tsipika ankavia miankavanana.

Fanohanana navigateur

Mampiasa gradients CSS3, transition, ary animations ny bar progresses mba hanatrarana ny vokany rehetra. Ireo endri-javatra ireo dia tsy tohanana amin'ny IE7-8 na dikan-teny taloha an'ny Firefox.

Tsy manohana sary mihetsika ny Opera amin'izao fotoana izao.

lavaka famorian-drano

Ampiasao ny fantsakana ho toy ny effet tsotsotra amin'ny singa iray mba hanomezana effet inset azy.

Jereo fa ao anaty lavaka fantsakana aho!

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

Badges

Mampiasà marika eo amin'ny singa iray ho an'ny isa tsy novakiana na ho famantarana tsotra.

<span class = "badge" > 3 </div>

Akatona kisary

Ampiasao ny kisary akaiky ankapobeny hanesorana votoaty toy ny modals sy fanairana.

<a class = "akaiky" > × </a>

Vondron'ny bokotra Ampifandraiso amin'ny bokotra ho an'ny fiasa mitovy amin'ny barazy

Vondrona bokotra

Fomba fanao tsara indrindra

Ohatra default

Ohatra amin'ny Toolbar

Toeram-pisakafoanana sy radio

Fampitandremana

Buttons dropdowns Contextual dropdown menus naorina amin'ny bokotra groupe

Bokotra midina

Ohatra marika

Fizarana bokotra midina

Ohatra marika

Nav, tabilao ary pilina Fikarohana amin'ny fomba lisitra azo zahana

Maivana defaults Mitovy marika, samy hafa kilasy

Kilasy fototra matanjaka

Rahoviana no hampiasaina

Fandrindrana singa

Kiheba fototra

Pills fototra

Stackable Ataovy mitsangana ny tabilao na pilina

Ahoana ny fametrahana azy ireo

Kiheba mitambatambatra

Pills stacked

Dropdowns Ho an'ny singa nav mandroso

Nanamora ny sakafo manankarena

Kiheba misy fidinana

Pills misy dropdowns

Lisitr'i Nav Manamboara nav tsotra mivangongo, tsara ho an'ny sidebars

Fikarohana fomba fampiharana

Miaraka amin'ny kisary

Ohatra nav list

Ohatra misy kisary

Tabbable nav Ampiaina amin'ny alàlan'ny javascript ny tabilao

Inona no tafiditra

Ohatra tabbable

Custom jQuery plugin

Marika mahitsy

Tabbable amin'ny lafiny rehetra

Tabs eo amin'ny farany ambany

Kiheba eo ankavia

Kiheba eo ankavanana

Navbar

Ohatra static navbar

Navbar scaffolding

Navbar raikitra

Anarana marika

Taratasy fikarohana

Variation mamaly safidy

Rohy nav

Fandrindrana singa

Manampy dropdowns

Mofo

Nahoana no mampiasa azy ireo

OHATRA

fanamarihana

Safidy roa ho an'ny pejy amin'ny atiny

Multicon-pejy pagination

Rahoviana no hampiasaina

Rohy pejy feno fanjakana

Fandrindrana mora azo

OHATRA

fanamarihana

Pager Ho an'ny rohy teo aloha sy manaraka

Momba ny pager

Ohatra default

Rohy mirindra

Etikety an-tsoratra Mametaka sy manorata lahatsoratra

Ny singa typografika Lohatenin'ny pejy sy singa mahery fo amin'ny fizarana votoaty

Hero unit

fanamarihana

Hello World!

Lohatenin'ny pejy

Thumbnails Grids misy sary, horonan-tsary, lahatsoratra, ary maro hafa

Tsipika mahazatra

Tena azo namboarina

Etikety thumbnail

Etikety thumbnail

Nahoana no mampiasa thumbnails

Fanamafisana tsotra sy miovaova

Mampiasa ny haben'ny tsanganana grid