Ingsazgylar

<h1>HTMLhli HTML sözbaşylary <h6>elýeterlidir.

h1. 1-nji sözbaşy

h2. 2-nji sözbaşy

h3. 3-nji sözbaşy

h4. 4-nji sözbaşy

h5. 5-nji sözbaşy

h6. 6-njy sözbaşy

Bedeniň göçürmesi

“Bootstrap” -yň global standarty 14pxfont-size , 20px bilen . Bu we ähli abzaslara degişlidir. Mundan başga-da, (abzaslar) çyzyk beýikliginiň ýarysynyň aşaky marginini alýarlar (deslapky görnüşde 10px).line-height<body><p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur gülkünç mus. Nullam id dolor id nibh ultricies ulag serişdesi.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur gülkünç mus. Donec ullamcorper nulla metus däl auktor fringilla. Duis mollis, täjir däl luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla metus däl auktor fringilla.

“Maecenas sed diamet eget risus varius blandit” amet däl. Donec id elit metus-da mi porta gravida. Duis mollis, täjir däl luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Gurluşyň göçürmesi

Goşmak bilen abzasy tapawutlandyryň .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auktor. Duis mollis, haryt däl luctus.

<p class = "gurşun" > ... </p>

Az bilen gurlan

Tipografiki masştab üýtgeýjilerdäki iki sany LESS üýtgeýjä esaslanýar.less : @baseFontSizewe @baseLineHeight. Birinjisi, şriftiň ululygynda ulanylýar, ikinjisi esasy çyzyk beýikligi. Şol üýtgeýjileri we käbir ýönekeý matematikany ähli görnüşlerimiziň çäklerini, paddinglerini we çyzyk beýikliklerini döretmek üçin ulanýarys. Olary düzüň we Bootstrap uýgunlaşýar.

Üns beriň

HTML-iň ýeňil ähmiýetli belliklerini ýeňil stil bilen ulanyň.

`<small>`

Çyzgy ýa-da tekst böleklerine ünsi çekmek üçin kiçi belligi ulanyň.

Tekstiň bu setirine gowy çap edilmegi göz öňünde tutulýar.

<p> <small> Tekstiň bu setiri nepis çap hökmünde garalmalydyr. </small> </p>

Batyr

Has agyr şriftli tekstiň bir bölegini bellemek üçin.

Aşakdaky tekst bölegi goýy tekst görnüşinde görkezilýär .

<strong> goýy tekst görnüşinde görkezilýär </strong>

Italýan

Tekstiň bir bölegini çyzgy bilen bellemek üçin.

Aşakdaky tekst bölegi çyzylan tekst hökmünde görkezilýär .

<em> çyzylan tekst hökmünde görkezilýär </em>

Başlar!HTML5- <b>de ulanmaga arkaýyn boluň. esasan ses, tehniki adalgalar we ş.m. üçin goşmaça ähmiýet bermezden sözleri ýa-da sözlemleri tapawutlandyrmak üçin niýetlenendir .<i><b><i>

Düzediş sapaklary

Teksti tekizlemek synplary bolan komponentlere aňsatlyk bilen tertipleşdiriň.

Çep deňleşdirilen tekst

Merkez deňleşdirilen tekst.

Dogry düzülen tekst.

<p class = "text-left" > Çep deňleşdirilen tekst. </p> 
<p class = "text-center" > Merkez deňleşdirilen tekst. </p> 
<p class = "text-right" > Sag deňleşdirilen tekst. </p>

Üns beriň

Birnäçe ähmiýetli peýdaly sapaklar bilen reňk arkaly many beriň.

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

Etiam porta sem maleuada magna mollis euismod.

Donec ullamcorper nulla metus däl auktor fringilla.

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

Duis mollis, commodo luctus, nisi erat porttitor ligula.

<p class = "muted" > Fusce dapibus, tellus ac cursus commodo, gynama mauris nibh. </p> 
<p class = "text-warning" > Etiam porta sem maleuada magna mollis euismod. </p> 
<p class = "text-error" > Donec ullamcorper nulla metus auktor fringilla. </p> 
<p class = "text-info" > Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
<p class = "text-success" > Duis mollis, est commodo luctus, nisi erat porttitor ligula. </p>

Gysgaltmalar

<abbr>Giňeldilen wersiýany görkezmek üçin gysgaltmalar we gysgaltmalar üçin HTML elementiniň stilleşdirilen ýerine ýetirilişi . Aýratynlykly gysgaltmalar titleaçyk nokat aşaky araçägi we aýlawda goşmaça konteksti üpjün edip, aýlawda kömekçi kursory bar.

`<abbr>`

Gysgaltmanyň uzyn ýerinde giňeldilen tekst üçin titleatributy goşuň.

Sypat sözüniň gysgaldylyşy attr .

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

`<abbr class="initialism">`

.initialismBirneme kiçi şrift ululygy üçin gysgaltma goşuň .

Dilimlenen çörekden bäri HTML iň gowy zat.

<abbr title = "HyperText Markup Language" class = "initialism" > HTML </abbr>

Salgylar

Iň ýakyn ata-baba ýa-da tutuş iş topary üçin aragatnaşyk maglumatlary hödürläň.

`<address>`

Linehli setirleri gutaryp formatirlemäni saklaň <br>.

Twitter, Inc.
795 Folsom şaýoly, Suite 600
San-Fransisko, CA 94107
P: (123) 456-7890

Doly ady
[email protected]

