Eżempju

Menu kuntestwali li jista' jinbidel għall-wiri ta' listi ta' links. Magħmul interattiv mal- plugin JavaScript dropdown .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Azzjoni </a></li>  
  <li><a tabindex = "-1" href = "#" > Azzjoni oħra </a></li>  
  <li><a tabindex = "-1" href = "#" > Xi ħaġa oħra hawn </a></li>  
  <li class = "divider" ></li> 
  <li><a tabindex = "-1" href = "#" > Rabta separata </a></li>  
</ul>

Markup

Meta wieħed iħares lejn il-menu dropdown biss, hawn l-HTML meħtieġ. Ikollok bżonn tkebbeb il-grillu tal-dropdown u l-menu dropdown fi ħdan .dropdown, jew element ieħor li jiddikjara position: relative;. Imbagħad sempliċement toħloq il-menu.

<div class = "dropdown" > 
  <!-- Link jew buttuna biex toggle dropdown -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Azzjoni </a></li>  
    <li><a tabindex = "-1" href = "#" > Azzjoni oħra </a></li>  
    <li><a tabindex = "-1" href = "#" > Xi ħaġa oħra hawn </a></li>  
    <li class = "divider" ></li> 
    <li><a tabindex = "-1" href = "#" > Rabta separata </a></li>  
  </ul>
</div>

Għażliet

Allinja menus lejn il-lemin u żid jinkludu livelli addizzjonali ta 'dropdowns.

Allinjament tal-menus

Żid .pull-rightmal- .dropdown-menulemin tallinja l-menu dropdown.

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

Għażliet tal-menu b'diżabilità

Żid .disabledma' <li>fil-dropdown biex tiddiżattiva l-link.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Rabta regolari </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > Rabta b'diżabilità </a></li>   
  <li><a tabindex = "-1" href = "#" > Rabta oħra </a></li>  
</ul>

Sub menus fuq dropdowns

Żid livell żejjed ta 'menus dropdown, li jidhru fuq hover bħal dawk ta' OS X, b'xi żidiet ta 'markup sempliċi. Żid .dropdown-submenuma' kwalunkwe lif'menu dropdown eżistenti għal stil awtomatiku.

Default

Dropup

Submenu tax-xellug

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "dropdown-submenu" > 
    <a tabindex = "-1" href = "#" > Aktar għażliet </a>  
    <ul class = "menu dropdown" > 
      ...
    </ul>
  </li>
</ul>

Eżempji

Żewġ għażliet bażiċi, flimkien ma 'żewġ varjazzjonijiet aktar speċifiċi.

Grupp ta' buttuna waħda

Kebbeb sensiela ta’ buttuni .btnb’in .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > Xellug </button> 
  <button class = "btn" > Nofsani </button> 
  <button class = "btn" > Dritt </button> 
</div>

Gruppi ta' buttuna multipli

Għaqqad settijiet ta ' <div class="btn-group">fi <div class="btn-toolbar">għal komponenti aktar kumplessi.

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

Gruppi ta 'buttuni vertikali

Agħmel sett ta 'buttuni jidhru f'munzelli vertikalment aktar milli orizzontalment.

<div class = "btn-grupp btn-grupp-vertikali" > 
  ...
</div>

Checkbox u togħmiet tar-radju

Gruppi ta' buttuni jistgħu jaħdmu wkoll bħala radjijiet, fejn buttuna waħda biss tista' tkun attiva, jew kaxxi ta' kontroll, fejn kwalunkwe numru ta' buttuni jista' jkun attiv. Ara d-dokumenti JavaScript għal dan.

Dropdowns fi gruppi ta 'buttuni

Irjus up!Buttuni bi dropdowns għandhom ikunu mgeżwra individwalment fihom stess .btn-groupfi ħdan a .btn-toolbargħal rendering xieraq.

Ħarsa ġenerali u eżempji

Uża kwalunkwe buttuna biex tiskatta menu dropdown billi tpoġġiha fi ħdan .btn-groupu tipprovdi l-markup xieraq tal-menu.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Azzjoni
    <span class = "caret" ></span> 
  </a>
  <ul class = "menu dropdown" > 
    <!-- dropdown menu links -->
  </ul>
</div>

Jaħdem mad-daqsijiet kollha tal-buttuni

Button dropdowns jaħdmu fi kwalunkwe daqs: .btn-large, .btn-small, jew .btn-mini.

