Példa

Á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>

Jelölés

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 .dropdownvagy 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>

Lehetőségek

Igazítsa a menüket jobbra, és adjon hozzá további szintű legördülő menüket.

A menük összehangolása

Add hozzá .pull-righta .dropdown-menujobbra igazításhoz a legördülő menüt.

<ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

Letiltott menüopciók

A hivatkozás letiltásához adja hozzá .disableda legördülő menü a eleméhez.<li>

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Normál link </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > Letiltott link </a></li>   
  <li><a tabindex = "-1" href = "#" > Egy másik link </a></li>  
</ul>

Almenük a legördülő menüben

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-submenubármelyik limeglé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>

Példák

Két alapvető lehetőség, valamint két konkrétabb változat.

Egy gombos csoport

Csomagoljon be egy gombsort a .btnkövetkezővel: .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > Bal </button> 
  <button class = "btn" > Középső </button> 
  <button class = "btn" > Jobb </button> 
</div>

Több gombcsoport

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

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

Függőleges gombcsoportok

Egy gombkészlet függőlegesen egymásra rakottnak tűnik, nem pedig vízszintesen.

<div class = "btn-group btn-group-vertical" > 
  ...
</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 .

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.

Á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.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "legördülő" href = "#" >   
    Akció
    <span class = "caret" ></span> 
  </a>
  <ul class = "legördülő menü" > 
    <!-- legördülő menü hivatkozásai -->
  </ul>
</div>

Minden gombmérettel működik

A gombok legördülő menüi bármilyen méretben működnek: .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

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.

<div class = "btn-group" > 
  <button class = "btn" > Művelet </button> 
  <button class = "btn dropdown-toggle" data-toggle = "legördülő menü" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "legördülő menü" > 
    <!-- legördülő menü hivatkozásai -->
  </ul>
</div>

Méretek

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

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Művelet </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "legördülő menü" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "legördülő menü" > 
    <!-- legördülő menü hivatkozásai -->
  </ul>
</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é.

<div class = "btn-group dropup" > 
  <button class = "btn" > Leejt </button> 
  <button class = "btn dropdown-toggle" data-toggle = "legördülő menü" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "legördülő menü" > 
    <!-- legördülő menü hivatkozásai -->
  </ul>
</div>

Könnyű alapértelmezések Ugyanaz a jelölés, különböző osztályok

Az itt található összes navigációs komponens – lapok, tabletták és listák – ugyanazt az alapjelölést és stílust használja az .navosztályon keresztül.

Alaplapok

Vegyen egy rendszeres <ul>hivatkozást, és adja hozzá .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li class = "aktív" > 
    <a href = "#" > Kezdőlap </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Alapvető tabletták

Vegyük ugyanazt a HTML-kódot, de használjuk .nav-pillshelyette:

<ul class = "nav nav-pills" > 
  <li class = "aktív" > 
    <a href = "#" > Kezdőlap </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Letiltott állapot

Bármely navigációs komponens (lapok, tabletták vagy listák) esetén adja hozzá .disableda szürke hivatkozásokat, és ne legyen lebegtetési effektus . A hivatkozások azonban továbbra is kattinthatók maradnak, hacsak nem távolítja el az hrefattribútumot. Alternatív megoldásként alkalmazhat egyéni JavaScriptet, hogy megakadályozza ezeket a kattintásokat.

<ul class = "nav nav-pills" > 
  ...
  <li class = "letiltva" ><a href = "#" > Kezdőlap </a></li>  
  ...
</ul>

Alkatrészek igazítása

A navigációs hivatkozások igazításához használja a .pull-leftvagy a .pull-rightsegédprogram osztályokat. Mindkét osztály hozzáad egy CSS float-ot a megadott irányban.

Egymásra rakható

Mivel a lapok és a tabletták alapértelmezés szerint vízszintesek, csak adjon hozzá egy második osztályt ( ) .nav-stacked, hogy függőlegesen halmozottan jelenjenek meg.

Halmozott lapok

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

Halmozott tabletták

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

Legördülő menük

Adjon hozzá legördülő menüket egy kis extra HTML-lel és a legördülő JavaScript beépülő modullal .

Lapok legördülő menükkel

<ul class = "nav nav-tabs" > 
  <li class = "legördülő menü" > 
    <a class = "dropdown-toggle" 
       data-toggle = "legördülő menü"
       href = "#" >
        Ledob
        <b class = "caret" ></b> 
      </a>
    <ul class = "legördülő menü" > 
      <!-- linkek -->
    </ul>
  </li>
</ul>

Tabletták legördülő menükkel

