Komponentët

Dhjetra komponentë të ripërdorshëm janë ndërtuar në Bootstrap për të ofruar navigim, sinjalizime, popover dhe shumë më tepër.

Grupet e butonave

Përdorni grupet e butonave për të bashkuar shumë butona së bashku si një komponent i përbërë. Ndërtoni ato me një seri <a>ose <button>elemente.

Praktikat më të mira

Ne rekomandojmë udhëzimet e mëposhtme për përdorimin e grupeve të butonave dhe shiritave të veglave:

  • Përdorni gjithmonë të njëjtin element në një grup butonash të vetëm, <a>ose <button>.
  • Mos përzieni butona me ngjyra të ndryshme në të njëjtin grup butonash.
  • Përdorni ikona si shtesë ose në vend të tekstit, por sigurohuni që të përfshini tekstin alt dhe titullin aty ku është e përshtatshme.

Grupet e butonave të ndërlidhur me zbritje (shih më poshtë) duhet të thirren veçmas dhe të përfshijnë gjithmonë një skedë me rënie për të treguar sjelljen e synuar.

Shembulli i parazgjedhur

Ja se si duket HTML për një grup butonash standard të ndërtuar me butona të etiketave të ankorimit:

  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>

Shembull i shiritit të veglave

Kombinoni grupe <div class="btn-group">në një <div class="btn-toolbar">për komponentë më komplekse.

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

Kutia e kontrollit dhe shijet e radios

Grupet e butonave mund të funksionojnë gjithashtu si radio, ku vetëm një buton mund të jetë aktiv, ose kuti zgjedhjeje, ku çdo numër butonash mund të jetë aktiv. Shikoni dokumentet Javascript për këtë.

Merr javascript »

Dropdowns në grupet e butonave

Kokat lart! Butonat me zbritje duhet të mbështillen në mënyrë individuale .btn-groupbrenda një .btn-toolbarpër interpretim të duhur.

Zbritje të butonave

Vështrim i përgjithshëm dhe shembuj

Përdorni çdo buton për të aktivizuar një menu dropdown duke e vendosur atë brenda një .btn-groupdhe duke siguruar shënimin e duhur të menusë.

Shembull shënjimi

Ngjashëm me grupin e butonave, shënimi ynë përdor shënjimin e rregullt të butonave, por me një sërë shtesash për të përmirësuar stilin dhe për të mbështetur shtojcën jQuery me rënie të Bootstrap.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Veprimi
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "meny-dropdown" >
  7. <!-- lidhjet e menusë rënëse -->
  8. </ul>
  9. </div>

Punon me të gjitha madhësitë e butonave

Zbritja e butonave funksionon në çdo madhësi. madhësitë e butonave tuaj në .btn-large, .btn-small, ose .btn-mini.

Kërkon javascript

Zbritja e butonave kërkon që të funksionojë shtojca e lëshimit Bootstrap .

Në disa raste - si celulari - menytë rënëse do të shtrihen jashtë portit të shikimit. Ju duhet ta zgjidhni shtrirjen me dorë ose me javascript të personalizuar.


Zbritje të butonave të ndarjes

Vështrim i përgjithshëm dhe shembuj

Duke u bazuar në stilet dhe shënjimin e grupit të butonave, ne mund të krijojmë lehtësisht një buton ndarjeje. Butonat e ndarjes paraqesin një veprim standard në të majtë dhe një ndryshim në rënie në të djathtë me lidhje kontekstuale.

Përmasat

Përdorni klasat shtesë të butonave .btn-mini, .btn-smallose .btn-largepër madhësinë.

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "menyja rënëse tërhiqe-djathtas" >
  4. <!-- lidhjet e menusë rënëse -->
  5. </ul>
  6. </div>

Shembull shënjimi

Ne zgjerojmë në zbritjet normale të butonit për të siguruar një veprim të dytë të butonit që funksionon si një shkas i veçantë me rënie.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Veprimi </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "meny-dropdown" >
  7. <!-- lidhjet e menusë rënëse -->
  8. </ul>
  9. </div>

Menytë rënëse

