Li ser îskeleyê, hêmanên bingehîn ên HTML-ê bi dersên berfereh hatine şêwazkirin û zêdekirin da ku dîmen û hestek nû, hevgirtî peyda bikin.
Tevahiya tora tîpografî li ser du guhêrbarên Kêmtir di pelê meya guhêrbar.less de ye: @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ê bikar tînin, da ku marjînal, peldank, û bilindahiyên rêzê yên hemî celeb û hêj bêtir biafirînin.
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.
Bi lêzêdekirina paragrafekê rawestin .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
| Pêve | Bikaranîna | Bixwe |
|---|---|---|
<strong> |
Ji bo balkişandina parçeyek nivîsê ya bi girîng | Netû |
<em> |
Ji bo balkişandina perçeyek nivîsê ya bi stres | Netû |
<abbr> |
Kurtenivîs û kurtenivîsan dipêçe da ku guhertoya berfireh li ser hoverê nîşan bide | Taybetmendiya vebijarkî .initialismbo kurtenivîsên mezin çîn bikar bînin. |
<address> |
Ji bo agahdariya pêwendiyê ji bo bav û kalê wê yê herî nêzîk an tevahiya laşê xebatê | Bi qedandina hemû rêzan re formatkirinê biparêzin<br> |
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.
Nîşe: Hûn dikarin <b>di <i>HTML5-ê de bikar bînin, lê karanîna wan hinekî guherî. <b>tê vê wateyê ku peyvan an hevokan ronî bike bêyî ku girîngiyek zêde ragihîne dema ku <i>bi piranî ji bo deng, peyvên teknîkî, hwd.
Li vir du nimûne hene ku çawa <address>tag dikare were bikar anîn:
Kurteyên bi titletaybetmendiyê xwedan tixûbek binî ya sivik û xalîçeyek arîkariyê li ser hêlînê heye. Ev nîşanek zêde dide bikarhêneran ku dê tiştek li ser hoverê were xuyang kirin.
Dersê initialismli kurtenivîsekê zêde bikin da ku ahenga tîpografiyê zêde bikin bi dayîna wê ya piçûkek nivîsê ya piçûktir.
HTML ji nanê perçekirî de tiştê çêtirîn e.
Kurteya peyva taybetmendiyê attr e .
| Pêve | Bikaranîna | Bixwe |
|---|---|---|
<blockquote> |
Hêmana astê blokê ji bo veguheztina naverokê ji çavkaniyek din | Ji .pull-leftû ders.pull-right |
<small> |
Hêmanek vebijarkî ji bo lêzêdekirina navgînek rûbirû ya bikarhêner, bi gelemperî nivîskarek bi sernavê xebatê | <cite>Li dora sernav an navê çavkaniyê bi cîh bikin |
Ji bo tevlêkirina blokê, li <blockquote>dora her HTML-ê wekî quote bipêçin. Ji bo quotes rasterast em pêşniyar dikin a <p>.
Hêmanek vebijarkî <small>têxin ku çavkaniya xwe binav bikin û hûn ê ji —bo mebestên şêwazê pêvekek berî wê bistînin.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hejmara bêkêmasî ya herî zêde tê xuyang kirin. </p>
- <small> Kesê navdar </small>
- </blockquote>
Blokên xwerû bi vî rengî têne şêwaz kirin:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hejmara bêkêmasî ya herî zêde tê xuyang kirin.
Kesek navdar di Body of xebatê de
Ji bo ku bloka xwe ber bi rastê ve bikişîne, lê zêde bike class="pull-right":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hejmara bêkêmasî ya herî zêde tê xuyang kirin.
Kesek navdar di Body of xebatê de
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
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>.
- Mînakî , beşa < code> </ code > divê wekî navçê were pêçandin .
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>
Nîşe: Pê bawer bin ku kodê di nav <pre>etîketan de bi qasî ku pêkan nêzîkê çepê bin; 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.
Heman <pre>hêmanê hildin û ji bo pêşdebirina pêşkeftî du çînên vebijarkî lê zêde bikin.
- <p> Nimûneya nivîsê li vir... </p>
- <pre class = "prettyprint
- linenums" >
- <p>Nimûneya nivîsê li vir...</p>
- </pre>
Google-code-prettify dakêşin û readme-ê ji bo meriv çawa bikar bîne bibînin.
| 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 |
- <table>
- <serî>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
| Nav | Sinif | Terîf |
|---|---|---|
| Destçûnî | Netû | Bê şêwaz, tenê stûn û rêz |
| Bingehîn | .table |
Tenê xetên horizontal di navbera rêzan de |
| Sînor kirin | .table-bordered |
Kuçikan dorpêç dike û sînorê derve lê zêde dike |
| Zebra-stripe | .table-striped |
Rengê paşîn ê gewr ê sivik li rêzên cihê (1, 3, 5, hwd) zêde dike |
| Tewandin | .table-condensed |
Peldanka vertîkal, ji 8px heya 4px, di nav hemî tdû thhêmanan de nîvco dike |
Tablo bixweber bi tenê çend sînoran têne şêwaz kirin da ku xwendin û strukturê biparêzin. Bi 2.0 re, .tablepola pêdivî ye.
- <table class = "table" >
- …
- </table>
| # | Nav | Paşnav | Navê bikarhêner |
|---|---|---|---|
| 1 | Delîl | Otto | @mdo |
| 2 | Jacob | Thornton | @rûn |
| 3 | Larry | Çûk |
Bi lêzêdekirina zebra-striping bi tabloyên xwe piçek xweşiktir bibin - tenê .table-stripedpolê zêde bikin.
Nîşe: Tabloyên :nth-childzirav hilbijêra CSS bikar tînin û di IE7-IE8 de tune.
- <table class = "table-table-striped" >
- …
- </table>
| # | Nav | Paşnav | Navê bikarhêner |
|---|---|---|---|
| 1 | Delîl | Otto | @mdo |
| 2 | Jacob | Thornton | @rûn |
| 3 | Larry | Çûk |
Ji bo mebestên estetîk sînorên li dora tevahiya maseyê û quncikên dorpêçkirî lê zêde bikin.
- <table class = "table-table-bordered" >
- …
- </table>
| # | Nav | Paşnav | Navê bikarhêner |
|---|---|---|---|
| 1 | Delîl | Otto | @mdo |
| Delîl | Otto | @getbootstrap | |
| 2 | Jacob | Thornton | @rûn |
| 3 | Larry The Bird | ||
Bi lêzêdekirina .table-condensedpolê tabloyên xwe tevlihevtir bikin da ku pelika hucreya sifrê nîvco (ji 8px berbi 4px) bibire.
- <table class = "table-table-condensed" >
- …
- </table>
| # | Nav | Paşnav | Navê bikarhêner |
|---|---|---|---|
| 1 | Delîl | Otto | @mdo |
| 2 | Jacob | Thornton | @rûn |
| 3 | Larry The Bird | ||
Hûn azad bibin ku hûn yek ji dersên tabloyê bidin hev da ku bi karanîna yek ji dersên berdest ve dîmenên cihêreng bi dest bixin.
- <table class = "table table-striped table-bordered table-condensed" >
- ...
- </table>
| Navê tam | |||
|---|---|---|---|
| # | Nav | Paşnav | Navê bikarhêner |
| 1 | Delîl | Otto | @mdo |
| 2 | Jacob | Thornton | @rûn |
| 3 | Larry The Bird | ||
Beşa çêtirîn di derbarê formên li Bootstrap de ev e ku hemî têketin û kontrolên we pir xweş xuya dikin bila hûn wan çawa di nîşankirina xwe de ava bikin. HTML-ya zêde ne hewce ye, lê em ji bo kesên ku jê re hewce dikin nimûneyan peyda dikin.
Sêwiranên tevlihevtir bi dersên kurt û berbelav têne ji bo şêwaz û girêdana bûyerê hêsan, ji ber vê yekê hûn di her gavê de têne nixumandin.
Bootstrap ji bo çar celeb sêwiranên formê piştgirî tê:
Cûreyên cûrbecûr sêwiranên formê ji bo nîşankirinê hin guheztinan hewce dikin, lê kontrol bixwe dimînin û heman tevdigerin.
Formên Bootstrap ji bo hemî kontrolên forma bingehîn ên wekî têketin, textarea, û bijartina ku hûn li bendê ne, şêwaz hene. Lê di heman demê de ew bi hejmarek hêmanên xwerû yên mîna têketinên pêvekirî û pêşwext û piştgirî ji navnîşên qutiyên kontrolê re jî tê.
Dewletên mîna xeletî, hişyarî, û serketinê ji bo her cûre kontrolkirina formê tê de hene. Di heman demê de şêwazên ji bo kontrolên neçalak jî hene.
Bootstrap ji bo çar şêwazên formên webê yên hevpar nîşankirin û şêwazên hêsan peyda dike.
| Nav | Sinif | Terîf |
|---|---|---|
| Vertical (default) | .form-vertical (ne hewce ye) |
Li ser kontrolan etîketên lihevkirî, çepgir |
| Inline | .form-inline |
Ji bo şêwaza kompakt kontrolên etîketkirî yên çepgir û bloka hundurîn |
| Gerr | .form-search |
Ji bo estetîkek lêgerînek tîpîk têketina nivîsê ya pêvekirî |
| Asumane | .form-horizontal |
Etîketên çepê, rast-hevkirî li ser heman rêzê wekî kontrolê biherikînin |
Vebijêrkên jîr û sivik bêyî nîşankirina zêde.
- <form class = "baş" >
- <label> Navê labelê </label>
- < type input = "text" class = "span3" 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 kontrol bike
- </label>
- <button type = "submit" class = "btn" > Bişîne </button>
- </form>
.form-searchLi formê û .search-queryli ser zêde bike input.
- <form class = "baş 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>
Lihevhatina .form-inlinevertîkal û cihêbûna kontrolên formê lê zêde bikin.
- <form class = "baş 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>
Li milê rastê hemî kontrolên forma xwerû yên ku em piştgirî dikin têne xuyang kirin. Li vir navnîşa guleyan heye:
Li gorî pîvana forma mînaka jorîn, li vir nîşana ku bi koma yekem û têketinê ve girêdayî ye. , .control-group, .control-labelû .controlsçîn hemî ji bo şêwazê hewce ne.
- <form class = "form-horizontal" >
- <fieldset>
- <legend> Nivîsara efsaneyê </legend>
- <div class = "kontrol-kom" >
- <label class = "control-label" for = "input01" > Ketina nivîsê </label>
- <div class = "kontrol" >
- <input type = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Nivîsara alîkariyê piştgirî </p>
- </div>
- </div>
- </fieldset>
- </form>
Bootstrap ji bo baldarî û disableddewletên ku ji hêla gerokê ve têne piştgirî kirin şêwazên xwe vedigire. Em Webkit- outlinea xwerû jê dikin û a -yek box-shadowli şûna wê ji bo :focus.
Di heman demê de şêwazên pejirandinê ji bo xeletî, hişyarî û serfiraziyê jî vedigire. Ji bo bikar bînin, çîna xeletiyê li derdorê zêde bikin .control-group.
- <fieldset
- class = "çewtiya koma kontrolê" >
- …
- </fieldset>
Komên têketinê - bi nivîsa pêvekirî an pêşdekirî - rêyek hêsan peyda dikin ku hûn ji bo têketinên xwe bêtir çarçoveyê bidin. Mînakên mezin nîşana @ ji bo navên bikarhênerên Twitter an jî $ ji bo darayî hene.
Heya v1.4, Bootstrap hewceyê nîşankirina zêde li dora qutiyên kontrolê û radyoyan hewce dike ku wan bişkîne. Naha, ew mijarek hêsan e ku dubarekirina ya <label class="checkbox">ku pê dipêçe <input type="checkbox">.
Qutiyên kontrolê yên hundurîn û radyo jî têne piştgirî kirin. Tenê .inlineyek .checkboxan lê zêde bike .radioû hûn qediyan.
Ji bo ku têketinên pêşdiyar an pêvek bi formek hundurîn bikar bînin, pê ewle bin ku .add-onû inputli ser heman rêzê, bêyî valahiyê bi cîh bikin.
Ji bo lêzêdekirina nivîsa alîkariyê ji bo têketinên forma xwe, nivîsa arîkariyê ya hundurîn bi <span class="help-inline">an jî bloka nivîsa arîkariyê ya bi <p class="help-block">piştî hêmana têketinê re têxin nav xwe.
Li şûna ku em her îkonê bikin daxwazek zêde, me ew di nav sprite de berhev kirine - komek wêne di yek pelê de ku CSS bikar tîne da ku wêneyan bi cih bike background-position. Ev heman rêbaz e ku em li ser Twitter.com bikar tînin û ji bo me baş xebitî.
Hemî çînên îkonan .icon-ji bo nav û hûrguliya rast, mîna pêkhateyên me yên din pêşgir têne pêşgir kirin. Ev ê ji nakokiyên bi amûrên din re bibe alîkar.
Glyphicons ji me re destûr daye ku em di nav amûra xweya çavkaniya vekirî de Halflings bikar bînin heya ku em li vir di belgeyan de girêdanek û krediyê peyda bikin. Ji kerema xwe di projeyên xwe de heman tiştî bifikirin.
Bootstrap ji <i>bo hemî îkonan etîketek bikar tîne, lê çîna wan tune - tenê pêşgirek hevpar. 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 çînek zêde hatine amadekirin:
- <i class = "icon-search icon-white" ></i>
140 ders hene ku hûn ji bo îkonên xwe hilbijêrin. Tenê <i>bi dersên rast etîketek zêde bikin û hûn amade ne. Hûn dikarin navnîşa tevahî li sprites.less an jî li vir di vê belgeyê de bibînin.
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.
Îkon mezin in, lê meriv dê wan li ku bikar bîne? Li vir çend raman hene:
Di bingeh de, li her deverê ku hûn dikarin <i>etîketekê bixin, hûn dikarin îkonek bixin.
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.