Butongrupoj

Uzu butongrupojn por kunigi plurajn butonojn kune kiel unu kunmetitan komponanton. Konstruu ilin per serio de <a>aŭ <button>elementoj.

Plej bonaj praktikoj

Ni rekomendas la jenajn gvidliniojn por uzi butongrupojn kaj ilobretojn:

• Ĉiam uzu la saman elementon en ununura butongrupo, <a>aŭ <button>.
• Ne miksu butonojn de malsamaj koloroj en la sama butongrupo.
• Uzu ikonojn krom aŭ anstataŭ teksto, sed nepre inkluzivu alt- kaj titoltekston kie konvene.

Rilataj Butongrupoj kun falmenuoj (vidu malsupre) devus esti nomitaj aparte kaj ĉiam inkluzivu falmenuzon por indiki celitan konduton.

Defaŭlta ekzemplo

Jen kiel la HTML serĉas norman butongrupon konstruitan per ankraj etikedbutonoj:

<div class = "btn-grupo" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</div>

Ilobreto ekzemplo

Kombinu arojn <div class="btn-group">en a <div class="btn-toolbar">por pli kompleksaj komponantoj.

<div class = "btn-ilbreto" > 
  <div class = "btn-grupo" > 
    ...
  </div>
</div>

Markobutono kaj radio-gustoj

Butongrupoj ankaŭ povas funkcii kiel radioj, kie nur unu butono povas esti aktiva, aŭ markobutonoj, kie ajna nombro da butonoj povas esti aktivaj. Rigardu la Javascript-dokumentojn por tio.

Akiru la Javaskripton »

Dropdowns en butongrupoj

Atentu! Butonoj kun falmenuoj devas esti individue envolvitaj .btn-groupene de a .btn-toolbarpor taŭga bildigo.

Superrigardo kaj ekzemploj

Uzu ajnan butonon por ekigi falmenuon metante ĝin ene de a .btn-groupkaj disponigante la taŭgan menuan markadon.

Ekzempla markado

Simile al butongrupo, nia markado uzas regulan butonmarkadon, sed kun manpleno da aldonoj por rafini la stilon kaj subteni la dropdown jQuery kromprogramon de Bootstrap.

<div class = "btn-grupo" > 
  <a class = "btn dropdown-toggle" data-toggle = "menumenumo" href = "#" >   
    Ago
    <span class = "karto" ></span> 
  </a>
  <ul class = "falmenuo" > 
    <!-- ligiloj al falmenuo -->
  </ul>
</div>

Funkcias kun ĉiuj grandecoj de butonoj

Butonfalumoj funkcias je ajna grandeco. viaj butongrandoj al .btn-large, .btn-small, aŭ .btn-mini.

Postulas javaskripton

Butonaj falmenuoj postulas la Bootstrap falmenuman kromprogramon por funkcii.

En iuj kazoj—kiel poŝtelefono—falmenuoj etendiĝos ekster la vidfenestro. Vi devas solvi la vicigon permane aŭ per kutima javaskripto.

Superrigardo kaj ekzemploj

Konstruante sur la butongrupoj stiloj kaj markado, ni povas facile krei dividitan butonon. Dividitaj butonoj prezentas norman agon maldekstre kaj falmenuklavon dekstre kun kontekstaj ligiloj.

Grandecoj

Uzu la kromajn butonklasojn .btn-mini, .btn-smallaŭ .btn-largepor grandeco.

<div class = "btn-grupo" > 
  ...
  <ul class = "falmenuo tira-dekstre" > 
    <!-- ligiloj al falmenuo -->
  </ul>
</div>

Ekzempla markado

Ni plivastigas la normalajn butonajn falmenuojn por provizi duan butonan agon, kiu funkcias kiel aparta mena ellasilo.

<div class = "btn-grupo" > 
  <button class = "btn" > Ago </button> 
  <button class = "btn dropdown-toggle" data-toggle = "menumenumo" >  
    <span class = "karto" ></span> 
  </butono>
  <ul class = "falmenuo" > 
    <!-- ligiloj al falmenuo -->
  </ul>
</div>

Elŝutaj menuoj

Falmenuoj ankaŭ povas esti ŝanĝitaj de malsupre supren aldonante ununuran klason al la tuja gepatro de .dropdown-menu. Ĝi renversos la direkton de la .caretkaj repoziciigos la menuon mem por movi de malsupre supren anstataŭ de supre malsupren.