<adres>
  <strong> Twitter, Inc. </strong> <br>
  795 Folsom şaýoly, 600-nji otag <br>
  San-Fransisko, CA 94107 <br>
  <abbr title = "Telefon" > P: </abbr> (123) 456-7890 
</address>
 
<adres>
  <strong> Doly ady </strong> <br>
  <a href = "mailto:#"> [email protected] </a> _ 
</address>

Bloknotlar

Resminamanyňyzyň içindäki başga bir çeşmeden mazmun böleklerini sitata etmek üçin.

Bellenen bloknot

Sitata hökmünde <blockquote>islendik HTML -i gurşap alyň. Göni sitatalar üçin a <p>.

“Lorem ipsum dolor” oturýar. Bitewi posuere garynja.

<blockquote>
  <p> Lorem ipsum dolor amet, konsektetur adipiscing elit. Bitewi posuere garynja. </p>
</blockquote>

Blokkot görnüşleri

Adaty bloknotda ýönekeý üýtgeşiklikler üçin stil we mazmun üýtgeýär.

Çeşmäni atlandyrmak

<small>Çeşmesini kesgitlemek üçin bellik goşuň . Çeşmäniň adyny ýazyň <cite>.

“Lorem ipsum dolor” oturýar. Bitewi posuere garynja.
Çeşme ady bilen meşhur biri

<blockquote>
  <p> Lorem ipsum dolor amet, konsektetur adipiscing elit. Bitewi posuere garynja. </p>
  <small> Meşhur biri <cite title = "Çeşmäniň ady" > Çeşmäniň ady </cite> </small> 
</blockquote>

Alternatiw displeýler

.pull-rightFloüzýän, sag tarapdaky bloknot üçin ulanyň .

“Lorem ipsum dolor” oturýar. Bitewi posuere garynja.
Çeşme ady bilen meşhur biri

<blockquote class = "çekmek-sag" > 
  ...
</blockquote>

Sanawlar

Tertibi

Sargyt aç-açan möhüm däl zatlaryň sanawy .

Lorem ipsum dolor amet otur
Consectetur adipiscing elit
Massa-da bitewi molestie lorem
Pretium nisl aliketinde ýeňilleşdirme
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat
Faucibus porta lacus fringilla vel
Ene oturylyşygy
Porttitor loremini alyň

<ul>
  <li> ... </li>
</ul>

Sargyt edildi

Sargyt aç- açan möhüm bolan zatlaryň sanawy .

Lorem ipsum dolor amet otur
Consectetur adipiscing elit
Massa-da bitewi molestie lorem
Pretium nisl aliketinde ýeňilleşdirme
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Ene oturylyşygy
Porttitor loremini alyň

<ol>
  <li> ... </li>
</ol>

Düzedilmedik

Sanaw elementlerinde deslapky list-stylewe çep gapagy aýyryň (diňe çagalar).

Lorem ipsum dolor amet otur
Consectetur adipiscing elit
Massa-da bitewi molestie lorem
Pretium nisl aliketinde ýeňilleşdirme
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat
Faucibus porta lacus fringilla vel
Ene oturylyşygy
Porttitor loremini alyň

<ul class = "styled" > 
  <li> ... </li>
</ul>

Inline

Listhli sanaw elementlerini bir setirde inline-blockwe birneme ýeňil ýerleşdiriň.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class = "inline" > 
  <li> ... </li>
</ul>

Düşündiriş

Baglanyşykly düşündirişleri bilen adalgalaryň sanawy.

Düşündiriş sanawlary: Düşündiriş sanawy adalgalary kesgitlemek üçin ajaýyp.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit metus-da mi porta gravida.
Malesuada porta: Etiam porta sem maleuada magna mollis euismod.

<dl>
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

Gorizontal düşündiriş

Terminleri we düşündirişleri <dl>gapdala düzüň.

Düşündiriş sanawlary: Düşündiriş sanawy adalgalary kesgitlemek üçin ajaýyp.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit metus-da mi porta gravida.
Malesuada porta: Etiam porta sem maleuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, fermentum massa justo sit amet risus.

<dl class = "dl-gorizontal" > 
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

Başlar!Gorizontal düşündiriş sanawlary, çep sütüniň düzedişine gabat gelmeýän adalgalary keser text-overflow. Dar görnüşlerde, deslapky tertipleşdirilen tertibe geçerler.

Inline

Koduň içerki böleklerini örtüň <code>.

Mysal üçin, <section>içerki görnüşde örtülmeli.

Mysal üçin , <code> & lt ; bölüm & gt ; </ code > setir görnüşinde örtülmelidir .

Esasy blok

<pre>Birnäçe setir kod üçin ulanyň . Dogry görkezmek üçin koddaky islendik burç ýaýdan gaçmagy unutmaň.

<p> Bu ýerde nusga nusgasy ... </p>

<pre>
  & lt; p & gt; Bu ýerde nusga tekst ... & lt; / p & gt;
</pre>

Başlar!<pre>Kodlary bellikleriň içinde mümkin boldugyça çepe ýakyn saklamagy unutmaň ; ähli bellikleri görkezer.

Islege görä .pre-scrollable, iň ýokary beýikligi 350px boljak we y ok aýlaw paneli bilen üpjün etjek synpy goşup bilersiňiz.

Bellenen stiller

Esasy bezeg üçin - ýeňil örtük we diňe gorizontal bölüjiler - esasy synpy .tableislendik birine goşuň <table>.

#	Ady	Familiýasy	Ulanyjy ady
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry	guş	@twitter

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

Meýletin sapaklar

