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

<div class = "btn-group" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</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 »

Midina anaty vondrona bokotra

Fampitandremana! Ny bokotra misy fidinana dia tsy maintsy amboarina tsirairay ao anatin'ny azy manokana .btn-groupmba .btn-toolbarhandikana araka ny tokony ho izy.

Overview sy ohatra

Mampiasà bokotra iray hanetsika ny menio midina amin'ny alàlan'ny fametrahana azy ao anatin'ny iray .btn-groupary manome ny marika mena.

Ohatra marika

Mitovy amin'ny vondrona bokotra, ny marikay dia mampiasa marika bokotra mahazatra, saingy miaraka amin'ny fanampim-panazavana 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>

Miasa amin'ny haben'ny bokotra rehetra

Ny fidina bokotra dia miasa amin'ny habeny rehetra. ny haben'ny bokotrao hatramin'ny .btn-large, .btn-small, na .btn-mini.

Mila javascript

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

Amin'ny toe-javatra sasany—toy ny finday—dia hiitatra ivelan'ny seranan-tsambo ny menio midina. Mila mamaha ny fampifanarahana amin'ny tanana ianao na amin'ny javascript mahazatra.

Overview sy ohatra

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.

habe

Ampiasao ny kilasy bokotra fanampiny .btn-mini, .btn-small, na .btn-largeho an'ny habe.

<div class = "btn-group" > 
  ...
  <ul class = "menu dropdown pull-right" > 
    <!-- rohy midina midina -->
  </ul>
</div>

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" > 
  <button class = "btn" > Action </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </bokotra>
  <ul class = "menu dropdown" > 
    <!-- rohy midina midina -->
  </ul>
</div>

Dropup menus

Ny menio midina ihany koa dia azo afindra avy any amin'ny farany ambany amin'ny fampidirana kilasy tokana amin'ny ray aman-dreny akaiky an'i .dropdown-menu. Izy io dia hanodina ny lalan'ny .caretary hamerenana ny menio mba hifindra avy any ambany miakatra fa tsy ambony midina.

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

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:

• an-trano
• TANTARANY
• Hafatra

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

• an-trano
• TANTARANY
• Hafatra

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

Ahoana ny fametrahana azy ireo

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

Kiheba mitangorona

• an-trano
• TANTARANY
• Hafatra

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

Pills stacked

• an-trano
• TANTARANY
• Hafatra

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

Nanamora ny sakafo manankarena

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

Mankanesa any amin'ny pejin'ny Javascript mba hamakiana ny doka momba ny fanombohana ny fidina ao amin'ny Bootstrap.

Kiheba misy fidinana

• an-trano
• Vonjeo
• Velarina
  • Action
  • Another action
  • Something else here
  • Separated link

<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

• an-trano
• Vonjeo
• Velarina
  • Action
  • Another action
  • Something else here
  • Separated link

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

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>tenifototra mety amin'ny kilasy dia vonona ianao.

Mpizara marindrano

Manampia mpizara marindrano amin'ny famoronana singa lisitra tsy misy na inona na inona miaraka amin'ny class .divider, toy izao:

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

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>

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.

Hiverina any amin'ny tabs

Mba hahatonga ny tabilao ho levona, ampio .fadeny tsirairay .tab-pane.

Mila plugin jQuery

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

Raiso ny javascript →

Ohatra tabbable

Mba hahatonga ny tabilao ho tabbable, mamorona .tab-paneID tokana ho an'ny kiheba tsirairay ary aforeto amin'ny .tab-content.

Ho an'ny kiheba mifanitsy havanana na ankavia, aforeto ny .nav-tabsary .tab-contentamin'ny .tabbable.

Marika mahitsy

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

<div class = "tabbable" > <!-- Ny tabilao ankavia/kavanana ihany no ilaina -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Fizarana 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Fizarana 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Ao amin'ny Fizarana 1 aho. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Manahoana , ao amin'ny Fizarana 2 aho. </p>
    </div>
  </div>
</div>

Tabs eo amin'ny farany ambany

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

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

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

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

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

Amboary ny navbar eo amin'ny tampony na ambany amin'ny viewport miaraka amin'ny kilasy fanampiny amin'ny div ivelany indrindra, .navbar.

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

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

