Bootstrap

Bingeha CSS

Hêmanên bingehîn ên HTML-ê bi dersên berfereh hatine şêwazkirin û zêdekirin.

Tîpografi

Sernav

Hemî sernavên HTML-ê, <h1>bi navgîniyê <h6>hene.

h1. Sernav 1

h2. Sernav 2

h3. Sernav 3

h4. Sernav 4

h5. Sernav 5
h6. Sernav 6

Kopiya laş

font-sizePêşniyara gerdûnî ya Bootstrap 14px , bi 20pxline-height e . Ev li ser û hemî paragrafan tê sepandin. Wekî din, (paragraf) marjînalek jêrîn ji nîvê bilindahiya rêza xwe (10px bi xwerû) distînin.<body><p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Kopê laşê rêber

Bi lêzêdekirina paragrafekê rawestin .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class = "lead" > ... </p>

Bi Less ve hatî çêkirin

Pîvana tîpografî li ser du guhêrbarên KÊM di guhêrbaran de ye.kêmtir : @baseFontSizeû @baseLineHeight. Ya yekem mezinahiya tîpên bingehîn e ku li seranserê tê bikar anîn û ya duyemîn jî rêzika bingehîn e. Em wan guherbaran û hin matematîkî yên hêsan bikar tînin da ku marjînal, peldank, û bilindahiyên rêzê yên hemî celeb û hêj bêtir biafirînin. Wan xweş bikin û Bootstrap adapte dike.

Bidengî

Bi şêwazên sivik etîketên giraniya xwerû yên HTML-ê bikar bînin.

<small>

Ji bo kêmkirina xêz an blokên nivîsê, nîşana piçûk bikar bînin.

Ev rêza nivîsê tê vê wateyê ku wekî çapa xweş were hesibandin.

<p> <biçûk> Ev rêza nivîsê tê mebesta ku wekî çapa xweş were hesibandin. </small> </p>

Hesabî

Ji bo balkişandina perçeyek nivîsê ya bi tîpek girantir.

Parçeyek nivîsê ya jêrîn wekî metna stûr tê pêşkêş kirin .

<strong> wekî metna qelew hatiye pêşkêşkirin </strong>

Îtalîk

Ji bo balkişandina parçeyek nivîsê ya bi îtalîk.

Parçeya nivîsê ya jêrîn wekî nivîsa îtalîk tê pêşkêş kirin .

<em> wekî metna îtalîk hatiye pêşkêşkirin </em>

Serê xwe!Di HTML5-ê de <b>û bi serbestî bikar bînin . tê vê wateyê ku peyvan an hevokan ronî bike bêyî ku girîngiyek zêde ragihîne dema ku bi piranî ji bo deng, peyvên teknîkî, hwd.<i><b><i>

Dersên giraniyê

Bi çend dersên bikêrhatî yên girîng re wateyê bi rengê xwe vebigihînin.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

  1. <p class = "muted" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
  2. <p class = "text-hişyarî" > Ji ber vê yekê ji bo magna mollis euismod ji bo vê yekê veşêre. </p> 
  3. <p class = "text-error" > Ji bo ku hûn nenivîsin, nenivîsin. </p> 
  4. <p class = "text-info" > Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
  5. <p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Kurtenivîsandin

Pêkanîna stîlîzekirî ya <abbr>hêmana HTML-ê ji bo kurtenivîs û kurtenivîsan da ku guhertoya berfireh li ser hover nîşan bide. Kurtenivîsên bi titletaybetmendiyê xwedan sînorê jêrînek sivik û xalîçeyek arîkariyê li ser hêlînê hene, ku li ser hêlînê çarçoveyek zêde peyda dike.

<abbr>

Ji bo nivîsa berferehkirî ya li ser hêlîna dirêj a kurtenivîsê, titletaybetmendiyê têxe nav xwe.

Kurteya peyva taybetmendiyê attr e .

<abbr title = "attribute" > attr </abbr>

<abbr class="initialism">

Ji .initialismbo tîpek piçûktir li kurtenivîsekê zêde bikin.

HTML ji nanê perçekirî de tiştê çêtirîn e.

<abbr title = "Zimanê Nîşandana HyperText" class = "destpêkî" > HTML </abbr>

Navnîşan

Agahdariya têkiliyê ji bo bav û kalê herî nêzîk an tevahiya laşê xebatê pêşkêş bikin.

<address>

Bi qedandina hemû rêzan bi <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Navê
Tev [email protected] 
  1. <navnîşan>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   795 Folsom Ave, Suite 600 <br>
  4.   San Francisco, CA 94107 <br>
  5.   <abbr title = "Telefon" > P: </abbr> (123) 456-7890 
  6. </address>
  7.  
  8. <navnîşan>
  9.   <strong> Navê Temam </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </address>

Blockquotes

Ji bo girtina blokên naverokê ji çavkaniyek din di hundurê belgeya we de.

Blockquote standard