<ul class = "nav nav-pills" > 
  <li class = "legördülő menü" > 
    <a class = "dropdown-toggle" 
       data-toggle = "legördülő menü"
       href = "#" >
        Ledob
        <b class = "caret" ></b> 
      </a>
    <ul class = "legördülő menü" > 
      <!-- linkek -->
    </ul>
  </li>
</ul>

Nav listák

Egyszerű és egyszerű módja a navigációs hivatkozások csoportjainak felépítésének opcionális fejlécekkel. Legjobban olyan oldalsávokban használhatók, mint például a Finder az OS X rendszerben.

Példa navigációs listára

Készítsen egy listát a linkekről, és adja hozzá class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > Listafejléc </li> 
  <li class = "aktív" ><a href = "#" > Kezdőlap </a></li>  
  <li><a href = "#" > Könyvtár </a></li> 
  ...
</ul>

jegyzetHa egy navigációs listán belül szeretne beágyazni, vegye class="nav nav-list"fel bármelyik beágyazott elemre <ul>.

Vízszintes elválasztók

Vízszintes elválasztó hozzáadásához hozzon létre egy üres listaelemet az osztállyal .divider, például:

<ul class = "nav nav-list" > 
  ...
  <li class = "osztó" ></li> 
  ...
</ul>

Lapozható nav

Keltse életre lapjait egy egyszerű beépülő modullal, amellyel lapokon keresztül válthat a tartalmak között. A Bootstrap négy stílusban integrálja a lapozható lapokat: felső (alapértelmezett), jobb, alsó és bal oldali.

Lapozható példa

A lapok lapozhatóvá tételéhez hozzon létre egy .tab-paneegyedi azonosítót minden laphoz, és csomagolja be őket .tab-content.

<div class = "tabbable" > <!-- Csak a bal/jobb lapokhoz szükséges -->  
  <ul class = "nav nav-tabs" > 
    <li class = "aktív" ><a href = "#tab1" data-toggle = "tab" > 1. szakasz </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > 2. szakasz </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Az 1. szakaszban vagyok. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Üdvözlöm, a 2. részben vagyok. </p>
    </div>
  </div>
</div>

Elhalványul a lapokon

A lapok elhalványulásához adja hozzá .fademindegyikhez a .tab-pane.

jQuery beépülő modult igényel

Az összes lapozható lapot a mi könnyű jQuery beépülő modulunk működteti. Olvasson többet arról, hogyan keltheti életre a lapozható lapokat a JavaScript-dokumentumok oldalán .

Bármilyen irányba húzható

Fülek az alján

Változtassa meg a HTML sorrendjét, és adjon hozzá egy osztályt a lapok aljára helyezéséhez.

<div class = "lapozható lapok-alul" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Fülek a bal oldalon

Cserélje ki az osztályt, hogy a lapokat a bal oldalra helyezze.

<div class = "tabbable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Fülek a jobb oldalon

Cserélje ki az osztályt, hogy a lapokat a jobb oldalra helyezze.

<div class = "tabbable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Alapvető navigációs sáv

Kezdésként a navigációs sávok statikusak (nem rögzítve a tetejére), és támogatják a projekt nevét és az alapvető navigációt. Helyezzen el egyet egy tetszőleges ponton belül .container, amely beállítja a webhely és a tartalom szélességét.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Cím </a>  
    <ul class = "nav" > 
      <li class = "aktív" ><a href = "#" > Kezdőlap </a></li>  
      <li><a href = "#" > Link </a></li> 
      <li><a href = "#" > Link </a></li> 
    </ul>
  </div>
</div>

Navbar összetevők

Márka

A márka vagy projekt nevének megjelenítésére szolgáló egyszerű linkhez csak egy horgonycímke szükséges.

<a class = "brand" href = "#" > Projekt neve </a>  

Nav linkek

A navigációs elemek egyszerűen hozzáadhatók rendezetlen listákon keresztül.

<ul class = "nav" > 
  <li class = "aktív" > 
    <a href = "#" > Kezdőlap </a> 
  </li>
  <li><a href = "#" > Link </a></li> 
  <li><a href = "#" > Link </a></li> 
</ul>

Könnyen hozzáadhat elválasztókat a navigációs hivatkozásokhoz egy üres listaelem és egy egyszerű osztály segítségével. Csak add hozzá a linkek közé:

<ul class = "nav" > 
  ...
  <li class = "osztó-vertikális" ></li> 
  ...
</ul>

Űrlapok

