Mînak

Veguheztin, menuya kontekstî ya ji bo nîşandana navnîşên girêdanan. Bi pêveka daketî ya JavaScript re înteraktîf hate çêkirin .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Çalakî </a></li>  
  <li><a tabindex = "-1" href = "#" > Çalakiyeke din </a></li>  
  <li><a tabindex = "-1" href = "#" > Tiştekî din li vir </a></li>  
  <li class = "divider" ></li> 
  <li><a tabindex = "-1" href = "#" > Girêdana veqetandî </a></li>  
</ul>

Markup

Tenê li menuya dakêşanê mêze dikin, li vir HTML-ya pêwîst heye. Pêdivî ye ku hûn tetika dakêşanê û menuya dakêşanê di hundurê de .dropdown, an hêmanek din a ku diyar dike, bipêçin position: relative;. Hingê tenê menu çêbikin.

<div class = "dropdown" > 
  <!-- Girêdan an bişkojka ji bo veguheztina peldankê -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Çalakî </a></li>  
    <li><a tabindex = "-1" href = "#" > Çalakiyeke din </a></li>  
    <li><a tabindex = "-1" href = "#" > Tiştekî din li vir </a></li>  
    <li class = "divider" ></li> 
    <li><a tabindex = "-1" href = "#" > Girêdana veqetandî </a></li>  
  </ul>
</div>

Vebijêrk

Menuyan ber bi rastê ve rêz bikin û astên daketinê yên din lê zêde bikin.

Lihevkirina menuyan

Pêşeka daketinê .pull-rightli a .dropdown-menuber bi rastê ve zêde bikin.

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

Vebijarkên menuya astengdar

Ji .disabledbo <li>neçalakkirina lînkê li a-yê zêde bikin.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Girêdana asayî </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > Girêdana neçalak </a></li>   
  <li><a tabindex = "-1" href = "#" > Girêdana din </a></li>  
</ul>

Sub menuyên li ser peldankan

Asta pêşekên dakêşanê zêde bikin, ku li ser hoverê mîna yên OS X-ê xuya dibin, digel hin lêzêdekirinên nîşankirina hêsan. Ji .dropdown-submenubo lişêwazkirina otomatîkî di pêşekek dakêşanê ya heyî de lê zêde bikin.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "dropdown-submenu" > 
    <a tabindex = "-1" href = "#" > Vebijêrkên Zêdetir </a>  
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Examples

Du vebijarkên bingehîn, digel du guhertoyên taybetî.

Koma bişkojka yekane

Rêzek bişkokên bi .btndi pêça .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > Çep </button> 
  <button class = "btn" > Navîn </button> 
  <button class = "btn" > Rast </button> 
</div>

Komên bişkojka pirjimar

Komên ji <div class="btn-group">bo <div class="btn-toolbar">pêkhateyên tevlihevtir tevlihev bikin.

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

Komên bişkojka Vertical

Komek bişkokan li şûna horizontî, vertîkal li ser hev xuya bikin.

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

Checkbox û çêjên radyoyê

Komên bişkokan dikarin wekî radyoyê jî bixebitin, ku tenê bişkokek dikare çalak be, an qutiyên kontrolê, ku li wir hejmarek bişkokek dibe ku çalak be. Ji bo wê belgeyên JavaScript- ê bibînin.

Dropdowns di komên bişkojka

Serê xwe!Pêdivî ye ku bişkokên bi dakêşan ve bi rengek kesane di .btn-grouphundurê xwe de bêne pêçan ji .btn-toolbarbo vesazkirina rast.

Nimûne û nimûne

Her bişkokek bikar bînin da ku pêşekek dakêşanê bi cîh bikin .btn-groupû nîşana menuya rast peyda bikin.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Çalakî
    <span class = "caret" ></span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- lînkên menuya daketî -->
  </ul>
</div>

Bi hemî pîvanên bişkojkê re dixebite

Daxistina bişkokan di her mezinahiyê de dixebitin: .btn-large, .btn-small, an .btn-mini.

JavaScript hewce dike

Daxistina bişkokan pêdivî ye ku pêveka dakêşana Bootstrap bixebite .

Di hin rewşan de -mîna mobîl- pêşekên dakêşanê dê li derveyî dîmenderê dirêj bibin. Pêdivî ye ku hûn hevrêziyê bi destan an bi JavaScript-a xwerû çareser bikin.