<blockquote>Li dora her HTML-ê wekî vebêjê bipêçin . Ji bo bêjeyên rasterast em a pêşniyar dikin <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  3. </blockquote>

Vebijarkên Blockquote

Guhertinên şêwaz û naverok ji bo guheztinên hêsan ên li ser blokek standard.

Navê çavkaniyekê

Ji <small>bo naskirina çavkaniyê tagê zêde bikin. Navê xebata çavkaniyê pêça <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Kesek di Sernavê Çavkaniyê de navdar e 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  3.   <small> Kesekî navdar <cite title = "Source Title" > Sernavê Çavkanî </cite></small> 
  4. </blockquote>

Pêşandanên Alternatîf

Ji .pull-rightbo bloka pêvekirî, rast-rastkirî bikar bînin.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Kesek di Sernavê Çavkaniyê de navdar e 
  1. <blockquote class = "bikişîne-rast" > 
  2.   ...
  3. </blockquote>

Lists

Unordered

Lîsteya tiştên ku rêzik tê de ne girîng e.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Hêsankirin di aliquet pretium nisl
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

Ferman kirin

Lîsteya tiştên ku rêzik tê de bi eşkere girîng e.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Hêsankirin di aliquet pretium nisl
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
  1. <ol>
  2.   <li> ... </li>
  3. </ol>

Unstyled

Lîsteya hêmanên ku bê list-stylepeldanka çepê ne an zêde ye.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Hêsankirin di aliquet pretium nisl
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul class = "nexwedî" > 
  2.   <li> ... </li>
  3. </ul>

Terîf

Lîsteya şertan bi danasînên wan ên têkildar.

Navnîşan lîsteyên
Lîsteya ravekirinê ji bo diyarkirina terman bêkêmasî ye.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Danasîna Horizontal

Şert û şiroveyan li <dl>kêleka hev rêz bikin.

Navnîşan lîsteyên
Lîsteya ravekirinê ji bo diyarkirina terman bêkêmasî ye.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 
  1. <dl class = "dl-horizontal" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Serê xwe!Lîsteyên danasînên asoyî dê şertên ku pir dirêj in ku di rastkirina stûna çepê de cih bigirin qut bikin text-overflow. Di dîmenderên teng de, ew ê biguhezînin sêwirana stêrkek xwerû.

Navê dizî

Inline

Parçeyên kodê yên hundurîn bi <code>.

Mînakî, <section>divê wekî hundur were pêçan. 
  1. Bo nimûne , <code><section> </ code > divê wekî navçê were pêçandin .

Bloka bingehîn

Ji <pre>bo gelek rêzikên kodê bikar bînin. Ji bo vekêşana rast, pê ewle bin ku hûn di kodê de ji bendikên goşeyê birevin.

<p>Nimûneya nivîsê li vir...</p>
  1. <pre>
  2.   <p>Nimûneya nivîsê li vir...</p>
  3. </pre>

Serê xwe!Bawer bikin ku kodê di nav <pre>etîketan de heya ku mimkun nêzîkê çepê ye; ew ê hemî tabloyan bide.

Hûn dikarin vebijarkî .pre-scrollableçîna ku dê bilindahiyek herî zêde 350 px destnîşan bike û pêvekek y-axis peyda bike lê zêde bike.

Tables

Şêweyên xwerû

Ji bo şêwaza bingehîn - pêlava sivik û tenê dabeşkerên horizontî - çîna bingehîn .tableli her yekê zêde bikin <table>.

# Nav Paşnav Navê bikarhêner
1 Delîl Otto @mdo
2 Jacob Thornton @rûn
3 Larry Çûk @twitter 
  1. <table class = "table" > 
  2.   …
  3. </table>

Dersên Bijarî

Yek ji çînên jêrîn li çîna .tablebingehîn zêde bikin.

.table-striped

Zebra-striping li her rêzika tabloyê di nav hilbijêra CSS-ê de (di IE7-IE8 de tune) zêde dike <tbody>.:nth-child

# Nav Paşnav Navê bikarhêner
1 Delîl Otto @mdo
2 Jacob Thornton @rûn
3 Larry Çûk @twitter 
  1. <table class = "table-table-striped" > 
  2.   …
  3. </table>

.table-bordered

Sînor û quncikên dorpêçkirî li maseyê zêde bikin.

# Nav Paşnav Navê bikarhêner
1 Delîl Otto @mdo
Delîl Otto @getbootstrap
2 Jacob Thornton @rûn
3 Larry The Bird @twitter 
  1. <table class = "table-table-bordered" > 
  2.   …
  3. </table>

.table-hover

Li ser rêzên tabloyê di nav a <tbody>.

# Nav Paşnav Navê bikarhêner
1 Delîl Otto @mdo
2 Jacob Thornton @rûn
3 Larry The Bird @twitter 
  1. <table class = "table table-hover" > 
  2.   …
  3. </table>

.table-condensed

Bi qutkirina pelika hucreyê di nîvî de tabloyan tevlihevtir dike.

