Több tucat újrafelhasználható alkatrész, amely navigációt, riasztásokat, felugró ablakokat és egyebeket biztosít.
Átkapcsolható, kontextuális menü a hivatkozások listájának megjelenítéséhez. Interaktívvá tettük a legördülő JavaScript beépülő modullal .
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >
- <li><a tabindex = "-1" href = "#" > Művelet </a></li>
- <li><a tabindex = "-1" href = "#" > Egy másik művelet </a></li>
- <li><a tabindex = "-1" href = "#" > Valami más itt </a></li>
- <li class = "osztó" ></li>
- <li><a tabindex = "-1" href = "#" > Elválasztott link </a></li>
- </ul>
Ha csak a legördülő menüt nézzük, itt van a szükséges HTML. A legördülő menü eseményindítóját és a legördülő menüt a következőbe .dropdown
vagy egy másik elembe kell csomagolnia, amely deklarálja a position: relative;
. Ezután csak hozza létre a menüt.
- <div class = "legördülő menü" >
- <!-- Link vagy gomb a legördülő menü váltásához -->
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >
- <li><a tabindex = "-1" href = "#" > Művelet </a></li>
- <li><a tabindex = "-1" href = "#" > Egy másik művelet </a></li>
- <li><a tabindex = "-1" href = "#" > Valami más itt </a></li>
- <li class = "osztó" ></li>
- <li><a tabindex = "-1" href = "#" > Elválasztott link </a></li>
- </ul>
- </div>
Igazítsa a menüket jobbra, és adjon hozzá további szintű legördülő menüket.
Add hozzá .pull-right
a .dropdown-menu
jobbra igazításhoz a legördülő menüt.
- <ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >
- ...
- </ul>
Adjon hozzá egy további szintű legördülő menüt, amelyek az OS X-hez hasonlóan az egérmutatón jelennek meg, néhány egyszerű jelölési kiegészítéssel. Hozzáadhatja .dropdown-submenu
bármelyik li
meglévő legördülő menühöz az automatikus stílushoz.
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >
- ...
- <li class = "legördülő almenü" >
- <a tabindex = "-1" href = "#" > További lehetőségek </a>
- <ul class = "legördülő menü" >
- ...
- </ul>
- </li>
- </ul>
Az Rdio által ihletett egyszerű lapozá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.
- <div class = "oldalszámozás" >
- <ul>
- <li><a href = "#" > Előző </a></li>
- <li><a href = "#" > 1 </a></li>
- <li><a href = "#" > 2 </a></li>
- <li><a href = "#" > 3 </a></li>
- <li><a href = "#" > 4 </a></li>
- <li><a href = "#" > Következő </a></li>
- </ul>
- </div>
A linkek testreszabhatók a különböző körülményekhez. Használja .disabled
a nem kattintható hivatkozásokhoz és .active
az aktuális oldal jelzéséhez.
- <div class = "oldalszámozás" >
- <ul>
- <li class = "letiltva" ><a href = "#" > Előző </a></li>
- <li class = "aktív" ><a href = "#" > 1 </a></li>
- ...
- </ul>
- </div>
Opcionálisan kicserélheti az aktív vagy letiltott horgonyokat fesztávokra, hogy eltávolítsa a kattintási funkciót a tervezett stílusok megtartása mellett.
- <div class = "oldalszámozás" >
- <ul>
- <li class = "letiltva" ><span> Előző </span></li>
- <li class = "aktív" ><span> 1 </span></li>
- ...
- </ul>
- </div>
Adja hozzá a két választható osztály egyikét az oldalszámozási hivatkozások igazításának módosításához: .pagination-centered
és .pagination-right
.
- <div class = "oldalszámozás-központú" >
- ...
- </div>
- <div class = "oldalszámozás jobboldali" >
- ...
- </div>
Gyors előző és következő hivatkozások az egyszerű lapozási megvalósításokhoz könnyű jelölésekkel és stílusokkal. Nagyszerű egyszerű webhelyekhez, például blogokhoz vagy magazinokhoz.
Alapértelmezés szerint a lapozó központosítja a hivatkozásokat.
- <ul class = "lapozó" >
- <li><a href = "#" > Előző </a></li>
- <li><a href = "#" > Következő </a></li>
- </ul>
Alternatív megoldásként az egyes hivatkozásokat az oldalakhoz igazíthatja:
- <ul class = "lapozó" >
- <li class = "előző" >
- <a href = "#" > ← Régebbi </a>
- </li>
- <li class = "következő" >
- <a href = "#" > Újabb → </a>
- </li>
- </ul>
A személyhívó hivatkozások az oldalszámozás általános .disabled
segédprogram-osztályát is használják.
- <ul class = "lapozó" >
- <li class = "előző letiltva" >
- <a href = "#" > ← Régebbi </a>
- </li>
- ...
- </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> |
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> |
Könnyű, rugalmas összetevő a webhely kulcsfontosságú tartalmának megjelenítéséhez. Jól működik marketinges és tartalomigényes webhelyeken.
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.
- <div class = "hősegység" >
- <h1> Címsor </h1>
- <p> Címsor </p>
- <p>
- <a class = "btn btn-primary btn-large" >
- Tudj meg többet
- </a>
- </p>
- </div>
Egy egyszerű héj az h1
oldalon lévő tartalom szakaszainak megfelelő szétválasztásához és szegmentálásához. Használhatja az h1
alapértelmezett small
elemet, valamint a legtöbb egyéb összetevőt (további stílusokkal).
- <div class = "oldalfejléc" >
- <h1> Példa oldal fejlécére <small> A fejléc alszövege </small></h1>
- </div>
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.
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.
A miniatűrök (korábban .media-grid
a 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.
A miniatűrök jelölése egyszerű – ul
a tetszőleges számú li
elembő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.
Végül a miniatűrök összetevő meglévő rácsrendszerosztályokat használ – például .span2
vagy.span3
– használja a bélyegképek méretének szabályozására.
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 :
- <ul class = "bélyegképek" >
- <li class = "span4" >
- <a href = "#" class = "bélyegkép" >
- <img src = "https://placehold.it/300x200" alt = "" >
- </a>
- </li>
- ...
- </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:
- <ul class = "bélyegképek" >
- <li class = "span4" >
- <div class = "bélyegkép" >
- <img src = "https://placehold.it/300x200" alt = "" >
- <h3> Indexkép címke </h3>
- <p> Indexkép felirat... </p>
- </div>
- </li>
- ...
- </ul>
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.
Csomagoljon be bármilyen szöveget és egy opcionális elvetés gombot az .alert
alapvető figyelmeztető üzenethez.
- <div class = "figyelmeztetés" >
- <button type = "button" class = "bezárás" data-dismiss = "figyelmeztetés" > × </button>
- <strong> Figyelem! </strong> A legjobb, ha megnézed magad, nem nézel ki túl jól.
- </div>
A Mobile Safari és a Mobile Opera böngészők az data-dismiss="alert"
attribútum mellett megkövetelik href="#"
a figyelmeztetések elvetését a <a>
címke használatakor.
- <a href = "#" class = "bezárás" data-dismiss = "figyelmeztetés" > × </a>
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.
- <button type = "button" class = "bezárás" data-dismiss = "figyelmeztetés" > × </button>
A riasztások gyors és egyszerű elvetéséhez használja a riasztások jQuery beépülő modulját.
Hosszabb üzenetek esetén növelje a figyelmeztető burkoló felső és alsó részének kitöltését a következővel: .alert-block
.
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.
- <div class = "alert alert-block" >
- <button type = "button" class = "bezárás" data-dismiss = "figyelmeztetés" > × </button>
- <h4> Figyelmeztetés! </h4>
- A legjobb, ha megnézed magad, nem vagy...
- </div>
Adjon hozzá opcionális osztályokat a figyelmeztetések konnotációjának megváltoztatásához.
- <div class = "alert alert-error" >
- ...
- </div>
- <div class = "alert alert-success" >
- ...
- </div>
- <div class = "alert alert-info" >
- ...
- </div>
Alapértelmezett folyamatjelző függőleges színátmenettel.
- <div class = "haladás" >
- <div class = "bar" style = " szélesség : 60 %; " ></div>
- </div>
Színátmenetet használ a csíkos hatás létrehozásához. Nem érhető el az IE7-8 alatt.
- <div class = "progress progress-striped" >
- <div class = "bar" style = " szélesség : 20 %; " ></div>
- </div>
Hozzáadás .active
a .progress-striped
csíkok jobbról balra animálásához. Nem érhető el az IE minden verziójában.
- <div class = "progress progress-striped active" >
- <div class = "bar" style = " szélesség : 40 %; " ></div>
- </div>
Helyezzen több rudat ugyanabba .progress
, hogy egymásra rakja őket.
- <div class = "haladás" >
- <div class = "bar bar-success" style = " szélesség : 35 %; " ></div>
- <div class = "bar bar-warning" style = " szélesség : 20 %; " ></div>
- <div class = "bar bar-danger" style = " szélesség : 10 %; " ></div>
- </div>
A folyamatjelző sávok ugyanazokat a gombokat és riasztási osztályokat használják a konzisztens stílusok érdekében.
- <div class = "progress progress-info" >
- <div class = "bar" style = " width : 20 % " ></div>
- </div>
- <div class = "haladás haladás-siker" >
- <div class = "bar" style = " width : 40 % " ></div>
- </div>
- <div class = "progress progress-warning" >
- <div class = "bar" style = " width : 60 % " ></div>
- </div>
- <div class = "haladás előrehaladás-veszély" >
- <div class = "bar" style = " width : 80 % " ></div>
- </div>
Az egyszínű színekhez hasonlóan változatos csíkos folyamatjelző sávokat is kínálunk.
- <div class = "progress progress-info progress-striped" >
- <div class = "bar" style = " width : 20 % " ></div>
- </div>
- <div class = "haladás progress-success progress-striped" >
- <div class = "bar" style = " width : 40 % " ></div>
- </div>
- <div class = "progress progress-warning progress-striped" >
- <div class = "bar" style = " width : 60 % " ></div>
- </div>
- <div class = "haladás előrehaladás-veszély haladás-csíkos" >
- <div class = "bar" style = " width : 80 % " ></div>
- </div>
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 Internet Explorer 10-nél és az Opera 12-nél korábbi verziók nem támogatják az animációkat.
Használja a kutat egyszerű effektusként egy elemen, hogy beilleszthető hatást adjon.
- <div class = "jól" >
- ...
- </div>
Szabályozhatja a párnázást és a lekerekített sarkokat két választható módosító osztállyal.
- <div class = "jól-nagyon" >
- ...
- </div>
- <div class = "jól-jól kicsi" >
- ...
- </div>
Használja az általános bezárás ikont a tartalom, például a módok és figyelmeztetések elvetéséhez.
- <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.
- <a class = "close" href = "#" > × </a>
Egyszerű, fókuszált kurzusok kis megjelenítési vagy viselkedési változtatásokhoz.
Lebegtessen egy elemet balra
- osztály = "balra húzás"
- . pull - bal {
- úszó : balra ;
- }
Lebegtessen egy elemet jobbra
- osztály = "jobbra húzás"
- . pull - jobb {
- úszó : jobb ;
- }
Módosítsa egy elem színét erre#999
- osztály = "némítva"
- . elnémított {
- szín : #999;
- }
float
Bármely elemen törölje a jelet
- class = "clearfix"
- . clearfix {
- * zoom : 1 ;
- &: előtt ,
- &: { után
- kijelző : asztal ;
- tartalom : "" ;
- }
- &: { után
- világos : mindkettő ;
- }
- }