<div class = "btn-grupo forigo" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "menumenumo" >  
    <span class = "karto" ></span> 
  </butono>
  <ul class = "falmenuo" > 
    <!-- ligiloj al falmenuo -->
  </ul>
</div>

Potenca bazklaso

Ĉiuj nav-komponentoj ĉi tie—langetoj, piloloj kaj listoj— dividas la saman bazan markadon kaj stilojn tra la .navklaso.

Kiam uzi

Langetoj kaj piloloj estas bonegaj por sekcioj de enhavo aŭ navigado inter paĝoj de rilata enhavo.

Komponento vicigo

Por vicigi nav-ligilojn, uzu la .pull-leftaŭ .pull-rightutilajn klasojn. Ambaŭ klasoj aldonos CSS-flosilon en la specifita direkto.

Bazaj langetoj

Prenu ordinaran <ul>ligilojn kaj aldonu .nav-tabs:

• Hejmo
• Profilo
• Mesaĝoj

<ul class = "nav nav-tabs" > 
  <li class = "aktiva" > 
    <a href = "#" > Hejmo </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Bazaj piloloj

Prenu tiun saman HTML, sed uzu .nav-pillsanstataŭe:

• Hejmo
• Profilo
• Mesaĝoj

<ul class = "nav nav-pills" > 
  <li class = "aktiva" > 
    <a href = "#" > Hejmo </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Kiel stakigi ilin

Ĉar langetoj kaj piloloj estas horizontalaj defaŭlte, simple aldonu duan klason, .nav-stacked, por ke ili aspektu vertikale stakigitaj.

Stakitaj langetoj

• Hejmo
• Profilo
• Mesaĝoj

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

Stakitaj piloloj

• Hejmo
• Profilo
• Mesaĝoj

<ul class = "nav nav-piloloj nav-stakitaj" > 
  ...
</ul>

Riĉaj menuoj faciligis

Falmenuoj en Bootstrap-langetoj kaj piloloj estas tre facilaj kaj postulas nur iomete kroman HTML kaj malpezan jQuery-kromaĵon.

Iru al la Javascript-paĝo por legi la dokumentojn pri pravalorigo de falmenuoj en Bootstrap.

Langetoj kun falmenuoj

• Hejmo
• Helpu
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-tabs" > 
  <li class = "menuo" > 
    <a klaso = "falu-baskulo" 
       data-toggle = "menuo"
       href = "#" >
        Dropdown
        <b klaso = "karto" ></b> 
      </a>
    <ul class = "falmenuo" > 
      <!-- ligiloj -->
    </ul>
  </li>
</ul>

Piloloj kun falmenuoj

• Hejmo
• Helpu
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-pills" > 
  <li class = "menuo" > 
    <a klaso = "falu-baskulo" 
       data-toggle = "menuo"
       href = "#" >
        Dropdown
        <b klaso = "karto" ></b> 
      </a>
    <ul class = "falmenuo" > 
      <!-- ligiloj -->
    </ul>
  </li>
</ul>

Aplikstila navigado

Nav-listoj disponigas simplan kaj facilan manieron konstrui grupojn de nav-ligiloj kun laŭvolaj kaplinioj. Ili estas plej bone uzataj en flankmenuoj kiel la Finder en OS X.

Strukture, ili estas konstruitaj sur la samaj kernaj navstiloj kiel langetoj kaj piloloj, do uzado kaj personigo estas simplaj.

Kun ikonoj

Nav-listoj ankaŭ estas facile ekipeblaj per ikonoj. Aldonu la taŭgan <i>etikedon kun klaso kaj vi estas preta.

Horizontala disigilo

Aldonu horizontalan disigilon kreante malplenan listeron kun la klaso .divider, tiel:

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

Ekzempla navlisto

Prenu liston de ligiloj kaj aldonu class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-kapo" > 
    Listo kaplinio
  </li>
  <li class = "aktiva" > 
    <a href = "#" > Hejmo </a> 
  </li>
  <li>
    <a href = "#" > Biblioteko </a> 
  </li>
  ...
</ul>

Ekzemplo kun ikonoj

Sama ekzemplo, sed kun <i>etikedoj por ikonoj.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i klaso = "piktogramo" ></i> 
      Biblioteko
    </a>
  </li>
  ...
</ul>

Kio estas inkluzivita