# Nav Paşnav Navê bikarhêner
1 Delîl Otto @mdo
2 Jacob Thornton @rûn
3 Larry The Bird @twitter 
  1. <table class = "table-table-condensed" > 
  2.   …
  3. </table>

Dersên rêza Bijarî

Ji bo rengînkirina rêzên tabloyê dersên kontekstê bikar bînin.

Sinif Terîf
.success Çalakiyek serkeftî an erênî nîşan dide.
.error Çalakiyek xeternak an potansiyel neyînî nîşan dide.
.warning Hişyariyek ku dibe ku balê hewce bike destnîşan dike.
.info Wekî alternatîfek ji şêwazên xwerû tê bikar anîn.
# Mal Payment Taken Cî
1 TB - Mehane 01/04/2012 Pejirandin
2 TB - Mehane 02/04/2012 Qebûl kirin
3 TB - Mehane 03/04/2012 Nexelas
4 TB - Mehane 04/04/2012 Ji bo piştrastkirinê bang bikin 
  1. ...
  2.   < tr class = "serkeftin" >
  3.     <td> 1 < /td>
  4.     <td>TB - Mehane</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td> Pejirandin</ td >
  7.   </ tr >
  8. ...

Nîşana sifrê piştgirî kirin

Lîsteya hêmanên HTML-ê yên tabloya piştgirîkirî û divê ew çawa werin bikar anîn.

Tag Terîf
<table> Hêmana pêçanê ji bo nîşandana daneyan di forma tabloyê de
<thead> Hêmana konteynerê ji bo rêzên sernavê tabloyê ( <tr>) ji bo etîketkirina stûnên tabloyê
<tbody> Hêmana konteyner a ji bo rêzên tabloyê ( <tr>) di laşê tabloyê de
<tr> Hêmana konteyner ji bo komek şaneyên tabloyê ( <td>an <th>) ku li ser rêzek yekane xuya dike
<td> Hucreya sifrê ya standard
<th> Ji bo etîketên stûnê (an rêz, li gorî çarçove û cîhê) hucreya tabloya taybetî
Divê di hundurê de were bikar anîn<thead>
<caption> Danasîn an kurteya tiştê ku tablo digire, bi taybetî ji bo xwendevanên ekranê kêrhatî ye 
  1. <table>
  2.   <caption> ... </caption>
  3.   <serî>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </tr>
  8.   </thead>
  9.   <tbody>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </table>

Forms

Şêweyên xwerû

Kontrolên formê yên takekesî şêwazê distînin, lê bêyî çîna bingehîn a pêwîst li ser <form>nîşankirinê an guhertinên mezin di nîşankirinê de. Encamên li ser etîketên lihevkirî û çepgir ên li ser kontrolên formê hene.

Çîrok Mînak nivîsara alîkariyê ya asta blokê li vir. 
  1. <form>
  2.   <fieldset>
  3.     <legend> Efsane </legend>
  4.     <label> Navê labelê </label>
  5.     <input type = "text" placeholder = "Tiştekî binivîse..." >  
  6.     <span class = "help-block" > Mînak nivîsara alîkariyê ya asta blokê li vir. </span> 
  7.     <label class = "qutiya kontrolê" > 
  8.       <input type = "checkbox" > Min kontrol bike 
  9.     </label>
  10.     <button type = "submit" class = "btn" > Bişîne </button>  
  11.   </fieldset>
  12. </form>

layouts Bijarî

Di nav Bootstrap-ê de sê sêwirên forma vebijarkî ji bo dozên karanîna gelemperî hene.

Forma lêgerînê

Ji bo têketina nivîsê ya zêde-dorvekirî .form-searchli formê û .search-queryli ser lê zêde bikin.<input>

  1. <form class = "form-lêgerîn" > 
  2.   <input type = "text" class = "lêgerîn-lêgerîna navgîniya têketinê" >  
  3.   <button type = "submit" class = "btn" > Bigere </button>  
  4. </form>

Forma hundurîn

Ji .form-inlinebo etîketên çepgir û kontrolên blokê yên hundurîn ji bo sêwirana tevlihev zêde bikin.

  1. <form class = "form-inline" > 
  2.   <input type = "text" class = "input-small" placeholder = "Email" >   
  3.   <input type = "şîfre" class = "input-small" placeholder = "Şîfre" >   
  4.   <label class = "qutiya kontrolê" > 
  5.     <input type = "checkbox" > Min bi bîr bîne 
  6.   </label>
  7.   <button type = "submit" class = "btn" > Têkeve </button>  
  8. </form>

Forma Horizontal

