Components

Bi dehan hêmanên ji nû ve bi kar anîn di Bootstrap de têne çêkirin ku navîgasyon, hişyarî, popover, û hêj bêtir peyda bikin.

Komên bişkojk

Komên bişkokê bikar bînin da ku pir bişkokan wekî yek pêkhateyek pêkhatî bi hev re bicivînin. Wan bi rêzek <a>an <button>hêmanan ava bikin.

Her weha hûn dikarin <div class="btn-group">komek <div class="btn-toolbar">ji bo projeyên tevlihevtir tevlihev bikin.

Mînak nîşankirin

Li vir çawa HTML li komek bişkokek standard a ku bi bişkokên tagên ankerê hatî çêkirin dinihêre:

<div class = "btn-group" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</div>

Û bi toolbarek ji bo gelek koman:

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

Javascriptê bistînin »

Serî

CSS ji bo komên bişkojk di pelek cuda de ye, button-groups.less.

Daxistina bişkojan

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

Mînak nîşankirin

Mîna komek bişkokê, nîşankirina me nîşankirina bişkokê ya birêkûpêk bikar tîne, lê digel çend zêdekirinên ku şêwazê safîkirin û piştgirîkirina pêveka dakêşana jQuery ya Bootstrap bikar tîne.

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

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.

Mînak nîşankirin

Em li ser dakêşanên bişkojka normal berfireh dikin da ku çalakiyek bişkojka duyemîn a ku wekî tetikek dakêşanê ya cihê kar dike peyda bikin.

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

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

Çîna bingehîn a hêzdar

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 .

Çima tab û heban

Tab û hebên di Bootstrap de li ser <ul>heman HTML-ya bingehîn, navnîşek girêdanan têne çêkirin. Di navbera tab an heban de tenê bi dersek veguhezînin.

Her du vebijark ji bo jêr-beşên naverokê an gera di navbera rûpelên naveroka têkildar de pir mezin in.

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>

Stackable Tab an hebên vertîkal çêbikin

Meriv çawa wan berhev dike

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 Ji bo hêmanên nav-ya pêşkeftî

Menuyên dewlemend hêsan têne çêkirin

Pêşekên dakêşanê yên di tablo û hebên Bootstrap de pir hêsan in û tenê HTML-ya piçûktir û pêvekek sivik a jQuery hewce dike.

Serê rûpela Javascriptê bidin ku hûn belgeyên li ser destpêkirina dakêşanên li Bootstrap bixwînin.

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>

Lîsteyên Nav Navokên sade yên sade ava bikin, ji bo kêlekan pir mezin e

Navîgasyon-şêwaza serîlêdanê

Lîsteyên Nav rêyek hêsan û hêsan peyda dike ku komên girêdanên nav-ê bi sernavên vebijarkî ava bikin. Ew çêtirîn di kêlekên mîna Finder di OS X de têne bikar anîn.

Ji hêla strukturî ve, ew li ser heman şêwazên navika bingehîn ên wekî tab û heban têne çêkirin, ji ber vê yekê bikar anîn û xwerû hêsan e.

Bi îkonan

Lîsteyên Nav jî hêsan e ku bi îkonan ve were saz kirin. Etîketa rast <i>bi polê re zêde bikin û hûn amade ne.

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 = "#" > Malper </a> 
  </li>
  <li>
    <a href = "#" > Pirtûkxane </a> 
  </li>
  ...
</ul>

Mînak bi îkonan

Heman mînak, lê bi <i>etîketên ji bo îkonan.

<ul class = "nav-lîsteya nav" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      Pirtûkxane
    </a>
  </li>
  ...
</ul>

Navê Tabbable Bi javascriptê tabloyan bijîn

Çi tê de ye

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.

Guhertina di navbera wan de hêsan e û tenê guheztina nîşana pir hindik hewce dike.

Mînaka tabloyê

Ji bo ku tabloyên tabloyê çêbikin, di diviyek .nav-tabsdin de bi polê ve bipêçin .tabbable.

Ez di beşa 1 de me.

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

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

Pêveka xwerû ya jQuery

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 tabloyê li ser rûpela belgeyên javascript zindî dike.

Javascript → bistînin

Nîşana rasterast

Ji bo karanîna tabloyên tabloyek div, komek tabloyan, û komek pelên tabloyên naverokê hewce dike.

<div class = "tabable" > 
  <ul class = "nav-tabs" > 
    <li class = "çalak" ><a href = "#1" data-toggle = "tab" > Beş 1 </a></li>   
    <li><a href = "#2" data-toggle = "tab" > Beş 2 </a></li>  
  </ul>
  <div class = "tab-naveroka" > 
    <div class = "tab-pane çalak" id = "1" >  
      <p> Ez di beşa 1. de me. </p>
    </div>
    <div class = "tab-pane" id = "2" >  
      <p> Silav, ez di beşa 2. de me. </p>
    </div>
  </div>
