Komponenti

Għexieren ta 'komponenti li jistgħu jerġgħu jintużaw huma mibnija f'Bootstrap biex jipprovdu navigazzjoni, twissijiet, popovers, u ħafna aktar.

Gruppi tal-buttuni

Uża gruppi ta' buttuni biex tgħaqqad buttuni multipli flimkien bħala komponent wieħed kompost. Ibnihom b'serje ta' <a>jew <button>elementi.

L-aħjar prattiki

Nirrakkomandaw il-linji gwida li ġejjin għall-użu ta 'gruppi ta' buttuna u toolbars:

  • Dejjem uża l-istess element fi grupp ta' buttuna waħda, <a>jew <button>.
  • Tħallatx buttuni ta 'kuluri differenti fl-istess grupp ta' buttuni.
  • Uża ikoni flimkien mat-test jew minfloku, imma kun żgur li tinkludi alt u test tat-titlu fejn xieraq.

Gruppi ta' Buttuni Relatati bi dropdowns (ara hawn taħt) għandhom jissejħu separatament u dejjem jinkludu dropdown caret biex tindika l-imġiba maħsuba.

Eżempju default

Hawn kif tfittex l-HTML għal grupp ta' buttuna standard mibni b'buttuni ta' tag ta' ankra:

  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>

Eżempju ta' Toolbar

Għaqqad settijiet ta ' <div class="btn-group">fi <div class="btn-toolbar">għal komponenti aktar kumplessi.

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

Checkbox u togħmiet tar-radju

Gruppi ta' buttuni jistgħu jaħdmu wkoll bħala radjijiet, fejn buttuna waħda biss tista' tkun attiva, jew kaxxi ta' kontroll, fejn kwalunkwe numru ta' buttuni jista' jkun attiv. Ara d-dokumenti Javascript għal dan.

Ikseb il-javascript »

Dropdowns fi gruppi ta 'buttuni

Irjus up! Buttuni bi dropdowns għandhom ikunu mgeżwra individwalment fihom stess .btn-groupfi ħdan a .btn-toolbargħal rendering xieraq.

Dropdowns tal-buttuni

Eżempju ta 'markup

Simili għal grupp ta 'buttuni, il-markup tagħna juża markup ta' buttuna regolari, iżda b'numru żgħir ta 'żidiet biex jirfina l-istil u jappoġġja l-plugin dropdown jQuery ta' Bootstrap.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Azzjoni
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "menu dropdown" >
  7. <!-- dropdown menu links -->
  8. </ul>
  9. </div>

Jaħdem mad-daqsijiet kollha tal-buttuni

Il-dropdowns tal-buttuni jaħdmu fi kwalunkwe daqs. id-daqsijiet tal-buttuna tiegħek għal .btn-large, .btn-small, jew .btn-mini.

Jeħtieġ javascript

Id-dropdowns tal-buttuni jeħtieġu l- plugin dropdown Bootstrap biex jiffunzjona.

F'xi każijiet—bħall-mowbajl—menus dropdown se jestendu barra l-viewport. Għandek bżonn issolvi l-allinjament manwalment jew b'javascript personalizzat.


Dropdowns tal-buttuna maqsuma

Ħarsa ġenerali u eżempji

Nibnu fuq l-istili tal-grupp tal-buttuni u l-markup, nistgħu faċilment noħolqu buttuna maqsuma. Buttuni maqsuma għandhom azzjoni standard fuq ix-xellug u dropdown toggle fuq il-lemin b'links kuntestwali.

Daqsijiet

Uża l-klassijiet tal-buttuni żejda .btn-mini, .btn-small, jew .btn-largegħad-daqs.

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

Eżempju ta 'markup

Aħna nespandu fuq il-dropdowns normali tal-buttuna biex nipprovdu t-tieni azzjoni tal-buttuna li topera bħala grillu tal-dropdown separat.

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

Dropup menus

Il-menus dropdown jistgħu wkoll jinqalbu minn isfel għal fuq billi żżid klassi waħda mal-ġenitur immedjat ta' .dropdown-menu. Hija se taqleb id-direzzjoni tal- .caretu poġġi mill-ġdid il-menu innifsu biex jimxi minn isfel għal fuq minflok minn fuq għal isfel.

  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. </button>
  6. <ul class = "menu dropdown" >
  7. <!-- dropdown menu links -->
  8. </ul>
  9. </div>

