Alkatrészek

Több tucat újrafelhasználható összetevő van beépítve a Bootstrapba, amelyek navigációt, figyelmeztetéseket, felugró ablakokat és még sok mást biztosítanak.

Gombcsoportok

Gombcsoportok használatával több gombot egyetlen összetett komponensként egyesíthet. Építsd fel őket elemek sorozatával <a>vagy <button>elemekkel.

Legjobb gyakorlatok

A gombcsoportok és eszköztárak használatához a következő irányelveket javasoljuk:

  • Mindig ugyanazt az elemet használja egyetlen gombcsoportban, <a>vagy <button>.
  • Ne keverje össze a különböző színű gombokat ugyanabban a gombcsoportban.
  • Használjon ikonokat a szöveg mellett vagy helyett, de ügyeljen arra, hogy adott esetben szerepeltessen alternatív szöveget és címet.

A kapcsolódó gombcsoportokat legördülő menükkel (lásd alább) külön kell előhívni, és mindig tartalmazniuk kell egy legördülő listát a tervezett viselkedés jelzésére.

Alapértelmezett példa

Így keres a HTML egy szabványos gombcsoportot, amely horgonycímke gombokkal épül fel:

  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>

Eszköztár példa

Kombinálja a készleteket a- <div class="btn-group">ba az <div class="btn-toolbar">összetettebb összetevőkért.

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

Checkbox és rádió ízek

A gombcsoportok rádióként is működhetnek, ahol csak egy gomb lehet aktív, vagy jelölőnégyzetként, ahol tetszőleges számú gomb lehet aktív. Ehhez tekintse meg a Javascript dokumentumokat .

Szerezd meg a javascriptet »

Legördülő menük gombcsoportokban

Fel a fejjel! .btn-groupA megfelelő megjelenítés érdekében a legördülő gombokat külön-külön be kell csomagolni a sajátjukba .btn-toolbar.

Gombok legördülő menüi

Áttekintés és példák

Bármelyik gombbal indíthat el egy legördülő menüt úgy, hogy elhelyezi a menüben, .btn-groupés megadja a megfelelő menüjelölést.

Példa jelölésre

A gombcsoportokhoz hasonlóan a jelölésünk is normál gombjelölést használ, de néhány kiegészítéssel finomítja a stílust és támogatja a Bootstrap legördülő jQuery beépülő modulját.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "legördülő" href = "#" >
  3. Akció
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "legördülő menü" >
  7. <!-- legördülő menü hivatkozásai -->
  8. </ul>
  9. </div>

Minden gombmérettel működik

A gombok legördülő menüi bármilyen méretben működnek. a gombok mérete .btn-large, .btn-small, vagy .btn-mini.

Javascript szükséges

A gombok legördülő menüihez a Bootstrap legördülő bővítmény szükséges.

Egyes esetekben – például a mobileszközökön – a legördülő menük kinyúlnak a nézetablakon kívülre. Az igazítást manuálisan vagy egyéni javascript segítségével kell megoldania.


Split gomb legördülő menük

Áttekintés és példák

A gombcsoport stílusokra és jelölésekre építve könnyen létrehozhatunk egy osztott gombot. Az osztott gombok bal oldalon egy szabványos művelet, a jobb oldalon pedig egy legördülő kapcsoló található kontextuális hivatkozásokkal.

Méretek

.btn-miniHasználja a , .btn-smallvagy az extra gombosztályokat a .btn-largeméretezéshez.

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "legördülő menü jobbra húzása" >
  4. <!-- legördülő menü hivatkozásai -->
  5. </ul>
  6. </div>

Példa jelölésre

Kibővítjük a normál gombok legördülő menüit, hogy egy második gombműveletet biztosítsunk, amely külön legördülő menüként működik.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Művelet </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "legördülő menü" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "legördülő menü" >
  7. <!-- legördülő menü hivatkozásai -->
  8. </ul>
  9. </div>