Aşakdaky synplaryň islendigini .tableesasy klasa goşuň.

`.table-striped`

<tbody>CSS saýlaýjysynyň üsti bilen islendik tablisanyň hataryna zebra zolak goşýar :nth-child(IE7-8-de ýok).

#	Ady	Familiýasy	Ulanyjy ady
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry	guş	@twitter

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

`.table-bordered`

Stola serhetleri we tegelek burçlary goşuň.

#	Ady	Familiýasy	Ulanyjy ady
1	Bellik	Otto	@mdo
1	Bellik	Otto	@getbootstrap
2	Jacobakup	Thornton	@fat
3	Larry the guş		@twitter

<table class = "stol tablisasy bilen araçäk" > 
  …
</table>

`.table-hover`

A içindäki stol hatarlarynda aýlaw ýagdaýyny açyň <tbody>.

#	Ady	Familiýasy	Ulanyjy ady
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry the guş		@twitter

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

`.table-condensed`

Öýjükli örtükleri ýarym kesip, tablisalary has ykjam edýär.

#	Ady	Familiýasy	Ulanyjy ady
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry the guş		@twitter

<table class = "stol stoly kondensirlenen" > 
  …
</table>

Goşmaça hatar sapaklary

Stol hatarlaryny reňklemek üçin kontekst sapaklaryny ulanyň.

Synp	Düşündiriş
`.success`	Üstünlikli ýa-da oňyn hereketi görkezýär.
`.error`	Howply ýa-da potensial negatiw hereketi görkezýär.
`.warning`	Üns berilmegini talap edip biljek duýduryşy görkezýär.
`.info`	Adaty stillere alternatiwa hökmünde ulanylýar.

#	Haryt	Töleg	.Agdaý
1	Inçekesel - Aýlyk	01/04/2012	Makullandy
2	Inçekesel - Aýlyk	02/04/2012	Pese gaçdy
3	Inçekesel - Aýlyk	03/04/2012	Garaşylýar
4	Inçekesel - Aýlyk	04/04/2012	Tassyklamak üçin jaň ediň

...
  < tr class = "üstünlik" >
    <td> 1 < / td>
    <td> inçekesel - aýlyk </ td >
    < td > 01/04/2012 < / td >
    <td> tassyklandy </ td >
  </ tr >
...

Goldanýan tablisanyň belligi

Goldanýan tablisanyň HTML elementleriniň sanawy we olary nähili ulanmaly.

Bellik	Düşündiriş
`<table>`	Maglumatlary tablisa görnüşinde görkezmek üçin element
`<thead>`	`<tr>`Stol sütünlerine bellik etmek üçin tablisanyň sözbaşy hatarlary () üçin konteýner elementi
`<tbody>`	`<tr>`Stoluň göwresindäki stol hatarlary () üçin konteýner elementi
`<tr>`	Bir hatarda peýda bolan stol öýjükleriniň ( `<td>`ýa-da ) toplumy üçin konteýner elementi`<th>`
`<td>`	Bellenen tablisanyň öýjügi
`<th>`	Sütün (ýa-da hatara, ýerleşişine we ýerleşişine baglylykda) ýörite tablisa öýjügi
`<caption>`	Tablisanyň saklaýan zatlarynyň beýany ýa-da gysgaça mazmuny, esasanam ekran okyjylary üçin peýdaly

<tablisa>
  <caption> ... </caption>
  <thead>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</table>

Bellenen stiller

<form>Aýry-aýry forma dolandyryşlary stil alýar, ýöne bellikde uly üýtgeşmeler ýa-da uly üýtgeşmeler bolmazdan . Forma dolandyryşlarynyň üstünde goýlan, çep hatar ýazgylarda netijeler.

<form>
  <fieldset>
    <legend> Rowaýat </legend>
    <label> Etiketkanyň ady </label>
    <giriş görnüşi = "tekst" ýer eýesi = "Bir zady ýazyň ..." >  
    <span class = "help-block" > Mysal üçin blok derejeli kömek teksti. </span> 
    <label class = "bellik gutusy" > 
      <giriş görnüşi = "bellik gutusy" > Barlaň 
    </label>
    <düwme görnüşi = " tabşyr " synp = "btn" > Ibermek </button>  
  </fieldset>
</form>

Meýletin tertipler

“Bootstrap” bilen bilelikde ulanylýan ýagdaýlar üçin üç sany goşmaça görnüş düzülişi bar.

Gözleg formasy

.form-searchForma we goşmaça tegelek tekst girizmek üçin .search-querygoşuň .<input>

<form class = "form-gözleg" > 
  <giriş görnüşi = "text" class = "giriş-orta gözleg-talap" >  
  <düwme görnüşi = "tabşyr" synp = "btn" > Gözleg </button>  
</form>

Çyzgy görnüşi

.form-inlineYkjam düzüliş üçin çep hatar bellikleri we içerki blok dolandyryşlaryny goşuň .

<form class = "form-inline" > 
  <giriş görnüşi = "text" class = "input-small" ýer eýesi = "E-poçta" >   
  <giriş görnüşi = "parol" synp = "giriş-kiçi" ýer eýesi = "Parol" >   
  <label class = "bellik gutusy" > 
    <input type = "checkbox" > Rememberadyňyzda saklaň 
  </label>
  <düwme görnüşi = "tabşyr" class = "btn" > Giriş </button>  
</form>

Gorizontal görnüş

Etiketkalary sag deňleşdiriň we dolandyryşlar bilen bir setirde görünmegi üçin çepe ýüzüň. Bellenen görnüşden iň köp bellik üýtgeşmelerini talap edýär:

