Kanun labarai

Duk taken HTML, <h1>ta hanyar <h6>akwai su.

h1. Take 1

h2. Take 2

h3. Take 3

h4. Take 4

h5. Take 5

h6. Take 6

Kwafin jiki

Tsohuwar Bootstrap ta duniya font-sizeshine 14px , tare da line-heightna 20px . Ana amfani da wannan a cikin <body>da kuma duk sakin layi. Bugu da kari, <p>(sakin layi) suna karɓar gefen ƙasa na rabin tsayin layinsu (10px ta tsohuwa).

Nullam quis risus eget urna mollis ornare vel eu leo. Duk da haka, muna magana ne game da abin ban mamaki da kuma ban mamaki. Nullam id dolor id nibh ultricies vehicula.

Duk da haka, muna magana ne game da abin ban mamaki da kuma ban mamaki. 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 un mi porta gravida a eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Kwafin jikin jagora

Sanya sakin layi ya fice ta ƙara .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est ba commodo luctus.

<p class = "lead" > ... </p>

Gina tare da Kadan

Ma'aunin rubutu ya dogara ne akan ma'auni guda biyu KARANCIN a cikin masu canji . kasa : @baseFontSizeda @baseLineHeight. Na farko shine girman font-girman da aka yi amfani da shi duka kuma na biyu shine tsayin layin tushe. Muna amfani da waɗancan sauye-sauyen da wasu sassauƙan lissafi don ƙirƙira margins, paddings, da tsayin layi na kowane nau'in mu da ƙari. Keɓance su kuma Bootstrap ya daidaita.

Jaddadawa

Yi amfani da tsoffin alamun girmamawa na HTML tare da salo marasa nauyi.

`<small>`

Don rage jaddada layin layi ko tubalan rubutu, yi amfani da ƙaramin alamar.

Wannan layin rubutun ana nufin a kula dashi azaman bugu mai kyau.

<p> <ƙaramin> Wannan layin rubutun ana nufin a ɗauke shi azaman bugu mai kyau. </small> </p>

M

Don jaddada guntun rubutu tare da nauyin rubutu mai nauyi.

Ana fassara gunkin rubutu mai zuwa azaman rubutu mai ƙarfi .

An fassara shi azaman rubutu mai ƙarfi < /strong>

Rubutun rubutu

Don jaddada guntun rubutu tare da rubutun.

Ana fassara gunkin rubutu mai zuwa azaman rubutun rubutun .

An fassara <em> azaman rubutu mai rubutun </em>

A kula!Jin kyauta don amfani <b>kuma <i>a cikin HTML5. <b>ana nufin haskaka kalmomi ko jimloli ba tare da isar da ƙarin mahimmanci ba yayin <i>da galibin murya ne, kalmomin fasaha, da sauransu.

Darussan girmamawa

Isar da ma'ana ta launi tare da ɗimbin girmamawa azuzuwan amfani.

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

Ka yi la'akari da abin da ake kira 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 = "gargadin rubutu" > Etiam porta sem malesuada magna mollis euismod. </p> 
<p class = "kuskuren rubutu" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
<p class = "rubutu-info" > Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
<p class = "rubutu-nasara" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Taqaitaccen bayani

Salon aiwatar da abubuwan HTML <abbr>don gajartawa da gajartawa don nuna faɗaɗɗen sigar akan hover. Gajartawa tare da titlesifa suna da iyakar haske mai dige-dige na ƙasa da kuma siginan taimako akan shawagi, yana ba da ƙarin mahallin akan shawagi.

`<abbr>`

Don faɗaɗa rubutu akan dogon buɗawar gajarta, haɗa da titlesifa.

Gajartawar kalmar sifa ita ce attr .

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

`<abbr class="initialism">`

Ƙara .initialismzuwa ga taƙaitaccen girman girman rubutu kaɗan.

HTML shine abu mafi kyau tun yankakken gurasa.

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

Adireshi

Gabatar da bayanin tuntuɓar kakanni mafi kusa ko duka aikin.

`<address>`

Ajiye tsarawa ta ƙare duk layi da <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Cikakken Suna
[email protected]

<adireshi>
  <strong> Twitter, Inc. </strong><br>
  795 Folsom Ave, Suite 600 <br>
  San Francisco, CA 94107
  <abbr title = "Waya" > P: </abbr> (123) 456-7890 
</address>
 
<adireshi>
  <strong> Cikakken Suna </strong><br>
  <a href = "mailto:#" > [email protected] </a> 
</address>

Blockquotes

Don faɗar tubalan abun ciki daga wani tushe a cikin takaddar ku.

Default blockquote

Kunna <blockquote>kowane HTML azaman abin ƙira. Don madaidaiciyar magana muna ba da shawarar a <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ƙididdigar ƙididdiga ta haɓaka da ante.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ƙididdigar ƙididdiga ta haɓaka da ante. </p>
</blockquote>

Zaɓuɓɓukan Blockquote

Salo da abun ciki suna canzawa don sauƙaƙan bambance-bambance akan daidaitaccen blockquote.

Sunan tushe