Daxistina bişkojka Split

Li ser şêwazên koma bişkojkê û nîşankirinê ava bikin, em dikarin bi hêsanî bişkokek dabeşkirinê biafirînin. Bişkojkên dabeşkirinê li milê çepê çalakiyek standard û li milê rastê veguheztinek dakêşan bi girêdanên kontekstê ve vedigirin.

<div class = "btn-group" > 
  <button class = "btn" > Çalakî </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "dropdown-menu" > 
    <!-- lînkên menuya daketî -->
  </ul>
</div>

Sizes

Dersên bişkojka zêde .btn-mini, .btn-small, an .btn-largeji bo mezinbûnê bikar bînin.

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Çalakî </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "dropdown-menu" > 
    <!-- lînkên menuya daketî -->
  </ul>
</div>

Pêşekên avêtinê

Di heman demê de pêşekên dakêşan dikarin ji binî jor ve werin guheztin bi lêzêdekirina pola yekane li dêûbavê yekser a .dropdown-menu. Ew ê .caretarasteka pêşekê bizivirîne û menuya xwe ji nû ve bi cîh bike da ku li şûna ku ji jor ber bi jêr ve biçe ji binî jor.

<div class = "btn-group dropup" > 
  <button class = "btn" > Daxistin < /button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "dropdown-menu" > 
    <!-- lînkên menuya daketî -->
  </ul>
</div>

Vebijêrkên sivik Heman nîşankirin, çînên cûda

Hemî hêmanên nav li vir - tablo, heb, û navnîşan - di nav polê de heman nîşankirin û şêwazên bingehîn parve dikin.nav .

Tabloyên bingehîn

Zencîreyek birêkûpêk bigirin <ul>û lê zêde bikin .nav-tabs:

<ul class = "nav-tabs" > 
  <li class = "çalak" > 
    <a href = "#" > Malper </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Hebên bingehîn

Heman HTML-ê bistînin, lê li şûna wê bikar .nav-pillsbînin:

<ul class = "nav nav-pills" > 
  <li class = "çalak" > 
    <a href = "#" > Malper </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Dewlet seqet

Ji bo her hêmanek navokê (tab, heb, an navnîş), lînkên gewr lê zêde .disabledbikin û bandorên hover tune . Lêbelê, heya ku hûn hreftaybetmendiyê jê nekin, lînk dê bitikîne. Wekî din, hûn dikarin JavaScript-a xwerû bicîh bikin da ku pêşî li wan klîk bigirin.

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

Berhevkirina pêkhateyan

Ji bo rêzkirina girêdanên nav-ê, dersên karûbar bikar .pull-leftbînin . .pull-rightHer du çîn dê di rêça diyarkirî de floatek CSS zêde bikin.

Stackable

Ji ber ku tablo û heb ji hêla xwerû ve horizontî ne, tenê çînek duyemîn lê zêde bikin, .nav-stacked, da ku ew bi rengek vertîkal xuya bibin.

Tebên lihevkirî

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

Hebên lihevkirî

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

Dropdowns

Pêşekên daketinê bi HTML-ya piçûktir û pêveka JavaScript -a daketî zêde bikin.

Tabên bi daxistinan

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

Pills bi dropdown

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

Nav lîsteyên

Rêbazek hêsan û hêsan a avakirina komên girêdanên navî yên bi sernavên vebijarkî. Ew çêtirîn di kêlekên mîna Finder di OS X de têne bikar anîn.

Mînak navnîşa nav

Lîsteyek girêdanan bistînin û lê zêde bikin class="nav nav-list":

<ul class = "nav-lîsteya nav" > 
  <li class = "nav-header" > Sernavê navnîşê </li> 
  <li class = "çalak" ><a href = "#" > Mal </a></li>  
  <li><a href = "#" > Pirtûkxane </a></li> 
  ...
</ul>

NotJi bo hêlînê di nav navnîşek nav de, li class="nav nav-list"ser her hêlînekê têxin nav xwe <ul>.

Dabeşkarên Horizontal

Dabeşkerek horizontî lê zêde bikin bi afirandina tomarek navnîşek vala bi polê .dividerre, mîna:

