OHATRA

Toggleable, menu contextual hanehoana lisitry ny rohy. Natao hifampiraharaha tamin'ny plugin JavaScript dropdown .

<ul class = "menu dropdown" role = "menu" aria-labelledby = "menu dropdown" >   
  <li><a tabindex = "-1" href = "#" > Hetsika </a></li>  
  <li><a tabindex = "-1" href = "#" > Hetsika hafa </a></li>  
  <li><a tabindex = "-1" href = "#" > Zavatra hafa eto </a></li>  
  <li class = "divider" ></li> 
  <li><a tabindex = "-1" href = "#" > Rohy misaraka </a></li>  
</ul>

fanamarihana

Raha jerena fotsiny ny menio midina, ity ny HTML ilaina. Ilainao ny mamatotra ny trigger ny dropdown sy ny menio midina ao anaty .dropdown, na singa hafa manambara position: relative;. Dia mamorona ny sakafo fotsiny.

<div class = "dropdown" > 
  <!-- Rohy na bokotra hanodina ny fidinana -->
  <ul class = "menu dropdown" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Hetsika </a></li>  
    <li><a tabindex = "-1" href = "#" > Hetsika hafa </a></li>  
    <li><a tabindex = "-1" href = "#" > Zavatra hafa eto </a></li>  
    <li class = "divider" ></li> 
    <li><a tabindex = "-1" href = "#" > Rohy misaraka </a></li>  
  </ul>
</div>

FANDIKANA

Ampifanaraho miankavanana ny menio ary ampidiro ny haavon'ny fidinana fanampiny.

Mampifanaraka ny menus

Ampio .pull-rightamin'ny .dropdown-menurindran-kavanana ny menio midina.

<ul class = "menu dropdown pull-right" role = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

Safidy sakafo kilemaina

Ampidiro .disabledao <li>amin'ny dropdown mba hanesorana ny rohy.

<ul class = "menu dropdown" role = "menu" aria-labelledby = "menu dropdown" >   
  <li><a tabindex = "-1" href = "#" > Rohy mahazatra </a></li>  
  <li class = "kilemaina" ><a tabindex = "-1" href = "#" > Rohy kilemaina </a></li>   
  <li><a tabindex = "-1" href = "#" > Rohy hafa </a></li>  
</ul>

Submenu amin'ny dropdowns

Manampia ambaratonga fanampiny amin'ny menio midina, miseho amin'ny hover toy ny an'ny OS X, miaraka amin'ny fanampim-panazavana tsotra. Ampio .dropdown-submenuamin'izay liao amin'ny menio midina efa misy ho an'ny fanaingoana mandeha ho azy.

<ul class = "menu dropdown" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "dropdown-submenu" > 
    <a tabindex = "-1" href = "#" > Safidy fanampiny </a>  
    <ul class = "menu dropdown" > 
      ...
    </ul>
  </li>
</ul>

OHATRA

Safidy fototra roa, miaraka amin'ny karazany roa manokana.

Vondrona bokotra tokana

Fonosy bokotra maromaro miaraka amin'ny .btnin .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > Ankavia </bt> 
  <button class = "btn" > Afovoany </button> 
  <button class = "btn" > Right </button> 
</div>

Vondrona bokotra maromaro

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>

Vondrona bokotra mitsangana

Ataovy miseho mitsangana mitsangana fa tsy mitsivalana ny bokotra maromaro.

<div class = "btn-group btn-group-vertical" > 
  ...
</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.

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.

<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: .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 na amin'ny JavaScript mahazatra ianao.

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.

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

habe

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

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Action </button> 
  <button class = "btn btn-mini 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>

Maivana defaults Mitovy marika, samy hafa kilasy

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

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>

Fanjakana kilemaina

Ho an'ny singa nav rehetra (tabilao, pilina, na lisitra), ampio .disabledny rohy miloko ary tsy misy fiantraikany amin'ny hover . Ny rohy dia hijanona ho azo kitihina, na izany aza, raha tsy esorinao ilay hreftoetra. Raha tsy izany, azonao atao ny mampihatra JavaScript manokana mba hisorohana ireo kitika ireo.

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

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.

Stackable

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

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

Pills stacked

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

Dropdowns

Ampio ny menio midina miaraka amin'ny HTML fanampiny kely sy ny plugin JavaScript dropdowns .

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>

Nav lisitra

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.

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 = "#" > Home </a></li>  
  <li><a href = "#" > Tranomboky </a></li> 
  ...
</ul>

FanamarihanaHo an'ny fanaingoana ao anaty lisitry ny nav, ampidiro class="nav nav-list"amin'ny nested rehetra <ul>.

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>

Tabbable nav

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.

Ohatra tabbable

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

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

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 pejin'ny docs JavaScript .

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.

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