Ƙara <small>alamar don gano tushen. Kunna sunan tushen aikin a cikin <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ƙididdigar ƙididdiga ta haɓaka da ante.
Wani shahararre a taken Source

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ƙididdigar ƙididdiga ta haɓaka da ante. </p>
  <small> Wani sanannen <cite title = "Tsarin Tushen" > Taken Tushen </cite></small> 
</blockquote>

Madadin nuni

Yi amfani .pull-rightda madaidaicin blockquote mai iyo, daidaitacce.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ƙididdigar ƙididdiga ta haɓaka da ante.
Wani shahararre a taken Source

<blockquote class = "ja-dama" > 
  ...
</blockquote>

Lissafi

Ba a ba da oda ba

Jerin abubuwan da odar ba ta da mahimmanci a bayyane.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis a cikin pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculus neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat a
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

An yi oda

Jerin abubuwan da odar ke da mahimmanci a bayyane.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis a cikin pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

Mara salo

Jerin abubuwan da babu list-styleko ƙarin mashin hagu.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis a cikin pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculus neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat a
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul class = "marasa salo" > 
  <li> ... </li>
</ul>

Bayani

Jerin sharuɗɗan tare da kwatancensu masu alaƙa.

Jerin bayanin: Jerin bayanin ya dace don ma'anar kalmomi.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id un mi porta gravida a eget metus.
Malesuada porta: Ka yi la'akari da abin da ake kira euismod.

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

Bayanin kwance

Yi sharuddan da kwatance a <dl>layi gefe-gefe.

Jerin bayanin: Jerin bayanin ya dace don ma'anar kalmomi.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id un mi porta gravida a eget metus.
Malesuada porta: Ka yi la'akari da abin da ake kira euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl class = "dl-horizontal" > 
  <dt> ... </dt>
  <dd> ... </dd>
</dl> ba

A kula!Lissafin bayanin a kwance za su yanke sharuddan da suka yi tsayi da yawa don dacewa da ginshiƙi na hagu text-overflow. A cikin kunkuntar wuraren kallo, za su canza zuwa tsayayyen shimfidar wuri.

Layin layi

Kunna snippets na layi tare da <code>.

Alal misali, <section>ya kamata a nannade shi azaman layi.

Misali , < code><section> </ code > yakamata a nade shi azaman layi .

Tushe na asali

Yi amfani <pre>da layukan lamba da yawa. Tabbatar da kubuta daga kowane maƙallan kusurwa a cikin lambar don yin daidai.

<p>Sample rubutu a nan...</p>

<pre>
  <p>Sample rubutu a nan...</p>
</pre>

A kula!Tabbatar kiyaye lamba a cikin <pre>alamun kusa da hagu kamar yadda zai yiwu; zai sanya duk shafuka.

Kuna iya ƙara .pre-scrollableajin da zaɓin wanda zai saita max-tsawo na 350px kuma ya ba da madaidaicin madaidaicin y-axis.

Salon tsoho

Don salo na asali — padding haske da masu rarraba a kwance kawai - ƙara ajin tushe .tablezuwa kowane <table>.

#	Sunan rana	Sunan mahaifa	Sunan mai amfani
1	Alama	Otto	@mdo
2	Yakubu	Thornton	@mai
3	Larry	Tsuntsu	@twitter

< class class = "tebur" > 
  …
</text>

Zabin azuzuwan

Ƙara kowane ɗayan waɗannan azuzuwan zuwa .tableajin tushe.

`.table-striped`

Yana ƙara zaren zebra zuwa kowane layin tebur a cikin <tbody>ta hanyar :nth-childzaɓin CSS (ba a samuwa a cikin IE7-IE8).

#	Sunan rana	Sunan mahaifa	Sunan mai amfani
1	Alama	Otto	@mdo
2	Yakubu	Thornton	@mai
3	Larry	Tsuntsu	@twitter

< class class = "Table-stripped" > 
  …
</text>

`.table-bordered`

Ƙara iyakoki da sasanninta masu zagaye zuwa teburin.

#	Sunan rana	Sunan mahaifa	Sunan mai amfani
1	Alama	Otto	@mdo
1	Alama	Otto	@getbootstrap
2	Yakubu	Thornton	@mai
3	Larry the Bird		@twitter

< class class = "tebur mai iyaka" > 
  …
</text>

`.table-hover`

Kunna yanayin jujjuyawa akan layuka na tebur a cikin <tbody>.

#	Sunan rana	Sunan mahaifa	Sunan mai amfani
1	Alama	Otto	@mdo
2	Yakubu	Thornton	@mai
3	Larry the Bird		@twitter

< class class = "tebur-hover" > 
  …
</text>

`.table-condensed`

Yana sanya allunan ƙarami ta hanyar yankan tantanin halitta a rabi.

#	Sunan rana	Sunan mahaifa	Sunan mai amfani
1	Alama	Otto	@mdo
2	Yakubu	Thornton	@mai
3	Larry the Bird		@twitter

< class class = "Table-condensed" > 
  …
</text>

Azuzuwan jere na zaɓi

Yi amfani da azuzuwan mahallin don canza launi na layuka.

Class	Bayani
`.success`	Yana nuna aiki mai nasara ko tabbatacce.
`.error`	Yana nuna wani aiki mai haɗari ko mai yuwuwa mara kyau.
`.warning`	Yana nuna gargaɗin da zai buƙaci kulawa.
`.info`	Ana amfani dashi azaman madadin sifofin tsoho.