Legördülő menük

A legördülő menük alulról felfelé is válthatók, ha egyetlen osztályt adunk a közvetlen szülőhöz .dropdown-menu. Megfordítja az irányt, .caretés áthelyezi magát a menüt, hogy alulról felfelé mozogjon, ne felülről lefelé.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Leejt </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "legördülő menü" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "legördülő menü" >
  7. <!-- legördülő menü hivatkozásai -->
  8. </ul>
  9. </div>

Többkon oldalszámozás

Mikor kell használni

Az Rdio által ihletett, rendkívül leegyszerűsített és minimális stílusú oldalszámozás, amely nagyszerű alkalmazásokhoz és keresési eredményekhez. A nagy blokkot nehéz kihagyni, könnyen méretezhető, és nagy kattintási területeket biztosít.

Állítólagos oldallinkek

A hivatkozások testreszabhatók, és számos körülmények között működnek a megfelelő osztályozással. .disableda nem kattintható hivatkozásokhoz és .activeaz aktuális oldalhoz.

Rugalmas igazítás

Adjon hozzá két választható osztály egyikét a lapozási hivatkozások igazításának módosításához: .pagination-centeredés .pagination-right.

Példák

Az alapértelmezett lapozási összetevő rugalmas, és számos változatban működik.

Jelölés

A lapozás <div>csak egy <ul>.

  1. <div class = "oldalszámozás" >
  2. <ul>
  3. <li><a href = "#" > Előző </a></li>
  4. <li class = "aktív" >
  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 = "#" > Következő </a></li>
  11. </ul>
  12. </div>

Pager Gyors előző és következő hivatkozásokért

A lapozóról

A lapozó komponens hivatkozások halmaza az egyszerű lapozáshoz, könnyű jelöléssel és még könnyebb stílusokkal. Nagyszerű egyszerű webhelyekhez, például blogokhoz vagy magazinokhoz.

Opcionális letiltott állapot

A személyhívó hivatkozások szintén az oldalszámozás általános .disabledosztályát használják.

Alapértelmezett példa

Alapértelmezés szerint a lapozó központosítja a hivatkozásokat.

  1. <ul class = "lapozó" >
  2. <li>
  3. <a href = "#" > Előző </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Következő </a>
  7. </li>
  8. </ul>

Igazított linkek

Alternatív megoldásként az egyes hivatkozásokat az oldalakhoz igazíthatja:

  1. <ul class = "lapozó" >
  2. <li class = "előző" >
  3. <a href = "#" > Régebbi </a>
  4. </li>
  5. <li class = "következő" >
  6. <a href = "#" > Újabb → </a>
  7. </li>
  8. </ul>
Címkék Jelölés
Alapértelmezett <span class="label">Default</span>
Siker <span class="label label-success">Success</span>
Figyelem <span class="label label-warning">Warning</span>
Fontos <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Inverz <span class="label label-inverse">Inverse</span>

Ról ről

A jelvények kicsi, egyszerű alkatrészek, amelyek valamilyen mutatót vagy számot jelenítenek meg. Általában megtalálhatók az e-mail kliensekben, például a Mail.app alkalmazásban, vagy mobilalkalmazásokban push értesítésekhez.

Elérhető osztályok

Név Példa Jelölés
Alapértelmezett 1 <span class="badge">1</span>
Siker 2 <span class="badge badge-success">2</span>
Figyelem 4 <span class="badge badge-warning">4</span>
Fontos 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Inverz 10 <span class="badge badge-inverse">10</span>

Hős egység

A Bootstrap egy könnyű, rugalmas összetevőt, úgynevezett hősegységet biztosít a webhely tartalmának bemutatásához. Jól működik marketinges és tartalomigényes webhelyeken.

Jelölés