.form-horizontalForma goşuň
Etiketkalary we dolandyryş elementlerini örtüň.control-group
.control-labelBellige goşuň
Degişli dolandyryş .controlsüçin degişli dolandyryşlary örtüň

<form class = "form-gorizontal" > 
  <div class = "control-group" > 
    <label class = "control-label" = " inputEmail" > E-poçta </label> üçin  
    <div class = "dolandyryşlar" > 
      <giriş görnüşi = "text" id = "inputEmail" ýer eýesi = "E-poçta" >   
    </div>
  </div>
  <div class = "control-group" > 
    <label class = "control-label" for = "inputPassword" > Parol </label>  
    <div class = "dolandyryşlar" > 
      <giriş görnüşi = "parol" id = "inputPassword" ýer eýesi = "Parol" >   
    </div>
  </div>
  <div class = "control-group" > 
    <div class = "dolandyryşlar" > 
      <label class = "bellik gutusy" > 
        <input type = "checkbox" > Rememberadyňyzda saklaň 
      </label>
      <düwme görnüşi = "tabşyr" class = "btn" > Giriş </button>  
    </div>
  </div>
</form>

Goldanýan forma dolandyryşlary

Mysal forma düzülişinde goldanýan adaty forma dolandyryşlarynyň mysallary.

Girişler

Iň ýaýran forma gözegçilik, tekste esaslanýan giriş meýdanlary. HTML5 görnüşleriniň hemmesine goldawy öz içine alýar: tekst, parol, datime, datime-ýerli, sene, aý, wagt, hepde, san, e-poçta, url, gözleg, tel we reňk.

Belli bir wagtda ulanylmagyny talap edýär type.

<giriş görnüşi = "tekst" ýer eýesi = "Tekst giriş" >

Textarea

Birnäçe setiri goldaýan forma dolandyryşy. rowsZerur bolanda atributyny üýtgediň .

<textarea hatar = "3" > </textarea>

Bellikler we radiolar

Bellikler gutular sanawdaky bir ýa-da birnäçe warianty saýlamak üçin, radiolar köplerden bir warianty saýlamak üçin.

Bellenen (gaplanan)

<label class = "bellik gutusy" > 
  <giriş görnüşi = "bellik gutusy" value = "" >  
  Birinji wariant şu we şonuň üçin näme üçin ajaýypdygyny goşuň
</label>
 
<label class = "radio" > 
  <giriş görnüşi = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" barlandy >     
  Birinji wariant şu we şonuň üçin näme üçin ajaýypdygyny goşuň
</label>
<label class = "radio" > 
  <giriş görnüşi = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  Ikinji wariant başga bir zat bolup biler we ony saýlamak birinji warianty saýlamaz
</label>

Çyzgy gutulary

.inlineBir setirde gözegçilik üçin gutularyň ýa-da radiolaryň hataryna synp goşuň .

<label class = "bellik gutusy" > 
  <giriş görnüşi = "bellik gutusy" id = "inlineCheckbox1" value = "option1" > 1   
</label>
<label class = "bellik gutusy" > 
  <giriş görnüşi = "bellik gutusy" id = "inlineCheckbox2" value = "option2" > 2   
</label>
<label class = "bellik gutusy" > 
  <giriş görnüşi = "bellik gutusy" id = "inlineCheckbox3" value = "option3" > 3   
</label>

Saýlaýar

multiple="multiple"Birbada birnäçe opsiýany görkezmek üçin deslapky opsiýany ulanyň ýa-da kesgitläň .

<select>
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>
 
< köp = "köp" saýlaň 
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>

Forma dolandyryşlaryny giňeltmek

Bar bolan brauzer dolandyryşlarynyň üstüne goşmak bilen, Bootstrap beýleki peýdaly forma böleklerini öz içine alýar.

Taýýarlanan we goşulan girişler

Tekst esasly girişden öň ýa-da soň tekst ýa-da düwmeler goşuň. selectBu ýerde elementleriň goldanylmaýandygyny ýadyňyzdan çykarmaň .

Bellenen görnüşler

Teksti girizmek ýa-da goşmak üçin iki synpyň biri bilen an .add-onwe an bilen örtüň.input

<div class = "input-prepend" > 
  <span class = "add-on" > @ </span> 
  <input class = "span2" id = "prependedInput" type = "text" ýer eýesi = "Ulanyjy ady" >    
</div>
<div class = "giriş-goşundy" > 
  <input class = "span2" id = "appendedInput " type = "text" >   
  <span class = "add-on" > .00 </span> 
</div>

Birleşdirilen

.add-onGiriş taýýarlamak we goşmak üçin iki synpy we iki mysaly ulanyň .

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

Tekstiň ýerine düwmeler

Tekstli <span>tekstiň ýerine .btngiriş düwmesini (ýa-da iki) dakmak üçin a ulanyň.

<div class = "giriş-goşundy" > 
  <giriş synpy = "span2" id = "goşulanInputButton " görnüşi = "tekst" >   
  <button class = "btn" type = "button" > Git! </button>  
</div>

<div class = "giriş-goşundy" > 
  <giriş synpy = "span2" id = "goşulanInputButtons " type = "text" >   
  <button class = "btn" type = "button" > Gözleg </button>  
  <button class = "btn" type = "button" > Görnüşler </button>  
</div>

Düwmeleriň açylmagy