Paġnar multicon-paġna

Meta tuża

Paġinazzjoni ultra simplistika u b'stil minimament ispirata minn Rdio, kbira għall-apps u r-riżultati tat-tiftix. Il-blokka l-kbira hija diffiċli biex titlifha, tista 'tiġi skalata faċilment, u tipprovdi żoni ta' klikkjar kbar.

Links ta' paġna bil-istat

Il-links huma customizable u jaħdmu f'numru ta 'ċirkostanzi mal-klassi t-tajba. .disabledgħal links li ma jistgħux jiġu kklikkjati u .activegħall-paġna kurrenti.

Allinjament flessibbli

Żid waħda minn żewġ klassijiet fakultattivi biex tbiddel l-allinjament tar-rabtiet tal-paġnar: .pagination-centeredu .pagination-right.

Eżempji

Il-komponent tal-pagination default huwa flessibbli u jaħdem f'numru ta 'varjazzjonijiet.

Markup

Imgeżwer fi <div>, paġnar huwa biss <ul>.

  1. <div class = "paġinazzjoni" >
  2. <ul>
  3. <li><a href = "#" > Prev </a></li>
  4. <li class = "attiv" >
  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 = "#" > Li jmiss </a></li>
  11. </ul>
  12. </div>

Pager Għal links ta' malajr ta' qabel u li jmiss

Dwar pager

Il-komponent tal-pager huwa sett ta 'links għal implimentazzjonijiet ta' paginazzjoni sempliċi b'markup ħafif u stili saħansitra eħfef. Huwa tajjeb ħafna għal siti sempliċi bħal blogs jew rivisti.

Stat diżabbli mhux obbligatorju

Il-links tal-pager jużaw ukoll il- .disabledklassi ġenerali mill-paġnar.

Eżempju default

B'mod awtomatiku, il-pager jiffoka links.

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#" > Preċedenti </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Li jmiss </a>
  7. </li>
  8. </ul>

Links allinjati

Inkella, tista' tallinja kull link mal-ġnub:

  1. <ul class = "pager" >
  2. <li class = "preċedenti" >
  3. <a href = "#" > Anzjani </a>
  4. </li>
  5. <li class = "li jmiss" >
  6. <a href = "#" > Aktar ġodda → </a>
  7. </li>
  8. </ul>
Tikketti Markup
Default <span class="label">Default</span>
Suċċess <span class="label label-success">Success</span>
Twissija <span class="label label-warning">Warning</span>
Importanti <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Inversa <span class="label label-inverse">Inverse</span>

Dwar

Il-badges huma komponenti żgħar u sempliċi biex jintwerew indikatur jew għadd ta 'xi tip. Huma komunement jinstabu fil-klijenti tal-email bħal Mail.app jew fuq apps mobbli għal notifiki push.

Klassijiet disponibbli

Isem Eżempju Markup
Default 1 <span class="badge">1</span>
Suċċess 2 <span class="badge badge-success">2</span>
Twissija 4 <span class="badge badge-warning">4</span>
Importanti 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Inversa 10 <span class="badge badge-inverse">10</span>

Unità eroj

Bootstrap jipprovdi komponent ħafif u flessibbli msejjaħ unità eroj biex juri l-kontenut fuq is-sit tiegħek. Taħdem tajjeb fuq siti ta' kummerċjalizzazzjoni u kontenut tqal.

Markup

Kebbeb il-kontenut tiegħek divb'tali hekk:

  1. <div class = "eroj-unità" >
  2. <h1> Intestatura </h1>
  3. <p> Tagline </p>
  4. <p>
  5. <a class = "btn btn-primary btn-kbar" >
  6. Itagħllem iżjed
  7. </a>
  8. </p>
  9. </div>

Hello dinja!

Din hija unità ta 'eroj sempliċi, komponent sempliċi ta' stil jumbotron biex tissejjaħ attenzjoni żejda għal kontenut jew informazzjoni dehru.

Itagħllem iżjed

Header tal-paġna