Jeħtieġ JavaScript

Id-dropdowns tal-buttuni jeħtieġu l- plugin dropdown Bootstrap biex jiffunzjona.

F'xi każijiet—bħall-mowbajl—menus dropdown se jestendu barra l-viewport. Għandek bżonn issolvi l-allinjament manwalment jew b'JavaScript personalizzat.

Dropdowns tal-buttuna maqsuma

Nibnu fuq l-istili tal-grupp tal-buttuni u l-markup, nistgħu faċilment noħolqu buttuna maqsuma. Buttuni maqsuma għandhom azzjoni standard fuq ix-xellug u dropdown toggle fuq il-lemin b'links kuntestwali.

<div class = "btn-group" > 
  <button class = "btn" > Azzjoni </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "menu dropdown" > 
    <!-- dropdown menu links -->
  </ul>
</div>

Daqsijiet

Uża l-klassijiet tal-buttuni żejda .btn-mini, .btn-small, jew .btn-largegħad-daqs.

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Azzjoni </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "menu dropdown" > 
    <!-- dropdown menu links -->
  </ul>
</div>

Dropup menus

Il-menus dropdown jistgħu wkoll jinqalbu minn isfel għal fuq billi żżid klassi waħda mal-ġenitur immedjat ta' .dropdown-menu. Hija se taqleb id-direzzjoni tal- .caretu poġġi mill-ġdid il-menu innifsu biex jimxi minn isfel għal fuq minflok minn fuq għal isfel.

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "menu dropdown" > 
    <!-- dropdown menu links -->
  </ul>
</div>

Defaults ħfief L-istess markup, klassijiet differenti

Il-komponenti kollha tan-nav hawn—tabs, pilloli, u listi— jaqsmu l-istess markup bażi u stili permezz tal- .navklassi.

Tabs bażiċi

<ul>Ħu links regolari u żid .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li class = "attiv" > 
    <a href = "#" > Dar </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Pilloli bażiċi

Ħu dak l-istess HTML, imma uża .nav-pillsminflok:

<ul class = "nav nav-pills" > 
  <li class = "attiv" > 
    <a href = "#" > Dar </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Stat b'diżabilità

Għal kwalunkwe komponent tan-nav (tabs, pilloli, jew lista), żid .disabledgħal links griżi u l-ebda effetti hover . Il-links jibqgħu ikklikkjabbli, madankollu, sakemm ma tneħħix l- hrefattribut. Inkella, tista' timplimenta JavaScript personalizzat biex tevita dawk il-klikks.

<ul class = "nav nav-pills" > 
  ...
  <li class = "disabled" ><a href = "#" > Dar </a></li>  
  ...
</ul>

Allinjament tal-komponenti

Biex tallinja l-links tan-nav, uża l -klassijiet .pull-leftjew utilità. .pull-rightIż-żewġ klassijiet se jżidu float CSS fid-direzzjoni speċifikata.

Stackable

Peress li t-tabs u l-pilloli huma orizzontali b'mod awtomatiku, żid biss it-tieni klassi, .nav-stacked, biex tagħmilhom jidhru f'munzelli vertikalment.

Tabs f'munzelli

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

Pilloli f'munzelli

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

Dropdowns

Żid menus dropdown bi ftit HTML żejjed u l- plugin JavaScript dropdowns .

Tabs bi dropdowns

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "dropdown"
       href = "#" >
        Dropdown
        <b class = "caret" ></b> 
      </a>
    <ul class = "menu dropdown" > 
      <!-- links -->
    </ul>
  </li>
</ul>

Pilloli bi dropdowns

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "dropdown"
       href = "#" >
        Dropdown
        <b class = "caret" ></b> 
      </a>
    <ul class = "menu dropdown" > 
      <!-- links -->
    </ul>
  </li>
</ul>

Nav listi

Mod sempliċi u faċli biex jinbnew gruppi ta' nav links b'headers fakultattivi. L-aħjar jintużaw fil-sidebars bħall-Finder f'OS X.

Eżempju tal-lista tan-nav

Ħu lista ta' links u żid class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > Header tal-lista </li> 
  <li class = "active" ><a href = "#" > Dar </a></li>  
  <li><a href = "#" > Librerija </a></li> 
  ...
</ul>