<div class = "giriş-goşundy" > 
  <giriş synpy = "span2" id = "goşulanDropdownButton " görnüşi = "tekst" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Hereket
      <span class = "caret" > </span> 
    </button>
    <ul class = "drop-menu" > 
      ...
    </ul>
  </div>
</div>

<div class = "input-prepend" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Hereket
      <span class = "caret" > </span> 
    </button>
    <ul class = "drop-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" >  
      Hereket
      <span class = "caret" > </span> 
    </button>
    <ul class = "drop-menu" > 
      ...
    </ul>
  </div>
  <giriş synpy = "span2" id = "goşulanPrependedDropdownButton " type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Hereket
      <span class = "caret" > </span> 
    </button>
    <ul class = "drop-menu" > 
      ...
    </ul>
  </div>
</div>

Bölünen açylan toparlar

<form>
  <div class = "input-prepend" > 
    <div class = "btn-group" > ... </div> 
    <giriş görnüşi = "tekst" > 
  </div>
  <div class = "giriş-goşundy" > 
    <giriş görnüşi = "tekst" > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

Gözleg formasy

<form class = "form-gözleg" > 
  <div class = "giriş-goşundy" > 
    <giriş görnüşi = "text" class = "span2 gözleg-talap" >  
    <düwme görnüşi = "tabşyr" synp = "btn" > Gözleg </button>  
  </div>
  <div class = "input-prepend" > 
    <düwme görnüşi = "tabşyr" synp = "btn" > Gözleg </button>  
    <giriş görnüşi = "text" class = "span2 gözleg-talap" >  
  </div>
</form>

Dolandyryş ululygy

.input-largeSapaklary ulanyp, girişleriňizi gözenegiň sütüniniň ululyklaryna deňeşdiriň ýa-da deňeşdiriň .span*.

Dereje derejesini giriziň

Islendik <input>ýa-da <textarea>elementi blok derejesindäki element ýaly alyp barmak.

<input class = "input-block-level" type = "text" ýer eýesi = ".input-block-level" >

Otnositel ululyk

<giriş synpy = "giriş-mini" görnüşi = "tekst" ýer eýesi = ".input-mini" >   
<input class = "input-small" type = "text" ýer eýesi = ".input-small" >   
<input class = "input-medium" type = "text" ýer eýesi = ".input-medium" >   
<input class = "input-large" type = "text" ýer eýesi = ".input-large" >   
<input class = "input-xlarge" type = "text" ýer eýesi = ".input-xlarge" >   
<input class = "input-xxlarge" type = "text" ýer eýesi = ".input-xxlarge" >

Başlar!Geljekki wersiýalarynda, düwmäniň ululyklaryna laýyk gelýän bu degişlilikde giriş synplarynyň ulanylyşyny üýtgederis. Mysal üçin, .input-largegirişiň gaplanyşyny we şrift ölçegini artdyrar.

Grid ululygy

Panel sütünleriniň deň ölçeglerine gabat gelýän girişler üçin .span1ulanyň ..span12

<giriş synpy = "span1" görnüşi = "tekst" ýer eýesi = ".span1" >   
<giriş synpy = "span2" görnüşi = "tekst" ýer eýesi = ".span2" >   
<giriş synpy = "span3" görnüşi = "tekst" ýer eýesi = ".span3" >   
< class = "span1" > saýlaň 
  ...
</select>
< class = "span2" > saýlaň 
  ...
</select>
< class = "span3" > saýlaň 
  ...
</select>

Her setirde köp sanly giriş üçin , dogry aralyk üçin üýtgediji synpy ulanyň.controls-row . Ak meýdany ýykmak üçin girişleri ýüzýär, degişli çäkleri kesgitleýär we ýüzüşi arassalaýar.

<div class = "dolandyryşlar" > 
  <giriş synpy = "span5" görnüşi = "tekst" ýer eýesi = ".span5" >   
</div>
<div class = "dolandyryş-hatara gözegçilik edýär" > 
  <giriş synpy = "span4" görnüşi = "tekst" ýer eýesi = ".span4" >   
  <giriş synpy = "span1" görnüşi = "tekst" ýer eýesi = ".span1" >   
</div>
...

Bitewi girişler

Maglumatlary hakyky forma belligini ulanman redaktirläp bolmajak görnüşde hödürläň.

<span class = "input-xlarge uneditable-input" > Bu ýerde käbir bahalar </span>

Hereketleri emele getiriň

Hereketler topary (düwmeler) bilen bir formany tamamlaň. A içinde ýerleşdirilende .form-actions, düwmeler awtomatiki usulda forma dolandyryşlary bilen hatara düzüler.

<div class = "form-hereketler" > 
  <düwme görnüşi = "tabşyr" class = "btn btn-primary" > Üýtgeşmeleri ýatda saklaň </button>  
  <button type = "button" class = "btn" > elatyr </button>  
</div>

Kömek teksti

Forma gözegçilikleriniň töwereginde peýda bolan kömek teksti üçin çyzyk we blokirleme derejesi.

Kömek

<input type = "text" > <span class = "help-inline" > Inline kömek teksti </span>

Kömegi blokirläň

<input type = "text" > <span class = "help-block" > Täze setire bölünip, bir setirden hem uzalyp bilýän kömek tekstiniň has uzyn bölegi. </span>

Forma gözegçilik ýagdaýy

Ulanyjylara ýa-da myhmanlara forma gözegçilikleri we bellikleri barada esasy pikir ýagdaýlary bilen jogap beriň.

Giriş fokusy