Qoxra sempliċi biex tispazja b'mod h1xieraq u tissegmenta sezzjonijiet tal-kontenut fuq paġna. Jista 'jutilizza l- element h1default small, kif ukoll il-biċċa l-kbira tal-komponenti l-oħra (bi stili addizzjonali).

  1. <div class = "paġna-header" >
  2. <h1> Eżempju ta' header tal-paġna </h1>
  3. </div>

Miniatures default

B'mod awtomatiku, il-minjaturi ta' Bootstrap huma ddisinjati biex juru immaġini konnessi b'markup minimu meħtieġ.

Personalizzabbli ħafna

B'daqsxejn ta 'markup żejjed, huwa possibbli li żżid kwalunkwe tip ta' kontenut HTML bħal intestaturi, paragrafi, jew buttuni fil-minijaturi.

  • Tikketta miniatura

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

    Azzjoni Azzjoni

  • Tikketta miniatura

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

    Azzjoni Azzjoni

Għaliex tuża thumbnails

Thumbnails (qabel .media-gridsa v1.4) huma tajbin għal grilji ta 'ritratti jew vidjows, riżultati ta' tfittxija ta 'immaġni, prodotti bl-imnut, portafolli, u ħafna aktar. Jistgħu jkunu links jew kontenut statiku.

Markup sempliċi u flessibbli

Il-markup tal-minjatura huwa sempliċi—a ulb'kull numru ta' lielementi huwa dak kollu li hu meħtieġ. Huwa wkoll super flessibbli, li jippermetti għal kull tip ta 'kontenut bi ftit aktar markup biex ikebbeb il-kontenut tiegħek.

Juża daqsijiet tal-kolonna tal-grilja

Fl-aħħar nett, il-komponent thumbnails juża klassijiet eżistenti tas-sistema tal-grilja—bħal .span2jew .span3—għall-kontroll tad-dimensjonijiet thumbnail.

Il-markup

Kif issemma qabel, il-markup meħtieġ għal thumbnails huwa ħafif u sempliċi. Hawn ħarsa lejn is-setup default għal immaġini konnessi :

  1. <ul class = "minjieri" >
  2. <li class = "span3" >
  3. <a href = "#" class = "minjatura" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

Għal kontenut HTML personalizzat fil-minjaturi, il-markup jinbidel ftit. Biex nippermettu l-kontenut tal-livell tal-blokki kullimkien, niskambjaw <a>għal <div>bħal hekk:

  1. <ul class = "minjieri" >
  2. <li class = "span3" >
  3. <div class = "minjatura" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Tikketta miniatura </h5>
  6. <p> Il-caption tal-minjatura eżatt hawn... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Aktar eżempji

Esplora l-għażliet kollha tiegħek bid-diversi klassijiet tal-grilja disponibbli għalik. Tista 'wkoll tħallat u tqabbel daqsijiet differenti.

Inadempjenzi ħfief

Klassi bażi miktuba mill-ġdid

Bil Bootstrap 2, aħna ssimplifikajna l-klassi bażi: .alertminflok .alert-message. Naqqasna wkoll il-markup minimu meħtieġ—l-ebda <p>huwa meħtieġ b'mod awtomatiku, biss il-barra <div>.

Messaġġ wieħed ta' twissija

Għal komponent aktar durabbli b'inqas kodiċi, neħħejna l-ħarsa ta' differenzjazzjoni għal twissijiet ta 'blokki, messaġġi li jiġu b'aktar ikkuttunar u tipikament aktar test. Il-klassi nbidlet ukoll għal .alert-block.


Jmur tajjeb mal-javascript

Bootstrap jiġi ma 'plugin jQuery kbir li jappoġġa messaġġi ta' twissija, li jagħmel it-tkeċċija tagħhom malajr u faċli.

Ikseb il-plugin »

Eżempji ta' twissijiet

Kebbeb il-messaġġ tiegħek u ikona qrib fakultattiva f'div bi klassi sempliċi.

Twissija! L-aħjar iċċekkja lilek innifsek, m'intix qed tfittex wisq tajjeb.
  1. <div class = "twissija" >
  2. <button class = "close" data-dismiss = "allert" > × </button>
  3. <strong> Twissija! </strong> L-aħjar iċċekkja lilek innifsek, m'intix qed tfittex wisq tajjeb.
  4. </div>