#	Samfura	Biyan Da Aka Ci	Matsayi
1	TB - kowane wata	01/04/2012	An amince
2	TB - kowane wata	02/04/2012	An ƙi
3	TB - kowane wata	03/04/2012	Ana jiran
4	TB - kowane wata	04/04/2012	Kira shiga don tabbatarwa

...
  < tr class = "nasara" >
    <td> 1 < /td>
    <td>TB - kowane wata</ td >
    <td> 01 / 04 / 2012 < /td>
    <td>An amince</ td >
  </ tr >
...

Alamar tebur mai goyan baya

Jerin abubuwan HTML na tebur masu goyan bayan da yadda yakamata a yi amfani da su.

Tag	Bayani
`<table>`	Nade kashi don nuna bayanai a cikin tsari na tabular
`<thead>`	Kayan kwantena don layuka na kan tebur ( `<tr>`) don yiwa ginshiƙan tebur lakabi
`<tbody>`	Kayan kwantena don layuka na tebur ( `<tr>`) a jikin teburin
`<tr>`	Kayan kwantena don saitin sel na tebur ( `<td>`ko `<th>`) wanda ke bayyana akan layi ɗaya
`<td>`	Tantanin halitta na asali
`<th>`	Tantanin tebur na musamman don ginshiƙi (ko jere, dangane da iyaka da jeri) Dole ne a yi amfani da alamun a cikin a`<thead>`
`<caption>`	Bayani ko taƙaita abin da tebur ya ƙunsa, musamman masu amfani ga masu karanta allo

<tebur>
  <taken magana> ... </caption>
  <fito>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </fadi>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</text>

Salon tsoho

Sarrafa nau'ikan nau'ikan mutum ɗaya suna karɓar salo, amma ba tare da kowane ajin tushe da ake buƙata akan <form>ko manyan canje-canje a alamar ba. Sakamako a cikin jigogi, alamun hagu a saman sarrafa nau'i.

<form>
  <filaye>
    <labarin> labari </legend>
    <label> Lakabin suna </label>
    < nau'in shigarwa = "rubutu" mai sanya wuri = "Buga wani abu..." >  
    <span class = "help-block" > Misalin rubutun taimako na matakin toshe anan. </span> 
    < class class = "checkbox" > 
      < nau'in shigarwa = "akwatin ajiya" > Duba ni 
    </labarai>
    <button type = "submit" class = "btn" > Aika < /button>  
  </fieldset>
</form>

Shirye-shiryen zaɓi

Haɗe tare da Bootstrap akwai shimfidu na zaɓi uku na zaɓi don lokuta na yau da kullun.

Binciken tsari

Ƙara .form-searchzuwa fom da .search-queryzuwa <input>don ƙarin shigarwar rubutu mai zagaye.

< class class = "form-search" > 
  < nau'in shigarwa = "rubutu" aji = "tambayoyin bincike-matsakaici" >  
  <button type = "submit" class = "btn" > Bincika </button>  
</form>

Tsarin layi

Ƙara .form-inlinedon alamun hagu-hagu da sarrafa toshe-layi don ƙaƙƙarfan shimfidar wuri.

< class class = "form-inline" > 
  < nau'in shigarwa = "rubutu" aji = "input-small" mai sanya wuri = "Imel" >   
  < nau'in shigarwa = "Password " aji = "shigar-small" mai sanya wuri = "Kalmar shiga" >   
  < class class = "checkbox" > 
    < nau'in shigarwa = "akwatin ajiya" > Ka tuna da ni 
  </labarai>
  <button type = "submit" class = "btn" > Shiga </button>  
</form>

Siffar kwance

Daidaita lakabin dama kuma ka shawagi su zuwa hagu don sa su bayyana akan layi ɗaya da masu sarrafawa. Yana buƙatar mafi yawan sauye-sauyen alama daga sigar tsoho:

Ƙara .form-horizontalzuwa fom
Kunna lakabi da sarrafawa a ciki.control-group
Ƙara .control-labelzuwa lakabin
Kunna duk wani sarrafawa mai alaƙa .controlsdon daidaitawa daidai

< class class = "form-horizontal" > 
  <div class = "control-group" > 
    <label class = "control-label" don = "inputEmail" > Imel </label>  
    <div class = "controls" > 
      < nau'in shigarwa = "rubutu" id = "inputEmail" mai sanya wuri = "Imel" >   
    </div>
  </div>
  <div class = "control-group" > 
    <label class = "control-label" don = "inputPassword" > Kalmar wucewa </label>  
    <div class = "controls" > 
      < nau'in shigarwa = "Password " id = "inputPassword" mai riƙewa = " Password" >   
    </div>
  </div>
  <div class = "control-group" > 
    <div class = "controls" > 
      < class class = "checkbox" > 
        < nau'in shigarwa = "akwatin ajiya" > Ka tuna da ni 
      </labarai>
      <button type = "submit" class = "btn" > Shiga </button>  
    </div>
  </div>
</form>

Gudanar da tsari mai goyan baya

Misalai na daidaitattun sarrafa nau'i masu goyan baya a cikin shimfidar tsari na misali.

Abubuwan shigarwa