Egy űrlap megfelelő stílusához és elhelyezéséhez a navigációs sávon belül adja hozzá a megfelelő osztályokat az alábbiak szerint. Alapértelmezett űrlap esetén a megfelelő igazításhoz adjon meg .navbar-formés vagy .pull-leftvagy ..pull-right

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
  <button type = "submit" class = "btn" > Küldés </button>  
</form>

Keresés űrlap

A személyre szabottabb keresési űrlaphoz adja hozzá .navbar-searcha formés .search-querya speciális stílusok beviteléhez a navigációs sávban.

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Keresés" >   
</form>

Alkatrészek igazítása

Igazítsa a navigációs hivatkozásokat, a keresési űrlapot vagy a szöveget, használja a .pull-leftvagy .pull-rightsegédprogram osztályokat. Mindkét osztály hozzáad egy CSS float-ot a megadott irányban.

Legördülő menük használata

Adjon hozzá legördülő listákat és legördülő listákat a navigációhoz egy kis jelöléssel és a legördülő JavaScript beépülő modullal .

<ul class = "nav" > 
  <li class = "legördülő menü" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "legördülő menü" >   
      fiók
      <b class = "caret" ></b> 
    </a>
    <ul class = "legördülő menü" > 
      ...
    </ul>
  </li>
</ul>

Látogassa meg a JavaScript legördülő menük dokumentációját a további jelölésekért és a legördülő menük meghívásával kapcsolatos információkért.

Szöveg

Törölje a szöveges karakterláncokat egy elembe a jellel .navbar-text, általában egy <p>címkén a megfelelő vezetés és szín érdekében.

Választható megjelenítési változatok

Rögzítse a navigációs sávot a nézetablak tetejére vagy aljára egy további osztály segítségével a legkülső diven, .navbar.

A tetejére rögzítve

Adja hozzá .navbar-fixed-top, és ne felejtse el figyelembe venni az alatta lévő rejtett területet úgy, hogy legalább 40 képpontot paddingad hozzá a <body>. Ügyeljen arra, hogy ezt adja hozzá az alapvető Bootstrap CSS-hez és az opcionális reszponzív CSS-hez.

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

Alulra rögzítve

Hozzáadás .navbar-fixed-bottomhelyett.

<div class = "navbar navbar-fixed-bottom" > 
  ...
</div>

Statikus felső navigációs sáv

Hozzon létre egy teljes szélességű navigációs sávot, amely az oldallal együtt görget a következővel: .navbar-static-top. Az .navbar-fixed-toposztálytól eltérően nem kell módosítania a kitöltést a body.

<div class = "navbar navbar-static-top" > 
  ...
</div>

Reszponzív navigációs sáv

Egy összecsukható érzékeny navigációs sáv megvalósításához csomagolja be a navigációs sáv tartalmát egy div-be .nav-collapse.collapse, és adja hozzá a navigációs sáv váltógombját .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "tároló" > 
 
      <!-- A .btn-navbar az összecsukott navigációs sáv tartalom kapcsolójaként használható -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Ne felejtse el hagyni a márkát, ha meg szeretné jeleníteni -->
      <a class = "brand" href = "#" > Projekt neve </a>  
 
      <!-- Minden, amit 940 képpont vagy annál kisebb felbontásban szeretne elrejteni, helyezze el ide -->
      <div class = "nav-collapse collapse" > 
        <!-- .nav, .navbar-search, .navbar-form stb -->
      </div>
 
    </div>
  </div>
</div>

Fordított variáció

Módosítsa a navigációs sáv megjelenését a hozzáadásával .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

Példák

Egyetlen példa, amely több oldalon is megjelenhet.

<ul class = "zsemlemorzsa" > 
  <li><a href = "#" > Kezdőlap </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Könyvtár </a> <span class = "divider" > / </span></li>   
  <li class = "aktív" > Adatok </li> 
</ul>

Szabványos oldalszámozás

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 = "#" > 5 </a></li> 
    <li><a href = "#" > Következő </a></li> 
  </ul>
</div>

Lehetőségek

Letiltott és aktív állapotok

A linkek testreszabhatók a különböző körülményekhez. Használja .disableda nem kattintható hivatkozásokhoz és .activeaz aktuális oldal jelzéséhez.

<div class = "oldalszámozás" > 
  <ul>
    <li class = "letiltva" ><a href = "#" > « </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> « </span></li> 
    <li class = "aktív" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Méretek

Nagyobb vagy kisebb oldalszámozásra vágyik? Adja hozzá .pagination-largea , .pagination-small, vagy .pagination-minia további méretekhez.

<div class = "oldalszámozás-nagy" > 
  <ul>
    ...
  </ul>