<ul class = "nav-lîsteya nav" > 
  ...
  <li class = "divider" ></li> 
  ...
</ul>

Navê Tabbable

Bi pêvekek hêsan tabloyên xwe bidin jiyîn da ku bi naverokê bi tabloyan veguhezînin. Bootstrap tabloyên tabloyê di çar şêwazan de yek dike: jorîn (default), rast, jêrîn û çep.

Mînaka tabloyê

Ji bo ku tabloyan bikin tablo, ji .tab-panebo her tabloyê nasnameyek yekta biafirînin û wan têxin hundur .tab-content.

Ez di beşa 1 de me.

Silav, ez di beşa 2. de me.

Çi be keçik, ev beşa 3 ye.

<div class = "tabbable" > <!-- Tenê ji bo tabloyên çep/rast pêwîst e -->  
  <ul class = "nav-tabs" > 
    <li class = "çalak" ><a href = "#tab1" data-toggle = "tab" > Beş 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Beş 2 </a></li>  
  </ul>
  <div class = "tab-naveroka" > 
    <div class = "tab-pane çalak" id = "tab1" >  
      <p> Ez di beşa 1. de me. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Silav, ez di beşa 2. de me. </p>
    </div>
  </div>
</div>

Di tabloyan de winda bibin

Ji bo ku tabloyan bişewitînin, li her yekê zêde .fadebikin .tab-pane.

Pêveka jQuery hewce dike

Hemî tabloyên tabloyê ji hêla pêveka meya sivik a jQuery ve têne hêz kirin. Zêdetir bixwînin ka meriv çawa tabloyên tabloyan zindî dike li ser rûpela belgeyên JavaScriptê .

Bi her alî ve tê tablokirin

Tabsên li jêr

Rêza HTML-ê bizivirînin û çînek lê zêde bikin da ku tabloyên li jêr bixin.

Ez di beşa A de me.

Silav, ez di beşa B de me.

Çi ye keç, ev beşa C ye.

<div class = "tabsable tabs-below" > 
  <div class = "tab-naveroka" > 
    ...
  </div>
  <ul class = "nav-tabs" > 
    ...
  </ul>
</div>

Tabên li milê çepê

Dersê biguhezînin da ku tabloyên li milê çepê bixin.

Ez di beşa A de me.

Silav, ez di beşa B de me.

Çi ye keç, ev beşa C ye.

<div class = "tabsable tabs-left" > 
  <ul class = "nav-tabs" > 
    ...
  </ul>
  <div class = "tab-naveroka" > 
    ...
  </div>
</div>

Tabên li rastê

Dersê biguhezînin da ku tabloyên li rastê bixin.

Ez di beşa A de me.

Silav, ez di beşa B de me.

Çi ye keç, ev beşa C ye.

<div class = "tabable tabs-right" > 
  <ul class = "nav-tabs" > 
    ...
  </ul>
  <div class = "tab-naveroka" > 
    ...
  </div>
</div>

Navbara bingehîn

Ji bo destpêkirinê, navbar statîk in (li jor ne sabît in) û piştgirî ji bo navek projeyek û navîgasyonek bingehîn vedigirin. Yek li her deverê di hundurê .container, ku firehiya malper û naveroka we destnîşan dike.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Sernav </a>  
    <ul class = "nav" > 
      <li class = "çalak" ><a href = "#" > Mal </a></li>  
      <li><a href = "#" > Girêdan </a></li> 
      <li><a href = "#" > Girêdan </a></li> 
    </ul>
  </div>
</div>

pêkhateyên Navbar

Şanika şewatê

Zencîreyek hêsan a ku meriv marqe an navê projeya xwe nîşan bide tenê tagek ankerê hewce dike.

<a class = "brand" href = "#" > Navê projeyê </a>

Nav girêdan

Tiştên Nav hêsan e ku meriv bi navnîşên nerêkûpêk lê zêde bike.

<ul class = "nav" > 
  <li class = "çalak" > 
    <a href = "#" > Malper </a> 
  </li>
  <li><a href = "#" > Girêdan </a></li> 
  <li><a href = "#" > Girêdan </a></li> 
</ul>

Hûn dikarin bi hêmanek navnîşek vala û çînek hêsan ve dabeşkeran li girêdanên navika xwe zêde bikin. Tenê vê di navbera girêdan de zêde bikin:

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