NotaGħat-tbejjit f'lista tan-nav, inkludi class="nav nav-list"fuq kwalunkwe <ul>.

Diviżuri orizzontali

Żid diviżur orizzontali billi toħloq oġġett tal-lista vojt bil-klassi .divider, bħal hekk:

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

Tabbable nav

Agħti t-tabs tiegħek għall-ħajja b'plugin sempliċi biex taqleb bejn il-kontenut permezz tat-tabs. Bootstrap jintegra tabs tabbable f'erba' stili: fuq (default), lemin, qiegħ u xellug.

Eżempju tabbable

Biex tagħmel tabs tabbable, oħloq b'ID .tab-paneunika għal kull tab u wraphom fi .tab-content.

Jiena fit-Taqsima 1.

Hello, jiena fit-Taqsima 2.

What up girl, din hija Taqsima 3.

<div class = "tabbable" > <!-- Meħtieġ biss għat-tabs tax-xellug/lemin -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Taqsima 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Taqsima 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane attiv" id = "tab1" >  
      <p> Jiena fit-Taqsima 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Hello, jiena fit-Taqsima 2. </p>
    </div>
  </div>
</div>

Fade fit-tabs

Biex tagħmel it-tabs fade, żid .fadema 'kull .tab-pane.

Jeħtieġ plugin jQuery

It-tabs tabbable kollha huma mħaddma mill-plugin ħafif tagħna jQuery. Aqra aktar dwar kif tagħti l-ħajja lil tabs tabbable fuq il-paġna tad-dokumenti JavaScript .

Tabbable fi kwalunkwe direzzjoni

Tabs fuq il-qiegħ

Aqleb l-ordni tal-HTML u żid klassi biex tpoġġi tabs fil-qiegħ.

Jiena fit-Taqsima A.

Hello, jiena fit-Taqsima B.

What up girl, din hija Taqsima Ċ.

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

Tabs fuq ix-xellug

Ibdel il-klassi biex tpoġġi tabs fuq ix-xellug.

Jiena fit-Taqsima A.

Hello, jiena fit-Taqsima B.

What up girl, din hija Taqsima Ċ.

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

Tabs fuq il-lemin

Ibdel il-klassi biex tpoġġi tabs fuq il-lemin.

Jiena fit-Taqsima A.

Hello, jiena fit-Taqsima B.

What up girl, din hija Taqsima Ċ.

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

Navbar bażiku

Biex tibda, in-navbars huma statiċi (mhux imwaħħla mal-quċċata) u jinkludu appoġġ għal isem tal-proġett u navigazzjoni bażika. Poġġi waħda kullimkien fi ħdan .container, li tistabbilixxi l-wisa' tas-sit u l-kontenut tiegħek.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Titolu </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > Dar </a></li>  
      <li><a href = "#" > Link </a></li> 
      <li><a href = "#" > Link </a></li> 
    </ul>
  </div>
</div>

Komponenti Navbar

Brand

Link sempliċi biex turi l-isem tad-ditta jew tal-proġett tiegħek teħtieġ biss tikketta tal-ankra.

<a class = "brand" href = "#" > Isem tal-proġett </a>

Nav links

Oġġetti tan-nav huma sempliċi biex jiżdiedu permezz ta 'listi mhux ordnati.

<ul class = "nav" > 
  <li class = "attiv" > 
    <a href = "#" > Dar </a> 
  </li>
  <li><a href = "#" > Link </a></li> 
  <li><a href = "#" > Link </a></li> 
</ul>

Tista 'faċilment iżżid diviżuri mal-links tan-nav tiegħek b'oġġett tal-lista vojta u klassi sempliċi. Żid dan bejn links:

<ul class = "nav" > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

Formoli

Biex tfassal u tpoġġi formola sew fin-navbar, żid il-klassijiet xierqa kif muri hawn taħt. Għal formola awtomatika, inkludi .navbar-formu jew .pull-leftjew .pull-rightbiex tallinjaha sew.

<form class = "navbar-form pull-left" > 
  <input type = "test" class = "span2" >  
  <button type = "submit" class = "btn" > Ibgħat </button>  
</form>

Formola ta' tfittxija

Għal formola ta' tfittxija aktar personalizzata, żid .navbar-searchmal- formu .search-querymal-input għal stili speċjalizzati fin-navbar.

<form class = "navbar-search pull-left" > 
  <input type = "test" class = "search-query" placeholder = "Fittex" >   
