Hêmanên bingehîn ên HTML-ê bi dersên berfireh hatine şêwazkirin û zêdekirin.
Hemî sernavên HTML-ê, <h1>
bi navgîniyê <h6>
hene.
font-size
Pêş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>
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>
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.
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>
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>
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>
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î.
- <p class = "text-left" > Nivîsara lihevkirî ya çepê. </p>
- <p class = "text-center" > Nivîsara rêzkirî ya navendê. </p>
- <p class = "text-right" > Nivîsara rastê rêzkirî. </p>
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.
- <p class = "muted" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p>
- <p class = "text-hişyarî" > Ji ber vê yekê ji bo magna mollis euismod ji bo vê yekê veşêre. </p>
- <p class = "text-error" > Ji bo ku hûn nenivîsin, nenivîsin. </p>
- <p class = "text-info" > Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis. </p>
- <p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>
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 title
taybetmendiyê 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ê, title
taybetmendiyê têxe nav xwe.
Kurteya peyva taybetmendiyê attr e .
<abbr title = "attribute" > attr </abbr>
<abbr class="initialism">
Ji .initialism
bo 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>
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>
.
- <navnîşan>
- <strong> Twitter, Inc. </strong><br>
- 795 Folsom Ave, Suite 600 <br>
- San Francisco, CA 94107 <br>
- <abbr title = "Telefon" > P: </abbr> (123) 456-7890
- </address>
- <navnîşan>
- <strong> Navê Temam </strong><br>
- <a href = "mailto:#" > [email protected] </a>
- </address>
Ji bo girtina blokên naverokê ji çavkaniyek din di hundurê belgeya we de.
<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.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
- </blockquote>
Guhertinên şêwaz û naverok ji bo guheztinên hêsan ên li ser blokek standard.
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
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
- <small> Kesê navdar <cite title = "Source Title" > Sernavê Çavkanî </cite></small>
- </blockquote>
Ji .pull-right
bo bloka pêvekirî, rast-rastkirî bikar bînin.
- <blockquote class = "bikişîne-rast" >
- ...
- </blockquote>
Lîsteya tiştên ku rêzik tê de ne girîng e.
- <ul>
- <li> ... </li>
- </ul>
Lîsteya tiştên ku rêzik tê de bi eşkere girîng e.
- <ol>
- <li> ... </li>
- </ol>
Li ser hêmanên navnîşê pelika xwerû list-style
û çepê rakin (tenê zarokên yekser).
- <ul class = "nexwedî" >
- <li> ... </li>
- </ul>
Hemî hêmanên navnîşê li ser yek rêzek bi inline-block
û hin pêlavên sivik bixin.
- <ul class = "inline" >
- <li> ... </li>
- </ul>
Lîsteya şertan bi danasînên wan ên têkildar.
- <dl>
- <dt> ... </dt>
- <dd> ... </dd>
- </dl>
Şert û şiroveyan li <dl>
kêleka hev rêz bikin.
- <dl class = "dl-horizontal" >
- <dt> ... </dt>
- <dd> ... </dd>
- </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û.
Parçeyên kodê yên hundurîn bi <code>
.
<section>
divê wekî hundur were pêçan.
- Bo nimûne , <code> & lt ; beş & gt ;</ cod > divê wekî navçê were pêçan .
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>
- <pre>
- <p>Nimûneya nivîsê li vir...</p>
- </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.
Ji bo şêwaza bingehîn - pêlava sivik û tenê dabeşkerên horizontî - çîna bingehîn .table
li 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 |
- <table class = "table" >
- …
- </table>
Yek ji çînên jêrîn li çîna .table
bingehî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 |
- <table class = "table-table-striped" >
- …
- </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 |
- <table class = "table-table-bordered" >
- …
- </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 |
- <table class = "table table-hover" >
- …
- </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 |
- <table class = "table-table-condensed" >
- …
- </table>
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 |
- ...
- < tr class = "serkeftin" >
- <td> 1 < /td>
- <td>TB - Mehane</ td >
- <td> 01 / 04 / 2012 < /td>
- <td> Pejirandin</ td >
- </ tr >
- ...
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 |
- <table>
- <caption> ... </caption>
- <serî>
- <tr>
- <th> ... </th>
- <th> ... </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> ... </td>
- <td> ... </td>
- </tr>
- </tbody>
- </table>
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.
- <form>
- <fieldset>
- <legend> Efsane </legend>
- <label> Navê labelê </label>
- <input type = "text" placeholder = "Tiştekî binivîse..." >
- <span class = "help-block" > Mînak nivîsara alîkariyê ya asta blokê li vir. </span>
- <label class = "qutiya kontrolê" >
- <input type = "checkbox" > Min binihêre
- </label>
- <button type = "submit" class = "btn" > Bişîne </button>
- </fieldset>
- </form>
Di nav Bootstrap-ê de sê sêwirên forma vebijarkî ji bo dozên karanîna gelemperî hene.
Ji bo têketina nivîsê ya zêde-dorvekirî .form-search
li formê û .search-query
li ser lê zêde bikin.<input>
- <form class = "form-lêgerîn" >
- <input type = "text" class = "lêgerîn-lêgerîna navgîniya têketinê" >
- <button type = "submit" class = "btn" > Bigere </button>
- </form>
Ji .form-inline
bo etîketên çepgir û kontrolên blokê yên hundurîn ji bo sêwirana tevlihev zêde bikin.
- <form class = "form-inline" >
- <input type = "text" class = "input-small" placeholder = "Email" >
- <input type = "şîfre" class = "input-small" placeholder = "Şîfre" >
- <label class = "qutiya kontrolê" >
- <input type = "checkbox" > Min bi bîr bîne
- </label>
- <button type = "submit" class = "btn" > Têkeve </button>
- </form>
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:
.form-horizontal
formê.control-group
.control-label
labelê.controls
pêça
- <form class = "form-horizontal" >
- <div class = "kontrol-kom" >
- <label class = "control-label" for = "inputEmail" > Email </label>
- <div class = "kontrol" >
- <input type = "text" id = "inputEmail" placeholder = "Email" >
- </div>
- </div>
- <div class = "kontrol-kom" >
- <label class = "control-label" for = "inputPassword" > Şîfre </label>
- <div class = "kontrol" >
- <input type = "password" id = "inputPassword" placeholder = "Şîfre" >
- </div>
- </div>
- <div class = "kontrol-kom" >
- <div class = "kontrol" >
- <label class = "qutiya kontrolê" >
- <input type = "checkbox" > Min bi bîr bîne
- </label>
- <button type = "submit" class = "btn" > Têkeve </button>
- </div>
- </div>
- </form>
Nimûneyên kontrolên forma standard ên ku di sêwirana forma nimûneyê de têne piştgirî kirin.
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
.
- <input type = "text" placeholder = "Text input" >
Kontrola formê ya ku pir rêzikên nivîsê piştgirî dike. rows
Taybetmendiyê wekî ku hewce bike biguhezîne .
- <textarea rows = "3" ></textarea>
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.
- <label class = "qutiya kontrolê" >
- <input type = "checkbox" value = "" >
- Vebijêrk yek ev û ew e - pê ewle bin ku çima ew mezin e
- </label>
- <label class = "radyo" >
- < type input = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" hat kontrol kirin >
- Vebijêrk yek ev û ew e - pê ewle bin ku çima ew mezin e
- </label>
- <label class = "radyo" >
- < type input = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >
- Vebijêrk du dikare tiştek din be û bijartina wê dê vebijarka yekê jêbirin
- </label>
Ji .inline
bo kontrolên ku li ser heman xetê xuya dibin, polê li rêzek qutiyên kontrolê an radyoyan zêde bikin.
- <label class = "qutiya kontrolê ya navxwe" >
- <input type = "checkbox" id = "inlineCheckbox1" nirx = "option1" > 1
- </label>
- <label class = "qutiya kontrolê ya navxwe" >
- <input type = "checkbox" id = "inlineCheckbox2" nirx = "option2" > 2
- </label>
- <label class = "qutiya kontrolê ya navxwe" >
- <input type = "checkbox" id = "inlineCheckbox3" nirx = "option3" > 3
- </label>
Vebijarka xwerû bikar bînin an jî a diyar bikin multiple="multiple"
da ku gelek vebijarkan bi yekcarî nîşan bidin.
- <hilbijêre>
- <option> 1 </option>
- <option> 2 </option>
- <option> 3 </option>
- <option> 4 </option>
- <option> 5 </option>
- </select>
- < multiple hilbijêre = "pirjimar" >
- <option> 1 </option>
- <option> 2 </option>
- <option> 3 </option>
- <option> 4 </option>
- <option> 5 </option>
- </select>
Li ser kontrolên geroka heyî zêde dike, Bootstrap hêmanên forma kêrhatî yên din vedigire.
Nivîs an bişkokan berî an piştî têketina-based nivîsê zêde bikin. Bala xwe bidinê ku select
hêman li vir nayên piştgirî kirin.
An .add-on
û an input
bi yek ji du çînan ve bipêçin da ku nivîsê li têketinekê bidin pêş an pêve bikin.
- <div class = "input-prepend" >
- <span class = "add-on" > @ </span>
- <input class = "span2" id = "prependedInput" type = "text" placeholder = "Navê bikarhêner" >
- </div>
- <div class = "input-append" >
- <input class = "span2" id = "appendedInput" type = "text" >
- <span class = "add-on" > .00 </span>
- </div>
Hem çîn û hem jî du mînakan bikar bînin .add-on
da ku têketinek pêşde bikin û pêve bikin.
- <div class = "input-prepend input-append" >
- <span class = "add-on" > $ </span>
- <input class = "span2" id = "appendedPrependedInput" type = "text" >
- <span class = "add-on" > .00 </span>
- </div>
Li şûna a <span>
bi nivîsê, a bikar bînin .btn
da ku bişkokek (an du) bi têketinekê ve girêbidin.
- <div class = "input-append" >
- <input class = "span2" id = "appendedInputButton" type = "text" >
- <button class = "btn" type = "button" > Biçe! </button>
- </div>
- <div class = "input-append" >
- <input class = "span2" id = "appendedInputButtons" type = "text" >
- <button class = "btn" type = "button" > Bigere </button>
- <button class = "btn" type = "button" > Vebijêrk </button>
- </div>
- <div class = "input-append" >
- <input class = "span2" id = "appendedDropdownButton" type = "text" >
- <div class = "btn-group" >
- <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
- Çalakî
- <span class = "caret" ></span>
- </button>
- <ul class = "dropdown-menu" >
- ...
- </ul>
- </div>
- </div>
- <div class = "input-prepend" >
- <div class = "btn-group" >
- <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
- Çalakî
- <span class = "caret" ></span>
- </button>
- <ul class = "dropdown-menu" >
- ...
- </ul>
- </div>
- <input class = "span2" id = "prependedDropdownButton" type = "text" >
- </div>
- <div class = "input-prepend input-append" >
- <div class = "btn-group" >
- <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
- Çalakî
- <span class = "caret" ></span>
- </button>
- <ul class = "dropdown-menu" >
- ...
- </ul>
- </div>
- <input class = "span2" id = "appendedPrependedDropdownButton" type = "text" >
- <div class = "btn-group" >
- <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
- Çalakî
- <span class = "caret" ></span>
- </button>
- <ul class = "dropdown-menu" >
- ...
- </ul>
- </div>
- </div>
- <form>
- <div class = "input-prepend" >
- <div class = "btn-group" > ... </div>
- <input type = "text" >
- </div>
- <div class = "input-append" >
- <input type = "text" >
- <div class = "btn-group" > ... </div>
- </div>
- </form>
- <form class = "form-lêgerîn" >
- <div class = "input-append" >
- <input type = "text" class = "span2 search-query" >
- <button type = "submit" class = "btn" > Bigere </button>
- </div>
- <div class = "input-prepend" >
- <button type = "submit" class = "btn" > Bigere </button>
- <input type = "text" class = "span2 search-query" >
- </div>
- </form>
Dersên mezinbûnê yên têkildar ên mîna bikar bînin .input-large
an jî têketinên xwe bi mezinahiyên stûna torê re bi karanîna .span*
çînan bikar bînin.
Bikin ku yek <input>
an <textarea>
hêmanek mîna hêmanek asta blokê tevbigere.
- <input class = "input-block-level" type = "text" placeholder = ".input-block-level" >
- <input class = "input-mini" type = "text" placeholder = ".input-mini" >
- <input class = "input-small" type = "text" placeholder = ".input-small" >
- <input class = "input-medium" type = "text" placeholder = ".input-navîn" >
- <input class = "input-large" type = "text" placeholder = ".input-large" >
- <input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >
- <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-large
dê peldank û mezinahiya fontê ya têketinê zêde bike.
Ji .span1
bo .span12
têketinên ku heman mezinahiyên stûnên torê li hev dikin bikar bînin.
- <input class = "span1" type = "text" placeholder = ".span1" >
- <input class = "span2" type = "text" placeholder = ".span2" >
- <input class = "span3" type = "text" placeholder = ".span3" >
- <select class = "span1" >
- ...
- </select>
- <select class = "span2" >
- ...
- </select>
- <select class = "span3" >
- ...
- </select>
Ji bo têketinên torê yên pir rêzê, ji bo .controls-row
cî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.
- <div class = "kontrol" >
- <input class = "span5" type = "text" placeholder = ".span5" >
- </div>
- <div class = "controls controls-row" >
- <input class = "span4" type = "text" placeholder = ".span4" >
- <input class = "span1" type = "text" placeholder = ".span1" >
- </div>
- ...
Daneyên bi formek ku nayê guherandin bêyî karanîna nîşankirina forma rastîn pêşkêş bikin.
- <span class = "input-xlarge uneditable-input" > Li vir hinek nirx </span>
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.
- <div class = "form-çalakiyên" >
- <button type = "submit" class = "btn btn-primary" > Guherandinên tomar bike </button>
- <button type = "button" class = "btn" > Betal bike </button>
- </div>
Ji bo nivîsa alîkariyê ya ku li dora kontrolên formê xuya dike piştgirîya asta hundurîn û blokê.
- <input type = "text" ><span class = "help-inline" > Nivîsara alîkariyê ya hundurîn </span>
- <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>
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.
Em outline
şêwazên xwerû yên li ser hin kontrolên formê radikin û a-yek box-shadow
li şûna wê ji bo :focus
.
- <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Ev baldar e..." >
Têketinên şêwazê bi fonksiyona geroka xwerû bi :invalid
. A diyar bikin, heke zevî ne vebijarkî be, taybetmendiyê lê type
zêde bike , û (eger hebe) a diyar bike .required
pattern
Ev di guhertoyên Internet Explorer 7-9 de peyda nabe ji ber nebûna piştgirî ji bo hilbijêrên pseudo CSS.
- <input class = "span3" type = "email" pêwîst e >
Taybetmendiyê li ser têketinê zêde disabled
bikin da ku pêşî li têketina bikarhêner bigire û dîmenek hinekî cûda derxe holê.
- <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Ketina li vir betal bû..." neçalak bû >
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
.
- <div class = "hişyariya koma kontrolê" >
- <label class = "control-label" for = "inputWarning" > Ketina bi hişyariyê </label>
- <div class = "kontrol" >
- <input type = "text" id = "inputHarning" >
- <span class = "help-inline" > Dibe ku tiştek xelet derketibe </span>
- </div>
- </div>
- <div class = "çewtiya koma kontrolê" >
- <label class = "control-label" for = "inputError" > Ketina bi xeletî </label>
- <div class = "kontrol" >
- <input type = "text" id = "inputError" >
- <span class = "help-inline" > Ji kerema xwe xeletiyê rast bikin </span>
- </div>
- </div>
- <div class = "agahiya koma kontrolê" >
- <label class = "control-label" for = "inputInfo" > Ketina bi agahiyê re </label>
- <div class = "kontrol" >
- <input type = "text" id = "inputInfo" >
- <span class = "help-inline" > Navê bikarhêner berê hatiye girtin </span>
- </div>
- </div>
- <div class = "serkeftina koma kontrolê" >
- <label class = "control-label" for = "inputSuccess" > Ketina bi serketî </label>
- <div class = "kontrol" >
- <input type = "text" id = "inputSuccess" >
- <span class = "help-inline" > Woohoo! </span>
- </div>
- </div>
Dersan li <img>
hêmanek zêde bikin ku bi hêsanî wêneyan di her projeyê de şêwaz bikin.
- <img src = "..." class = "img-rounded" >
- <img src = "..." class = "img-circle" >
- <img src = "..." class = "img-polaroid" >
Serê xwe! .img-rounded
û .img-circle
ji ber nebûna border-radius
piştgirîyê di IE7-8 de kar nakin.
140 îkonên di forma sprite de, bi gewrê tarî (pêşverû) û spî, ku ji hêla Glyphicons ve têne peyda kirin .
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 .
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:
- <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.
- <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.
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.
- <div class = "btn-toolbar" >
- <div class = "btn-group" >
- <a class = "btn" href = "#" ><i class = "icon-align-left" </i></a>
- <a class = "btn" href = "#" ><i class = "icon-align-center" </i></a>
- <a class = "btn" href = "#" ><i class = "icon-align-right" </i></a>
- <a class = "btn" href = "#" ><i class = "icon-align-justify" </i></a>
- </div>
- </div>
- <div class = "btn-group" >
- <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Bikarhêner </a>
- <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>
- <ul class = "dropdown-menu" >
- <li><a href = "#" ><i class = "icon-pencil" ></i> Biguherîne </a></li>
- <li><a href = "#" ><i class = "icon-trash" ></i> Jêbirin </a></li>
- <li><a href = "#" ><i class = "icon-ban-circle" </i> Qedexe </a></li>
- <li class = "divider" </li>
- <li><a href = "#" ><i class = "i" ></i> Rêveberiyê bike </a></li>
- </ul>
- </div>
- <a class = "btn btn-large" href = "#" ><i class = "icon-star" </i> Stêrk </a>
- <a class = "btn btn-small" href = "#" ><i class = "icon-star" </i> Stêrk </a>
- <a class = "btn btn-mini" href = "#" ><i class = "icon-star" </i> Stêrk </a>
- <ul class = "nav-lîsteya nav" >
- <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" </i> Malper </a></li>
- <li><a href = "#" ><i class = "icon-book" ></i> Pirtûkxane </a></li>
- <li><a href = "#" ><i class = "icon-pencil" ></i> Serlêdan </a></li>
- <li><a href = "#" ><i class = "i" ></i> cuda </a></li>
- </ul>
- <div class = "kontrol-kom" >
- <label class = "control-label" for = "inputIcon" > Navnîşana e-nameyê </label>
- <div class = "kontrol" >
- <div class = "input-prepend" >
- <span class = "add-on" ><i class = "icon-zerf" </i></span>
- <input class = "span2" id = "inputIcon" type = "text" >
- </div>
- </div>
- </div>