Csomagolja a tartalmat egy divlike-ba, így:

  1. <div class = "hősegység" >
  2. <h1> Címsor </h1>
  3. <p> Címsor </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. Tudj meg többet
  7. </a>
  8. </p>
  9. </div>

Helló Világ!

Ez egy egyszerű hős egység, egy egyszerű jumbotron-stílusú komponens, amely felhívja a figyelmet a kiemelt tartalmakra vagy információkra.

Tudj meg többet

Oldalfejléc

Egy egyszerű héj az h1oldalon lévő tartalom szakaszainak megfelelő szétválasztásához és szegmentálásához. Használhatja az h1alapértelmezett smallelemet, valamint a legtöbb egyéb összetevőt (további stílusokkal).

  1. <div class = "oldalfejléc" >
  2. <h1> Példaoldal fejléc </h1>
  3. </div>

Alapértelmezett miniatűrök

Alapértelmezés szerint a Bootstrap bélyegképei úgy vannak kialakítva, hogy a linkelt képeket minimális jelöléssel jelenítsék meg.

Nagymértékben testreszabható

Egy kis extra jelöléssel bármilyen HTML-tartalom, például címsor, bekezdés vagy gomb hozzáadható miniatűrökhöz.

  • Miniatűr címke

    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.

    Akció Akció

  • Miniatűr címke

    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.

    Akció Akció

Miért érdemes miniatűröket használni?

A miniatűrök (korábban .media-grida v1.4-ig) kiválóan alkalmasak fotók vagy videók rácsainak, képkeresési eredményeknek, kiskereskedelmi termékeknek, portfólióknak és még sok másnak. Lehetnek linkek vagy statikus tartalom.

Egyszerű, rugalmas jelölés

A miniatűrök jelölése egyszerű – ula tetszőleges számú lielemből elegendő. Ezenkívül rendkívül rugalmas, bármilyen típusú tartalmat lehetővé tesz, csak egy kicsit több jelöléssel a tartalom becsomagolásához.

Rács oszlopméreteket használ

Végül a miniatűrök összetevő meglévő rácsrendszer-osztályokat – például .span2vagy .span3– használja a bélyegképek méretének szabályozására.

A jelölés

Amint azt korábban említettük, a miniatűrök szükséges jelölése könnyű és egyértelmű. Íme egy pillantás a hivatkozott képek alapértelmezett beállítására :

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

A bélyegképekben szereplő egyéni HTML-tartalom esetén a jelölés kissé módosul. Ahhoz, hogy bárhol engedélyezzük a blokk szintű tartalmat, lecseréljük <a>egy <div>hasonlóra:

  1. <ul class = "bélyegképek" >
  2. <li class = "span3" >
  3. <div class = "bélyegkép" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Indexkép címke </h5>
  6. <p> Indexkép felirat itt... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

További példák

Fedezze fel az összes lehetőséget a rendelkezésre álló különböző rácsosztályokkal. Különböző méreteket is keverhet.

Könnyű alapbeállítások

Átírt alaposztály

A Bootstrap 2-vel leegyszerűsítettük az alaposztályt .alert: .alert-message. Csökkentettük a minimálisan szükséges jelölést <p>is – alapértelmezés szerint nem kötelező, csak a külső <div>.

Egyetlen figyelmeztető üzenet

A kevesebb kóddal rendelkező, tartósabb összetevő érdekében eltávolítottuk a blokkolt riasztások megkülönböztető megjelenését, az üzeneteket, amelyek több kitöltéssel és általában több szöveggel vannak ellátva. Az osztály is erre változott .alert-block.


Remekül megy javascripttel

A Bootstrap egy nagyszerű jQuery beépülő modullal érkezik, amely támogatja a figyelmeztető üzeneteket, így azok elvetése gyors és egyszerű.

Szerezze be a bővítményt »

Példa figyelmeztetések

Csomagolja az üzenetet és az opcionális bezárási ikont egy div-be az egyszerű osztály segítségével.