Menytë rënëse mund të ndërrohen gjithashtu nga poshtë lart duke shtuar një klasë të vetme në prindin e menjëhershëm të .dropdown-menu. Do të kthejë drejtimin e .caretmenusë dhe do të ripozicionojë vetë menunë për të lëvizur nga poshtë lart në vend të lart poshtë.

  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 = "meny-dropdown" >
  7. <!-- lidhjet e menusë rënëse -->
  8. </ul>
  9. </div>

Pagimi me shumë faqe

Kur të përdoret

Faqezim jashtëzakonisht i thjeshtë dhe me stil minimal i frymëzuar nga Rdio, i shkëlqyeshëm për aplikacionet dhe rezultatet e kërkimit. Blloku i madh është i vështirë për t'u humbur, lehtësisht i shkallëzueshëm dhe ofron zona të mëdha klikimesh.

Lidhje të faqeve shtetërore

Lidhjet janë të personalizueshme dhe funksionojnë në një sërë rrethanash me klasën e duhur. .disabledpër lidhjet e paklikueshme dhe .activepër faqen aktuale.

Rreshtimi fleksibël

Shtoni njërën nga dy klasat opsionale për të ndryshuar shtrirjen e lidhjeve të faqes: .pagination-centereddhe .pagination-right.

Shembuj

Komponenti i parazgjedhur i faqezimit është fleksibël dhe funksionon në një sërë variacionesh.

Markup

I mbështjellë në një <div>, faqezim është vetëm një <ul>.

  1. <div class = "faqezim" >
  2. <ul>
  3. <li><a href = "#" > E mëparshme </a></li>
  4. <li class = "aktiv" >
  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 = "#" > Tjetra </a></li>
  11. </ul>
  12. </div>

Pager Për lidhje të shpejta të mëparshme dhe të ardhshme

Rreth pager-it

Komponenti i pager-it është një grup lidhjesh për implementime të thjeshta faqeshimi me shënime të lehta dhe stile edhe më të lehta. Është i shkëlqyeshëm për sajte të thjeshta si blogje ose revista.

Gjendja e çaktivizuar opsionale

Lidhjet e Pager gjithashtu përdorin .disabledklasën e përgjithshme nga pagination.

Shembulli i parazgjedhur

Si parazgjedhje, lidhjet përqendrojnë pager-in.

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#" > E mëparshme </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Tjetra </a>
  7. </li>
  8. </ul>

Lidhjet e rreshtuara

Përndryshe, ju mund të rreshtoni secilën lidhje në anët:

  1. <ul class = "pager" >
  2. <li class = "e mëparshme" >
  3. <a href = "#" > Më i vjetër </a>
  4. </li>
  5. <li class = "tjetër" >
  6. <a href = "#" > Më të reja → </a>
  7. </li>
  8. </ul>
Etiketat Markup
E paracaktuar <span class="label">Default</span>
Sukses <span class="label label-success">Success</span>
Paralajmërim <span class="label label-warning">Warning</span>
E rëndësishme <span class="label label-important">Important</span>
Informacion <span class="label label-info">Info</span>
Anasjelltas <span class="label label-inverse">Inverse</span>

Rreth

Distinktivët janë komponentë të vegjël dhe të thjeshtë për të shfaqur një lloj treguesi ose numërimi. Ato zakonisht gjenden në klientët e postës elektronike si Mail.app ose në aplikacionet celulare për njoftime shtytëse.

Klasat e disponueshme

Emri Shembull Markup
E paracaktuar 1 <span class="badge">1</span>
Sukses 2 <span class="badge badge-success">2</span>
Paralajmërim 4 <span class="badge badge-warning">4</span>
E rëndësishme 6 <span class="badge badge-important">6</span>
Informacion 8 <span class="badge badge-info">8</span>
Anasjelltas 10 <span class="badge badge-inverse">10</span>

Njësia heroike

Bootstrap ofron një komponent të lehtë dhe fleksibël të quajtur njësi heroike për të shfaqur përmbajtjen në faqen tuaj. Ajo funksionon mirë në faqet e marketingut dhe përmbajtjes së rëndë.

Markup

Mbështilleni përmbajtjen tuaj në një divmënyrë të ngjashme:

  1. <div class = "hero-njësi" >
  2. <h1> Titulli </h1>
  3. <p> Tagline </p>
  4. <p>
  5. <a class = "btn btn-primare btn-large" >
  6. Mëso më shumë
  7. </a>
  8. </p>
  9. </div>

