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.

Pratîkên çêtirîn

Em rêwerzên jêrîn ji bo karanîna komên bişkok û darikên amûran pêşniyar dikin:

• Her gav heman hêmanê di komek bişkokek yekane de bikar bînin, <a>an <button>.
• Bişkokên rengên cihêreng di heman koma bişkokê de tevlihev nekin.
• Ji bilî nivîsê an li şûna wê îkonan bikar bînin, lê pê ewle bin ku li cîhê ku pêdivî ye nivîsa alt û sernavê têxin nav xwe.

Komên Bişkojkên Têkildar ên bi daxistinan (li jêr binêre) divê ji hev veqetandî werin gazî kirin û her gav qulikek dakêşanê bihewîne da ku tevgera mebest nîşan bide.

Mînakek standard

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

Mînaka Toolbar

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>

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 »

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.

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>

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

Daxistina bişkokan di her mezinahiyê de dixebitin. sizes bişkojka te ji bo .btn-large,, .btn-smallan .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 xwerû çareser bikin.

Nimûne û nimûne

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.

Sizes

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

<div class = "btn-group" > 
  ...
  <ul class = "menu-dropdown pull-right" > 
    <!-- lînkên menuya daketî -->
  </ul>
</div>

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

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>

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

Dema ku bikar bînin

Tab û heb ji bo beşên naverokê an gera di navbera rûpelên naveroka têkildar de pir mezin in.

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.

Tabloyên bingehîn

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

• Xane
• Tengal
• Messages

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

• Xane
• Tengal
• Messages

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

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î

• Xane
• Tengal
• Messages

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

Hebên lihevkirî

• Xane
• Tengal
• Messages

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

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

• Xane
• Alîkarî
• Dropdown
  • Çalakî
  • Çalakiyek din
  • Tiştek din li vir
  • Girêdana veqetandî

<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

• Xane
• Alîkarî
• Dropdown
  • Çalakî
  • Çalakiyek din
  • Tiştek din li vir
  • Girêdana veqetandî

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

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>

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>

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

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

Javascript → bistînin

Mînaka tabloyê

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

Ji bo tabloyên rêzkirî yên rast an çep, pêl .nav-tabsû .tab-contentpê bikin .tabbable.

Nîşana rasterast

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

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

Tabsên li jêr

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

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

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

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

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

Navbara rastkirî

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

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

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

Gava ku hûn navbarê pêve dikin, ji bîr mekin ku hûn qada veşartî ya li jêr hesab bikin. 40px an jî zêdetir padding li ser zêde bikin <body>. Bawer bikin ku vê yekê piştî bingehîn Bootstrap CSS û berî CSS-ya bersivdar a vebijarkî lê zêde bikin.

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>

Formên di navbarê de

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

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>

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>

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>

Berhevkirina pêkhateyan

Ji bo ku nav, forma lêgerînê, .pull-leftan .pull-rightmetnek hevrêz bikin, çînên karûbar bikar bînin. Her du çîn dê di rêça diyarkirî de floatek CSS zêde bikin.

Zêdekirina pêşekên dakêşanê

Zêdekirina dakêşan û 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

Nivîsar di navbarê de

Rêzikên nivîsê bi tîpek <.navbar-text>, bi gelemperî li ser <p>tagek ji bo rêber û rengê rast bipêçin.

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

• Xane

• Mal /
• Pirtûkxane

• Mal /
• Pirtûkxane /
• Jimare

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 = "active" > Daneyên </li> 
</ul>

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>

Der barê pager

Parçeya pager komek lînkan e ji bo pêkanînên pagasyonê yên hêsan bi nîşankirina sivik û tewra şêwazên siviktir. Ew ji bo malperên hêsan ên mîna blogan an kovaran pir baş e.

Dewlet neçalak Bijarî

.disabledGirêdanên Pager di heman demê de çîna gelemperî ji pagasyonê bikar tînin.

Mînakek standard

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

• Pêşî
• Piştî

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

• ← Kevintir
• Nûtir →

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

Ji dor

Nîşan hêmanên piçûk û hêsan in ji bo nîşandana nîşanek an hejmartina cûrbecûr. Ew bi gelemperî di xerîdarên e-nameyê de wekî Mail.app an li ser sepanên mobîl ji bo agahdariya push têne dîtin.

Dersên berdest

Bootstrap hêmanek sivik, maqûl ku jê re yekîneyek qehreman tê gotin peyda dike da ku naveroka li ser malpera we destnîşan bike. Ew li ser malperên kirrûbirr û naverok-giran baş dixebite.

Markup

Naveroka xwe bi divvî rengî bipêçin:

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

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

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

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

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

Serê xwe! Amûrên iOS-ê href="#"ji bo rakirina hişyariyan pêdivî ye. Bawer bikin ku wê û taybetmendiya daneyê ji bo îkonên girtina lengerê têxin nav xwe. 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.

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

<div class = "hişyar-block" > 
  <a class = "close" data-dismiss = "hişyar" href = "#" > × </a>   
  <h4 class = "alert-heading" > Hişyarî! </h4> 
  Baştirîn xwe kontrol bikin, hûn ne ...
</div>

Error an xeter

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

Serketinî

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

Agahî

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

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 (ne IE) gradientek bikar tîne.

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

Animated

Mînaka xerîdar digire û wê zindî dike (ne IE).

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

Rengên zêde

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

bars striped

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

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

Opera û IE di vê demê de anîmasyon piştgirî nakin.

Wells

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

<div class = "baş" > 
  ...
</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> 

Ger hûn li şûna lengerekê bikar bînin, cîhazên iOS-ê ji bo bûyerên klîk bi href="#" hewce dikin.

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