outlineKäbir forma dolandyryşlarynda deslapky stilleri aýyrýarys we box-shadowýerine onuň ýerine ulanýarys :focus.

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "Bu gönükdirilen ..." >

Nädogry girişler

Adaty brauzer işleýşi arkaly stil girişleri :invalid. A kesgitläň , meýdan islege bagly bolmasa atribut typegoşuň requiredwe (mümkin bolsa) a görkeziň pattern.

CSS pseudo saýlaýjylaryna goldawyň ýoklugy sebäpli Internet Explorer 7-9 wersiýalarynda bu mümkin däl.

<giriş synpy = "span3" görnüşi = "e-poçta" zerur >

Öçürilen girişler

disabledUlanyjynyň girişiniň öňüni almak we birneme üýtgeşik görnüşe itergi bermek üçin atributy goşuň .

<input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Bu ýerde giriş ýapyldy ..." ýapyldy >

Barlag görkezilýär

“Bootstrap” ýalňyşlyk, duýduryş, maglumat we üstünlik habarlary üçin tassyklama stillerini öz içine alýar. Ulanmak üçin daş-töweregiňize degişli synpy goşuň .control-group.

<div class = "dolandyryş-topar duýduryşy" > 
  <label class = "control-label" for = "inputWarning" > Duýduryş bilen giriş </label>  
  <div class = "dolandyryşlar" > 
    <giriş görnüşi = "text" id = "inputWarning" >  
    <span class = "help-inline" > Bir zat nädogry bolup biler </span> 
  </div>
</div>
 
<div class = "dolandyryş-topar ýalňyşlygy" > 
  <label class = "control-label" = = "inputError" > ýalňyşlyk bilen giriş </label>  
  <div class = "dolandyryşlar" > 
    <giriş görnüşi = "text" id = "inputError" >  
    <span class = "help-inline" > thealňyşlygy düzediň </span> 
  </div>
</div>
 
<div class = "dolandyryş-topar maglumatlary" > 
  <label class = "control-label" for = "inputInfo" > Maglumat bilen giriş </label>  
  <div class = "dolandyryşlar" > 
    <giriş görnüşi = "text" id = "inputInfo" >  
    <span class = "help-inline" > Ulanyjy ady eýýäm alyndy </span> 
  </div>
</div>
 
<div class = "dolandyryş-topar üstünligi" > 
  <label class = "control-label" for = "inputSuccess" > Üstünlik bilen giriş </label>  
  <div class = "dolandyryşlar" > 
    <giriş görnüşi = "text" id = "inputSuccess" >  
    <span class = "help-inline" > Woohoo! </span> 
  </div>
</div>

Bellenen düwmeler

.btnDüwmeleriň stilleri ulanylýan synp bilen islendik zada ulanylyp bilner. Şeýle-de bolsa, adatça bulary diňe <a>we <button>iň gowy görkezmek üçin elementlere ulanmak islärsiňiz.

Düwme	class = ""	Düşündiriş
	`btn`	Gradient bilen adaty çal düwme
	`btn btn-primary`	Goşmaça wizual agram berýär we düwmeler toplumynda esasy hereketi kesgitleýär
	`btn btn-info`	Adaty stillere alternatiwa hökmünde ulanylýar
	`btn btn-success`	Üstünlikli ýa-da oňyn hereketi görkezýär
	`btn btn-warning`	Bu hereket bilen seresap bolmalydygyny görkezýär
	`btn btn-danger`	Howply ýa-da potensial negatiw hereketi görkezýär
	`btn btn-inverse`	Semantiki hereket ýa-da ulanmak bilen baglanyşykly bolmadyk çal çal düwmesi
	`btn btn-link`	Düwmäniň özüni alyp barşyny dowam etdirip, düwmä baglanyşyk ýaly edip, düwmä üns beriň

Brauzeriň gabat gelmegi

IE9 tegelek burçlarda fon gradiýentlerini kesmeýär, şonuň üçin aýyrýarys. Degişli, IE9 button, düzedip bilmeýän nejis tekst kölegesi bilen çal reňkli teksti maýyp elementleri görkezýär.

Düwmeleriň ululyklary

Uly ýa-da kiçi düwmeler barmy? Goşuň ýa-da .btn-largegoşmaça ululyklar üçin..btn-small.btn-mini

<p>
  <button class = "btn btn-large btn-primary" type = "button" > Uly düwme </button>  
  <button class = "btn btn-large" type = "button" > Uly düwme </button>  
</p>
<p>
  <button class = "btn btn-primary" type = "button" > Bellenen düwme </button>  
  <button class = "btn" type = "button" > Bellenen düwme </button>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "button" > Kiçi düwme </button>  
  <button class = "btn btn-small" type = "button" > Kiçi düwme </button>  
</p>
<p>
  <button class = "btn btn-mini btn-primary" type = "button" > Mini düwme </button>  
  <button class = "btn btn-mini" type = "button" > Mini düwme </button>  
</p>

Goşmak arkaly blok derejesindäki düwmeleri dörediň - ene-atanyň doly giňligini öz içine alýan düwmeler .btn-block.

<düwme synpy = "btn btn-uly btn-blok btn-başlangyç" type = "button" > Blok derejesi düwmesi </button>  
<button class = "btn btn-large btn-block" type = "button" > Blok derejesi düwmesi </button>

Maýyp ýagdaý

Düwmeleri 50% yza çekip, ýapyk görnüşde görkeziň.

Gämi elementi

.disabledSynpy <a>düwmelere goşuň .

Esasy baglanyşyk Baglanyşyk