Vivu viajn langetojn per simpla kromaĵo por ŝanĝi inter enhavo per langetoj. Bootstrap integras tabulajn langetojn en kvar stiloj: supre (defaŭlte), dekstre, malsupre kaj maldekstre.

Ŝanĝi inter ili estas facila kaj nur postulas ŝanĝi tre malmulte da markado.

Fade en langetoj

Por ke klapetoj fadiĝu, aldonu .fadeal ĉiu .tab-pane.

Postulas jQuery-aldonaĵon

Ĉiuj tabulaj langetoj funkcias per nia malpeza jQuery kromaĵo. Legu pli pri kiel vivigi tabulajn langetojn sur la paĝo pri javascript-dokumentoj .

Akiru la Javaskripton →

Tabula ekzemplo

Por fari langetojn tabeleblaj, kreu .tab-panekun unika ID por ĉiu langeto kaj envolvu ilin en .tab-content.

Por dekstre aŭ maldekstre vicigitaj langetoj, envolvu la .nav-tabskaj .tab-contenten .tabbable.

Simpla markado

Uzi tabulajn langetojn postulas envolvan div, aron da langetoj kaj aron da tabeleblaj paneloj de enhavo.

<div class = "tabbable" > <-- Bezonata nur por maldekstra/dekstra langetoj --> 
  <ul class = "nav nav-tabs" > 
    <li class = "aktiva" ><a href = "#tab1" data-toggle = "langeto" > Sekcio 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "langeto" > Sekcio 2 </a></li>  
  </ul>
  <div class = "tab-enhavo" > 
    <div class = "tab-fenestro aktiva" id = "langeto1" >  
      <p> Mi estas en Sekcio 1. </p>
    </div>
    <div class = "tab-paneo" id = "langeto2" >  
      <p> Saluton, mi estas en Sekcio 2. </p>
    </div>
  </div>
</div>

Langetoj sur la fundo

Turnu la ordon de la HTML kaj aldonu klason por meti langetojn malsupre.

<div class = "tabeblaj langetoj-malsupre" > 
  <div class = "tab-enhavo" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Langetoj maldekstre

Interŝanĝu la klason por meti langetojn maldekstre.

<div class = "tabulaj langetoj-maldekstre" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-enhavo" > 
    ...
  </div>
</div>

Langetoj dekstre

Interŝanĝu la klason por meti langetojn dekstre.

<div class = "tabulaj langetoj-dekstra" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-enhavo" > 
    ...
  </div>
</div>

Navbar skafaldaro

La navbar postulas nur kelkajn divs por bone strukturi ĝin por statika aŭ fiksa ekrano.

<div class = "navbaro" > 
  <div class = "navbar-interna" > 
    <div class = "ujo" > 
      ...
    </div>
  </div>
</div>

Riparita navbaro

Ripari la navbaron al la supro aŭ malsupro de la vidfenestro kun plia klaso sur la plej ekstera div, .navbar.

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

<div class = "navbar navbar-fiksa-fundo" > 
  ...
</div>

Kiam vi fiksas la navbaron, memoru prikalkuli la kaŝitan areon sube. Aldonu 40 px aŭ pli da kompletigo al la <body>. Nepre aldonu ĉi tion post la kerna Bootstrap CSS kaj antaŭ la laŭvola respondema CSS.

Komerca nomo

Simpla ligo por montri vian markon aŭ projektan nomon nur postulas ankro-etikedon.

<a klaso = "marko" href = "#" >  
  Nomo de projekto
</a>

Formoj en navbar

Por konvene stiligi kaj poziciigi formularon ene de la navbreto, aldonu la taŭgajn klasojn kiel montrite sube. Por defaŭlta formo, inkludu .navbar-formkaj aŭ .pull-leftaŭ .pull-rightpor ĝuste vicigi ĝin.

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
</form>

Por pli personecigita serĉformularo, aldonu .navbar-searchal la formkaj .search-queryal la enigo por specialigitaj stiloj en la navbaro.

<form class = "navbar-serĉo tiru-maldekstren" > 
  <input type = "text" class = "serĉo-demando" anstataŭilo = "Serĉo" >   
</form>

Laŭvola respondema variado

Depende de la kvanto de enhavo en via supra trinkejo, vi eble volas efektivigi la respondemajn elektojn. Por fari tion, envolvu vian navigan enhavon en enhavanta div, .nav-collapse.collapse, kaj aldonu la navbaran baskulon butonon, .btn-navbar.