Forms

Ji bo ku hûn formek di navbarê de bi rêkûpêk şêwaz û bi cih bikin, wekî ku li jêr tê xuyang kirin dersên guncan zêde bikin. Ji bo formek xwerû, têxin .navbar-formû an .pull-leftan jî .pull-rightbi rêkûpêk li hev bikin.

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
  <button type = "submit" class = "btn" > Bişîne </button>  
</form>

Forma lêgerînê

Ji bo formek lêgerînê ya xwerû, di navbarê .navbar-searchde ji bo şêwazên pispor li nav û têketinê formzêde bikin..search-query

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Lêgerîn" >   
</form>

Berhevkirina pêkhateyan

Zencîreyên nav-ê, forma lêgerînê, an nivîsê li hev bikin, çînên karûbar bikar .pull-leftbînin .pull-right. Her du çîn dê di rêça diyarkirî de floatek CSS zêde bikin.

Bikaranîna peldankan

Bi piçek nîşankirin û pêveka JavaScriptê ya daketî li navê zêde bikin .

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

Ji bo bêtir nîşankirin û agahdariya li ser dakêşanên gazîkirinê, biçin belgeyên daketinên JavaScript .

Nivîstok

Rêzikên nivîsê di hêmanekê de bi .navbar-text, bi gelemperî li ser <p>etîketekê ji bo rêber û rengê rast bipêçin.

Guhertoyên dîmendera Bijarî

Navbarê li jor an binê dîmenderê bi çînek pêvek li ser div-ya herî derveyî rast bikin .navbar,.

Li jor rast kirin

Zêde .navbar-fixed-topbikin û ji bîr nekin ku hûn qada veşartî ya li binê wê bi zêdekirina herî kêm 40 px paddingli ser hesab bikin <body>. Bawer bikin ku vê yekê piştî bingehîn Bootstrap CSS û berî CSS-ya bersivdar a vebijarkî lê zêde bikin.

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

Li jêr sabît kirin

Li şûna wê lê zêde bike .navbar-fixed-bottom.

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

Navbara jorîn a statîk

Navbarek tev-fireh biafirînin ku bi lêzêdekirina rûpelê ji hev dûr dikeve .navbar-static-top. Berevajî .navbar-fixed-toppolê, hûn ne hewce ne ku tu peldankê li ser biguhezînin body.

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

Navbara bersivdar

Ji bo bicihanîna navbarek bersivdar a têkçûyî, naveroka navbarê ya xwe di nav div .nav-collapse.collapse-ê de bipêçin, û bişkoja veguheztina navbarê lê zêde bikin .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "konteyner" > 
 
      <!-- .btn-navbar ji bo naveroka navbarê ya hilweşandî wekî guhêrbar tê bikar anîn -->
      <a class = "btn btn-navbar" data-toggle = "hilweşîn" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Ger hûn dixwazin wê nîşan bidin, pê ewle bin ku marqeyê li wir bihêlin -->
      <a class = "brand" href = "#" > Navê projeyê </a>  
 
      <!-- Her tiştê ku hûn dixwazin bi 940px an kêmtir veşêre, li vir bi cîh bikin -->
      <div class = "nav-collapse collapse" > 
        <!-- .nav, .navbar-lêgerîn, .navbar-form, hwd -->
      </div>
 
    </div>
  </div>
</div>

Serê xwe! Navbara bersivdar pêveka hilweşandinê û pelê Bootstrap CSS ya bersivdar hewce dike .

Guhertoya berevajîkirî

Bi lêzêdekirina dîmena navbarê biguherînin .navbar-inverse.

<div class = "navbar navbar-berevajî" > 
  ...
</div>

Examples

Nimûneyek yekane tête xuyang kirin ku dibe ku di gelek rûpelan de were xuyang kirin.

<ul class = "nanpêj" > 
  <li><a href = "#" > Malper </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Pirtûkxane </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Daneyên </li> 
</ul>

Rûpelkirina standard

Rûpelkirina hêsan ku ji hêla Rdio ve hatî îlhama kirin, ji bo serîlêdan û encamên lêgerînê mezin e. Bloka mezin zehmet e ku meriv ji bîr neke, bi hêsanî tê pîvandin, û deverên klîk ên mezin peyda dike.