Përshendetje Botë!

Kjo është një njësi e thjeshtë heroike, një komponent i thjeshtë i stilit jumbotron për të tërhequr vëmendje shtesë ndaj përmbajtjes ose informacionit të paraqitur.

Mëso më shumë

Kreu i faqes

Një predhë e thjeshtë për h1të ndarë dhe segmentuar në mënyrë të përshtatshme seksionet e përmbajtjes në një faqe. Mund të përdorë elementin h1e paracaktuar small, si dhe shumicën e komponentëve të tjerë (me stile shtesë).

  1. <div class = "page-header" >
  2. <h1> Shembull i kokës së faqes </h1>
  3. </div>

Miniaturat e parazgjedhura

Si parazgjedhje, miniaturat e Bootstrap janë krijuar për të shfaqur imazhe të lidhura me shënjimin minimal të kërkuar.

Shumë i personalizueshëm

Me pak shënim shtesë, është e mundur të shtoni çdo lloj përmbajtjeje HTML si tituj, paragrafë ose butona në miniaturë.

  • Etiketa e miniaturës

    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.

    Veprimi Veprimi

  • Etiketa e miniaturës

    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.

    Veprimi Veprimi

Pse të përdorni miniaturë

Miniaturat (më parë .media-gridderi në versionin 1.4) janë të shkëlqyera për rrjetet e fotografive ose videove, rezultatet e kërkimit të imazheve, produktet me pakicë, portofolet dhe shumë më tepër. Ato mund të jenë lidhje ose përmbajtje statike.

Shënim i thjeshtë, fleksibël

Shënimi i miniaturës është i thjeshtë - ulme çdo numër lielementësh është gjithçka që kërkohet. Është gjithashtu super fleksibël, duke lejuar çdo lloj përmbajtjeje me vetëm pak më shumë shënime për të mbështjellë përmbajtjen tuaj.

Përdor madhësitë e kolonave të rrjetit

Së fundi, komponenti i miniaturave përdor klasat ekzistuese të sistemit të rrjetit - si .span2ose .span3- për kontrollin e dimensioneve të miniaturave.

Shënimi

Siç u përmend më parë, shënimi i kërkuar për miniaturat është i lehtë dhe i drejtpërdrejtë. Ja një vështrim në konfigurimin e paracaktuar për imazhet e lidhura :

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

Për përmbajtjen e personalizuar HTML në miniaturë, shënimi ndryshon pak. Për të lejuar përmbajtjen e nivelit të bllokut kudo, ne e ndërrojmë atë <a>me një <div>si më poshtë:

  1. <ul class = "miniaturë" >
  2. <li class = "span3" >
  3. <div class = "miniaturë" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Etiketa e miniaturës </h5>
  6. <p> Titulli i miniaturës pikërisht këtu... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Më shumë shembuj

Eksploroni të gjitha opsionet tuaja me klasat e ndryshme të rrjetit të disponueshme për ju. Ju gjithashtu mund të përzieni dhe përshtatni madhësi të ndryshme.

Parazgjedhjet e lehta

Klasa bazë e rishkruar

Me Bootstrap 2, ne kemi thjeshtuar klasën bazë: .alertnë vend të .alert-message. Ne kemi ulur gjithashtu shënjimin minimal të kërkuar—jo <p>kërkohet si parazgjedhje, vetëm e jashtme <div>.

Mesazh i vetëm alarmues

Për një komponent më të qëndrueshëm me më pak kod, ne kemi hequr pamjen diferencuese për sinjalizimet e bllokut, mesazhet që vijnë me më shumë mbushje dhe zakonisht më shumë tekst. Klasa gjithashtu ka ndryshuar në .alert-block.


Shkon shkëlqyeshëm me Javascript

Bootstrap vjen me një shtesë të shkëlqyeshme jQuery që mbështet mesazhet alarmuese, duke e bërë heqjen e tyre të shpejtë dhe të lehtë.

Merr shtojcën »

Shembuj sinjalizimesh

Mbështillni mesazhin tuaj dhe një ikonë opsionale të mbylljes në një div me klasë të thjeshtë.

