Bootstrap

Bingeha CSS

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

Serî jor! Van belgeyan ji bo v2.3.2 ne, ku êdî bi fermî nayê piştgirî kirin. Guhertoya herî dawî ya Bootstrap-ê bibînin!

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

Kopiya laşê sereke

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ê bi giraniya tîpan.

Parçeyek nivîsê ya jêrîn wekî nivîsa qelew 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.

Beşa 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ê wateya 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 Alignment

Bi dersên hevrêzkirina nivîsê re bi hêsanî nivîsê li pêkhateyan rast bikin.

Nivîsa rêzkirî ya çepê.

Nivîsara rêzkirî ya navendê.

Nivîsa rasthevkirî.

  1. <p class = "text-left" > Nivîsara lihevkirî ya çepê. </p> 
  2. <p class = "text-center" > Nivîsara rêzkirî ya navendê. </p> 
  3. <p class = "text-right" > Nivîsara rastê rêzkirî. </p>

Dersên giraniyê

Bi çend dersên bikêrhatî yên girîng re wateyê bi rengan ragihî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ê di 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> Kesê 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

Li ser hêmanên navnîşê pelika xwerû list-styleû çepê rakin (tenê zarokên yekser).

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

Inline

Hemî hêmanên navnîşê li ser yek rêzek bi inline-blockû hin pêlavên sivik bixin.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
  1. <ul class = "inline" > 
  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> & lt ; beş & gt ;</ cod > divê wekî navçê were pêçan .

Bloka bingehîn

Ji <pre>bo gelek rêzikên kodê bikar bînin. Ji bo veguheztina rast pê ewle bin ku hûn di kodê de ji berbendê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-8 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ê ya ji bo nîşandana daneyan bi rengek tabloyek
<thead> Hêmana konteyner a ji bo rêzên serê tabloyê ( <tr>) ji bo nîşankirina 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> Hucreya tabloya taybetî ji bo etîketên stûnê (an rêz, li gorî çarçove û cîhê ve girêdayî ye).
<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ê werdigirin, 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 binihêre 
  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 bikin. 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 formê ya herî gelemperî, qadên têketina-bingeha 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 dem bi karanîna diyarkirî were bikar anîn type.

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

Textarea

Kontrola formê ya ku pir rêzikên nivîsê piştgirî dike. rowsTaybetmendiyê wekî ku hewce bike biguhezîne .

  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 û bijartina 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-toggle = "dropdown" >  
  14.       Çalakî
  15.       <span class = "caret" ></span> 
  16.     </button>
  17.     <ul class = "dropdown-menu" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Komên dakêşanê yên dabeşkirî

  1. <form>
  2.   <div class = "input-prepend" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     <input type = "text" > 
  5.   </div>
  6.   <div class = "input-append" > 
  7.     <input type = "text" > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </form>

Forma lêgerînê

  1. <form class = "form-lêgerîn" > 
  2.   <div class = "input-append" > 
  3.     <input type = "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.     <input type = "text" class = "span2 search-query" >  
  9.   </div>
  10. </form>

Mezinahiya kontrolê

Dersên mezinbûnê yên têkildar ên mîna 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ê biqedînin. Dema ku di nav a -yê de têne danîn .form-actions, 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" > Blokek nivîsa alîkariyê ya dirêjtir ku li ser rêzek nû vediqete û 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-yek box-shadowli şûna wê ji bo :focus.

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

Têketinên nederbasdar

Têketinên şêwazê bi fonksiyona geroka xwerû bi :invalid. A diyar bikin, heke zevî ne vebijarkî be, taybetmendiyê lê typezêde bike , û (eger hebe) a diyar bike .requiredpattern

Ev di guhertoyên Internet Explorer 7-9 de peyda nabe ji ber nebûna piştgirî ji bo hilbijêrên pseudo CSS.

  1. <input class = "span3" type = "email" pêwîst 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.  
  9. <div class = "çewtiya koma kontrolê" > 
  10.   <label class = "control-label" for = "inputError" > Ketina bi xeletî </label>  
  11.   <div class = "kontrol" > 
  12.     <input type = "text" id = "inputError" >  
  13.     <span class = "help-inline" > Ji kerema xwe xeletiyê rast bikin </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "agahiya koma kontrolê" > 
  18.   <label class = "control-label" for = "inputInfo" > Ketina bi agahiyê re </label>  
  19.   <div class = "kontrol" > 
  20.     <input type = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" > Navê bikarhêner berê hatiye girtin </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "serkeftina koma kontrolê" > 
  26.   <label class = "control-label" for = "inputSuccess" > Ketina bi serketî </label>  
  27.   <div class = "kontrol" > 
  28.     <input type = "text" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Woohoo! </span> 
  30.   </div>
  31. </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>

Dewleta astengdar

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 disabled" > 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 çîna hevpar bikar tînin .active, 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 bihevre bikin da ku ji hevberdana gerokê ya xaçê 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 ku bi hêsanî wêneyan di her projeyê de şêwaz bikin.

140x140 140x140 140x140 
  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êşverû) û spî, ku 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 pola 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.     <a class = "btn" href = "#" ><i class = "icon-align-left" </i></a>   
  4.     <a class = "btn" href = "#" ><i class = "icon-align-center" </i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-right" </i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-justify" </i></a>   
  7.   </div>
  8. </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>
Mezinahiyên bişkokê
Stêrk Stêrk Stêrk 
  1. <a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a>
  2. <a class="btn btn-small" href="#"><i class="icon-star"></i> Star</a>
  3. <a class="btn btn-mini" href="#"><i class="icon-star"></i> Star</a>

Navigation

  1. <ul class="nav nav-list">
  2.   <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
  3.   <li><a href="#"><i class="icon-book"></i> Library</a></li>
  4.   <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
  5.   <li><a href="#"><i class="i"></i> Misc</a></li>
  6. </ul>

Form fields

  1. <div class="control-group">
  2.   <label class="control-label" for="inputIcon">Email address</label>
  3.   <div class="controls">
  4.     <div class="input-prepend">
  5.       <span class="add-on"><i class="icon-envelope"></i></span>
  6.       <input class="span2" id="inputIcon" type="text">
  7.     </div>
  8.   </div>
  9. </div>