<div class = "rûpelkirin" > 
  <ul>
    <li><a href = "#" > Berê </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 = "#" > Paşê </a></li> 
  </ul>
</div>

Vebijêrk

Dewletên astengdar û çalak

Girêdan ji bo rewşên cûda têne xweş kirin. Ji .disabledbo lînkên ku nayên klîk kirin û .activeji bo nîşankirina rûpela heyî bikar bînin.

<div class = "rûpelkirin" > 
  <ul>
    <li class = "neçalak" ><a href = "#" > « </a></li>  
    <li class = "çalak" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

Hûn dikarin vebijarkî lengerên çalak an neçalak ji bo pêlavan biguhezînin da ku dema ku şêwazên mebest diparêzin fonksiyona klîk jêbirin.

<div class = "rûpelkirin" > 
  <ul>
    <li class = "neçalak" ><span> « </span></li> 
    <li class = "çalak" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Sizes

Dixwazin rûpela mezin an piçûktir bikin? Zêde bikin .pagination-large, .pagination-small, an .pagination-miniji bo pîvanên din.

<div class = "pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "rûpelkirin" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination-pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

Alignment

Yek ji du dersên vebijarkî lê zêde bikin da ku lihevhatina girêdanên pagasyonê biguhezînin: .pagination-centeredû .pagination-right.

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

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

Pager

Zencîreyên zû yên berê û yên paşîn ên ji bo pêkanînên rûpela hêsan ên bi nîşankirin û şêwazên sivik. Ew ji bo malperên hêsan ên mîna blogan an kovaran pir baş e.

Mînakek standard

Bi xwerû, navendên pager girêdidin.

<ul class = "pager" > 
  <li><a href = "#" > Berê </a></li> 
  <li><a href = "#" > Paşê </a></li> 
</ul>

Girêdanên lihevkirî

Alternatîf, hûn dikarin her lînkê bi aliyan ve hevûdu bikin:

<ul class = "pager" > 
  <li class = "berê" > 
    <a href = "#" > ← Kevintir </a> 
  </li>
  <li class = "paşê" > 
    <a href = "#" > Nûtir → </a> 
  </li>
</ul>

Dewlet neçalak Bijarî

Girêdanên Pager di heman demê de .disabledçîna karanîna giştî ya ji pagasyonê bikar tînin.

<ul class = "pager" > 
  <li class = "berê neçalak" > 
    <a href = "#" > ← Kevintir </a> 
  </li>
  ...
</ul>

Labels

Labels	Markup
Destçûnî	`<span class="label">Default</span>`
Serketinî	`<span class="label label-success">Success</span>`
Gazî	`<span class="label label-warning">Warning</span>`
Giring	`<span class="label label-important">Important</span>`
Info	`<span class="label label-info">Info</span>`
Berevajî	`<span class="label label-inverse">Inverse</span>`

Badges

Nav	Mînak	Markup
Destçûnî	1	`<span class="badge">1</span>`
Serketinî	2	`<span class="badge badge-success">2</span>`
Gazî	4	`<span class="badge badge-warning">4</span>`
Giring	6	`<span class="badge badge-important">6</span>`
Info	8	`<span class="badge badge-info">8</span>`
Berevajî	10	`<span class="badge badge-inverse">10</span>`

Bi hêsanî tê hilweşandin

:emptyJi bo pêkanîna hêsan, dema ku naverok di hundurê de tune be , etîket û nîşanan dê bi hêsanî hilweşin (bi riya hilbijarka CSS-ê ).

Yekîneya Hero

Parçeyek sivik, maqûl ku naveroka sereke li ser malpera we nîşan bide. Ew li ser malperên kirrûbirr û naverok-giran baş dixebite.

Silav, dinya!

Ev yekîneyek qehremanek hêsan e, pêkhateyek bi şêwaza jumbotron e ku ji bo balkişandina zêde li naverok an agahdariya diyarkirî ye.

Bêtir hîn bibin

<div class = "hero-unit" > 
  <h1> Sernav </h1>
  <p> Tagline </p>
  <p>
    <a class = "btn btn-sereke btn-mezin" > 
      Bêtir hîn bibin
    </a>
  </p>
</div>

Sernavê rûpelê