Hanombohana, navbars dia static (tsy raikitra amin'ny tampony) ary misy fanohanana ny anaran'ny tetikasa sy ny fitetezana fototra. Mametraha iray na aiza na aiza ao anatin'ny .container, izay mametraka ny sakan'ny tranokalanao sy ny atiny.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "marika" href = "#" > Lohateny </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > Home </a></li>  
      <li><a href = "#" > Rohy </a></li> 
      <li><a href = "#" > Rohy </a></li> 
    </ul>
  </div>
</div>

Navbar singa

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>  

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>

teny

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" >  
  <button type = "submit" class = "btn" > Alefaso </bt>  
</form>

Taratasy fikarohana

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>

Fandrindrana singa

Ampifanaraho ny rohy nav, endrika fikarohana, na lahatsoratra, ampiasao ny kilasy .pull-leftna .pull-rightutility. Ireo kilasy roa ireo dia hanampy mitsingevana CSS amin'ny lalana voafaritra.

Mampiasa dropdowns

Manampia dropdowns sy dropups amin'ny nav miaraka amin'ny marika kely sy ny dropdowns JavaScript plugin .

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

Tsidiho ny antontan-taratasim-panadinana JavaScript raha te hahazo marika sy fampahalalana bebe kokoa momba ny fiantsoana fidinana.

Text

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

Fiovaovan'ny fampisehoana azo atao

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

Miorina hatrany ambony

Ampio .navbar-fixed-topary tadidio ny kaonty momba ny faritra miafina ao ambaniny amin'ny fampidirana 40px farafahakeliny paddingamin'ny <body>. Ataovy azo antoka fa ampio ity aorian'ny CSS Bootstrap fototra ary alohan'ny CSS mamaly safidy.

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

Miorina hatrany ambany

Ampio .navbar-fixed-bottomkosa.

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

Navbar ambony static

Mamorona navbar mivelatra feno izay mihodinkodina miaraka amin'ny pejy amin'ny fampidirana .navbar-static-top. Tsy toy ny .navbar-fixed-topkilasy, tsy mila manova padding amin'ny body.

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

Navbar mamaly

Mba hampiharana navbar mamaly mirodana, aforeto amin'ny div misy ny votoatinao navbar .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 collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, sns -->
      </div>
 
    </div>
  </div>
</div>

Variation nivadika

Ovao ny endriky ny navbar amin'ny fampidirana .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

OHATRA

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

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

pagination mahazatra

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

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

FANDIKANA

Fanjakana kilemaina sy mavitrika

Ny rohy dia azo zahana amin'ny toe-javatra samihafa. Ampiasao .disabledho an'ny rohy tsy azo kitihina sy .activehanondroana ny pejy ankehitriny.

<div class = "pagination" > 
  <ul>
    <li class = "kilemaina" ><a href = "#" > « </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

Azonao atao ny manova ny vatofantsika mavitrika na kilemaina ho an'ny elanelam-potoana hanesorana ny fampiasa kitiho raha mitazona ny fomba nokasaina.

<div class = "pagination" > 
  <ul>
    <li class = "kilemaina" ><span> « </span></li> 
    <li class = "active" ><span> 1 </span></li> 
    ...
  </ul>
</div>

habe

Mitady pagination lehibe kokoa na kely kokoa? Ampio .pagination-large, .pagination-small, na .pagination-minihabe fanampiny.

<div class = "pagination pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

Fanitsiana

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

<div class = "pagination pagination-centered" > 
  ...
</div>

<div class = "pagination pagination-right" > 
  ...
</div>

Pager

Rohy haingana teo aloha sy manaraka ho an'ny fampiharana pagination tsotra miaraka amin'ny marika maivana sy fomba. 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>

Toetran'ny olona kilemaina

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

<ul class = "pager" > 
  <li class = "kilemaina teo aloha" > 
    <a href = "#" > ← Antitra </a> 
  </li>
  ...
</ul>

etikety

Badges

Mora mirodana

Ho fampiharana mora dia hirodana tsotra izao ny marika sy ny badge (amin'ny alàlan'ny :emptympifidy CSS) rehefa tsy misy atiny ao anatiny.

Hero unit

Singa maivana sy mora azo hanehoana votoaty fototra ao amin'ny tranokalanao. Miasa tsara amin'ny tranokala marketing sy votoaty izy io.

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

Lohatenin'ny pejy

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 <small> Subtext ho an'ny lohapejy </small></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.

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.

fanamarihana

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 = "span4" > 
    <a href = "#" class = "thumbnail" >  
      <img data-src = "holder.js/300x200" 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 = "span4" > 
    <div class = "thumbnail" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Etikety thumbnail < /h3>
      <p> Famaritana an-tsary... </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.

Fanairana mahazatra

Fenoy ny lahatsoratra rehetra sy ny bokotra fandroahana tsy voatery .alertho an'ny hafatra fampitandremana fototra.

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

Esory ny bokotra

Ny navigateur Mobile Safari sy Mobile Opera, ankoatry ny data-dismiss="alert"toetra, dia mitaky fanalana href="#"fanairana rehefa mampiasa <a>marika.

<a href = "#" class = "close" data-dismiss = "alert" > × </a>   

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.

< karazana bokotra = "bokotra" class = "akaiky" data-dismiss = "fanairana" > × </bokotra>   

Esory ny fanairana amin'ny alàlan'ny JavaScript

Ampiasao ny plugin jQuery fampandrenesana mba hanesorana haingana sy mora ny fampandrenesana.

FANDIKANA

Ho an'ny hafatra lava kokoa, ampitomboy ny padding eo amin'ny tampony sy ambany amin'ny fonon'ny fanairana amin'ny alàlan'ny fampidirana .alert-block.

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

Alternatives contextual

Manampia kilasy azo atao hanovana ny hevitry ny fanairana.

Fahadisoana na loza

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

FETY

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

Information

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

Ohatra sy marika

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. Tsy hita ao amin'ny IE7-8.

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

animation

Ampio .activeamin'ny .progress-stripedfamelomana ny tsipika havanana miankavia. Tsy hita amin'ny dikan-teny rehetra amin'ny IE.

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

Mivondrona

Asio bara maromaro ao anatin'ny iray mitovy .progressmba hametahana azy ireo.

<div class = "fandrosoana" > 
  <div class = "bar bar-success" style = " sakany : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " sakany : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " sakany : 10 %; " ></div>   
</div>

FANDIKANA

loko fanampiny

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

<div class = "fandrosoana-info" > 
  <div class = "bar" style = " sakany : 20 % " ></div>   
</div>
<div class = "fandrosoana-fahombiazana" > 
  <div class = "bar" style = " sakany : 40 % " ></div>   
</div>
<div class = "fampitandremana amin'ny fandrosoana" > 
  <div class = "bar" style = " sakany : 60 % " ></div>   
</div>
<div class = "fandrosoana-loza" > 
  <div class = "bar" style = " sakany : 80 % " ></div>   
</div>

Bara mitsipika

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

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " sakany : 20 % " ></div>   
</div>
<div class = "fandrosoana fandrosoana-fahombiazana-fandrosoana-striped" > 
  <div class = "bar" style = " sakany : 40 % " ></div>   
</div>
<div class = "fandrosoan'ny fandrosoana-fampitandremana fandrosoana-tsipika" > 
  <div class = "bar" style = " sakany : 60 % " ></div>   
</div>
<div class = "fandrosoana-fandrosoana-loza" > 
  <div class = "bar" style = " sakany : 80 % " ></div>   
</div>

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.

Ny dikan-teny taloha kokoa noho ny Internet Explorer 10 sy Opera 12 dia tsy mahazaka sary mihetsika.

Fomban-javatra manjavozavo amin'ny fananganana karazana singa isan-karazany (toy ny fanehoan-kevitry ny bilaogy, Tweets, sns) izay manasongadina sary mirindra havia na havanana miaraka amin'ny atiny soratra.

Ohatra default

Ny fampahalalam-baovao mahazatra dia mamela ny mitsingevana zavatra media (sary, horonan-tsary, feo) miankavia na havanana amin'ny sakana votoaty.

Lohatenin'ny haino aman-jery

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Lohatenin'ny haino aman-jery

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Lohatenin'ny haino aman-jery

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

<div class = "media" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Media heading </h4> 
    ...
 
    <!-- Media objectif -->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

Lisitry ny media

Miaraka amin'ny mari-pamantarana fanampiny, azonao atao ny mampiasa media anaty lisitra (ilaina amin'ny kofehy fanehoan-kevitra na lisitry ny lahatsoratra).