</form>

Allinjament tal-komponenti

Allinja links nav, formola ta 'tfittxija, jew test, uża l -klassijiet .pull-leftjew utilità. .pull-rightIż-żewġ klassijiet se jżidu float CSS fid-direzzjoni speċifikata.

Bl-użu dropdowns

Żid dropdowns u dropups man-nav bi ftit ta 'markup u l- dropdowns JavaScript plugin .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >   
      Kont
      <b class = "caret" ></b> 
    </a>
    <ul class = "menu dropdown" > 
      ...
    </ul>
  </li>
</ul>

Żur id- dokumentazzjoni tal-dropdowns JavaScript għal aktar markup u informazzjoni dwar is-sejħa dropdowns.

Test

Kebbeb kordi ta 'test f'element b' .navbar-text, normalment fuq <p>tikketta għal tmexxija u kulur xierqa.

Varjazzjonijiet tal-wiri fakultattivi

Waħħal in-navbar fin-naħa ta' fuq jew t'isfel tal-viewport bi klassi addizzjonali fuq id-div l-aktar 'il barra, .navbar.

Imwaħħla fuq nett

Żid .navbar-fixed-topu ftakar li tagħti kont għaż-żona moħbija taħtha billi żżid mill-inqas 40px paddingmal- <body>. Kun żgur li żżid dan wara l-qalba Bootstrap CSS u qabel is-CSS mhux obbligatorju li jirrispondu.

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

Imwaħħla mal-qiegħ

Żid .navbar-fixed-bottomminflok.

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

Navbar ta 'fuq statiku

Oħloq navbar full-wisa 'li tiskrollja mal-paġna billi żżid .navbar-static-top. B'differenza mill- .navbar-fixed-topklassi, m'għandekx bżonn tibdel xi padding fuq il- body.

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

Navbar li jirrispondi

Biex timplimenta navbar li tirreaġixxi, wrap il-kontenut tan-navbar tiegħek f'div li jkun fih, .nav-collapse.collapse, u żid il-buttuna ta' toggle tan-navbar, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "kontenitur" > 
 
      <!-- .btn-navbar huwa użat bħala l-toggle għal kontenut navbar imġarraf -->
      <a class = "btn btn-navbar" data-toggle = "kollass" data-target = ".nav-kollass" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Kun żgur li tħalli l-marka hemmhekk jekk trid li tintwera -->
      <a class = "brand" href = "#" > Isem tal-proġett </a>  
 
      <!-- Dak kollu li trid moħbi f'940px jew inqas, poġġi hawn -->
      <div class = "kollass tan-nav-kollass" > 
        <!-- .nav, .navbar-tfittxija, .navbar-form, eċċ -->
      </div>
 
    </div>
  </div>
</div>

Irjus up! In-navbar li tirreaġixxi teħtieġ il- plugin tal-kollass u l-fajl CSS Bootstrap li jirrispondu .

Varjazzjoni maqluba

Immodifika d-dehra tan-navbar billi żżid .navbar-inverse.

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

Eżempji

Eżempju wieħed muri kif jista' jintwera fuq bosta paġni.

<ul class = "frak tal-ħobż" > 
  <li><a href = "#" > Dar </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Librerija </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Data </li> 
</ul>

Paġinazzjoni standard

Paġinazzjoni sempliċi ispirata minn Rdio, kbira għall-apps u r-riżultati tat-tiftix. Il-blokka l-kbira hija diffiċli biex titlifha, tista 'tiġi skalata faċilment, u tipprovdi żoni ta' klikkjar kbar.

<div class = "paġinazzjoni" > 
  <ul>
    <li><a href = "#" > Prev </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 = "#" > Li jmiss </a></li> 
  </ul>
</div>

Għażliet

Stati b'diżabilità u attivi

Il-links huma customizable għal ċirkostanzi differenti. Uża .disabledgħal links li ma tistax tikklikkja u .activebiex tindika l-paġna attwali.

<div class = "paġinazzjoni" > 
  <ul>
    <li class = "disabled" ><a href = "#" > « </a></li>  
    <li class = "attiv" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

Tista' b'għażla tbiddel l-ankri attivi jew b'diżabilità għal spans biex tneħħi l-funzjonalità tal-ikklikkja filwaqt li żżomm l-istili maħsuba.