<a href = "#" class = "btn btn-large btn- başlangyç ýapyk "> Esasy baglanyşyk </a>  
<a href = "#" class = "btn btn-large disabled"> Link </a>

Başlar!.disabledBu ýerde umumy synpa meňzeş peýdaly synp hökmünde ulanýarys .active, şonuň üçin prefiks talap edilmeýär. Şeýle hem, bu synp diňe estetika üçin; bu ýerdäki baglanyşyklary öçürmek üçin ýörite JavaScript ulanmaly.

Düwme elementi

Düwmelere disabledatribut goşuň .<button>

<button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Esasy düwme </button>   
<düwme görnüşi = "düwme" synp = "btn btn-large" ýapyk > düwme </button>

Bir synp, birnäçe bellik

.btnSynpy an <a>, <button>ýa-da <input>elementde ulanyň .

<a class = "btn" href = ""> Baglanyşyk </a> _  
<düwme synpy = "btn" tip = "tabşyr" > düwme </button>  
<input class = "btn" type = "button" value = "Giriş" >   
<giriş synpy = "btn" görnüşi = "tabşyr " bahasy = "Iber" >

Iň oňat tejribe hökmünde, brauzerleriň görkezilişine laýyk gelmegini üpjün etmek üçin kontekstiňizdäki elementi deňeşdirmäge synanyşyň. Eger bar bolsa , düwmäňiz üçin inputan ulanyň .<input type="submit">

<img>Islendik taslamada şekilleri aňsatlyk bilen düzmek üçin bir elemente sapak goşuň .

<img src = "..." class = "img-tegelek" >  
<img src = "..." class = "img-circ" >  
<img src = "..." class = "img-polaroid" >

Başlar! .img-roundedwe goldawyň .img-circleýoklugy sebäpli IE7-8-de işlemäň border-radius.

Nyşan glifleri

“ Glyphicons ” tarapyndan üpjün edilen, çal reňkli (asyl) we ak reňkde 140 nyşan .

nyşan-aýna
nyşan-saz
nyşan gözlemek
nyşan-konwert
nyşan-ýürek
nyşan-ýyldyz
nyşan-ýyldyz boş
nyşan-ulanyjy
nyşan-film
nyşan-uly
nyşan
nyşan-sanaw
nyşan-ok
nyşany aýyrmak
nyşan-ulaltmak
nyşany ulaltmak
nyşanjygy
nyşan-signal
icon-cog
nyşan-zibil
nyşan-öý
nyşan-faýl
nyşan wagty
nyşan-ýol
icon-download-alt
nyşanjygy
nyşan ýüklemek
nyşan gutusy
icon-play-tegelek
nyşan-gaýtalamak
nyşan-täzeleme
icon-list-alt
nyşan-gulp
nyşan-baýdak
nyşan-nauşnikler
nyşan-ses
nyşan-ses-aşak
nyşan-ses
icon-qrcode
nyşan-ştrih-kod
nyşan belligi
nyşan belgileri
nyşan-kitap
nyşan belgisi
nyşan-çap
nyşan-kamera
nyşan-şrift
nyşan
nyşan-çyzyk
nyşan-tekst-beýiklik
nyşan-tekst-ini
icon-align-left
icon-align-center
icon-align-right
icon-align-justify
nyşanlaryň sanawy
icon-indent-left
icon-indent-sag
icon-facime-wideo
nyşan-surat
nyşan-galam
nyşan-karta-marker
nyşan-saz
nyşan
nyşan-redaktirleme
nyşan paýlaşmak
nyşanjygy barlamak
nyşanjygy
nyşan-ädim yza
nyşan-çalt-yza
nyşan-yza
nyşan-oýnamak
nyşan-pauza
nyşan-duralga
nyşanjygy
nyşan-çalt öňe
nyşan-ädim öňe
nyşan-çykarmak
icon-chevron-çep
icon-chevron-sag
nyşan belgisi
nyşan-minus-belgi
nyşan-aýyrmak-belgi
nyşan-ok-belgi
nyşan-sorag-belgi
nyşan-maglumat-belgi
nyşan-skrinshot
nyşan-aýyrmak-tegelek
nyşan-ok-tegelek
icon-ban-tegelek
nyşan-ok-çep
nyşan-ok-sag
nyşan-ok
nyşan-ok-aşak
icon-share-alt
nyşan-ölçegi-doly
icon-resize-small
nyşan-plýus
nyşan-minus
nyşan belgisi
nyşan-bellik belgisi
nyşan-sowgat
nyşan-ýaprak
nyşan-ot
nyşan-göz
nyşan-göz
nyşan-duýduryş belgisi
nyşan-tekizlik
nyşan-senenama
nyşan-tötänleýin
nyşan-teswir
nyşan-magnit
icon-chevron-up
nyşan-şewron-aşak
nyşan-retweet
nyşan-söwda arabasy
nyşan-bukja-ýap
nyşan bukjasy-açyk
nyşan-ölçegi-dik
nyşan-ölçeg-keseligine
icon-hdd
icon-bullhorn
nyşan-jaň
nyşan-şahadatnama
nyşan-baş barmak
nyşan-barmak-aşak
nyşan-sag-sag
nyşan-çep
nyşan
nyşanjygy
nyşan-tegelek-ok-sag
nyşan-tegelek-ok-çep
nyşan-tegelek-ok
nyşan-tegelek-ok-aşak
nyşan-globus
nyşan
nyşan-meseleler
nyşan-süzgüç
nyşan portfeli
nyşan-doly ekran