<div class = "navbaro" > 
  <div class = "navbar-interna" > 
    <div class = "ujo" > 
 
      <!-- .btn-navbar estas uzata kiel baskulo por kolapsita navbar enhavo -->
      <a class = "btn btn-navbar" data-toggle = "kolapsi" data-target = ".nav-kolapso" >   
        <span class = "piktogramo" ></span> 
        <span class = "piktogramo" ></span> 
        <span class = "piktogramo" ></span> 
      </a>
 
      <!-- Nepre lasu la markon tie, se vi volas ke ĝi montru -->
      <a class = "brand" href = "#" > Nomo de projekto </a>  
 
      <!-- Ĉion, kion vi volas kaŝita je 940 px aŭ malpli, metu ĉi tie -->
      <div class = "nav-kolapso" > 
        <!-- .nav, .navbar-search, .navbar-form, ktp -->
      </div>
 
    </div>
  </div>
</div>

Nav-ligiloj

Nav-eroj estas simple aldoni per neordigitaj listoj.

<ul class = "nav" > 
  <li class = "aktiva" > 
    <a href = "#" > Hejmo </a> 
  </li>
  <li><a href = "#" > Ligo </a></li> 
  <li><a href = "#" > Ligo </a></li> 
</ul>

Vi povas facile aldoni disigilojn al viaj navigaciaj ligiloj kun malplena listo kaj simpla klaso. Nur aldonu ĉi tion inter ligiloj:

<ul class = "nav" > 
  ...
  <li class = "dividilo-vertikala" ></li> 
  ...
</ul>

Komponento vicigo

Por vicigi navigacion, serĉformon aŭ tekston, uzu la .pull-leftaŭ .pull-rightutilajn klasojn. Ambaŭ klasoj aldonos CSS-flosilon en la specifita direkto.

Aldonante falmenuojn

Aldoni falmenuojn kaj elŝutojn al la navigado estas tre simpla, sed postulas la uzon de nia Javaskripto-kromaĵo .

<ul class = "nav" > 
  <li class = "menuo" > 
    <a href = "#" 
          klaso = "falu-ŝaltilo"
          data-toggle = "menuo" >
          Konto
          <b klaso = "karto" ></b> 
    </a>
    <ul class = "falmenuo" > 
      ...
    </ul>
  </li>
</ul>

Akiru la Javaskripton →

Teksto en la navbaro

Envolvu ŝnurojn de teksto en <.navbar-text>, kutime sur <p>etikedo por taŭga gvidado kaj koloro.

Kial uzi ilin

Breadcrumb navigado estas uzata kiel maniero montri uzantojn kie ili estas ene de aplikaĵo aŭ retejo, sed ne por primara navigado. Konservu ilian uzon malabunda kaj konciza por esti plej efika.

Ekzemploj

Ununura ekzemplo montrita kiel ĝi povus esti montrata tra pluraj paĝoj.

• Hejmo

• Hejmo /
• Biblioteko

• Hejmo /
• Biblioteko /
• Datumoj

Markado

HTML estas via norma neordigita listo kun ligiloj.

<ul class = "panpeceto" > 
  <li>
    <a href = "#" > Hejmo </a> <span class = "dividilo" > / </span>   
  </li>
  <li>
    <a href = "#" > Biblioteko </a> <span class = "dividilo" > / </span>   
  </li>
  <li class = "aktiva" > Datumoj </li> 
</ul>

Kiam uzi

Ultra simplisma kaj minimume stilita paĝigo inspirita de Rdio, bonega por programoj kaj serĉrezultoj. La granda bloko estas malfacile maltrafi, facile skalebla kaj provizas grandajn klakajn areojn.

Ŝtataj paĝaj ligiloj

Ligiloj estas agordeblaj kaj funkcias en kelkaj cirkonstancoj kun la ĝusta klaso. .disabledpor neklakeblaj ligiloj kaj .activepor aktuala paĝo.

Fleksebla vicigo

Aldonu iun el du laŭvolaj klasoj por ŝanĝi la vicigon de paĝigaj ligiloj: .pagination-centeredkaj .pagination-right.

Ekzemploj

La defaŭlta paĝiga komponanto estas fleksebla kaj funkcias en kelkaj varioj.

Markado

Envolvita en <div>, paĝigo estas nur <ul>.

<div class = "paĝigo" > 
  <ul>
    <li><a href = "#" > Antaŭa </a></li> 
    <li class = "aktiva" > 
      <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 = "#" > Poste </a></li> 
  </ul>