</div>
<div class = "oldalszámozás" > 
  <ul>
    ...
  </ul>
</div>
<div class = "oldalszámozás-kicsi" > 
  <ul>
    ...
  </ul>
</div>
<div class = "oldalszámozás-mini" > 
  <ul>
    ...
  </ul>
</div>

Igazítás

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>

Pager

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értelmezett példa

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>

Igazított linkek

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>

Opcionális letiltott állapot

A személyhívó hivatkozások az oldalszámozás általános .disabledsegé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

Jelvények

Könnyen összecsukható

Az egyszerű megvalósítás érdekében a címkék és jelvények egyszerűen összecsukódnak (a CSS :emptyválasztóján keresztül), ha nincs benne tartalom.

Hős egység

Könnyű, rugalmas összetevő a webhely kulcsfontosságú tartalmának megjelenítéséhez. Jól működik marketinges és tartalomigényes webhelyeken.

<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>

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).

<div class = "oldalfejléc" > 
  <h1> Példa oldal fejlécére <small> A fejléc alszövege </small></h1>
</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.

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.

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 :

<ul class = "bélyegképek" > 
  <li class = "span4" > 
    <a href = "#" class = "bélyegkép" >  
      <img data-src = "holder.js/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 data-src = "holder.js/300x200" alt = "" >  
      <h3> Indexkép címke </h3>
      <p> Indexkép felirat... </p>
    </div>
  </li>
  ...
</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.

Alapértelmezett figyelmeztetés

Csomagoljon be bármilyen szöveget és egy opcionális elvetés gombot az .alertalapvető 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>

Elvetés gombok

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>   

Riasztások elvetése JavaScripten keresztül

A riasztások gyors és egyszerű elvetéséhez használja a riasztások jQuery beépülő modulját.

Lehetőségek

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.

<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>

Kontextuális alternatívák

Adjon hozzá opcionális osztályokat a figyelmeztetések konnotációjának megváltoztatásához.

Hiba vagy veszély

<div class = "alert alert-error" > 
  ...
</div>

Siker

<div class = "alert alert-success" > 
  ...
</div>

Információ

<div class = "alert alert-info" > 
  ...
</div>

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

Alapvető

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

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

Csíkos

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>

Élénk

Hozzáadás .activea .progress-stripedcsí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>

Halmozott

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>

Lehetőségek

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.

<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>

Csíkos rudak

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>

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 Internet Explorer 10-nél és az Opera 12-nél korábbi verziók nem támogatják az animációkat.

Absztrakt objektumstílusok különféle típusú összetevők (például blogbejegyzések, tweetek stb.) létrehozásához, amelyek szöveges tartalom mellett balra vagy jobbra igazított képet tartalmaznak.

Alapértelmezett példa

Az alapértelmezett média lehetővé teszi egy médiaobjektum (képek, videó, hang) lebegtetését a tartalomblokk bal vagy jobb oldalán.

Média címsor

Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Média címsor

Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Média címsor

Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

<div class = "média" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Médiacímsor </h4> 
    ...
 
    <!-- Beágyazott médiaobjektum -->
    <div class = "média" > 
      ...
    </div>
  </div>
</div>

Médialista

Egy kis extra jelöléssel használhatja a médiát a belső listán (hasznos megjegyzésszálaknál vagy cikklistáknál).

<ul class = "médialista" > 
  <li class = "média" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Médiacímsor </h4> 
      ...
 
      <!-- Beágyazott médiaobjektum -->
      <div class = "média" > 
        ...
     </div>
    </div>
  </li>
</ul>

Wells

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

<div class = "jól" > 
  ...
</div>

Választható órák

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>

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.

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

Az iOS-eszközök megkövetelik a href="#"for click eseményt, ha inkább horgonyt szeretne használni.

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

Segítő osztályok

Egyszerű, fókuszált kurzusok kis megjelenítési vagy viselkedésbeli módosításokhoz.

.húzza-balra

Lebegtessen egy elemet balra

osztály = "balra húzás"

. pull - bal {
  úszó : balra ;
}

.húzd jobbra

Lebegtessen egy elemet jobbra

osztály = "jobbra húzás"

. pull - jobb {
  úszó : jobb ;
}

.tompított

Módosítsa egy elem színét erre#999

osztály = "némítva"

. elnémított {
  szín : #999; 
}

.clearfix

floatBármely elemen törölje a jelet

class = "clearfix"

. clearfix {
  * zoom : 1 ; 
  &: előtt ,
  &: { után
    kijelző : asztal ;
    tartalom :  "" ;
  }
  &: { után
    tiszta : mindkettő ;
  }
}