<div class = "paġinazzjoni" > 
  <ul>
    <li class = "disabled" ><span> « </span></li> 
    <li class = "attiv" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Daqsijiet

Fancy paginazzjoni akbar jew iżgħar? Żid .pagination-large, .pagination-small, jew .pagination-minigħal daqsijiet addizzjonali.

<div class = "pagination pagination-grande" > 
  <ul>
    ...
  </ul>
</div>
<div class = "paġinazzjoni" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

Allinjament

Żid waħda minn żewġ klassijiet fakultattivi biex tbiddel l-allinjament tar-rabtiet tal-paġnar: .pagination-centeredu .pagination-right.

<div class = "pagination pagination-centred" > 
  ...
</div>

<div class = "pagination pagination-right" > 
  ...
</div>

Pager

Links ta 'qabel u li jmiss ta' malajr għal implimentazzjonijiet ta 'paginazzjoni sempliċi b'markup u stili ħfief. Huwa tajjeb ħafna għal siti sempliċi bħal blogs jew rivisti.

Eżempju default

B'mod awtomatiku, il-pager jiffoka links.

<ul class = "pager" > 
  <li><a href = "#" > Preċedenti </a></li> 
  <li><a href = "#" > Li jmiss </a></li> 
</ul>

Links allinjati

Inkella, tista' tallinja kull link mal-ġnub:

<ul class = "pager" > 
  <li class = "preċedenti" > 
    <a href = "#" > ← Anzjani </a> 
  </li>
  <li class = "li jmiss" > 
    <a href = "#" > Aktar ġodda → </a> 
  </li>
</ul>

Stat diżabbli mhux obbligatorju

Ir-rabtiet tal-pager jużaw ukoll il- .disabledklassi ta 'utilità ġenerali mill-paġnar.

<ul class = "pager" > 
  <li class = "qabel b'diżabilità" > 
    <a href = "#" > ← Anzjani </a> 
  </li>
  ...
</ul>

Tikketti

Tikketti	Markup
Default	`<span class="label">Default</span>`
Suċċess	`<span class="label label-success">Success</span>`
Twissija	`<span class="label label-warning">Warning</span>`
Importanti	`<span class="label label-important">Important</span>`
Info	`<span class="label label-info">Info</span>`
Inversa	`<span class="label label-inverse">Inverse</span>`

Badges

Isem	Eżempju	Markup
Default	1	`<span class="badge">1</span>`
Suċċess	2	`<span class="badge badge-success">2</span>`
Twissija	4	`<span class="badge badge-warning">4</span>`
Importanti	6	`<span class="badge badge-important">6</span>`
Info	8	`<span class="badge badge-info">8</span>`
Inversa	10	`<span class="badge badge-inverse">10</span>`

Jiġġarrab faċilment

Għal implimentazzjoni faċli, it-tikketti u l-badges sempliċiment jikkollassaw (permezz tas- :emptyselettur tas-CSS) meta ma jkun hemm ebda kontenut ġewwa.

Unità eroj

Komponent ħafif u flessibbli biex juri kontenut ewlieni fuq is-sit tiegħek. Taħdem tajjeb fuq siti ta' kummerċjalizzazzjoni u kontenut tqal.

Hello dinja!

Din hija unità ta 'eroj sempliċi, komponent sempliċi ta' stil jumbotron biex tissejjaħ attenzjoni żejda għal kontenut jew informazzjoni dehru.

Itagħllem iżjed

<div class = "eroj-unità" > 
  <h1> Intestatura </h1>
  <p> Tagline </p>
  <p>
    <a class = "btn btn-primary btn-kbar" > 
      Itagħllem iżjed
    </a>
  </p>
</div>

Header tal-paġna

Qoxra sempliċi biex tispazja b'mod h1xieraq u tissegmenta sezzjonijiet tal-kontenut fuq paġna. Jista 'jutilizza l- element h1default small, kif ukoll il-biċċa l-kbira tal-komponenti l-oħra (bi stili addizzjonali).

<div class = "paġna-header" > 
  <h1> Eżempju ta' intestatura tal-paġna <small> Subtest għall-intestatura </small></h1>
</div>

Miniatures default

B'mod awtomatiku, il-minjaturi ta' Bootstrap huma ddisinjati biex juru immaġini konnessi b'markup minimu meħtieġ.

Personalizzabbli ħafna