Glifonlaryň atributy

“ Glyphicons Halflings” adatça mugt elýeterli däl, ýöne “Bootstrap” bilen “Glyphicons” döredijileriniň arasyndaky ylalaşyk, döredijiler hökmünde size hiç hili tölegsiz mümkinçilik berdi. Sag boluň, amaly bolanda Glyphicons -a goşmaça baglanyşyk goşmagyňyzy haýyş edýäris .

Nähili ulanmak

Nyşanlaryň hemmesine prefiksi <i>bolan özboluşly synply bellik gerek icon-. Ulanmak üçin aşakdaky kody islendik ýere ýerleşdiriň:

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

Şeýle hem, goşmaça synp bilen taýýarlanan ters (ak) nyşanlar üçin stiller bar. Bu synpy deňiz we açylýan baglanyşyklar üçin hereket edýän we işjeň ýagdaýlarda aýratyn ýerine ýetireris.

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

Başlar!Düwmelerde ýa-da deňiz baglanyşyklarynda bolşy ýaly, tekst setirleriniň gapdalynda ulanylanda, <i>dogry aralyk üçin bellikden soň boş ýer goýuň.

Nyşan mysallary

Gurallar paneli, nawigasiýa ýa-da deslapky görnüş girişleri üçin düwmelerde, düwme toparlarynda ulanyň.

Düwmeler

Düwme gurallar panelinde düwme topary

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

Düwme toparynda aşak düşmek

Ulanyjy

<div class = "btn-group" > 
  <a class = "btn btn-primary" href = "#"> <i class = "icon-user icon-white" > </i> Ulanyjy </a>   
  <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#"> <span class = "caret" > </span> </a>    
  <ul class = "drop-menu" > 
    <li> <a href = "#"> <i class = "icon-galam" > </i> Üýtget </a> </li>  
    <li> <a href = "#"> <i class = "icon-trash" > </i> Öçürmek </a> </li>  
    <li> <a href = "#"> <i class = "icon-ban-circ" > </i> gadagan </a> </li>  
    <li class = "bölüji" > </li> 
    <li> <a href = "#"> <i class = "i" > </i> Admin ediň </a> </li>  
  </ul>
</div>

Düwmeleriň ululyklary

Staryldyz Staryldyz Staryldyz

<a class = "btn btn-large" href = "#"> <i class = "icon-star" > </i> ýyldyz </a>   
<a class = "btn btn-small" href = "#"> <i class = "icon-star" > </i> ýyldyz </a>   
<a class = "btn btn-mini" href = "#"> <i class = "icon-star" > </i> ýyldyz </a>

Nawigasiýa

<ul class = "nav nav-list" > 
  <li class = "işjeň" > <a href = "#"> <i class = "icon-home icon-white" > </i> Öý </a> </li>   
  <li> <a href = "#"> <i class = "icon-book" > </i> Kitaphana </a> </li>  
  <li> <a href = "#"> <i class = "icon-galam" > </i> Goýmalar </a> </li>  
  <li> <a href = "#"> <i class = "i" > </i> Dürli </a> </li>  
</ul>

Meýdanlary emele getiriň

<div class = "control-group" > 
  <label class = "control-label" üçin = "inputIcon" > E-poçta salgysy </label>  
  <div class = "dolandyryşlar" > 
    <div class = "input-prepend" > 
      <span class = "add-on" > <i class = "icon-konwert" > </i> </span>  
      <input class = "span2" id = "inputIcon" type = "text" >   
    </div>
  </div>
</div>

Tipografiýa

Ingsazgylar

h1. 1-nji sözbaşy

h2. 2-nji sözbaşy

h3. 3-nji sözbaşy

h4. 4-nji sözbaşy

h5. 5-nji sözbaşy

h6. 6-njy sözbaşy

Bedeniň göçürmesi

Gurluşyň göçürmesi

Az bilen gurlan

Üns beriň

<small>

Batyr

Italýan

Düzediş sapaklary

Üns beriň

Gysgaltmalar

<abbr>

<abbr class="initialism">

Salgylar

<address>

Bloknotlar

Bellenen bloknot

Blokkot görnüşleri

Çeşmäni atlandyrmak

Alternatiw displeýler

Sanawlar

Tertibi

Sargyt edildi

Düzedilmedik

Inline

Düşündiriş

Gorizontal düşündiriş

Kod

Inline

Esasy blok

Tablisa

Bellenen stiller

Meýletin sapaklar

.table-striped

.table-bordered

.table-hover

.table-condensed

Goşmaça hatar sapaklary

Goldanýan tablisanyň belligi

Formalar

Bellenen stiller

Meýletin tertipler

Gözleg formasy

Çyzgy görnüşi

Gorizontal görnüş

Goldanýan forma dolandyryşlary

Girişler

Textarea

Bellikler we radiolar

Bellenen (gaplanan)

Çyzgy gutulary

Saýlaýar

Forma dolandyryşlaryny giňeltmek

Taýýarlanan we goşulan girişler

Bellenen görnüşler

Birleşdirilen

Tekstiň ýerine düwmeler

Düwmeleriň açylmagy

Bölünen açylan toparlar

Gözleg formasy

Dolandyryş ululygy

Dereje derejesini giriziň

Otnositel ululyk

Grid ululygy

Bitewi girişler

Hereketleri emele getiriň

Kömek teksti

Kömek

Kömegi blokirläň

Forma gözegçilik ýagdaýy

Giriş fokusy

Nädogry girişler

Öçürilen girişler

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`