Pîvana tîpografiyê

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.

Mînak teksta laş

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 ut id elit.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

Bikaranîna giraniyê

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.

Navnîşanên nimûne

Li vir du nimûne hene ku çawa <address>tag dikare were bikar anîn:

Mînak kurtkirin

Kurtkirin bi nivîsa mezin û tixûbek binî ya sivik û xalîkirî têne şêwaz kirin. Di heman demê de li ser hover kursorek arîkariyê ya wan jî heye ji ber vê yekê bikarhêner nîşanek zêde heye ku dê tiştek li ser hoverê were xuyang kirin.

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

Kurteya peyva taybetmendiyê attr e .

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

Unordered

<ul>

• 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

Unstyled

<ul class="unstyled">

• 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

Ferman kirin

<ol>

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

Terîf

<dl>

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.

Inline

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

Mînakî , beşa < code> </ 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 her caretan veguherînin karakterên xwe yên unicode.

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

Google Prettify

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.

<table>
  <serî>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

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>

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 Sprited :nth-childhilbijêra CSS bikar tînin û di IE7-IE8 de tune.

<table class = "table-table-striped" > 
  …
</table>

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>

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>

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>

HTML û CSS-ya nerm

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.

Çar layout tê de hene

Bootstrap ji bo çar celeb sêwiranên formê piştgirî tê:

• Vertical (default)
• Gerr
• Inline
• Asumane

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.

Dewletên kontrol û bêtir

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.

Bi v2.0 re, me ji bo şêwazên formê pêşnumayên siviktir û jîrtir hene. Nîşanek zêde tune, tenê kontrolên formê bikin.

Veguheztina şêwazên WebKit-ê yên xwerû, tenê .form-searchji bo qadên lêgerînê yên dorvekirî zêde bikin.

Input asta blokê ji bo destpêkirinê ne. Ji bo .form-inlineû .form-horizontal, em inline-block bikar tînin.

Çi tê de ye

Li milê çepê hemî kontrolên forma xwerû yên ku em piştgirî dikin têne xuyang kirin. Li vir navnîşa guleyan heye:

• têketinên nivîsê (nivîs, şîfre, e-name, hwd.)
• checkbox
• radyo
• neqandin
• piralî hilbijêre
• têketina pelê
• textarea

Vebijarkên nû yên bi v2.0

Heya v1.4, şêwazên forma xwerû yên Bootstrap sêwirana horizontî bikar anîn. Bi Bootstrap 2-ê re, me ew astengî rakirin da ku ji bo her formê xwedan pêşnumayên biaqiltir, berbelavtir bin.

Dewletên gerokê ji nû ve dîzaynkirin

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 û box-shadowdi cîhê wê de ji bo :focus.

Rastkirina formê

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>

Pêşniyar û pêvekirina têketinan

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.

Checkboxes û radyo

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.

Formên xêzkirî û pêvekirin/pêşvekirin

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.

Nivîsara alîkariyê form bike

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.

Bişkojkên ji bo çalakiyan

Wekî peymanek, bişkok tenê ji bo çalakiyan têne bikar anîn dema ku hîpergirêdan ji bo tiştan têne bikar anîn. Mînakî, "Daxistin" pêdivî ye ku bişkokek be dema ku "çalakiya paşîn" divê girêdanek be.

Ji bo lenger û formên

Şêweyên bişkokê dikarin bi serîlêdanê re li ser her tiştî bêne .btnsepandin. Lêbelê, bi gelemperî hûn dixwazin van tenê <a>û <button>hêmanan bicîh bikin.

Nîşe: Hemî bişkok divê .btnpolê tê de bin. Divê şêwazên bişkokê li ser <button>û <a>hêmanên ji bo hevgirtinê werin sepandin.

Mezinahiyên pirjimar

Bişkokên mezintir an piçûktir dixwazin? Hay jê hebe!

Çalakiya seretayî Çalakî

Çalakiya seretayî Çalakî

Dewlet seqet

Ji bo bişkokên neçalak, ji .btn-disabledbo girêdan û :disabledji bo <button>hêmanan bikar bînin.

Çalakiya seretayî Çalakî

Çalakiya seretayî Çalakî

Lihevhatina geroka cross

Di IE9-ê de, em li ser hemî bişkokan pileyê davêjin ber quncikên girover ji ber ku IE9 gradientên paşîn li quncikê dernakeve.

Têkildar, IE9 hêmanên neçalak jankifî dike button, nivîsê bi siya nivîsê ya gewr gewr dike - mixabin em nikarin vê rast bikin.

Wek sprite hatiye çêkirin

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.

Çawa bikar bînin

Bi v2.0.0 re, me hilbijart ku em ji <i>bo hemî îkonên xwe tagek bikar bînin, 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> 

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

Rewşan bikar bînin

Îkon mezin in, lê meriv dê wan li ku bikar bîne? Li vir çend raman hene:

• Wek dîtbarî ji bo navîgasyon li kêleka te
• Ji bo navîgasyonek bi tenê îkon-rêvebirin
• Ji bo bişkokên ku ji bo gihandina wateya çalakiyekê bibin alîkar
• Bi girêdanên ji bo parvekirina çarçoweya li ser cîhê bikarhênerek

Di bingeh de, li her deverê ku hûn dikarin <i>etîketekê bixin, hûn dikarin îkonek bixin.

Hênikkirin Lêkolîn Jêbirin

Agahkişî Settings More Info