B'daqsxejn ta 'markup żejjed, huwa possibbli li żżid kwalunkwe tip ta' kontenut HTML bħal intestaturi, paragrafi, jew buttuni fil-minijaturi.

Tikketta miniatura

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.

Azzjoni Azzjoni
Tikketta miniatura

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.

Azzjoni Azzjoni
Tikketta miniatura

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.

Azzjoni Azzjoni

Għaliex tuża thumbnails

Thumbnails (qabel .media-gridsa v1.4) huma tajbin għal grilji ta 'ritratti jew vidjows, riżultati ta' tfittxija ta 'immaġni, prodotti bl-imnut, portafolli, u ħafna aktar. Jistgħu jkunu links jew kontenut statiku.

Markup sempliċi u flessibbli

Il-markup tal-minjatura huwa sempliċi—a ulb'kull numru ta' lielementi huwa dak kollu li hu meħtieġ. Huwa wkoll super flessibbli, li jippermetti għal kull tip ta 'kontenut bi ftit aktar markup biex ikebbeb il-kontenut tiegħek.

Juża daqsijiet tal-kolonna tal-grilja

Fl-aħħar nett, il-komponent thumbnails juża klassijiet eżistenti tas-sistema tal-grilja—bħal .span2jew .span3—għall-kontroll tad-dimensjonijiet thumbnail.

Markup

Kif issemma qabel, il-markup meħtieġ għal thumbnails huwa ħafif u sempliċi. Hawn ħarsa lejn is-setup default għal immaġini konnessi :

<ul class = "minjieri" > 
  <li class = "span4" > 
    <a href = "#" class = "minjatura" >  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

Għal kontenut HTML personalizzat fil-minjaturi, il-markup jinbidel ftit. Biex nippermettu l-kontenut tal-livell tal-blokki kullimkien, niskambjaw <a>għal <div>bħal hekk:

<ul class = "minjieri" > 
  <li class = "span4" > 
    <div class = "minjatura" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Tikketta miniatura </h3>
      <p> Caption miniatura... </p>
    </div>
  </li>
  ...
</ul>

Aktar eżempji

Esplora l-għażliet kollha tiegħek bid-diversi klassijiet tal-grilja disponibbli għalik. Tista 'wkoll tħallat u tqabbel daqsijiet differenti.

Twissija default

Kebbeb kwalunkwe test u buttuna ta' tkeċċi fakultattiva .alertgħal messaġġ bażiku ta' twissija ta' twissija.

Twissija! L-aħjar iċċekkja lilek innifsek, m'intix qed tfittex wisq tajjeb.

<div class = "twissija" > 
  <button type = "button" class = "close" data-dismiss = "twissija" > × </button>   
  <strong> Twissija! </strong> L-aħjar iċċekkja lilek innifsek, m'intix qed tfittex wisq tajjeb.
</div>

Iċħad il-buttuni

Il-browsers Mobile Safari u Mobile Opera, minbarra l- data-dismiss="alert"attribut, jeħtieġu href="#"għat-tkeċċija ta 'twissijiet meta tuża <a>tikketta.

<a href = "#" class = "close" data-dismiss = "twissija" > × </a>

Inkella, tista' tuża <button>element bl-attribut tad-dejta, li għażilna li nagħmlu għad-dokumenti tagħna. Meta tuża <button>, trid tinkludi type="button"jew il-formoli tiegħek ma jistgħux jissottomettu.

<button type = "button" class = "close" data-dismiss = "twissija" > × </button>

Tiċħad it-twissijiet permezz ta' JavaScript

Uża l- plugin jQuery ta’ twissijiet għat-tkeċċija ta’ twissijiet malajr u faċli.

Għażliet

Għal messaġġi itwal, żid l-ikkuttunar fuq in-naħa ta 'fuq u t'isfel tat-tgeżwir tat-twissija billi żżid .alert-block.

Twissija!

L-aħjar iċċekkja lilek innifsek, m'intix qed tfittex wisq tajjeb. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<div class = "blokk ta' twissija" > 
  <button type = "button" class = "close" data-dismiss = "twissija" > × </button>   
  <h4> Twissija! </h4>
  L-aħjar iċċekkja lilek innifsek, m'intix...
</div>

Alternattivi kuntestwali

Żid klassijiet fakultattivi biex tibdel il-konnotazzjoni ta' twissija.