Mafi yawan sarrafa nau'i na gama gari, filayen shigarwa na tushen rubutu. Ya haɗa da goyan baya ga duk nau'ikan HTML5: rubutu, kalmar sirri, kwanan kwanan wata, lokacin kwanan wata-na gida, kwanan wata, wata, lokaci, sati, lamba, imel, url, bincike, tel, da launi.

Yana buƙatar amfani da ƙayyadaddun ƙayyadaddun typelokaci.

< nau'in shigarwa = "rubutu" mai sanya wuri = "Shigar da rubutu" >

Yankin rubutu

Ikon tsari wanda ke goyan bayan layukan rubutu da yawa. Canja rowssifa kamar yadda ya cancanta.

<textarea layuka = "3" > </textarea>

Akwatunan rajista da rediyo

Akwatunan rajista don zaɓar ɗaya ko zaɓuɓɓuka da yawa a cikin jeri yayin da rediyo ke zaɓar zaɓi ɗaya daga mutane da yawa.

Tsohuwar (tarage)

< class class = "checkbox" > 
  < nau'in shigarwa = "checkbox" darajar = "" >  
  Zaɓin ɗaya shine wannan da wancan — tabbas kun haɗa da dalilin da yasa yake da kyau
</labarai>
 
< class class = "rediyo" > 
  < nau'in shigarwa = "rediyo" suna = "optionsRadios" id = "optionsRadios1" darajar = "zabi1" an duba >     
  Zaɓin ɗaya shine wannan da wancan — tabbas kun haɗa da dalilin da yasa yake da kyau
</labarai>
< class class = "rediyo" > 
  < nau'in shigarwa = "rediyo" suna = "optionsRadios" id = "optionsRadios2" darajar = "zabi2" >    
  Zabi na biyu na iya zama wani abu dabam kuma zaɓin shi zai yanke zaɓi na ɗaya
</labarai>

Akwatunan rajistan shiga layi

Ƙara .inlineajin zuwa jerin akwati ko radiyo don sarrafawa suna bayyana akan layi ɗaya.

< class class = "labaran akwatin layi" > 
  < nau'in shigarwa = "akwatin akwati" id = "inlineCheckbox1" darajar = "zaɓi1" > 1   
</labarai>
< class class = "labaran akwatin layi" > 
  < nau'in shigarwa = "akwatin akwati" id = "inlineCheckbox2" darajar = "zaɓi2" > 2   
</labarai>
< class class = "labaran akwatin layi" > 
  < nau'in shigarwa = "akwatin rajista" id = "inlineCheckbox3" darajar = "zaɓi3" > 3   
</labarai>

Zaba

Yi amfani da zaɓin tsoho ko saka a multiple="multiple"don nuna zaɓuɓɓuka da yawa a lokaci ɗaya.

<zaɓi>
  <zaɓi> 1 </ zaɓi>
  <zaɓi> 2 </ zaɓi>
  <zaɓi> 3 </ zaɓi>
  <zaɓi> 4 </ zaɓi>
  <zaɓi> 5 </ zaɓi>
</select>
 
<zaɓi mahara = "yawan" > 
  <zaɓi> 1 </ zaɓi>
  <zaɓi> 2 </ zaɓi>
  <zaɓi> 3 </ zaɓi>
  <zaɓi> 4 </ zaɓi>
  <zaɓi> 5 </ zaɓi>
</select>

Ƙaddamar da sarrafa tsari

Ƙara a saman abubuwan sarrafa burauzar da ake da su, Bootstrap ya haɗa da sauran kayan aikin tsari masu amfani.

Abubuwan da aka riga aka shirya da kuma haɗa su

Ƙara rubutu ko maɓalli kafin ko bayan kowane shigarwa na tushen rubutu. Lura cewa selectabubuwa ba su da tallafi a nan.

Zaɓuɓɓuka na asali

Kunna wani .add-onda inputɗaya tare da ɗayan aji biyu don tsarawa ko saka rubutu zuwa shigarwa.

<div class = "input-prepend" > 
  <span class = "ƙara-kan" > @ </span> 
  < class shigar = "span2" id = "prependedInput" nau'in = "rubutu" mai sanya wuri = "Sunan mai amfani" >    
</div>
<div class = "input-append" > 
  < class input = "span2" id = "appendedInput" nau'in = "rubutu" >   
  <span class = "ƙara-kan" > .00 </span> 
</div>

Haɗe

Yi amfani da duka ajujuwa biyu da misalai biyu .add-ondon tsarawa da ƙara shigarwa.

<div class = "input-prepend input-append" > 
  <span class = "ad-on" > $ </span> 
  < class input = "span2" id = "appendedPrependedInput" nau'in = "rubutu" >   
  <span class = "ƙara-kan" > .00 </span> 
</div>

Buttons maimakon rubutu

Maimakon rubutu mai <span>rubutu, yi amfani da a .btndon haɗa maɓalli (ko biyu) zuwa shigarwa.

<div class = "input-append" > 
  < class input = "span2" id = "appendedInputButton" nau'in = "rubutu" >   
  < class class = "btn" type = "button" > Tafi! </button>  
</div>