Etîketan rastê rêz bikin û wan ber bi çepê ve bihêlin da ku ew li ser heman rêzê wekî kontrolê xuya bibin. Guhertinên herî zêde nîşankirinê ji formek xwerû hewce dike:

  • Têxe .form-horizontalformê
  • Etîket û kontrolên xwe pêça.control-group
  • Têxe .control-labellabelê
  • Ji bo lihevhatina rast, her kontrolên têkildar .controlspêça
  1. <form class = "form-horizontal" > 
  2.   <div class = "kontrol-kom" > 
  3.     <label class = "control-label" for = "inputEmail" > Email </label>  
  4.     <div class = "kontrol" > 
  5.       <input type = "text" id = "inputEmail" placeholder = "Email" >   
  6.     </div>
  7.   </div>
  8.   <div class = "kontrol-kom" > 
  9.     <label class = "control-label" for = "inputPassword" > Şîfre </label>  
  10.     <div class = "kontrol" > 
  11.       <input type = "password" id = "inputPassword" placeholder = "Şîfre" >   
  12.     </div>
  13.   </div>
  14.   <div class = "kontrol-kom" > 
  15.     <div class = "kontrol" > 
  16.       <label class = "qutiya kontrolê" > 
  17.         <input type = "checkbox" > Min bi bîr bîne 
  18.       </label>
  19.       <button type = "submit" class = "btn" > Têkeve </button>  
  20.     </div>
  21.   </div>
  22. </form>

Kontrolên formê piştgirî kirin

Nimûneyên kontrolên forma standard ên ku di sêwirana forma nimûneyê de têne piştgirî kirin.

Inputs

Kontrola forma herî gelemperî, qadên têketina-based nivîsê. Piştgiriya ji bo hemî celebên HTML5-ê vedihewîne: nivîs, şîfre, demjimêr, tarîx-herêmî, tarîx, meh, dem, hefte, hejmar, e-name, url, lêgerîn, têl û reng.

Pêdivî ye ku her gav karanîna diyarkirî bikar bînin type.

  1. <input type = "text" placeholder = "Text input" >

Textarea

Kontrola formê ya ku pir rêzikên nivîsê piştgirî dike. rowsWekî ku hewce ye, taybetmendiyê biguherînin .

  1. <textarea rows = "3" ></textarea>

Checkboxes û radyo

Qutikên kontrolê ji bo hilbijartina yek an çend vebijarkan di navnîşek de ne dema ku radyo ji bo hilbijartina yek vebijarkek ji gelekan in.

Pêşbirk (lihevkirî)


  1. <label class = "qutiya kontrolê" > 
  2.   <input type = "checkbox" value = "" >  
  3.   Vebijêrk yek ev û ew e - pê ewle bin ku çima ew mezin e
  4. </label>
  5.  
  6. <label class = "radyo" > 
  7.   < type input = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" hat kontrol kirin >     
  8.   Vebijêrk yek ev û ew e - pê ewle bin ku çima ew mezin e
  9. </label>
  10. <label class = "radyo" > 
  11.   < type input = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  12.   Vebijêrk du dikare tiştek din be û hilbijartina wê dê vebijarka yekê jêbirin
  13. </label>

Qutiyên kontrolê yên hundurîn

Ji .inlinebo kontrolên ku li ser heman xetê xuya dibin, polê li rêzek qutiyên kontrolê an radyoyan zêde bikin.

  1. <label class = "qutiya kontrolê ya navxwe" > 
  2.   <input type = "checkbox" id = "inlineCheckbox1" nirx = "option1" > 1   
  3. </label>
  4. <label class = "qutiya kontrolê ya navxwe" > 
  5.   <input type = "checkbox" id = "inlineCheckbox2" nirx = "option2" > 2   
  6. </label>
  7. <label class = "qutiya kontrolê ya navxwe" > 
  8.   <input type = "checkbox" id = "inlineCheckbox3" nirx = "option3" > 3   
  9. </label>

Hilbijêre

Vebijarka xwerû bikar bînin an jî a diyar bikin multiple="multiple"da ku gelek vebijarkan bi yekcarî nîşan bidin.


  1. <hilbijêre>
  2.   <option> 1 </option>
  3.   <option> 2 </option>
  4.   <option> 3 </option>
  5.   <option> 4 </option>
  6.   <option> 5 </option>
  7. </select>
  8.  
  9. < multiple hilbijêre = "pirjimar" > 
  10.   <option> 1 </option>
  11.   <option> 2 </option>
  12.   <option> 3 </option>
  13.   <option> 4 </option>
  14.   <option> 5 </option>
  15. </select>

Berfirehkirina kontrolên formê

Li ser kontrolên geroka heyî yên heyî zêde dike, Bootstrap hêmanên forma kêrhatî yên din vedigire.

Têketinên pêvekirî û pêvekirî

Nivîs an bişkokan berî an piştî têketina-based nivîsê zêde bikin. Bala xwe bidinê ku selecthêman li vir nayên piştgirî kirin.

Vebijarkên xwerû

An .add-onû an inputbi yek ji du çînan ve bipêçin da ku nivîsê li têketinekê pêşde bikin an pêve bikin.

@

.00 
  1. <div class = "input-prepend" > 
  2.   <span class = "add-on" > @ </span> 
  3.   <input class = "span2" id = "prependedInput" type = "text" placeholder = "Navê bikarhêner" >    
  4. </div>
  5. <div class = "input-append" > 
  6.   <input class = "span2" id = "appendedInput" type = "text" >   
  7.   <span class = "add-on" > .00 </span> 
  8. </div>