</div>

Pri paĝilo

La paĝiga komponanto estas aro de ligiloj por simplaj paĝigaj efektivigoj kun malpeza markado kaj eĉ pli malpezaj stiloj. Ĝi estas bonega por simplaj retejoj kiel blogoj aŭ revuoj.

Laŭvola malfunkciigita ŝtato

Paĝligoj ankaŭ uzas la ĝeneralan .disabledklason de la paĝigo.

Defaŭlta ekzemplo

Defaŭlte, la paginador centras ligilojn.

• Antaŭa
• Poste

<ul class = "pagilo" > 
  <li>
    <a href = "#" > Antaŭa </a> 
  </li>
  <li>
    <a href = "#" > Sekva </a> 
  </li>
</ul>

Vicigitaj ligiloj

Alternative, vi povas vicigi ĉiun ligon al la flankoj:

• ← Pli malnova
• Pli nova →

<ul class = "pagilo" > 
  <li class = "antaŭa" > 
    <a href = "#" > ← Pli malnova </a> 
  </li>
  <li klaso = "sekva" > 
    <a href = "#" > Pli nova → </a> 
  </li>
</ul>

Pri

Insignoj estas malgrandaj, simplaj komponentoj por montri indikilon aŭ kalkulon de ia speco. Ili estas ofte trovitaj en retpoŝtaj klientoj kiel Mail.app aŭ en poŝtelefonaj programoj por puŝaj sciigoj.

Disponeblaj klasoj

Bootstrap provizas malpezan, flekseblan komponanton nomatan heroa unuo por montri enhavon en via retejo. Ĝi funkcias bone en merkatado kaj enhavo-pezaj retejoj.

Markado

Envolvu vian enhavon divtiel:

<div class = "hero-unuo" > 
  <h1> Titolo </h1>
  <p> Skomo </p>
  <p>
    <a klaso = "btn btn-primara btn-granda" > 
      Lernu pli
    </a>
  </p>
</div>

Simpla ŝelo por h1taŭge interspacigi kaj segmenti sekciojn de enhavo sur paĝo. Ĝi povas uzi la h1defaŭltan small, elementon ankaŭ la plej multajn aliajn komponantojn (kun pliaj stiloj).

<div class = "paĝo-kapo" > 
  <h1> Ekzempla paĝokapo </h1>
</div>

Defaŭltaj bildetoj

Defaŭlte, la bildetoj de Bootstrap estas dizajnitaj por montri ligitajn bildojn kun minimuma postulata markado.

Tre agordebla

Kun iom da ekstra markado, eblas aldoni ajnan specon de HTML-enhavo kiel titoloj, alineoj aŭ butonoj en bildetojn.

• 

  Bildeto-etikedo

  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.

  Ago Ago

• 

  Bildeto-etikedo

  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.

  Ago Ago

Kial uzi bildetojn

Bildetoj (antaŭe .media-gridĝis v1.4) estas bonegaj por kradoj de fotoj aŭ filmetoj, bildaj serĉrezultoj, podetalaj produktoj, biletujoj kaj multe pli. Ili povas esti ligiloj aŭ statika enhavo.

Simpla, fleksebla markado

Bildeto-markado estas simpla—a ulkun ajna nombro da lielementoj estas ĉio, kio necesas. Ĝi ankaŭ estas tre fleksebla, ebligante ajnan tipon de enhavo kun nur iom pli da markado por envolvi vian enhavon.

Uzas kradkolumngrandecojn

Finfine, la komponanto de bildetoj uzas ekzistantajn krad-sistemklasojn—kiel .span2aŭ .span3—por kontrolo de bildetoj-dimensioj.

La markado

Kiel menciite antaŭe, la bezonata markado por bildetoj estas malpeza kaj simpla. Jen rigardo al la defaŭlta agordo por ligitaj bildoj :

<ul class = "bildetoj" > 
  <li class = "span3" > 
    <a href = "#" class = "bildeto" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

Por kutima HTML-enhavo en bildetoj, la markado iomete ŝanĝiĝas. Por permesi bloknivelan enhavon ie ajn, ni interŝanĝas la <a>por <div>tia:

<ul class = "bildetoj" > 
  <li class = "span3" > 
    <div class = "bildeto" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Bildeto-etikedo </h5>
      <p> Bildetoteksto ĝuste ĉi tie... </p>
    </div>
  </li>
  ...
</ul>

