Vondrona bokotra

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

Azonao atao ihany koa ny manambatra andiana <div class="btn-group">ho a <div class="btn-toolbar">ho an'ny tetikasa sarotra kokoa.

Ohatra marika

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

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

Ary miaraka amina barazy ho an'ny vondrona maro:

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

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>

Kilasy fototra matanjaka

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

Nahoana no tabilao sy pilina

Ny tabilao sy ny pilina ao amin'ny Bootstrap dia miorina amin'ny <ul>HTML fototra mitovy, lisitry ny rohy. Ampifanakalozy eo amin'ny tabilao na pilina miaraka amin'ny kilasy iray ihany.

Ireo safidy roa ireo dia tsara ho an'ny fizarana votoaty na fitetezana eo anelanelan'ny pejin'ny atiny mifandraika.

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
• TANTARANY
• Velarina
  • Action
  • Hetsika hafa
  • Zavatra hafa eto
  • Rohy misaraka

<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
• TANTARANY
• Velarina
  • Action
  • Hetsika hafa
  • Zavatra hafa eto
  • Rohy misaraka

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

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.

Ohatra tabbable

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

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 →

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>

Mba hahatonga ny navbar ho raikitra eo an-tampon'ny viewport, ampio .navbar-fixed-topny div ivelany indrindra, .navbar. Ao amin'ny CSS-nao, ianao koa dia mila mitantana ny fifaninihana aterak'izany amin'ny fampidirana padding-top: 40px;ny <body>.

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

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

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>

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 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" > 
    <a href = "#" > Data </a> 
  </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.

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>

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>dia takiana amin'ny alàlan'ny default, ny outter <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" > 
  <a class = "akaiky" > × </a> 
  <strong> Fampitandremana! </strong> Jereo tsara ny tenanao, tsy dia tsara loatra ianao.
</div>

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 = "akaiky" > × </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 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>

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.

Wells

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

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

Badges

Mampiasà mari-pamantarana amin'ny singa iray ho an'ny isa tsy novakiana na ho famantarana tsotra.

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

Close icon

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

×

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