Paralajmërim! Kontrolloni më mirë veten, nuk po dukeni shumë mirë.
  1. <div class = "alarm" >
  2. <button class = "close" data-dismiss = "alert" > × </button>
  3. <strong> Paralajmërim! </strong> Kontrolloni më mirë veten, nuk po dukeni shumë mirë.
  4. </div>

Kokat lart! Pajisjet iOS kërkojnë një href="#"për heqjen e sinjalizimeve. Sigurohuni që ta përfshini atë dhe atributin e të dhënave për ikonat e mbylljes së ankorimit. Përndryshe, mund të përdorni një <button>element me atributin e të dhënave, të cilin ne kemi zgjedhur ta bëjmë për dokumentet tona. Kur përdorni <button>, ju duhet të përfshini type="button"ose formularët tuaj mund të mos dorëzohen.

Zgjate lehtësisht mesazhin standard të alarmit me dy klasa opsionale: .alert-blockpër më shumë kontrolle mbushjeje dhe teksti dhe .alert-headingpër një titull që përputhet.

Paralajmërim!

Kontrolloni më mirë veten, nuk po dukeni shumë mirë. Nulla vitae elit libero, një pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "alert-block" >
  2. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > Paralajmërim! </h4>
  4. Kontrolloni më mirë veten, nuk jeni...
  5. </div>

Alternativat kontekstuale Shtoni klasa opsionale për të ndryshuar konotacionin e një sinjalizimi

Gabim apo rrezik

Dreqin! Ndrysho disa gjëra dhe provo të dorëzosh sërish.
  1. <div class = "gabim alarmi i alarmit" >
  2. ...
  3. </div>

Sukses

Te lumte! Ju e lexoni me sukses këtë mesazh të rëndësishëm alarmi.
  1. <div class = "suksesi i alarmit" >
  2. ...
  3. </div>

Informacion

Kokat lart! Ky alarm kërkon vëmendjen tuaj, por nuk është shumë i rëndësishëm.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Shembuj dhe shënimi

bazë

Shiriti i parazgjedhur i përparimit me një gradient vertikal.

  1. <div class = "progres" >
  2. <div class = "bar"
  3. style = " gjerësia : 60 %; " ></div>
  4. </div>

Me vija

Përdor një gradient për të krijuar një efekt me shirita (pa IE).

  1. <div class = "progres progres-striped" >
  2. <div class = "bar"
  3. style = " gjerësia : 20 %; " ></div>
  4. </div>

I animuar

Merr shembullin me vija dhe e animon atë (pa IE).

  1. <div class = "progres progres-shirita
  2. aktive" >
  3. <div class = "bar"
  4. style = " gjerësi : 40 %; " ></div>
  5. </div>

Opsionet dhe mbështetja e shfletuesit

Ngjyra shtesë

Shiritat e progresit përdorin disa nga të njëjtin buton dhe klasa alarmi për stile të qëndrueshme.

Shufra me vija

Ngjashëm me ngjyrat e forta, ne kemi shirita të ndryshëm të përparimit me vija.

Sjellje

Shiritat e progresit përdorin tranzicione CSS3, kështu që nëse rregulloni në mënyrë dinamike gjerësinë përmes javascript, ajo do të ndryshojë pa probleme.

Nëse përdorni .activeklasën, .progress-stripedshiritat e përparimit tuaj do të animojnë shiritat nga e majta në të djathtë.

Mbështetja e shfletuesit

Shiritat e progresit përdorin gradientët, tranzicionet dhe animacionet CSS3 për të arritur të gjitha efektet e tyre. Këto veçori nuk mbështeten në IE7-9 ose në versionet më të vjetra të Firefox-it.

Opera dhe IE nuk mbështesin animacione në këtë moment.

Puset

Përdorni pusin si një efekt të thjeshtë në një element për t'i dhënë atij një efekt të futur.

Shiko, unë jam në një pus!
  1. <div class = "mirë" >
  2. ...
  3. </div>

Ikona e mbylljes

Përdorni ikonën e përgjithshme të mbylljes për të hequr përmbajtjen si modalet dhe sinjalizimet.

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

Pajisjet iOS kërkojnë një href="#" për ngjarjet e klikimeve nëse më mirë përdorni një spirancë.

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