</div>

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>

Mînaka navbara statîk

Nimûneyek navbarek statîk (ne li jor sabît) bi navê projeyê, navîgasyon û forma lêgerînê.

îskeleyên Navbar

Navbar tenê çend div hewce dike ku wê ji bo dîmendera statîk an sabît baş ava bike.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "konteyner" > 
      ...
    </div>
  </div>
</div>

Ji bo ku navbar li jora dîmenderê were sabît kirin, li .navbar-fixed-topdiv-ya herî derveyî zêde bikin .navbar,. padding-top: 40px;Di CSS-ya xwe de, hûn ê her weha hewce bikin ku lihevhatina ku ew dibe sedema bi lêzêdekirina li xwe hesab bikin <body>.

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

Navê marka

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>

Forma lêgerînê

Formên lêgerînê di navbarê de bi .navbar-searchpolê re şêwazên xwerû distînin. Tevlî .pull-leftan jî .pull-rightli ser formku ew bi hev re hev bikin.

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

Guhertoya bersivdar Bijarî

Li gorî mêjera naverokê di topbara xwe de, dibe ku hûn bixwazin vebijarkên bersivdar bicîh bînin. Ji bo wiya bikin, naveroka navbara 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" > 
        <!-- .nav, .navbar-lêgerîn, .navbar-form, hwd -->
      </div>
 
    </div>
  </div>
</div>

Serê xwe! Navbara bersivdar pêveka hilweşandinê hewce dike .

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>

Zêdekirina peldankan

Zêdekirina dakêşan li nav-ê pir hêsan e, lê pêdivî bi karanîna pêveka meya javascript heye .

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

Javascript → bistînin

Çima wan bikar bînin

Navîgasyon Breadcrumb wekî rêyek tê bikar anîn ku nîşan bide bikarhêneran ku ew di hundurê serîlêdanek an malperek de ne, lê ne ji bo navîgasyonek bingehîn. Bikaranîna wan kêm û kurt bihêlin da ku herî bi bandor be.

Examples

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

Markup

HTML navnîşa weya standard a nerêkûpêk bi girêdan e.

<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 = "çalak" > 
    <a href = "#" > Daneyên </a> 
  </li>
</ul>

Rûpelên pir-rûpel

Dema ku bikar bînin

Rûpelek pir sade û hindik bi şêwazê 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.

Girêdanên rûpela dewletdar

Zencîr têne xweş kirin û di çend rewşan de bi çîna rast re dixebitin. .disabledji bo zencîreyên ku nayên klîk kirin û .activeji bo rûpela heyî.

Alignment Flexible

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

Examples

Parçeya pagasyonê ya xwerû maqûl e û di gelek guhertoyan de dixebite.

Markup

Di nav a pêçayî de <div>, rûpelkirin tenê yek e <ul>.

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

Pager Ji bo lînkên zû yên berê û yên paşîn

Der barê pager

Parçeya pager komek lînkan e ji bo pêkanîna pagasyonên hêsan ên bi nîşankirina sivik û tewra şêwazên siviktir. 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>

Labels	Markup
Destçûnî	`<span class="label">Default</span>`
Nşh	`<span class="label label-success">New</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>`

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î

Ç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

Nîşankirin

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 = "span3" > 
    <a href = "#" class = "piçûk" >  
      <img src = "https://placehold.it/260x180" 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 = "span3" > 
    <div class = "piçûk" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Etîketa xêzkirinê </h5>
      <p> Sernivîsa hûrgilî li vir... </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.

Pêşniyarên sivik

Dersa bingehîn ji nû ve hatî nivîsandin

Bi Bootstrap 2 re, me çîna bingehîn hêsan kiriye: .alertli şûna .alert-message. Me di heman demê de nîşana herî hindik a pêwîst jî kêm kir - na <p>ji hêla xwerû ve hewce ye, tenê ya derveyî <div>.

Peyama hişyariya yekane

Ji bo pêkhateyek domdar û bi koda hindiktir, me dîmena cihêreng a hişyariyên blokê, peyamên ku bi peldankek pirtir û bi gelemperî nivîsek pirtir têne hilanîn. Ders jî guhertiye .alert-block.

Bi javascript re xweş derbas dibe

Bootstrap bi pêvekek mezin a jQuery ve tê ku peyamên hişyariyê piştgirî dike, rakirina wan zû û hêsan dike.

Pêvekê bistînin »

Mînak alerts

Peyama xwe û îkonek girtina vebijarkî di div bi pola sade de bipêçin.

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

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