Têkel

Hem çîn û hem jî du mînakan bikar bînin .add-onda ku têketinek pêşde bikin û pêve bikin.

$ .00 
  1. <div class = "input-prepend input-append" > 
  2.   <span class = "add-on" > $ </span> 
  3.   <input class = "span2" id = "appendedPrependedInput" type = "text" >   
  4.   <span class = "add-on" > .00 </span> 
  5. </div>

Bişkokên şûna nivîsê

Li şûna a <span>bi nivîsê, a bikar bînin .btnda ku bişkokek (an du) bi têketinekê ve girêbidin.

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButton" type = "text" >   
  3.   <button class = "btn" type = "button" > Biçe! </button>  
  4. </div>
  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButtons" type = "text" >   
  3.   <button class = "btn" type = "button" > Bigere </button>  
  4.   <button class = "btn" type = "button" > Vebijêrk </button>  
  5. </div>

Daxistina bişkojan

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedDropdownButton" type = "text" >   
  3.   <div class = "btn-group" > 
  4.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  5.       Çalakî
  6.       <span class = "caret" ></span> 
  7.     </button>
  8.     <ul class = "dropdown-menu" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div class = "input-prepend" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       Çalakî
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "dropdown-menu" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "prependedDropdownButton" type = "text" >   
  12. </div>
  1. <div class = "input-prepend input-append" >
  2.   <div class = "btn-group" >
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" > 
  4.       Çalakî
  5.       <span class = "caret" ></span>
  6.     </button>
  7.     <ul class = "dropdown-menu" >
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "appendedPrependedDropdownButton" type =    "text" >
  12.   <div class = "btn-group" >
  13.     <button class = "btn dropdown-toggle" data-veguhertina  = "dropdown" >
  14.       Çalakî
  15.       <span class = "caret" ></span>
  16.     </button>
  17.     <ul class = "dropdown-menu" >
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Forma lêgerînê

  1. <form class = "form-lêgerîn" > 
  2.   <div class = "input-append" > 
  3.     < type input = "text" class = "span2 search-query" >  
  4.     <button type = "submit" class = "btn" > Bigere </button>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "submit" class = "btn" > Bigere </button>  
  8.     < type input = "text" class = "span2 search-query" >  
  9.   </div>
  10. </form>

Mezinahiya kontrolê

Dersên mezinbûnê yên têkildar bikar bînin .input-largean jî têketinên xwe bi mezinahiyên stûna torê re bi karanîna .span*çînan bikar bînin.

Têketinên asta asteng bikin

Bikin ku yek <input>an <textarea>hêmanek mîna hêmanek asta blokê tevbigere.

  1. <input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

Mezinbûna nisbî

  1. <input class = "input-mini" type = "text" placeholder = ".input-mini" >   
  2. <input class = "input-small" type = "text" placeholder = ".input-small" >   
  3. <input class = "input-medium" type = "text" placeholder = ".input-navîn" >   
  4. <input class = "input-large" type = "text" placeholder = ".input-large" >   
  5. <input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
  6. <input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

Serê xwe!Di guhertoyên paşerojê de, em ê karanîna van çînên têketina têkildar biguhezînin da ku bi pîvanên bişkojka xwe re li hev bikin. Mînakî, .input-largedê peldank û mezinahiya fontê ya têketinê zêde bike.

Mezinbûna torê

Ji .span1bo .span12têketinên ku heman mezinahiyên stûnên torê li hev dikin bikar bînin.

  1. <input class = "span1" type = "text" placeholder = ".span1" >   
  2. <input class = "span2" type = "text" placeholder = ".span2" >   
  3. <input class = "span3" type = "text" placeholder = ".span3" >   
  4. <select class = "span1" > 
  5.   ...
  6. </select>
  7. <select class = "span2" > 
  8.   ...
  9. </select>
  10. <select class = "span3" > 
  11.   ...
  12. </select>

Ji bo têketinên torê yên pir rêzê, ji bo .controls-rowcîhgirtina rast çîna guhêrbar bikar bînin . Ew danûstendinan diherike da ku cîhê spî hilweşîne, marjînalên rast destnîşan dike, û hêlînê paqij dike.

  1. <div class = "kontrol" > 
  2.   <input class = "span5" type = "text" placeholder = ".span5" >   
  3. </div>
  4. <div class = "controls controls-row" > 
  5.   <input class = "span4" type = "text" placeholder = ".span4" >   
  6.   <input class = "span1" type = "text" placeholder = ".span1" >   
  7. </div>
  8. ...

Kevirên neguherbar

Daneyên bi formek ku nayê guherandin bêyî karanîna nîşankirina forma rastîn pêşkêş bikin.

Hin li vir nirx dikin 
  1. <span class = "input-xlarge uneditable-input" > Li vir hinek nirx </span>

