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

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

Ohatra amin'ny Toolbar

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

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </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.

Bokotra midina

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.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Action
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "menu dropdown" >
  7. <!-- rohy midina midina -->
  8. </ul>
  9. </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.


Fizarana bokotra midina

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.

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "menu dropdown pull-right" >
  4. <!-- rohy midina midina -->
  5. </ul>
  6. </div>

Ohatra marika

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

  1. <div class = "btn-group" >
  2. <button class = "btn" > Action </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </bokotra>
  6. <ul class = "menu dropdown" >
  7. <!-- rohy midina midina -->
  8. </ul>
  9. </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.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Dropup </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </bokotra>
  6. <ul class = "menu dropdown" >
  7. <!-- rohy midina midina -->
  8. </ul>
  9. </div>

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

  1. <div class = "pagination" >
  2. <ul>
  3. <li><a href = "#" > Teo aloha </a></li>
  4. <li class = "active" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > Manaraka </a></li>
  11. </ul>
  12. </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.

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.

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#" > Teo aloha </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Manaraka </a>
  7. </li>
  8. </ul>

Rohy mirindra

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

  1. <ul class = "pager" >
  2. <li class = "teo aloha" >
  3. <a href = "#" > Antitra </a>
  4. </li>
  5. <li class = "manaraka" >
  6. <a href = "#" > Vaovao → </a>
  7. </li>
  8. </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>
mitifitra ny mifanohitra <span class="label label-inverse">Inverse</span>

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

Anarana OHATRA fanamarihana
toerana misy anao 1 <span class="badge">1</span>
FETY 2 <span class="badge badge-success">2</span>
FAMPITANDREMANA 4 <span class="badge badge-warning">4</span>
ZAVA-DEHIBE 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
mitifitra ny mifanohitra 10 <span class="badge badge-inverse">10</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:

  1. <div class = "hero-unit" >
  2. <h1> Lohateny </h1>
  3. <p> Teny filamatra </p>
  4. <p>
  5. <a class = "btn btn-primary btn-lehibe" >
  6. Hamantatra bebe kokoa
  7. </a>
  8. </p>
  9. </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 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).

  1. <div class = "page-header" >
  2. <h1> Lohatenin'ny pejy ohatra </h1>
  3. </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 :

  1. <ul class = "thumbnails" >
  2. <li class = "span3" >
  3. <a href = "#" class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </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:

  1. <ul class = "thumbnails" >
  2. <li class = "span3" >
  3. <div class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Etikety thumbnail < /h5>
  6. <p> Famaritana an-tsary eto... </p>
  7. </div>
  8. </li>
  9. ...
  10. </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.
  1. <div class = "alert" >
  2. <button class = "close" data-dismiss = "alert" > × </button>
  3. <strong> Fampitandremana! </strong> Jereo tsara ny tenanao, tsy dia tsara loatra ianao.
  4. </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.

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.

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

Alternatives contextual Ampio kilasy azo atao hanovana ny hevitry ny fanairana

Fahadisoana na loza

Oh snap! Ovay zavatra vitsivitsy ary andramo mandefa indray.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

FETY

Vita tsara! Namaky soa aman-tsara ity hafatra fanairana manan-danja ity ianao.
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

Information

Fampitandremana! Mila ny fifantohanao ity fanairana ity, saingy tsy dia zava-dehibe loatra.
  1. <div class = "alerto alert-info" >
  2. ...
  3. </div>

Ohatra sy marika

fototra

Bara fandrosoan'ny default misy gradient mitsangana.

  1. <div class = "fandrosoana" >
  2. <div class = "bar"
  3. style = " sakany : 60 %; " ></div>
  4. </div>

mitsipitsipika

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

  1. <div class = "fandrosoana-tsipika" >
  2. <div class = "bar"
  3. style = " sakany : 20 %; " ></div>
  4. </div>

animation

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

  1. <div class = "fandrosoan'ny fandrosoana
  2. mavitrika" >
  3. <div class = "bar"
  4. style = " sakany : 40 %; " ></div>
  5. </div>

Safidy sy fanohanan'ny navigateur

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.

Jereo fa ao anaty lavaka fantsakana aho!
  1. <div class = "tsara" >
  2. ...
  3. </div>

Akatona kisary

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

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

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

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