Żball jew periklu

Oh snap! Ibdel ftit affarijiet u erġa' pprova ssottometti.

<div class = "twissija twissija-żball" > 
  ...
</div>

Suċċess

Proset! Inti taqra b'suċċess dan il-messaġġ ta 'twissija importanti.

<div class = "twissija-suċċess" > 
  ...
</div>

Informazzjoni

Irjus up! Din it-twissija teħtieġ l-attenzjoni tiegħek, iżda mhix super importanti.

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

Eżempji u markup

Bażiku

Barra tal-progress default bi gradjent vertikali.

<div class = "progress" > 
  <div class = "bar" style = " wisa : 60 %; " ></div>   
</div>

Strixxat

Juża gradjent biex joħloq effett strixxat. Mhux disponibbli f'IE7-8.

<div class = "progress progress-striped" > 
  <div class = "bar" style = " wisa : 20 %; " ></div>   
</div>

Animati

Żid .activema .progress-stripedbiex janima l-istrixxi mil-lemin għax-xellug. Mhux disponibbli fil-verżjonijiet kollha ta' IE.

<div class = "progress progress-striped attiv" > 
  <div class = "bar" style = " wisa : 40 %; " ></div>   
</div>

Stacked

Poġġi vireg multipli fl-istess .progressbiex munzellhom.

<div class = "progress" > 
  <div class = "bar bar-success" style = " wisa : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " wisa : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " wisa : 10 %; " ></div>   
</div>

Għażliet

Kuluri addizzjonali

Il-vireg tal-progress jużaw xi wħud mill-istess buttuna u klassijiet ta 'twissija għal stili konsistenti.

<div class = "progress progress-info" > 
  <div class = "bar" style = " wisa : 20 % " ></div>   
</div>
<div class = "progress progress-suċċess" > 
  <div class = "bar" style = " wisa : 40 % " ></div>   
</div>
<div class = "progress progress-twissija" > 
  <div class = "bar" style = " wisa : 60 % " ></div>   
</div>
<div class = "progress progress-perikolu" > 
  <div class = "bar" style = " wisa : 80 % " ></div>   
</div>

Bars strixxati

Simili għall-kuluri solidi, għandna varjati strixxi progress bars.

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " wisa : 20 % " ></div>   
</div>
<div class = "progress progress-suċċess progress-striped" > 
  <div class = "bar" style = " wisa : 40 % " ></div>   
</div>
<div class = "progress progress-twissija progress-striped" > 
  <div class = "bar" style = " wisa : 60 % " ></div>   
</div>
<div class = "progress progress-danger progress-striped" > 
  <div class = "bar" style = " wisa : 80 % " ></div>   
</div>

Appoġġ għall-browser

Il-vireg tal-progress jużaw gradjenti, tranżizzjonijiet u animazzjonijiet CSS3 biex jiksbu l-effetti kollha tagħhom. Dawn il-karatteristiċi mhumiex appoġġjati f'IE7-9 jew verżjonijiet anzjani ta' Firefox.

Verżjonijiet preċedenti minn Internet Explorer 10 u Opera 12 ma jappoġġjawx animazzjonijiet.

Stili ta' oġġetti astratti għall-bini ta' diversi tipi ta' komponenti (bħal kummenti tal-blog, Tweets, eċċ) li fihom immaġni allinjata max-xellug jew mal-lemin flimkien ma' kontenut testwali.

Eżempju default

Il-midja awtomatika tippermetti li float oġġett tal-midja (immaġini, vidjow, awdjo) lejn ix-xellug jew il-lemin ta 'blokk tal-kontenut.

Intestatura tal-midja

Cras sit amet nibh libero, in 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.

Intestatura tal-midja

<div class = "midja" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "korp tal-midja" > 
    <h4 class = "media-heading" > Intestatura tal-midja </h4> 
    ...
 
    <!-- Oġġett tal-midja nested -->
    <div class = "midja" > 
      ...
    </div>
  </div>
</div>

Lista tal-midja

Bi ftit ta 'markup żejjed, tista' tuża l-midja ġewwa l-lista (utli għal ħjut ta 'kummenti jew listi ta' artikoli).