Çalakiyan çêbikin

Bi komek çalakiyan (bişkokan) formek bi dawî bikin. Dema ku di nav a- .form-horizontalyê de were danîn, bişkok dê bixweber bikevin da ku bi kontrolên formê re rêz bibin.

  1. <div class = "form-çalakiyên" > 
  2.   <button type = "submit" class = "btn btn-primary" > Guherandinên tomar bike </button>  
  3.   <button type = "button" class = "btn" > Betal bike </button>  
  4. </div>

Nivîsara alîkariyê

Ji bo nivîsa alîkariyê ya ku li dora kontrolên formê xuya dike piştgirîya asta hundurîn û blokê.

Alîkariya Inline

Nivîsara alîkariyê ya hundurîn 
  1. <input type = "text" ><span class = "help-inline" > Nivîsara alîkariyê ya hundurîn </span>

Astengkirina alîkariyê

Blokek dirêj a nivîsa alîkariyê ya ku li ser rêzek nû vediqete û dibe ku ji yek rêzê derbas bibe. 
  1. <input type = "text" ><span class = "help-block" > Blokeke dirêj a nivîsa alîkariyê ku li ser rêzek nû diqete û dibe ku ji yek rêzê derbas bibe. </span>

Dewletên kontrolkirina formê

Li ser kontrolên form û etîketan bi rewşên nerînên bingehîn re ji bikarhêner an mêvanan re bertek bidin.

Input focus

Em outlineşêwazên xwerû yên li ser hin kontrolên formê radikin û a box-shadowli şûna wê ji bo :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Ev baldar e..." >

Têketinên neçalak

Taybetmendiyê li ser têketinê zêde disabledbikin da ku pêşî li têketina bikarhêner bigire û dîmenek hinekî cûda derxe holê.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Ketina li vir betal bû..." neçalak bû >

Dewletên erêkirinê

Bootstrap ji bo xeletî, hişyarî, agahdarî û peyamên serfiraziyê şêwazên pejirandinê vedihewîne. Ji bo bikar bînin, çîna guncan li derdorê zêde bikin .control-group.

Dibe ku tiştek xelet çûbe
Ji kerema xwe xeletiyê rast bikin
Navê bikarhêner tê girtin
Woohoo! 
  1. <div class = "hişyariya koma kontrolê" > 
  2.   <label class = "control-label" for = "inputWarning" > Ketina bi hişyariyê </label>  
  3.   <div class = "kontrol" > 
  4.     <input type = "text" id = "inputHarning" >  
  5.     <span class = "help-inline" > Dibe ku tiştek xelet derketibe </span> 
  6.   </div>
  7. </div>
  8. <div class = "çewtiya koma kontrolê" > 
  9.   <label class = "control-label" for = "inputError" > Ketina bi xeletî </label>  
  10.   <div class = "kontrol" > 
  11.     <input type = "text" id = "inputError" >  
  12.     <span class = "help-inline" > Ji kerema xwe xeletiyê rast bikin </span> 
  13.   </div>
  14. </div>
  15. <div class = "serkeftina koma kontrolê" > 
  16.   <label class = "control-label" for = "inputSuccess" > Ketina bi serketî </label>  
  17.   <div class = "kontrol" > 
  18.     <input type = "text" id = "inputSuccess" >  
  19.     <span class = "help-inline" > Woohoo! </span> 
  20.   </div>
  21. </div>

Buttons

Bişkokên xwerû

Şêwazên bişkokê dikarin li ser her tiştê ku bi .btnpola hatî sepandin were sepandin. Lêbelê, bi gelemperî hûn ê bixwazin van tenê <a>û <button>hêmanan ji bo pêşkêşkirina çêtirîn bicîh bikin.

Pişkov class = "" Terîf
btn Bişkojka gewr a standard bi gradient
btn btn-primary Giraniya dîtbarî ya zêde peyda dike û çalakiya bingehîn di komek bişkokan de nas dike
btn btn-info Wekî alternatîfek ji şêwazên xwerû tê bikar anîn
btn btn-success Çalakiyek serkeftî an erênî nîşan dide
btn btn-warning Nîşan dide ku divê bi vê çalakiyê re hişyarî were girtin
btn btn-danger Çalakiyek xeternak an potansiyel neyînî nîşan dide
btn btn-inverse Bişkojka gewr tarî ya alternatîf, ne bi kiryarek an karanîna semantîk ve girêdayî ye
btn btn-link Dema ku tevgera bişkojkê diparêze, bişkokek hûr bikin û bişopînin

Lihevhatina geroka cross

IE9 li quncikên girover gradientên paşerojê nabire, ji ber vê yekê em wê jê dikin. Têkildar, IE9 hêmanên neçalak jankifî dike button, nivîsê bi nivîs-siyayek nebaş a ku em nekarin rast bikin gewr dike.

Mezinahiyên bişkokê