Kevirek hêsan ji bo ku h1bi guncan veqetîne û beşên naverokê li ser rûpelekê dabeş bike. Ew dikare hêman, hêman û piraniya pêkhateyên din (bi şêwazên zêde) bikar h1bîne small.

<div class = "rûpel-serî" > 
  <h1> Sernivîsa rûpelê mînak <small> Bintekst ji bo sernivîsê </small></h1>
</div>

Mînakên xwerû

Ji hêla xwerû, piçûkên Bootstrap-ê têne sêwirandin ku wêneyên girêdayî bi nîşana herî hindik hewce nîşan bidin.

Pir xwerû

Bi piçek nîşankirina zêde, gengaz e ku meriv her cûre naveroka HTML-ê mîna sernav, paragraf, an bişkokan li piçûkan zêde bike.

Labelê thumbnail

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.

Çalakî Çalakî
Labelê thumbnail

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.

Çalakî Çalakî
Labelê thumbnail

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.

Çalakî Çalakî

Çima thumbnail bikar bînin

Thumbnails (berê .media-gridheya v1.4) ji bo torên wêneyan an vîdyoyan, encamên lêgerîna wêneyê, hilberên firotanê, portfolios, û hêj bêtir mezin in. Ew dikarin girêdan an naveroka statîk bin.

Nîşankirina hêsan, maqûl

Nîşana tîrêjê hêsan e - ulbi her hejmarek lihêmanan re her tiştê ku hewce ye. Ew di heman demê de pir maqûl e, ku destûrê dide her cûre naverokê bi tenê piçek bêtir nîşankirinê ku naveroka we pêça.

Mezinahiyên stûnên torê bikar tîne

Di paşiya paşîn de, hêmana piçûkan ji bo kontrolkirina pîvanên piçûkan çînên pergala torê ya heyî bikar tîne - mîna .span2an -..span3

Markup

Wekî ku berê hate behs kirin, nîşana pêdivî ya ji bo piçûkan sivik û rasterast e. Li vir awirek li sazkirina xwerû ya ji bo wêneyên girêdayî heye :

<ul class = "piçûk" > 
  <li class = "span4" > 
    <a href = "#" class = "piçûk" >  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

Ji bo naveroka HTML-a xwerû ya di piçûkan de, nîşankirin hinekî diguhezîne. Ji bo ku destûr bidin naveroka asta blokê li her deverê, em <a>bi <div>vî rengî diguhezînin:

<ul class = "piçûk" > 
  <li class = "span4" > 
    <div class = "piçûk" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Etîketa xêzkirinê </h3>
      <p> Sernavê piçûk... </p>
    </div>
  </li>
  ...
</ul>

Nimûneyên bêtir

Hemî vebijarkên xwe bi dersên cihêreng ên torê yên ku ji we re peyda dibin vekolînin. Her weha hûn dikarin mezinahiyên cûda tevlihev bikin û li hev bikin.

Hişyariya xwerû

.alertJi bo peyamek hişyariya hişyariya bingehîn, her nivîsê û bişkokek veqetandinê ya vebijarkî pêça .

Gazî! Baştirîn xwe kontrol bikin, hûn pir baş xuya nakin.

<div class = "hişyar" > 
  <button type = "button" class = "nêzîkî" data-dismiss = "hişyar" > × </button>   
  <strong> Hişyarî! </strong> Ji xwe herî baş kontrol bikin, hûn pir baş xuya nakin.
</div>

Bişkokên avêtin

Gerokên Mobile Safari û Mobile Opera, ji bilî data-dismiss="alert"taybetmendiyê, href="#"dema ku nîşanek bikar tînin ji bo rakirina hişyariyan hewce dikin <a>.

<a href = "#" class = "nêzîkî" data-dismiss = "hişyar" > × </a>

Wekî din, hûn dikarin <button>hêmanek bi taybetmendiya daneyê bikar bînin, ya ku me hilbijartiye ku em ji bo belgeyên xwe bikin. Dema ku hûn bikar bînin <button>, divê hûn têxin type="button"an formên we neyên şandin.

<button type = "button" class = "nêzîkî" data-dismiss = "hişyar" > × </button>

Hişyariyên bi JavaScriptê veqetînin

Plugina jQuery alerts bikar bînin ji bo rakirina bilez û hêsan a hişyariyan.

Vebijêrk