Irjus up! L-apparati tal-iOS jirrikjedu href="#"għat-tkeċċija tat-twissijiet. Kun żgur li tinkludiha u l-attribut tad-dejta għall-ikoni mill-qrib tal-ankra. Inkella, tista' tuża <button>element bl-attribut tad-dejta, li għażilna li nagħmlu għad-dokumenti tagħna. Meta tuża <button>, trid tinkludi type="button"jew il-formoli tiegħek ma jistgħux jissottomettu.

Estendi faċilment il-messaġġ ta' twissija standard b'żewġ klassijiet fakultattivi: .alert-blockgħal aktar ikkuttunar u kontrolli tat-test u .alert-headinggħal intestatura li tqabbel.

Twissija!

L-aħjar iċċekkja lilek innifsek, m'intix qed tfittex wisq tajjeb. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "blokk ta' twissija" >
  2. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > Twissija! </h4>
  4. L-aħjar iċċekkja lilek innifsek, m'intix...
  5. </div>

Alternattivi kuntestwali Żid klassijiet fakultattivi biex tibdel il-konnotazzjoni ta' twissija

Żball jew periklu

Oh snap! Ibdel ftit affarijiet u erġa' pprova ssottometti.
  1. <div class = "twissija twissija-żball" >
  2. ...
  3. </div>

Suċċess

Proset! Inti taqra b'suċċess dan il-messaġġ ta 'twissija importanti.
  1. <div class = "twissija-suċċess" >
  2. ...
  3. </div>

Informazzjoni

Irjus up! Din it-twissija teħtieġ l-attenzjoni tiegħek, iżda mhix super importanti.
  1. <div class = "twissija twissija-info" >
  2. ...
  3. </div>

Eżempji u markup

Bażiku

Barra tal-progress default bi gradjent vertikali.

  1. <div class = "progress" >
  2. <div class = "bar"
  3. stil = " wisa : 60 %; " ></div>
  4. </div>

Strixxat

Juża gradjent biex joħloq effett strixxat (l-ebda IE).

  1. <div class = "progress progress-striped" >
  2. <div class = "bar"
  3. stil = " wisa : 20 %; " ></div>
  4. </div>

Animati

Jieħu l-eżempju strixxat u janimah (l-ebda IE).

  1. <div class = "progress progress-striped
  2. attiv" >
  3. <div class = "bar"
  4. stil = " wisa : 40 %; " ></div>
  5. </div>

Għażliet u appoġġ għall-browser

Kuluri addizzjonali

Il-vireg tal-progress jużaw xi wħud mill-istess buttuna u klassijiet ta 'twissija għal stili konsistenti.

Bars strixxati

Simili għall-kuluri solidi, għandna varjati strixxi progress bars.

Imġieba

Il-vireg tal-progress jużaw tranżizzjonijiet CSS3, għalhekk jekk taġġusta dinamikament il-wisa 'permezz ta' javascript, din terġa' tbiddel bla xkiel.

Jekk tuża l- .activeklassi, il- .progress-stripedvireg tal-progress tiegħek janimaw l-istrixxi mix-xellug għal-lemin.

Appoġġ għall-browser

Il-vireg tal-progress jużaw gradjenti, tranżizzjonijiet u animazzjonijiet CSS3 biex jiksbu l-effetti kollha tagħhom. Dawn il-karatteristiċi mhumiex appoġġjati f'IE7-9 jew verżjonijiet anzjani ta' Firefox.

Opera u IE ma jappoġġjawx animazzjonijiet f'dan iż-żmien.

Bjar

Uża l-bir bħala effett sempliċi fuq element biex tagħtih effett inset.

Ara, jien fil-bir!
  1. <div class = "tajjeb" >
  2. ...
  3. </div>

Agħlaq l-ikona

Uża l-ikona ġenerika tal-qrib biex tiċħad kontenut bħal modals u twissijiet.

  1. <button class = "qrib" > × </button>

L-apparati tal-iOS jeħtieġu href="#" għall-avvenimenti tal-ikklikkja jekk pjuttost tuża ankra.

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