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:

<div class = "btn-group" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</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.

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

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

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

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

<div class = "btn-group" > 
  ...
  <ul class = "legördülő menü jobbra húzása" > 
    <!-- legördülő menü hivatkozásai -->
  </ul>
</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.

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

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>

Erőteljes alaposztály

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.

Mikor kell használni

A lapok és tabletták nagyszerűek a tartalom egyes szakaszaihoz vagy a kapcsolódó tartalmak oldalai közötti navigáláshoz.

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.

Alaplapok

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

• itthon
• Profil
• üzenetek

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

• itthon
• Profil
• üzenetek

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

Hogyan rakjuk össze őket

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

• itthon
• Profil
• üzenetek

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

Halmozott tabletták

• itthon
• Profil
• üzenetek

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

A gazdag menük egyszerűvé teszik

A Bootstrap lapokon és tablettákon található legördülő menük rendkívül egyszerűek, és csak egy kis extra HTML-t és egy könnyű jQuery beépülő modult igényelnek.

Nyissa meg a Javascript oldalt, és olvassa el a Bootstrap inicializálási legördülő menüiről szóló dokumentumokat.

Lapok legördülő menükkel

• itthon
• Segítség
• Ledob
  • Akció
  • Újabb akció
  • Itt még valami
  • Elválasztott link

<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

• itthon
• Segítség
• Ledob
  • Akció
  • Újabb akció
  • Itt még valami
  • Elválasztott link

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

Alkalmazás stílusú navigáció

A navigációs listák egyszerű és könnyű módot kínálnak a navigációs hivatkozások csoportjainak létrehozására opcionális fejlécekkel. Legjobban olyan oldalsávokban használhatók, mint például a Finder az OS X rendszerben.

Szerkezetileg ugyanazokra az alapvető navigációs stílusokra épülnek, mint a lapok és a tabletták, így a használat és a testreszabás egyszerű.

Ikonokkal

A navigációs listák ikonokkal is könnyen felszerelhetők. Adja hozzá a megfelelő <i>címkét az osztályhoz, és kész.

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>

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" > 
    Lista fejléc
  </li>
  <li class = "aktív" > 
    <a href = "#" > Kezdőlap </a> 
  </li>
  <li>
    <a href = "#" > Könyvtár </a> 
  </li>
  ...
</ul>

Példa ikonokkal

Ugyanez a példa, csak <i>az ikonok címkéivel.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "ikonkönyv" ></i> 
      Könyvtár
    </a>
  </li>
  ...
</ul>

Amit tartalmaz

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.

A közöttük való váltás egyszerű, és csak nagyon kevés jelölést igényel.

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. További információ arról, hogyan keltheti életre a lapozható lapokat a javascript dokumentumok oldalán .

Szerezd meg a javascriptet →

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.

Jobbra vagy balra igazított fülek esetén csavarja be a .nav-tabsés .tab-contenta jelet .tabbable.

Egyszerű jelölés

A lapozható lapok használatához egy burkoló div-re, egy tabulátorkészletre és egy lapozható tartalompanelre van szükség.

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

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>

Navbar állványzat

A navigációs sávnak csak néhány div-re van szüksége ahhoz, hogy statikus vagy rögzített megjelenítéshez jól strukturálja.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "tároló" > 
      ...
    </div>
  </div>
</div>

Javítva a navigációs sáv

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.

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

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

Amikor felhelyezi a navigációs sávot, ne felejtse el figyelembe venni az alatta lévő rejtett területet. Adjon hozzá legalább 40 képpontos kitöltést a <body>. Ügyeljen arra, hogy ezt adja hozzá az alapvető Bootstrap CSS-hez és az opcionális reszponzív CSS-hez.

Márkanév

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>

Űrlapok a navigációs sávban

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" >  
</form>

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>

Választható reszponzív variáció

A felső sávban lévő tartalom mennyiségétől függően érdemes lehet alkalmazni a reszponzív beállításokat. Ehhez csomagolja be a navigációs tartalmat 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" > 
        <!-- .nav, .navbar-search, .navbar-form stb -->
      </div>
 
    </div>
  </div>
</div>

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>

Alkatrészek igazítása

Navigáció, keresési űrlap vagy szöveg igazításához 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 hozzáadása

A legördülő és legördülő menük hozzáadása a navigációhoz rendkívül egyszerű, de ehhez JavaScript-bővítményünk használata szükséges .

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

Szerezd meg a javascriptet →

Szöveg a navigációs sávban

Csomagolja be a szöveges karakterláncokat egy -be <.navbar-text>, általában egy <p>címkére a megfelelő vezetés és szín érdekében.

Miért használja őket

A navigációs navigáció arra szolgál, hogy megmutassa a felhasználóknak, hol tartózkodnak az alkalmazáson vagy a webhelyen belül, de nem az elsődleges navigációhoz. A leghatékonyabb használat érdekében tartsa szűkösen és tömören ezeket.

Példák

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

• itthon

• Kezdőlap /
• Könyvtár

• Kezdőlap /
• Könyvtár /
• Adat

Jelölés

A HTML a szabványos rendezetlen lista hivatkozásokkal.

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

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

<div class = "oldalszámozás" > 
  <ul>
    <li><a href = "#" > Előző </a></li> 
    <li class = "aktív" > 
      <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 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.

• Előző
• Következő

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

• ← Régebbi
• Újabb →

<ul class = "lapozó" > 
  <li class = "előző" > 
    <a href = "#" > ← Régebbi </a> 
  </li>
  <li class = "következő" > 
    <a href = "#" > Újabb → </a> 
  </li>
</ul>

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

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:

<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 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éldaoldal fejléc </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.

• 

  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 :

<ul class = "bélyegképek" > 
  <li class = "span3" > 
    <a href = "#" class = "bélyegkép" >  
      <img src = "https://placehold.it/260x180" 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 = "span3" > 
    <div class = "bélyegkép" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Indexkép címke </h5>
      <p> Indexkép felirat itt... </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.

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

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

<div class = "alert alert-block" > 
  <a class = "close" data-dismiss = "alert" href = "#" > × </a>   
  <h4 class = "alert-heading" > Figyelem! </h4> 
  A legjobb, ha megnézed magad, nem vagy...
</div>

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>

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 (nincs IE).

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

Élénk

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

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

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.

<div class = "jól" > 
  ...
</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ö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>