Rehefa mametaka ny navbar ianao dia tadidio fa ny faritra miafina ao ambany. Ampio padding 40px na mihoatra 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>

Endrika ploraly an'ny teny navbar

Mba hamolavolana sy hametrahana endrika araka ny tokony ho izy ao anatin'ny navbar, ampio ireo kilasy mifanaraka amin'ny aseho eto ambany. Ho an'ny endrika mahazatra, ampidiro .navbar-formary na .pull-leftampifanaraho .pull-righttsara izany.

<form class = "navbar-form pull-left" > 
  < karazana fampidirana = "text" class = "span2" >  
</form>

Ho an'ny endrika fikarohana namboarina kokoa, ampio .navbar-searchny formsy .search-queryny fampidirana ho an'ny fomba manokana ao amin'ny navbar.

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

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.

Fanampiana sakafo midina

Tsotra be ny fampidirana dropdown sy dropups 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 →

Lahatsoratra ao amin'ny navbar

Fonosana tady lahatsoratra amin'ny <.navbar-text>, matetika amin'ny <p>marika mba hahazoana fitarihana sy loko mety.

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 ireo mba hahomby indrindra.

OHATRA

Ohatra tokana aseho ho azo aseho amin'ny pejy maromaro.

• an-trano

• Home /
• fitehirizam-boky

• Home /
• Tranomboky /
• tahirin-kevitra

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" > Data </li> 
</ul>

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>

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.

Toetran'ny olona kilemaina

Ny rohy pager koa dia mampiasa ny .disabledkilasy ankapobeny avy amin'ny pagination.

Ohatra default

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

• Teo aloha
• Manaraka

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

• ← Antitra
• Vaovao →

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

About

Ny badge dia singa kely sy tsotra hanehoana famantarana na fanisana karazana. Matetika izy ireo no hita ao amin'ny mpanjifa mailaka toa ny Mail.app na amin'ny fampiharana finday ho an'ny fampandrenesana fanosehana.

Kilasy misy

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-lehibe" > 
      Hamantatra bebe kokoa
    </a>
  </p>
</div>

Akorandriaka tsotra ahafahana h1manasaraka sy mizara ampahany amin'ny atiny 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-header" > 
  <h1> Lohatenin'ny pejy ohatra </h1>
</div>

Tsipika mahazatra

Amin'ny alàlan'ny default, ny thumbnails 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 amin'ny thumbnails.

• 

  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.

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.

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

Fampitandremana! Ny fitaovana iOS dia mitaky fanalana href="#"fanairana. Ataovy azo antoka ny hampiditra azy sy ny toetran'ny angona ho an'ny kisary akaiky vatofantsika. Raha tsy izany, azonao atao ny mampiasa <button>singa misy ny toetran'ny angona, izay nosafidianay hatao ho an'ny dokanay. Rehefa mampiasa <button>, dia tsy maintsy ampidirinao type="button"na mety tsy alefa ny taratanao.

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

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

Fahadisoana na loza

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

FETY

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

Information

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

fototra

Bara fandrosoan'ny default misy gradient mitsangana.

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

mitsipitsipika

Mampiasa gradient mba hamoronana vokatra mibaribary (tsy misy IE).

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

animation

Raiso ny ohatra mibaribary ary ahetsiketsika (tsy misy IE).

<div class = "fandrosoan'ny fandrosoana 
     mavitrika" >
  <div class = "bar" 
       style = " sakany : 40 %; " ></div> 
</div>

loko fanampiny

Ny bara fandrosoan'ny fandrosoana dia mampiasa bokotra mitovy sy kilasy fanairana ho an'ny fomba tsy miovaova.

Bara mitsipika

Mitovy amin'ny loko mivaingana, manana barazy fandrosoana mibaribary isan-karazany izahay.

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-9 na dikan-teny taloha an'ny Firefox.

Opera sy IE dia tsy manohana sary mihetsika amin'izao fotoana izao.

lavaka famorian-drano

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

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

Akatona kisary

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

×

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

Mitaky href="#" ny fitaovana iOS raha te hampiasa vatofantsika ianao.

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