<ul class = "lisitra-media" > 
  <li class = "media" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Media heading </h4> 
      ...
 
      <!-- Media objectif -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

lavaka famorian-drano

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

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

Kilasy azo atao

Fanaraha-maso ny padding sy ny zorony boribory miaraka amin'ny kilasy modifier roa.

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

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

Akatona kisary

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

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

Ny fitaovana iOS dia mitaky hetsika href="#"ho an'ny tsindry raha aleonao mampiasa vatofantsika.

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

Kilasy mpanampy

Kilasy tsotra sy mifantoka ho an'ny fampirantiana kely na fanitsiana fihetsika.

.misintona-havia

Atsipazo singa sisa

class = "misintona-havia"

. misintona - ankavia {
  mitsingevana : ankavia ;
}

.misintona-kavanana

Atsipazo miankavanana ny singa iray

class = "misintona havanana"

. misintona - havanana {
  mitsingevana : marina ;
}

.moted

Hanova ny lokon'ny singa iray ho#999

class = "mote"

. moana {
  loko : #999; 
}

.clearfix

Fafao ny floatamin'ny singa rehetra

class = "fanazavana mazava"

. clearfix {
  * zoom : 1 ; 
  &: taloha ,
  &: aorian'ny {
    aseho : latabatra ;
    votoaty : "" ; 
  }
  &: aorian'ny {
    mazava : samy ;
  }
}