Peyama hişyariya standard bi du dersên vebijarkî bi hêsanî dirêj bikin: .alert-blockji bo bêtir kontrolên padding û nivîsê û .alert-headingji bo sernavek lihevhatî.

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" > 
  <a class = "nêzîkî" > × </a> 
  <h4 class = "alert-heading" > Hişyarî! </h4> 
  Baştirîn xwe kontrol bikin, hûn ne ...
</div>

Alternatîfên hevokê Ji bo guheztina têgînek hişyariyê dersên vebijarkî lê zêde bikin

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.

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

Animated

Mînaka xerîdar digire û zindî dike.

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

Vebijêrk û piştgiriya gerokê

Rengên zêde

Barên pêşkeftinê hin navên heman polê wekî bişkok û hişyariyan ji bo şêwazek wekhev bikar tînin.

.progress-info
.progress-success
.progress-danger

Wekî din, hûn dikarin pelên LESS-ê xweş bikin û reng û pîvanên xwe bixin.

Xwenîşandinî

Barên pêşkeftinê veguheztinên CSS3 bikar tînin, ji ber vê yekê heke hûn bi javascript ve firehiyê bi dînamîk rast bikin, ew ê bi hêsanî mezinahiyê biguheze.

Ger hûn .activepolê bikar bînin, .progress-stripedbarên pêşkeftina we dê xetên çepê ber bi rastê ve zindî bikin.

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-8 an guhertoyên kevntir ên Firefox-ê de nayên piştgirî kirin.

Opera di vê demê de anîmasyon piştgirî nake.

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>

Badges

Ji bo jimareyek nexwendî an wekî nîşanek hêsan nîşanek li ser hêmanek bikar bînin.

<span class = "nîşan" > 3 </div>

Girtina îkonê

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

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

Komên bişkokan Ji bo bêtir fonksiyonên mîna barika amûran tevlê bişkokên bibin

Komên bişkojk

Mînak nîşankirin

Checkbox û çêjên radyoyê

Serî

Daxistina bişkokan Pêşekên dakêşana hevçerxeyê ku li ser komên bişkokê hatine çêkirin

Daxistina bişkojan

Mînak nîşankirin

Daxistina bişkojka Split

Mînak nîşankirin

Nav, tab, û heban Navîgasyon bi şêwaza navnîşê ya pir xwerû

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

Çîna bingehîn a hêzdar

Çima tab û heban

Tabloyên bingehîn

Hebên bingehîn

Stackable Tab an hebên vertîkal çêbikin

Meriv çawa wan berhev dike

Tebên lihevkirî

Hebên lihevkirî

Dropdowns Ji bo hêmanên nav-ya pêşkeftî

Menuyên dewlemend hêsan têne çêkirin

Tabên bi daxistinan

Pills bi dropdown

Lîsteyên Nav Navokên sade yên sade ava bikin, ji bo kêlekan pir mezin e

Navîgasyon-şêwaza serîlêdanê

Bi îkonan

Mînak navnîşa nav

Mînak bi îkonan

Navê Tabbable Bi javascriptê tabloyan bijîn

Çi tê de ye

Mînaka tabloyê

Pêveka xwerû ya jQuery

Nîşana rasterast

Bi her alî ve tê tablokirin

Tabsên li jêr

Tabên li milê çepê

Tabên li rastê

Navbar

Mînaka navbara statîk

îskeleyên Navbar

Navê marka

Forma lêgerînê

Guhertoya bersivdar Bijarî

Nav girêdan

Zêdekirina peldankan

Breadcrumbs

Çima wan bikar bînin

Examples

Markup

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

Rûpelên pir-rûpel

Dema ku bikar bînin

Girêdanên rûpela dewletdar

Alignment Flexible

Examples

Markup

Pager Ji bo lînkên zû yên berê û yên paşîn

Der barê pager

Mînakek standard

Girêdanên lihevkirî

Etîketên xêzkirî Etîket û şîrovekirina nivîsê

Thumbnails Tûrên wêne, vîdyoy, nivîs, û hêj bêtir

Mînakên xwerû

Pir xwerû

Labelê thumbnail

Labelê thumbnail

Çima thumbnail bikar bînin

Nîşankirina hêsan, maqûl

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

Nîşankirin

Nimûneyên bêtir

Alerts Styles ji bo serketin, hişyarî, û peyamên çewtiyê

Pêşniyarên sivik

Dersa bingehîn ji nû ve hatî nivîsandin

Peyama hişyariya yekane

Bi javascript re xweş derbas dibe

Mînak alerts

Gazî!

Alternatîfên hevokê Ji bo guheztina têgînek hişyariyê dersên vebijarkî lê zêde bikin