Figyelem! A legjobb, ha megnézed magad, nem nézel ki túl jól.
  1. <div class = "figyelmeztetés" >
  2. <button class = "close" data-dismiss = "alert" > × </button>
  3. <strong> Figyelem! </strong> A legjobb, ha megnézed magad, nem nézel ki túl jól.
  4. </div>

Fel a fejjel! Az iOS-eszközök megkövetelik href="#"a riasztások elvetését. Ügyeljen arra, hogy tartalmazza azt és az adatattribútumot a horgonyzárási ikonokhoz. Alternatív megoldásként használhat egy <button>adat attribútumot tartalmazó elemet, amelyet a dokumentumainkhoz választottunk. A használatakor <button>bele kell foglalnia, type="button"különben az űrlapokat nem lehet elküldeni.

Könnyedén bővítheti a szabványos figyelmeztető üzenetet két opcionális osztállyal: .alert-blocktöbb kitöltési és szöveges vezérlőelemért, valamint .alert-headinga megfelelő címsorért.

Figyelem!

A legjobb, ha megnézed magad, nem nézel ki túl jól. 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 = "alert-heading" > Figyelem! </h4>
  4. A legjobb, ha megnézed magad, nem vagy...
  5. </div>

Kontextus szerinti alternatívák Adjon hozzá opcionális osztályokat a figyelmeztetések konnotációjának megváltoztatásához

Hiba vagy veszély

Ajjaj! Módosítson néhány dolgot, és próbálja meg újra elküldeni.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Siker

Szép munka! Sikeresen elolvasta ezt a fontos figyelmeztető üzenetet.
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

Információ

Fel a fejjel! Ez a figyelmeztetés figyelmet igényel, de nem túl fontos.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Példák és jelölések

Alapvető

Alapértelmezett folyamatjelző függőleges színátmenettel.

  1. <div class = "haladás" >
  2. <div class = "bar"
  3. style = " szélesség : 60 %; " ></div>
  4. </div>

Csíkos

Színátmenetet használ a csíkos hatás létrehozásához (nincs IE).

  1. <div class = "progress progress-striped" >
  2. <div class = "bar"
  3. style = " szélesség : 20 %; " ></div>
  4. </div>

Élénk

A csíkos példát veszi és animálja (nincs IE).

  1. <div class = "haladás előrehaladási csíkos
  2. aktív" >
  3. <div class = "bar"
  4. style = " szélesség : 40 %; " ></div>
  5. </div>

Beállítások és böngésző támogatás

További színek

A folyamatjelző sávok ugyanazokat a gombokat és riasztási osztályokat használják a konzisztens stílusok érdekében.

Csíkos rudak

Az egyszínű színekhez hasonlóan változatos csíkos folyamatjelző sávokat is kínálunk.

Viselkedés

A folyamatjelző sávok CSS3 átmeneteket használnak, így ha dinamikusan állítja be a szélességet javascripten keresztül, simán átméreteződik.

Ha használja az .activeosztályt, a .progress-stripedfolyamatjelző sávok balról jobbra mozgatják a csíkokat.

Böngésző támogatás

A folyamatjelző sávok CSS3 színátmeneteket, átmeneteket és animációkat használnak az összes hatás eléréséhez. Ezeket a funkciókat a Firefox IE7-9 vagy régebbi verziói nem támogatják.

Az Opera és az IE jelenleg nem támogatja az animációkat.

Wells

Használja a kutat egyszerű effektusként egy elemen, hogy beilleszthető hatást adjon.

Nézd, egy kútban vagyok!
  1. <div class = "jól" >
  2. ...
  3. </div>

ikon bezárása

Használja az általános bezárás ikont a tartalom, például a módok és figyelmeztetések elvetéséhez.

  1. <button class = "bezárás" > × </button>

Az iOS-eszközökön a href="#" jelre van szükség a kattintási eseményekhez, ha inkább horgonyzót használ.

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