<div class = "input-append" > 
  < class input = "span2" id = "appendedInputButtons" nau'in = "rubutu" >   
  <button class = "btn" type = "button" > Bincika </button>  
  <button class = "btn" type = "button" > Zabuka </button>  
</div>

Maballin zazzagewa

<div class = "input-append" > 
  < class shigar = "span2" id = "appendedDropdownButton" nau'in = "rubutu" >   
  <div class = "btn-group" > 
    < class class = "btn dropdown-toggle" data-toggle = "saukarwa" >  
      Aiki
      <span class = "kulawa" > </span> 
    </button>
    <ul class = "zazzage-menu" > 
      ...
    </ul>
  </div>
</div>

<div class = "input-prepend" > 
  <div class = "btn-group" > 
    < class class = "btn dropdown-toggle" data-toggle = "saukarwa" >  
      Aiki
      <span class = "kulawa" > </span> 
    </button>
    <ul class = "zazzage-menu" > 
      ...
    </ul>
  </div>
  < class shigar = "span2" id = "prependedDropdownButton" nau'in = "rubutu" >   
</div>

<div class = "input-prepend input-append" > 
  <div class = "btn-group" > 
    < class class = "btn dropdown-toggle" data-toggle = "saukarwa" >  
      Aiki
      <span class = "kulawa" > </span> 
    </button>
    <ul class = "zazzage-menu" > 
      ...
    </ul>
  </div>
  < class shigar = "span2" id = "appendedPrependedDropdownButton" nau'in = "rubutu" >   
  <div class = "btn-group" > 
    < class class = "btn dropdown-toggle" data-toggle = "saukarwa" >  
      Aiki
      <span class = "kulawa" > </span> 
    </button>
    <ul class = "zazzage-menu" > 
      ...
    </ul>
  </div>
</div>

Binciken tsari

< class class = "form-search" > 
  <div class = "input-append" > 
    < nau'in shigarwa = "rubutu" aji = "span2 search-query" >  
    <button type = "submit" class = "btn" > Bincika </button>  
  </div>
  <div class = "input-prepend" > 
    <button type = "submit" class = "btn" > Bincika </button>  
    < nau'in shigarwa = "rubutu" aji = "span2 search-query" >  
  </div>
</form>

Sarrafa girman girman

Yi amfani da azuzuwan girman dangi kamar .input-largeko daidaita abubuwan shigar ku zuwa girman ginshiƙi ta amfani .span*da azuzuwan.

Toshe matakin shigarwa

Yi kowane <input>ko <textarea>kashi yayi kama da matakin matakin toshe.

< class input = "input-block-level" nau'in = "rubutu" mai sanya wuri = ".input-block-level" >

Girman dangi

< class input = "input-mini" nau'in = "rubutu" mai sanya wuri = ".input-mini" >   
< class class = "input-small" nau'in = "rubutu" mai sanya wuri = ".input-small" >   
< class input = "input-medium" nau'in = "rubutu" mai sanya wuri = ".input-medium" >   
< class input = "input-large" nau'in = "rubutu" mai sanya wuri = ".input-large" >   
< class input = "input-xlarge" nau'in = "rubutu" mai sanya wuri = ".input-xlarge" >   
< class input = "input-xxlarge" nau'in = "rubutu" mai sanya wuri = ".input-xxlarge" >

A kula!A cikin sigogin gaba, za mu canza amfani da waɗannan azuzuwan shigarwar dangi don dacewa da girman maɓallin mu. Misali, .input-largezai ƙara mannewa da girman-girman shigarwar.

Girman grid

Yi amfani .span1da .span12don abubuwan shigar da suka dace da girman ginshiƙan grid.

< class shigar = "span1" nau'in = "rubutu" mai sanya wuri = ".span1" >   
< class shigar = "span2" nau'in = "rubutu" mai sanya wuri = ".span2" >   
< class shigar = "span3" nau'in = "rubutu" mai sanya wuri = ".span3" >   
< class class = "span1" > 
  ...
</select>
< class class = "span2" > 
  ...
</select>
< class class = "span3" > 
  ...
</select>

Don abubuwan shigar da grid da yawa a kowane layi, yi amfani da .controls-rowajin gyara don tazarar da ta dace . Yana yawo abubuwan da aka shigar don rugujewar farin sararin samaniya, yana saita tazarar da ya dace, kuma yana share mai iyo.

<div class = "controls" > 
  < class shigar = "span5" nau'in = "rubutu" mai sanya wuri = ".span5" >   
</div>
<div class = "controls controls-jere" > 
  < class shigar = "span4" nau'in = "rubutu" mai sanya wuri = ".span4" >   
  < class shigar = "span1" nau'in = "rubutu" mai sanya wuri = ".span1" >   
</div>
...

Abubuwan da ba za a iya gyarawa ba

Gabatar da bayanai a cikin sigar da ba za a iya gyarawa ba tare da yin amfani da ainihin ma'auni ba.

<span class = "input-xlarge uneditable-input" > Wasu ƙima a nan </span>

Samar da ayyuka

Ƙare wani tsari tare da ƙungiyar ayyuka (maɓallai). Lokacin da aka sanya shi a cikin .form-horizontal, maɓallan za su shiga ta atomatik don yin layi tare da sarrafa nau'i.

