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.

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:

  1. <div class = "btn-group" >
  2. <button class = "btn" > 1 </button>
  3. <button class = "btn" > 2 </button>
  4. <button class = "btn" > 3 </button>
  5. </div>

Mînaka Toolbar

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

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </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.

Daxistina bişkojan

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.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Çalakî
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "dropdown-menu" >
  7. <!-- lînkên menuya daketî -->
  8. </ul>
  9. </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.


Daxistina bişkojka Split

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.

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "menu-dropdown pull-right" >
  4. <!-- lînkên menuya daketî -->
  5. </ul>
  6. </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.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Çalakî </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <!-- lînkên menuya daketî -->
  8. </ul>
  9. </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.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Daxistin < /button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <!-- lînkên menuya daketî -->
  8. </ul>
  9. </div>

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

  1. <div class = "rûpelkirin" >
  2. <ul>
  3. <li><a href = "#" > Berê </a></li>
  4. <li class = "çalak" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > Paşê </a></li>
  11. </ul>
  12. </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î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.

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#" > Berê </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Paşê </a>
  7. </li>
  8. </ul>

Girêdanên lihevkirî

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

  1. <ul class = "pager" >
  2. <li class = "berê" >
  3. <a href = "#" > Kevintir </a>
  4. </li>
  5. <li class = "paşê" >
  6. <a href = "#" > Nûtir </a>
  7. </li>
  8. </ul>
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>

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

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>

Yekîneya Hero

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:

  1. <div class = "hero-unit" >
  2. <h1> Sernav </h1>
  3. <p> Tagline </p>
  4. <p>
  5. <a class = "btn btn-sereke btn-mezin" >
  6. Bêtir hîn bibin
  7. </a>
  8. </p>
  9. </div>

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

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.

  1. <div class = "rûpel-serî" >
  2. <h1> Sernivîsa rûpelê mînak </h1>
  3. </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 :

  1. <ul class = "piçûk" >
  2. <li class = "span3" >
  3. <a href = "#" class = "piçûk" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </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:

  1. <ul class = "piçûk" >
  2. <li class = "span3" >
  3. <div class = "piçûk" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Etîketa xêzkirinê </h5>
  6. <p> Sernivîsa hûrgilî li vir... </p>
  7. </div>
  8. </li>
  9. ...
  10. </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 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.

Gazî! Baştirîn xwe kontrol bikin, hûn pir baş xuya nakin.
  1. <div class = "hişyar" >
  2. <button class = "close" data-dismiss = "hişyar" > × </button>
  3. <strong> Hişyarî! </strong> Ji xwe herî baş kontrol bikin, hûn pir baş xuya nakin.
  4. </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î.

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.

  1. <div class = "hişyar-block" >
  2. <a class = "close" data-dismiss = "hişyar" href = "#" > × </a>
  3. <h4 class = "alert-heading" > Hişyarî! </h4>
  4. Baştirîn xwe kontrol bikin, hûn ne ...
  5. </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.
  1. <div class = "hişyarî-error" >
  2. ...
  3. </div>

Serketinî

Aferîn! Te ev peyama hişyariya girîng bi serkeftî xwend.
  1. <div class = "hişyarî-serkeftin" >
  2. ...
  3. </div>

Agahî

Serê xwe! Ev hişyarî hewceyê bala we ye, lê ew ne pir girîng e.
  1. <div class = "hişyariya agahdarî" >
  2. ...
  3. </div>

Nimûne û nîşankirin

Bingehîn

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

  1. <div class = "pêşketin" >
  2. <div class = "bar"
  3. style = " width : 60 %; " ></div>
  4. </div>

Striped

Ji bo afirandina bandorek xerîdar (ne IE) gradientek bikar tîne.

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

Animated

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

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

Vebijêrk û piştgiriya gerokê

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.

Binêre, ez di bîrekê de me!
  1. <div class = "baş" >
  2. ...
  3. </div>

Girtina îkonê

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

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

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