Bootstrap

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 ta ' buttuni Ingħaqad mal-buttuni għal aktar funzjonalità bħal toolbar

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:

Xellug Nofsani Dritt 
  1. <div class = "btn-group" > 
  2.   <a class = "btn" href = "#" > 1 </a>  
  3.   <a class = "btn" href = "#" > 2 </a>  
  4.   <a class = "btn" href = "#" > 3 </a>  
  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 2 3 4
5 6 7
8 
  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 »

Irjus up

CSS għal gruppi ta 'buttuni jinsab f'fajl separat, button-groups.less.

Dropdowns tal- buttuni Menus dropdown kuntestwali mibnija fuq gruppi ta' buttuni

Dropdowns tal-buttuni

Uża kwalunkwe buttuna biex tiskatta menu dropdown billi tpoġġiha fi ħdan .btn-groupu tipprovdi l-markup xieraq tal-menu.

Azzjoni
Azzjoni
Periklu
Suċċess
Info

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

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>

Dropdowns tal-buttuna maqsuma

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.

Azzjoni
Azzjoni
Periklu
Suċċess
Info

Eżempju ta 'markup

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

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

Paġnar Żewġ għażliet għall-paging permezz tal-kontenut

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.

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 inline Ittikketta u annota t-test

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>

Komponenti tipografiċi Header tal-paġna u unità tal-eroj għas-segmentazzjoni tal-kontenut

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 h1biex tispazja b'mod xieraq u ssegmenta 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 = "page-haeder" > 
  2.   <h1> Eżempju ta' header tal-paġna </h1>
  3. </div>

Thumbnails Grids ta’ stampi, vidjows, test, u aktar

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

Twissijiet Stili għal messaġġi ta' suċċess, twissija u żball

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ġġja 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.   <a class = "close" data-dismiss = "allert" > × </a>  
  3.   <strong> Twissija! </strong> L-aħjar iċċekkja lilek innifsek, m'intix qed tfittex wisq tajjeb.
  4. </div>

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

Vireg tal-progress Għat-tagħbija, direzzjoni mill-ġdid, jew status ta 'azzjoni

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.

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

Animati

Jieħu l-eżempju strixxat u janimah.

  1. <div class = "progress progress-perikolu 
  2.      progress-striped 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 jutilizzaw xi wħud mill-istess ismijiet tal-klassi bħal buttuni u twissijiet għal stil simili.

  • .progress-info
  • .progress-success
  • .progress-danger

Alternattivament, tista 'tippersonalizza l-fajls LESS u roll kuluri u daqsijiet tiegħek.

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 CSS3, tranżizzjonijiet u animazzjonijiet biex jiksbu l-effetti kollha tagħhom. Dawn il-karatteristiċi mhumiex appoġġjati f'IE7-8 jew verżjonijiet anzjani ta' Firefox.

Opera ma tappoġġjax animazzjonijiet f'dan iż-żmien.

Mixxellanji Bjar, badges, u ikona mill-qrib

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. <a class = "qrib" > × </a>