<div class = "form-actions" > 
  <button type = "submit" class = "btn btn-primary" > Ajiye canje-canje </button>  
  <button type = "button" class = "btn" > Soke </button>  
</div>

Taimako rubutu

Lissafin layi da toshe goyon bayan matakin don rubutun taimako wanda ya bayyana a kusa da sarrafa tsari.

Taimakon cikin layi

<input type = "text" ><span class = "help-inline" > Rubutun taimako na cikin layi </span>

Toshe taimako

<input type = "text" ><span class = "help-block" > Tsawon toshe na rubutu na taimako wanda ke karya sabon layi kuma yana iya wuce layi daya. </span>

Jihohin sarrafa tsari

Bayar da ra'ayi ga masu amfani ko baƙi tare da jahohin martani na asali akan sarrafa nau'i da lakabi.

Mayar da hankali na shigarwa

Muna cire tsoffin outlinesifofi akan wasu nau'ikan sarrafawa kuma muna amfani da box-shadowa wurin sa don :focus.

< class input = "input-xlarge" id = "focusedInput" nau'in = "rubutu" darajar = "Wannan an mayar da hankali ne..." >

Abubuwan da aka kashe

Ƙara disabledsifa a kan shigarwa don hana shigar da mai amfani da kuma haifar da kamanni daban-daban.

< class input = "input-xlarge" id = "disabledInput" nau'in = "rubutu" mai sanya wuri = "An kashe shigarwa a nan ... "

Jihohin tabbatarwa

Bootstrap ya haɗa da salon tabbatarwa don kuskure, faɗakarwa, bayanai, da saƙonnin nasara. Don amfani, ƙara ajin da ya dace zuwa kewaye .control-group.

<div class = "gargadin rukuni-rukuni" > 
  <label class = "control-label" don = "inputWarning" > Shiga tare da gargadi </label>  
  <div class = "controls" > 
    < nau'in shigarwa = "rubutu" id = "inputWarning" >  
    <span class = "help-inline" > Wataƙila wani abu ya ɓace </span> 
  </div>
</div>
<div class = "kuskuren rukuni-rukuni" > 
  <label class = "control-label" don = "inputError" > Shiga tare da kuskure </label>  
  <div class = "controls" > 
    < nau'in shigarwa = "rubutu" id = "inputError" >  
    <span class = "help-inline" > Da fatan za a gyara kuskuren </span> 
  </div>
</div>
<div class = "nasara-rukuni" > 
  <label class = "control-label" don = "inputSuccess" > Shiga tare da nasara </label>  
  <div class = "controls" > 
    < nau'in shigarwa = "rubutu" id = "inputSuccess" >  
    <span class = "help-inline" > Woohoo! </span> 
  </div>
</div>

Maɓallai na asali

Za a iya amfani da salon maɓalli ga kowane abu tare da .btnajin da aka yi amfani da shi. Koyaya, yawanci kuna son amfani da waɗannan ga kawai <a>da <button>abubuwa don mafi kyawun ma'ana.

Maɓalli	class=""	Bayani
	`btn`	Madaidaicin maɓallin launin toka tare da gradient
	`btn btn-primary`	Yana ba da ƙarin nauyin gani kuma yana gano aikin farko a cikin saitin maɓalli
	`btn btn-info`	Ana amfani dashi azaman madadin sifofin tsoho
	`btn btn-success`	Yana nuna aiki mai nasara ko tabbatacce
	`btn btn-warning`	Ya nuna ya kamata a yi taka tsantsan da wannan matakin
	`btn btn-danger`	Yana nuna wani aiki mai haɗari ko mai yuwuwa mara kyau
	`btn btn-inverse`	Madadin maɓallin launin toka mai duhu, ba a ɗaure shi da aikin fassara ko amfani ba
	`btn btn-link`	Ƙaddamar da maɓalli ta hanyar sanya shi zama kamar hanyar haɗin gwiwa yayin kiyaye halayen maɓallin

Tsallake dacewa da mai bincike

IE9 ba ya girbi gradients na baya akan sasanninta, don haka muna cire shi. Mai alaƙa, IE9 yana jankifies buttonabubuwan nakasassu, yana sanya rubutu launin toka tare da inuwar rubutu mara kyau wanda ba za mu iya gyarawa ba.

Girman maɓalli

Kuna son manyan maɓalli ko ƙarami? Ƙara .btn-large, .btn-small, ko .btn-minidon ƙarin girma.

<p>
  <button class = "btn btn-large btn-primary" type = "button" > Babban maballin </button>  
  <button class = "btn btn-large" type = "button" > Babban maballin </button>  
</p>
<p>
  <button class = "btn btn-primary" type = "button" > Maɓallin tsoho </button>  
  < class class = "btn" type = "button" > Maɓallin tsoho </button>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "button" > Ƙananan maɓalli </button>  
  <button class = "btn btn-small" type = "button" > Ƙananan maɓalli </button>  
</p>
<p>
  < class class = "btn btn-mini btn-primary" nau'in = "button" > Maɓallin ƙarami </button>  
  < class class = "btn btn-mini" type = "button" > Maɓallin ƙarami </button>  
</p>

Ƙirƙirar maɓallan matakin toshe-waɗanda ke faɗin faɗin iyaye- ta ƙara .btn-block.