Ji bo peyamên dirêjtir, bi lêzêdekirina pêlavê li ser û binê pêça hişyariyê zêde bikin .alert-block.

Gazî!

Baştirîn xwe kontrol bikin, hûn pir baş xuya nakin. Nulla vitae elit libero, a pharetra augue. Pêşkêşiya commodo cursus magna, vel scelerisque nisl consectetur et.

<div class = "hişyar-block" > 
  <button type = "button" class = "nêzîkî" data-dismiss = "hişyar" > × </button>   
  <h4> Hişyarî! </h4>
  Baştirîn xwe kontrol bikin, hûn ne ...
</div>

Alternatîfên hevoksaziyê

Dersên vebijarkî lê zêde bikin da ku têgînek hişyariyê biguhezînin.

Error an xeter

Oh snap! Hin tiştan biguherînin û dîsa biceribînin.

<div class = "hişyarî-error" > 
  ...
</div>

Serketinî

Aferîn! Te ev peyama hişyariya girîng bi serkeftî xwend.

<div class = "hişyarî-serkeftin" > 
  ...
</div>

Agahî

Serê xwe! Ev hişyarî hewceyê bala we ye, lê ew ne pir girîng e.

<div class = "hişyariya agahdarî" > 
  ...
</div>

Nimûne û nîşankirin

Bingehîn

Bara pêşkeftinê ya xwerû bi gradientek vertîkal.

<div class = "pêşketin" > 
  <div class = "bar" style = " width : 60 %; " ></div>   
</div>

Striped

Ji bo afirandina bandorek xerîdar gradientek bikar tîne. Di IE7-8 de peyda nabe.

<div class = "pêşveçûn-pêşveçûn-striped" > 
  <div class = "bar" style = " width : % 20 ; " ></div>   
</div>

Animated

Zêde .activebikin .progress-stripedda ku rêzikên rast ber bi çepê zindî bikin. Di hemî guhertoyên IE de peyda nabe.

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

Stacked

Gelek baran bixin nav hev .progressda ku wan li hev bixin.

<div class = "pêşketin" > 
  <div class = "bar bar-success" style = " width : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " width : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " width : 10 %; " ></div>   
</div>

Vebijêrk

Rengên zêde

Barên pêşkeftinê ji bo şêwazên domdar hin heman bişkok û dersên hişyar bikar tînin.

<div class = "pêşveçûn-agahdarî" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "pêşveçûn-serkeftin" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "pêşveçûn-hişyarî" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "pêşveçûn-xetere" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

bars striped

Mîna rengên zexm, me barên pêşkeftinê yên cûrbecûr hene.

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "pêşveçûn-serkeftin-pêşveçûn-striped" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "pêşveçûn-pêşveçûn-hişyarî pêşveçûn-striped" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "pêşveçûn-pêşveçûn-xetere-pêşveçûn-striped" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

Piştgiriya gerokê

Barên pêşkeftinê gradient, veguheztin û anîmasyonên CSS3 bikar tînin da ku bigihîjin hemî bandorên xwe. Van taybetmendiyan di IE7-9 an guhertoyên kevntir ên Firefox-ê de nayên piştgirî kirin.

Guhertoyên berê yên ji Internet Explorer 10 û Opera 12 anîmasyon piştgirî nakin.

Şêweyên tiştên razber ên ji bo avakirina cûrbecûr pêkhateyan (mîna şîroveyên blogê, Tweet, hwd.) ku li kêleka naveroka nivîsê wêneyek rêzkirî ya çep an rast vedihewîne.

Mînakek standard

Medyaya xwerû dihêle ku tiştek medyayê (wêne, vîdyo, deng) li çep an rastê bloka naverokê biherike.

Sernavê medyayê

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

Sernavê medyayê

<div class = "medya" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Sernavê medyayê </h4> 
    ...
 
    <!-- Nested media object -->
    <div class = "medya" > 
      ...
    </div>
  </div>
</div>

Lîsteya medyayê

Bi piçek nîşanek zêde, hûn dikarin medyayê di hundurê navnîşê de bikar bînin (ji bo mijarên şîroveyan an navnîşên gotaran bikêr e).

Sernavê medyayê

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.

Sernavê medyaya 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.

Sernavê medyaya 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.