Bişkokên mezintir an piçûktir dixwazin? Zêde bikin .btn-large, .btn-small, an .btn-miniji bo pîvanên din.

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > Bişkojka mezin </button>  
  3.   <button class = "btn btn-large" type = "button" > Bişkojka mezin </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > Bişkojka xwerû </button>  
  7.   <button class = "btn" type = "button" > Bişkojka xwerû </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Bişkojka biçûk </button>  
  11.   <button class = "btn btn-small" type = "button" > Bişkojka piçûk </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > Bişkojka biçûk </button>  
  15.   <button class = "btn btn-mini" type = "button" > Bişkojka biçûk </button>  
  16. </p>

Bişkojkên asta blokê biafirînin - yên ku bi tevahî firehiya dêûbav vedigirin - bi lêzêdekirina .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > Bişkoka asta astengkirinê </button>  
  2. <button class = "btn btn-large btn-block" type = "button" > Bişkoka asta astengkirinê </button>

Dewlet seqet

Bi 50% paşvexistina bişkokan bikin ku bişkokan nebişkivînin.

Hêmana Ankerê

Dersê .disabledli <a>bişkokan zêde bikin.

Girêdana seretayî Pêvek 

  1. <a href = "#" class = "btn btn-large btn-primary neçalak" > Girêdana seretayî </a>  
  2. <a href = "#" class = "btn btn-large neçalak" > Girêdan </a>

Serê xwe!Em .disabledli vir wekî çîna bikêrhatî, mîna .activeçîna hevpar, bikar tînin, ji ber vê yekê pêşgirek ne hewce ye. Di heman demê de, ev çîn tenê ji bo estetîk e; divê hûn JavaScript-a xwerû bikar bînin da ku girêdanên vir neçalak bikin.

Elementa bişkokê

disabledTaybetmendiyê li bişkokan zêde bikin <button>.

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Bişkojka seretayî </button>   
  2. <button type = "button" class = "btn btn-large" neçalak > Bişkok </button>

Yek çîn, çend tag

Dersê .btnli ser hêmanek <a>, <button>, an jî bikar bînin.<input>

Pêvek 
  1. <a class = "btn" href = "" > Girêdan </a>  
  2. <button class = "btn" type = "submit" > Bişkojk </button>  
  3. <input class = "btn" type = "button" value = "Input" >   
  4. <input class = "btn" type = "submit" value = "Submit" >

Wekî pratîkek çêtirîn, hewl bidin ku hêmanê ji bo çarçoweya xwe li hev bikin da ku lihevhatina danasîna gerokê ya lihevhatî piştrast bikin. Heke we heye input, ji <input type="submit">bo bişkojka xwe anek bikar bînin.

Images

Dersan li <img>hêmanek zêde bikin da ku di her projeyê de wêneyan bi hêsanî şêwaz bikin.

  1. <img src = "..." class = "img-rounded" >  
  2. <img src = "..." class = "img-circle" >  
  3. <img src = "..." class = "img-polaroid" >

Serê xwe! .img-roundedû .img-circleji ber nebûna border-radiuspiştgirîyê di IE7-8 de kar nakin.

Îkonên Glyphicons _

Glyphên îkonê