Intestatura tal-midja

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Intestatura tal-midja nested
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Intestatura tal-midja nested
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Intestatura tal-midja nested
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Intestatura tal-midja
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<ul class = "lista tal-midja" > 
  <li class = "midja" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "korp tal-midja" > 
      <h4 class = "media-heading" > Intestatura tal-midja </h4> 
      ...
 
      <!-- Oġġett tal-midja nested -->
      <div class = "midja" > 
        ...
     </div>
    </div>
  </li>
</ul>

Bjar

Uża l-bir bħala effett sempliċi fuq element biex tagħtih effett inset.

Ara, jien fil-bir!

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

Klassijiet fakultattivi

Ikkuttunar ta 'kontroll u kantunieri ttundjati b'żewġ klassijiet ta' modifikaturi fakultattivi.

Ara, jien fil-bir!

<div class = "tajjeb sew kbir" > 
  ...
</div>

Ara, jien fil-bir!

<div class = "tajjeb-żgħir" > 
  ...
</div>

Agħlaq l-ikona

Uża l-ikona ġenerika tal-qrib biex tiċħad kontenut bħal modals u twissijiet.

<button class = "qrib" > × </button>

It-tagħmir tal-iOS jeħtieġu avvenimenti href="#"għall-ikklikkja jekk tippreferi tuża ankra.

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

Klassijiet tal-helper

Klassijiet sempliċi u ffukati għal wiri żgħar jew tweaks tal-imġieba.

.ġibda-xellug

Float element xellug

klassi = "ġbid-xellug"

. iġbed - xellug {
  float : xellug ;
}

.pull-lemin

Float element dritt

klassi = "pull-lemin"

. iġbed - dritt {
  float : dritt ;
}

.sikket

Ibdel il-kulur ta 'element għal#999

klassi = "sikket"

. siekta {
  kulur : #999; 
}

.clearfix

Ċara l floatfuq kwalunkwe element

klassi = "clearfix"

. clearfix {
  * zoom : 1 ; 
  &: qabel ,
  &: wara {
    wiri : tabella ;
    kontenut : "" ; 
  }
  &: wara {
    ċari : it-tnejn ;
  }
}

Menus dropdown

Eżempju

Markup

Għażliet

Allinjament tal-menus

Għażliet tal-menu b'diżabilità

Sub menus fuq dropdowns

Gruppi tal-buttuni

Eżempji

Grupp ta' buttuna waħda

Gruppi ta' buttuna multipli

Gruppi ta 'buttuni vertikali

Checkbox u togħmiet tar-radju

Dropdowns fi gruppi ta 'buttuni

Menus dropdown tal-buttuna

Ħarsa ġenerali u eżempji

Jaħdem mad-daqsijiet kollha tal-buttuni

Jeħtieġ JavaScript

Dropdowns tal-buttuna maqsuma

Daqsijiet

Dropup menus

Nav: tabs, pilloli, u listi

Defaults ħfief L-istess markup, klassijiet differenti

Tabs bażiċi

Pilloli bażiċi

Stat b'diżabilità

Allinjament tal-komponenti

Stackable

Tabs f'munzelli

Pilloli f'munzelli

Dropdowns

Tabs bi dropdowns

Pilloli bi dropdowns

Nav listi

Eżempju tal-lista tan-nav

Diviżuri orizzontali

Tabbable nav

Eżempju tabbable

Fade fit-tabs

Jeħtieġ plugin jQuery

Tabbable fi kwalunkwe direzzjoni

Tabs fuq il-qiegħ

Tabs fuq ix-xellug

Tabs fuq il-lemin

Navbar

Navbar bażiku

Komponenti Navbar

Brand

Nav links

Formoli

Formola ta' tfittxija

Allinjament tal-komponenti

Bl-użu dropdowns

Test

Varjazzjonijiet tal-wiri fakultattivi

Imwaħħla fuq nett

Imwaħħla mal-qiegħ

Navbar ta 'fuq statiku

Navbar li jirrispondi

Varjazzjoni maqluba

Frak tal-ħobż

Eżempji

Paġnar Żewġ għażliet għall-paging permezz tal-kontenut

Paġinazzjoni standard

Għażliet

Stati b'diżabilità u attivi

Daqsijiet

Allinjament

Pager

Eżempju default

Links allinjati

Stat diżabbli mhux obbligatorju

Tikketti u badges

Tikketti

Badges

Jiġġarrab faċilment

Komponenti tipografiċi

Unità eroj

Hello dinja!

Header tal-paġna