Sernavê medyaya 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.
Sernavê medyayê
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 = "lîsteya medyayê" > 
  <li class = "medya" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Sernavê medyayê </h4> 
      ...
 
      <!-- Nested media object -->
      <div class = "medya" > 
        ...
     </div>
    </div>
  </li>
</ul>

Wells

Li ser hêmanek baş wekî bandorek hêsan bikar bînin da ku wê bandorek hundurîn bidin.

Binêre, ez di bîrekê de me!

<div class = "baş" > 
  ...
</div>

Dersên Bijarî

Bi du çînên guhêrbar ên vebijarkî, pêlav û quncikên dorpêçkirî kontrol bikin.

Binêre, ez di bîrekê de me!

<div class = "baş baş-mezin" > 
  ...
</div>

Binêre, ez di bîrekê de me!

<div class = "baş baş-biçûk" > 
  ...
</div>

Girtina îkonê

Ji bo betalkirina naverokê mîna modal û hişyariyê îkona nêzîkê ya gelemperî bikar bînin.

<button class = "nêzîkî" > × </button>

href="#"Ger hûn tercîh dikin ankerek bikar bînin cîhazên iOS-ê ji bo klîk bûyeran hewce dikin.

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

Dersên alîkar

Dersên hêsan, baldar ên ji bo pêşandana piçûk an guheztinên tevgerê.

.kişandin-çep

Elementek çepê birijîne

class = "çep-kişandin"

. kişandin - çep {
  float : çep ;
}

.kişandin-rast

Hêmanek rast bişo

class = "bikişîne-rast"

. kişandin - rast {
  float : rast ;
}

.bêdeng kirin

Rengê hêmanekê biguherînin#999

class = "bêdeng"

. bêdeng kirin {
  color : #999; 
}

.zelal kirin

floatLi ser her elementek paqij bikin

class = "zelal"

. zelalkirin {
  * zoom : 1 ; 
  &: berî ,
  &: piştî {
    nîşan dan : tablo ;
    naverok : "" ; 
  }
  &: piştî {
    zelal : hem ;
  }
}

Pêşekên dakêşanê

Mînak

Markup

Vebijêrk

Lihevkirina menuyan

Vebijarkên menuya astengdar

Sub menuyên li ser peldankan

Komên bişkojk

Examples

Koma bişkojka yekane

Komên bişkojka pirjimar

Komên bişkojka Vertical

Checkbox û çêjên radyoyê

Dropdowns di komên bişkojka

Pêşekên dakêşanê yên bişkojk

Nimûne û nimûne

Bi hemî pîvanên bişkojkê re dixebite

JavaScript hewce dike

Daxistina bişkojka Split

Sizes

Pêşekên avêtinê

Nav: tab, heb, û navnîşan

Vebijêrkên sivik Heman nîşankirin, çînên cûda

Tabloyên bingehîn

Hebên bingehîn

Dewlet seqet

Berhevkirina pêkhateyan

Stackable

Tebên lihevkirî

Hebên lihevkirî

Dropdowns

Tabên bi daxistinan

Pills bi dropdown

Nav lîsteyên

Mînak navnîşa nav

Dabeşkarên Horizontal

Navê Tabbable

Mînaka tabloyê

Di tabloyan de winda bibin

Pêveka jQuery hewce dike

Bi her alî ve tê tablokirin

Tabsên li jêr

Tabên li milê çepê

Tabên li rastê

Navbar

Navbara bingehîn

pêkhateyên Navbar

Şanika şewatê

Nav girêdan

Forms

Forma lêgerînê

Berhevkirina pêkhateyan

Bikaranîna peldankan

Nivîstok

Guhertoyên dîmendera Bijarî

Li jor rast kirin

Li jêr sabît kirin

Navbara jorîn a statîk

Navbara bersivdar

Guhertoya berevajîkirî

Breadcrumbs

Examples

Rûpelkirin Du vebijark ji bo rûpelkirina naverokê

Rûpelkirina standard

Vebijêrk

Dewletên astengdar û çalak

Sizes

Alignment

Pager

Mînakek standard

Girêdanên lihevkirî

Dewlet neçalak Bijarî

Etîket û nîşan

Labels

Badges

Bi hêsanî tê hilweşandin

pêkhateyên tîpografî

Yekîneya Hero

Silav, dinya!

Sernavê rûpelê