140 îkonên di forma sprite de, bi gewrê tarî (pêşveçûn) û spî, ji hêla Glyphicons ve têne peyda kirin .

  • îkon-cam
  • îkon-mûzîk
  • îkon-lêgerîn
  • îkon-zerf
  • îkon-dil
  • îkon-stêrk
  • îkon-stêrk-vala
  • îkon-bikarhêner
  • îkon-film
  • icon-th-mezin
  • îkon-th
  • icon-th-list
  • îkon-ok
  • îkon-rakirin
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • îkon-sînyal
  • îkon-cog
  • îkon-çopê
  • îkon-mal
  • îkon-pelê
  • îkon-dem
  • îkon-rê
  • icon-download-alt
  • îkon-dakêşandin
  • îkon-barkirin
  • icon-inbox
  • icon-play-circle
  • îkon-dubarekirin
  • îkon-tezekirin
  • îkon-lîste-alt
  • icon-lock
  • îkon-ala
  • îkon-guhê
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • îkon-barkod
  • icon-tag
  • icon-tags
  • îkon-pirtûk
  • icon-bookmark
  • îkon-çapkirinê
  • îkon-kamera
  • îkon-font
  • îkon-gewr
  • icon-italic
  • îkon-text-bilindî
  • icon-text-firehiya
  • icon-align-çep
  • îkon-align-navend
  • îkon-align-rast
  • icon-align-justify
  • îkon-lîste
  • icon-indent-çep
  • icon-indent-rast
  • îkon-facetime-vîdyo
  • îkon-wêne
  • îkon-pênûs
  • îkon-nexşe-marker
  • îkon-eyar
  • icon-tint
  • îkon-biguherîne
  • îkon-parvekirin
  • îkon-kontrol
  • îkon-tevger
  • îkon-gav-paşverû
  • îkon-zû-paşverû
  • îkon-paşverû
  • icon-play
  • îkon-pause
  • icon-raweste
  • îkon-pêş
  • îkon-zû-pêş
  • îkon-gav-pêş
  • îkon-derxistin
  • icon-chevron-çep
  • îkon-chevron-rast
  • îkon-plus-nîşan
  • îkon-minus-nîşan
  • îkon-rakirin-nîşan
  • îkon-ok-nîşan
  • îkon-pirs-nîşan
  • îkon-agahî-nîşan
  • icon-screenshot
  • icon-rake-circle
  • icon-ok-circle
  • icon-ban-circle
  • îkon-tîr-çep
  • îkon-tîr-rast
  • îkon-tîr-up
  • îkon-tîra-xwarê
  • icon-parve-alt
  • îkon-guherbar-tijî
  • îkon-guherbar-biçûk
  • icon-plus
  • îkon-minus
  • îkon-astêrk
  • îkon-exclamation-nîşan
  • îkon-diyarî
  • îkon-pel
  • icon-agir
  • îkon-çav-vekirî
  • îkon-çav-girtin
  • îkon-hişyarî-nîşan
  • icon-balafirê
  • îkon-salname
  • icon-random
  • îkon-şîrove
  • îkon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • îkon-retweet
  • îkon-dikirin-kert
  • îkon-peldanka-girtî
  • îkon-peldanka-vekirî
  • îkon-guherbar-vertîkal
  • îkon-guherbar-horizontal
  • îkon-hdd
  • icon-bullhorn
  • îkon-zengil
  • îkon-belge
  • icon-thumb-up
  • îkon-tişt-down
  • îkon-dest-rast
  • îkon-dest-çep
  • icon-dest-up
  • icon-destê-xwarê
  • icon-circle-tîr-rast
  • icon-circle-tîr-çep
  • icon-circle-tîr-up
  • icon-circle-tîr-down
  • icon-globe
  • icon-wrench
  • îkon-peywiran
  • îkon-filter
  • îkon-kurte
  • îkon-tevahî

Attribution Glyphicons

Glyphicons Halflings bi gelemperî belaş nayên peyda kirin, lê lihevhatinek di navbera Bootstrap û afirînerên Glyphicons de ev yek bêyî lêçûn ji we re wekî pêşdebiran gengaz kiriye. Wekî spasiyek, em ji we daxwaz dikin ku hûn her gav bikêrhatî girêdanek vebijarkî vedigerin Glyphicons .

Çawa bikar bînin

Ji hemî îkonan re <i>etîketek bi çînek bêhempa hewce dike, bi pêşgira icon-. Ji bo ku bikar bînin, koda jêrîn hema hema li her deverê bicîh bikin:

  1. <i class = "icon-search" ></i>

Ji bo îkonên berevajîkirî (spî) jî şêwaz hene, ku bi yek çînek zêde hatine çêkirin. Em ê bi taybetî vê polê li ser dewletên hover û çalak ji bo girêdanên nav û dakêşanê bicîh bikin.

  1. <i class = "icon-search icon-white" ></i>

Serê xwe!Dema ku li kêleka rêzikên nivîsê, wekî bişkok an girêdanên navokê bikar bînin, ji bo <i>cîhgirtina rast li dû etîketê cîhek bihêlin.

Mînakên îkonê

Wan di bişkokan, komên bişkokê de ji bo darikê amûran, navîgasyon, an têketinên forma pêşwext bikar bînin.

Buttons

Koma bişkokê di darikê amûran de
  1. <div class = "btn-toolbar" > 
  2.   <div class = "btn-group" > 
  3.  
  4.     <a class = "btn" href = "#" ><i class = "icon-align-left" </i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-center" </i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-right" </i></a>   
  7.     <a class = "btn" href = "#" ><i class = "icon-align-justify" </i></a>   
  8.   </div>
  9. </div>
Dropdown di komek bişkojk de
Bikaranîvan 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Bikarhêner </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "dropdown-menu" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i> Biguherîne </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> Jêbirin </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" </i> Qedexe </a></li>  
  8.     <li class = "divider" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Rêveberiyê bike </a></li>  
  10.   </ul>
  11. </div>
Bişkojka piçûk
  1. <a class = "btn btn-small" href = "#" ><i class = "icon-star" </i></a>

Rêserbirinî

  1. <ul class = "nav-lîsteya nav" > 
  2.   <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" </i> Malper </a></li>   
  3.   <li><a href = "#" ><i class = "icon-book" ></i> Pirtûkxane </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i> Serlêdan </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> cuda </a></li>  
  6. </ul>

Zeviyên çêbikin

  1. <div class = "kontrol-kom" > 
  2.   <label class = "control-label" for = "inputIcon" > Navnîşana e-nameyê </label>  
  3.   <div class = "kontrol" > 
  4.     <div class = "input-prepend" > 
  5.       <span class = "add-on" ><i class = "icon-zerf" </i></span>  
  6.       <input class = "span2" id = "inputIcon" type = "text" >   
  7.     </div>
  8.   </div>
  9. </div>