<button class = "btn btn-large btn-block btn-primary" type = "button" > Maɓallin matakin toshe </button>  
<button class = "btn btn-large btn-block" type = "button" > Maɓallin matakin toshe </button>

Jihar naƙasassu

Sanya maɓallan su yi kama da ba za a danna su ta hanyar rage su da baya 50%.

Anga kashi

Ƙara .disabledajin zuwa <a>maɓalli.

Mahadar farko mahada

<a href = "#" class = "btn btn-large btn-primary disabled" > Babban mahada </a>  
<a href = "#" class = "btn btn-large disabled"> Link </a>

A kula!Muna amfani .disabledda ajin mai amfani anan, kama da na gama gari .active, don haka ba a buƙatar prefix. Har ila yau, wannan ajin na ado ne kawai; dole ne ku yi amfani da JavaScript na al'ada don kashe hanyoyin haɗin gwiwa a nan.

Maɓallin maɓallin

Ƙara disabledsifa zuwa <button>maɓalli.

<button type = "button" class = "btn btn-large btn-primary disabled" disabled = "an kashe" > Maɓallin farko </button>   
<button type = "button" class = "btn btn-large" an kashe > Button </button>

Aji ɗaya, alamomi masu yawa

Yi amfani da .btnajin akan <a>, <button>, ko <input>kashi.

<a class = "btn" href = "" > Link </a>  
< class class = "btn" type = "submit" > Button </button>  
< class class = "btn" type = "button" darajar = "Input" >   
< class input = "btn" nau'in = "submit" darajar = "Aika" >

A matsayin mafi kyawun aiki, gwada daidaita kashi don mahallin ku don tabbatar da dacewa da ma'anar mai binciken giciye. Idan kuna da input, yi amfani da <input type="submit">maɓallin don maɓallin ku.

Ƙara azuzuwan zuwa <img>kashi don sauƙin salo a kowane aiki.

<img src = "..." class = "img-rounded" >  
<img src = "..." class = "img-circle" >  
<img src = "..." class = "img-polaroid" >

A kula! .img-roundedkuma .img-circleba sa aiki a cikin IE7-8 saboda rashin border-radiustallafi.

Ikon glyphs

Gumaka 140 a cikin nau'in sprite, ana samun su cikin launin toka mai duhu (tsoho) da fari, wanda Glyphicons ya bayar .

ikon-gilashin
icon-music
ikon bincike
ikon ambulan
ikon-zuciya
ikon-tauraro
icon-tauraro-ba komai
ikon mai amfani
ikon fim
ikon-th-large
ikon --
icon-th-jeri
ikon Ok
ikon cirewa
ikon-zuwa-in
icon-zuwa-fita
ikon-kashe
ikon - siginar
ikon-kogi
ikon-sharar
ikon gida
ikon fayil
ikon lokaci
ikon-hanya
ikon-zazzage-alt
ikon download
ikon-upload
ikon-inbox
icon-play-da'irar
icon-maimaita
icon-refresh
icon-list-alt
ikon-kulle
ikon - flag
icon-belun kunne
ikon-girma-kashe
ikon-girma-saukar
ikon girma-up
ikon-qrcode
ikon barcode
ikon-tag
ikon-tags
ikon littafin
icon - alamar shafi
ikon bugawa
ikon-kamara
ikon font
ikon - m
ikon-italic
icon-rubutu-tsawo
icon-rubutu-nisa
icon-align-hagu
icon-align-center
icon-align-dama
icon-align-justify
ikon-list
icon-hannun-hagu
icon-indent-dama
icon-facetime-bidiyo
icon-hoto
ikon-fensir
ikon-taswira-alama
ikon daidaitawa
ikon - tint
ikon gyara
ikon share
ikon-tabbaci
ikon motsi
icon-mataki-baya
icon-sauri-baya
icon-baya
ikon yin wasa
ikon-dakata
ikon tsayawa
icon-gaba
icon-sauri-gaba
icon-mataki-gaba
ikon fitarwa
ikon-chevron-hagu
ikon-chevron-dama
icon-plus-alama
ikon-minus-alama
icon-cire-alamar
ikon-ok-alama
icon-tambaya-alamar
ikon-info-alamar
icon-screenshot
icon-cire-da'irar
icon-ok-da'irar
ikon-ban-da'ira
icon-kibiya-hagu
icon-kibiya-dama
icon-kibiya-up
icon-kibiya-saukar
ikon-share-alt
ikon-girman-cikakke
icon-girman girman-kanana
ikon-plus
ikon-minus
ikon - alama
icon-exclamation-alamar
icon - kyauta
ikon-leaf
ikon-wuta
icon-ido-bude
icon-ido-kusa
icon-gargadi-alamar
ikon jirgin sama
ikon - kalanda
ikon - bazuwar
ikon yin sharhi
ikon Magnet
ikon-chevron-up
ikon-chevron-down
ikon-retweet
icon-cart
icon-folder-kusa
icon-folder-bude
icon-girma-tsaye
icon-girman girman-horizontal
ikon hdd
ikon-bullhorn
ikon - kararrawa
ikon-certificate
ikon - babban yatsan hannu
icon - babban yatsa-saukar
ikon-hannu-dama
icon-hannu-hagu
ikon-sa hannu
ikon-saukar hannu
icon-da'irar-kibiya-dama
icon-da'irar-kibiya-hagu
icon-da'irar-kibiya-up
icon-da'irar-kibiya-saukar
ikon duniya
ikon-manufa
icon-ayyukan
icon-tace
ikon-takaice
ikon - cikakken allo