Pli da ekzemploj

Esploru ĉiujn viajn eblojn kun la diversaj kradaj klasoj disponeblaj al vi. Vi ankaŭ povas miksi kaj kongrui malsamajn grandecojn.

Reskribita baza klaso

Kun Bootstrap 2, ni simpligis la bazan klason: .alertanstataŭ .alert-message. Ni ankaŭ reduktis la minimuman bezonatan markadon—ne <p>necesas defaŭlte, nur la ekstera <div>.

Ununura atentiga mesaĝo

Por pli daŭrema komponanto kun malpli da kodo, ni forigis la diferencigan aspekton de blokatentigoj, mesaĝojn kiuj venas kun pli da kompletigo kaj tipe pli da teksto. La klaso ankaŭ ŝanĝiĝis al .alert-block.

Bonas kun javaskripto

Bootstrap venas kun bonega jQuery-kromaĵo, kiu subtenas atentajn mesaĝojn, igante ilin forĵeti rapidan kaj facilan.

Akiru la kromprogramon »

Ekzemplaj atentigoj

Envolvu vian mesaĝon kaj laŭvolan fermikonon en div kun simpla klaso.

<div class = "atentigo" > 
  <button class = "close" data-dismiss = "averto" > × </button>  
  <strong> Averto! </strong> Plej bone kontrolu vin mem, vi ne aspektas tro bona.
</div>

Atentu! iOS-aparatoj postulas href="#"por la malakcepto de atentigoj. Nepre inkluzivu ĝin kaj la datuman atributon por ankraj proksimaj ikonoj. Alternative, vi povas uzi buttonelementon kun la datuma atributo, kion ni elektis fari por niaj dokumentoj.

Facile etendi la norman atentigmesaĝon kun du laŭvolaj klasoj: .alert-blockpor pli da kompletigo kaj tekstaj kontroloj kaj .alert-headingpor kongrua titolo.

<div class = "alerto-atentigo-bloko" > 
  <a class = "close" data-dismiss = "alerto" href = "#" > × </a>   
  <h4 class = "alert-heading" > Averto! </h4> 
  Plej bone kontrolu vin mem, vi ne estas...
</div>

Eraro aŭ danĝero

<div class = "alerto-eraro" > 
  ...
</div>

Sukceso

<div class = "alerto-atentigo-sukceso" > 
  ...
</div>

Informoj

<div class = "alerto-alerto-informoj" > 
  ...
</div>

Baza

Defaŭlta progresbreto kun vertikala gradiento.

<div class = "progreso" > 
  <div class = "stango" 
       stilo = " larĝo : 60 %; " ></div> 
</div>

Striita

Uzas gradienton por krei strian efikon (ne IE).

<div class = "progreso progres-striita" > 
  <div class = "stango" 
       stilo = " larĝo : 20 %; " ></div> 
</div>

Vigla

Prenas la striitan ekzemplon kaj animas ĝin (ne IE).

<div class = "progreso progres-striita 
     aktiva" >
  <div class = "stango" 
       stilo = " larĝo : 40 %; " ></div> 
</div>

Pliaj koloroj

Progresbaroj uzas iujn el la samaj butonoj kaj atentaj klasoj por konsekvencaj stiloj.

Striitaj stangoj

Simile al la solidaj koloroj, ni havas diversajn striitajn progresstangojn.

Konduto

Progresaj stangoj uzas CSS3-transirojn, do se vi dinamike ĝustigas la larĝon per Javaskripto, ĝi glate regrandigos.

Se vi uzas la .activeklason, viaj .progress-stripedprogreso-stangoj vigligos la striojn de maldekstre al dekstre.

Subteno de retumilo

Progresstangoj uzas CSS3-gradientojn, transirojn kaj kuraĝigojn por atingi ĉiujn siajn efikojn. Ĉi tiuj funkcioj ne estas subtenataj en IE7-9 aŭ pli malnovaj versioj de Firefox.

Opera kaj IE ne subtenas animaciojn nuntempe.

Wells

Uzu la puton kiel simplan efikon al elemento por doni al ĝi enmetitan efikon.

<div class = "nu" > 
  ...
</div>

Fermu ikonon

Uzu la ĝeneralan fermikonon por forĵeti enhavon kiel modalojn kaj atentigojn.

×

<button class = "fermi" > × </butono> 

iOS-aparatoj postulas href="#" por klakaj eventoj se vi prefere uzas ankron.

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