Halin Glyphicons

Glyphicons Halflings yawanci ba a samun kyauta, amma tsari tsakanin Bootstrap da masu ƙirƙirar Glyphicons sun sa hakan ya yiwu ba tare da tsada ba a matsayin masu haɓakawa. A matsayin godiya, muna rokonka da ka haɗa hanyar haɗin yanar gizo na zaɓi zuwa Glyphicons a duk lokacin da ya dace.

Yadda ake amfani

Duk gumaka suna buƙatar <i>alama tare da nau'i na musamman, wanda aka riga aka sanya shi tare da icon-. Don amfani, sanya lambar mai zuwa kusan ko'ina:

<i class = "icon-search" >>

Hakanan akwai nau'ikan nau'ikan gumaka masu jujjuya (fararen), waɗanda aka shirya tare da ƙarin aji ɗaya. Za mu aiwatar da wannan ajin musamman kan shawagi da jahohi masu aiki don hanyoyin haɗin ruwa da saukarwa.

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

A kula!Lokacin amfani da gefen igiyoyin rubutu, kamar a cikin maɓallai ko mahaɗin mahaɗa, tabbatar da barin sarari bayan <i>alamar don tazarar da ta dace.

Alamar misalai

Yi amfani da su a cikin maɓallai, ƙungiyoyin maɓalli don kayan aiki, kewayawa, ko abubuwan da aka riga aka tsara.

Buttons

Ƙungiyar maɓalli a cikin maɓalli na kayan aiki

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

Zazzagewa a cikin rukunin maɓalli

Mai amfani

<div class = "btn-group" > 
  <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Mai amfani </a>   
  <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  <ul class = "zazzage-menu" > 
    <li><a href = "#" ><i class = "icon-pencil" ></i> Gyara </a></li>  
    <li><a href = "#" ><i class = "icon-trash" ></i> Share </a></li>  
    <li><a href = "#" ><i class = "icon-ban-circle" ></i> Ban </a></li>  
    <li class = "mai rarrabawa" </li> 
    <li><a href = "#" ><i class = "i" ></i> Make admin </a></li>  
  </ul>
</div>

Ƙananan maɓalli

<a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i></a>

Kewayawa

<ul class = "nav-list" > 
  <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Gida </a></li>   
  <li><a href = "#" ><i class = "icon-book" ></i> Laburare </a></li>  
  <li><a href = "#" ><i class = "icon-pencil" ></i> Aikace-aikace </a></li>  
  <li><a href = "#" ><i class = "i" ></i> Misc </a></li>  
</ul>

Filayen tsari

<div class = "control-group" > 
  <label class = "control-label" don = "inputIcon" > Adireshin imel </label>  
  <div class = "controls" > 
    <div class = "input-prepend" > 
      <span class = "add-on" ><i class = "ambulan icon" </i></span>  
      < class shigar = "span2" id = "inputIcon" nau'in = "rubutu" >   
    </div>
  </div>
</div>

Rubutun rubutu

Kanun labarai

h1. Take 1

h2. Take 2

h3. Take 3

h4. Take 4

h5. Take 5

h6. Take 6

Kwafin jiki

Kwafin jikin jagora

Gina tare da Kadan

Jaddadawa

<small>

M

Rubutun rubutu

Darussan girmamawa

Taqaitaccen bayani

<abbr>

<abbr class="initialism">

Adireshi

<address>

Blockquotes

Default blockquote

Zaɓuɓɓukan Blockquote

Sunan tushe

Madadin nuni

Lissafi

Ba a ba da oda ba

An yi oda

Mara salo

Bayani

Bayanin kwance

Lambar

Layin layi

Tushe na asali

Tables

Salon tsoho

Zabin azuzuwan

.table-striped

.table-bordered

.table-hover

.table-condensed

Azuzuwan jere na zaɓi

Alamar tebur mai goyan baya

Siffofin

Salon tsoho

Shirye-shiryen zaɓi

Binciken tsari

Tsarin layi

Siffar kwance

Gudanar da tsari mai goyan baya

Abubuwan shigarwa

Yankin rubutu

Akwatunan rajista da rediyo

Tsohuwar (tarage)

Akwatunan rajistan shiga layi

Zaba

Ƙaddamar da sarrafa tsari

Abubuwan da aka riga aka shirya da kuma haɗa su

Zaɓuɓɓuka na asali

Haɗe

Buttons maimakon rubutu

Maballin zazzagewa

Binciken tsari

Sarrafa girman girman

Toshe matakin shigarwa

Girman dangi

Girman grid

Abubuwan da ba za a iya gyarawa ba

Samar da ayyuka

Taimako rubutu

Taimakon cikin layi

Toshe taimako

Jihohin sarrafa tsari

Mayar da hankali na shigarwa

Abubuwan da aka kashe

Jihohin tabbatarwa

Buttons

Maɓallai na asali

Tsallake dacewa da mai bincike

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`