Tushen CSS

Mahimman abubuwan HTML da aka tsara kuma an inganta su tare da azuzuwan da za a iya ƙarawa.

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.

Azuzuwan daidaitawa

Sauƙaƙe daidaita rubutu zuwa sassa tare da azuzuwan daidaita rubutu.

Rubutun hagu masu layi.

Rubutun da aka daidaita a tsakiya.

Rubutun daidaitacce.

  1. <p class = "rubutu-hagu" > Rubutun hagu masu layi. </p>
  2. <p class = "text-center" > Rubutun da aka daidaita a tsakiya. </p>
  3. <p class = "rubutu-dama" > Rubutun da aka daidaita daidai. </p>

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.

  1. <p class = "muted" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p>
  2. <p class = "gargadin rubutu" > Etiam porta sem malesuada magna mollis euismod. </p>
  3. <p class = "kuskuren rubutu" > Donec ullamcorper nulla non metus auctor fringilla. </p>
  4. <p class = "rubutu-info" > Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis. </p>
  5. <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 gajarta 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]
  1. <adireshi>
  2. <strong> Twitter, Inc. </strong><br>
  3. 795 Folsom Ave, Suite 600 <br>
  4. San Francisco, CA 94107
  5. <abbr title = "Waya" > P: </abbr> (123) 456-7890
  6. </address>
  7.  
  8. <adireshi>
  9. <strong> Cikakken Suna </strong><br>
  10. <a href = "mailto:#" > [email protected] </a>
  11. </address>

Blockquotes

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

Default blockquote

Kunna <blockquote>kowane HTML a matsayin zance. Don madaidaiciyar magana muna ba da shawarar a <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ƙididdigar ƙididdiga ta ƙididdigewa.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ƙididdigar ƙididdiga ta ƙididdigewa. </p>
  3. </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 ƙididdigewa.

Wani sananne a Tushen Tushen
  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ƙididdigar ƙididdiga ta ƙididdigewa. </p>
  3. <small> Wani sanannen <cite title = "Tsarin Tushen" > Taken Tushen </cite></small>
  4. </blockquote>

Madadin nuni

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ƙididdigar ƙididdiga ta ƙididdigewa.

Wani sananne a Tushen Tushen
  1. <blockquote class = "ja-dama" >
  2. ...
  3. </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
  1. <ul>
  2. <li> ... </li>
  3. </ul>

An yi oda

Jerin abubuwan da odar ke da mahimmanci a bayyane.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis a cikin pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
  1. <ol>
  2. <li> ... </li>
  3. </ol>

Mara salo

Cire tsoho list-styleda madaidaicin hagu akan abubuwan jeri (yara nan take kawai).

  • 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
  1. <ul class = "marasa salo" >
  2. <li> ... </li>
  3. </ul>

Layin layi

Sanya duk abubuwan jeri akan layi guda tare inline-blockda wasu fakitin haske.

  • Lorem ipsum
  • Phasellus iaculus
  • Nulla volutpat
  1. <ul class = "inline" >
  2. <li> ... </li>
  3. </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.
  1. <dl>
  2. <dt> ... </dt>
  3. <dd> ... </dd>
  4. </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.
  1. <dl class = "dl-horizontal" >
  2. <dt> ... </dt>
  3. <dd> ... </dd>
  4. </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.
  1. Misali , < code> & lt ; sashe & gt ;</ 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>
  1. <pre>
  2. <p>Sample rubutu a nan...</p>
  3. </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
  1. < class class = "tebur" >
  2. </text>

Zabin azuzuwan

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

.table-striped

Yana ƙara zaren zebra zuwa kowane jere na tebur a cikin <tbody>ta mai :nth-childzaɓin CSS (babu a cikin IE7-8).

# Sunan rana Sunan mahaifa Sunan mai amfani
1 Alama Otto @mdo
2 Yakubu Thornton @mai
3 Larry Tsuntsu @twitter
  1. < class class = "Table-stripped" >
  2. </text>

.table-bordered

Ƙara iyakoki da sasanninta masu zagaye zuwa teburin.

# Sunan rana Sunan mahaifa Sunan mai amfani
1 Alama Otto @mdo
Alama Otto @getbootstrap
2 Yakubu Thornton @mai
3 Larry the Bird @twitter
  1. < class class = "tebur mai iyaka" >
  2. </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
  1. < class class = "tebur-hover" >
  2. </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
  1. < class class = "Table-condensed" >
  2. </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
  1. ...
  2. < tr class = "nasara" >
  3. <td> 1 < /td>
  4. <td>TB - kowane wata</ td >
  5. <td> 01 / 04 / 2012 < /td>
  6. <td>An amince</ td >
  7. </ tr >
  8. ...

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 iyawa da jeri) alamomin
<caption> Bayani ko taƙaita abin da tebur ya ƙunsa, musamman masu amfani ga masu karanta allo
  1. <tebur>
  2. <taken magana> ... </caption>
  3. <fito>
  4. <tr>
  5. <th> ... </th>
  6. <th> ... </th>
  7. </tr>
  8. </fadi>
  9. <tbody>
  10. <tr>
  11. <td> ... </td>
  12. <td> ... </td>
  13. </tr>
  14. </tbody>
  15. </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.

Labari Misalin rubutun taimako na matakin toshe anan.
  1. <form>
  2. <filaye>
  3. <labarin> labari </legend>
  4. <label> Lakabin suna </label>
  5. < nau'in shigarwa = "rubutu" mai sanya wuri = "Buga wani abu..." >
  6. <span class = "help-block" > Misalin rubutun taimako na matakin toshe anan. </span>
  7. < class class = "checkbox" >
  8. < nau'in shigarwa = "akwatin ajiya" > Duba ni
  9. </labarai>
  10. <button type = "submit" class = "btn" > Aika < /button>
  11. </fieldset>
  12. </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.

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

Tsarin layi

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

  1. < class class = "form-inline" >
  2. < nau'in shigarwa = "rubutu" aji = "input-small" mai sanya wuri = "Imel" >
  3. < nau'in shigarwa = "Password " aji = "shigar-small" mai sanya wuri = "Kalmar shiga" >
  4. < class class = "checkbox" >
  5. < nau'in shigarwa = "akwatin ajiya" > Ka tuna da ni
  6. </labarai>
  7. <button type = "submit" class = "btn" > Shiga </button>
  8. </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
  1. < class class = "form-horizontal" >
  2. <div class = "control-group" >
  3. <label class = "control-label" don = "inputEmail" > Imel </label>
  4. <div class = "controls" >
  5. < nau'in shigarwa = "rubutu" id = "inputEmail" mai sanya wuri = "Imel" >
  6. </div>
  7. </div>
  8. <div class = "control-group" >
  9. <label class = "control-label" don = "inputPassword" > Kalmar wucewa </label>
  10. <div class = "controls" >
  11. < nau'in shigarwa = "Password " id = "inputPassword" mai riƙewa = " Password" >
  12. </div>
  13. </div>
  14. <div class = "control-group" >
  15. <div class = "controls" >
  16. < class class = "checkbox" >
  17. < nau'in shigarwa = "akwatin ajiya" > Ka tuna da ni
  18. </labarai>
  19. <button type = "submit" class = "btn" > Shiga </button>
  20. </div>
  21. </div>
  22. </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.

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

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


  1. < class class = "checkbox" >
  2. < nau'in shigarwa = "checkbox" darajar = "" >
  3. Zaɓin ɗaya shine wannan da wancan — tabbas kun haɗa da dalilin da yasa yake da kyau
  4. </labarai>
  5.  
  6. < class class = "rediyo" >
  7. < nau'in shigarwa = "rediyo" suna = "optionsRadios" id = "optionsRadios1" darajar = "zabi1" an duba >
  8. Zaɓin ɗaya shine wannan da wancan — tabbas kun haɗa da dalilin da yasa yake da kyau
  9. </labarai>
  10. < class class = "rediyo" >
  11. < nau'in shigarwa = "rediyo" suna = "optionsRadios" id = "optionsRadios2" darajar = "zabi2" >
  12. Zabi na biyu na iya zama wani abu dabam kuma zaɓin shi zai yanke zaɓi na ɗaya
  13. </labarai>

Akwatunan rajistan shiga layi

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

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

Zaba

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


  1. <zaɓi>
  2. <zaɓi> 1 </ zaɓi>
  3. <zaɓi> 2 </ zaɓi>
  4. <zaɓi> 3 </ zaɓi>
  5. <zaɓi> 4 </ zaɓi>
  6. <zaɓi> 5 </ zaɓi>
  7. </select>
  8.  
  9. <zaɓi mahara = "yawan" >
  10. <zaɓi> 1 </ zaɓi>
  11. <zaɓi> 2 </ zaɓi>
  12. <zaɓi> 3 </ zaɓi>
  13. <zaɓi> 4 </ zaɓi>
  14. <zaɓi> 5 </ zaɓi>
  15. </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.

@

.00
  1. <div class = "input-prepend" >
  2. <span class = "ad-on" > @ </span>
  3. < class shigar = "span2" id = "prependedInput" nau'in = "rubutu" mai sanya wuri = "Sunan mai amfani" >
  4. </div>
  5. <div class = "input-append" >
  6. < class input = "span2" id = "appendedInput" nau'in = "rubutu" >
  7. <span class = "ƙara-kan" > .00 </span>
  8. </div>

Haɗe

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

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

Buttons maimakon rubutu

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

  1. <div class = "input-append" >
  2. < class input = "span2" id = "appendedInputButton" nau'in = "rubutu" >
  3. < class class = "btn" type = "button" > Tafi! </button>
  4. </div>
  1. <div class = "input-append" >
  2. < class input = "span2" id = "appendedInputButtons" nau'in = "rubutu" >
  3. <button class = "btn" type = "button" > Bincika </button>
  4. <button class = "btn" type = "button" > Zabuka </button>
  5. </div>

Maballin zazzagewa

  1. <div class = "input-append" >
  2. < class shigar = "span2" id = "appendedDropdownButton" nau'in = "rubutu" >
  3. <div class = "btn-group" >
  4. < class class = "btn dropdown-toggle" data-toggle = "saukarwa" >
  5. Aiki
  6. <span class = "kulawa" > </span>
  7. </button>
  8. <ul class = "zazzage-menu" >
  9. ...
  10. </ul>
  11. </div>
  12. </div>
  1. <div class = "input-prepend" >
  2. <div class = "btn-group" >
  3. < class class = "btn dropdown-toggle" data-toggle = "saukarwa" >
  4. Aiki
  5. <span class = "kulawa" > </span>
  6. </button>
  7. <ul class = "zazzage-menu" >
  8. ...
  9. </ul>
  10. </div>
  11. < class shigar = "span2" id = "prependedDropdownButton" nau'in = "rubutu" >
  12. </div>
  1. <div class = "input-prepend input-append" >
  2. <div class = "btn-group" >
  3. < class class = "btn dropdown-toggle" data-toggle = "saukarwa" >
  4. Aiki
  5. <span class = "kulawa" > </span>
  6. </button>
  7. <ul class = "zazzage-menu" >
  8. ...
  9. </ul>
  10. </div>
  11. < class shigar = "span2" id = "appendedPrependedDropdownButton" nau'in = "rubutu" >
  12. <div class = "btn-group" >
  13. < class class = "btn dropdown-toggle" data-toggle = "saukarwa" >
  14. Aiki
  15. <span class = "kulawa" > </span>
  16. </button>
  17. <ul class = "zazzage-menu" >
  18. ...
  19. </ul>
  20. </div>
  21. </div>

Rukunin zazzagewar da aka raba

  1. <form>
  2. <div class = "input-prepend" >
  3. <div class = "btn-group" > ... </div>
  4. < nau'in shigarwa = "rubutu" >
  5. </div>
  6. <div class = "input-append" >
  7. < nau'in shigarwa = "rubutu" >
  8. <div class = "btn-group" > ... </div>
  9. </div>
  10. </form>

Binciken tsari

  1. < class class = "form-search" >
  2. <div class = "input-append" >
  3. < nau'in shigarwa = "rubutu" aji = "span2 search-query" >
  4. <button type = "submit" class = "btn" > Bincika </button>
  5. </div>
  6. <div class = "input-prepend" >
  7. <button type = "submit" class = "btn" > Bincika </button>
  8. < nau'in shigarwa = "rubutu" aji = "span2 search-query" >
  9. </div>
  10. </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.

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

Girman dangi

  1. < class input = "input-mini" nau'in = "rubutu" mai sanya wuri = ".input-mini" >
  2. < class class = "input-small" nau'in = "rubutu" mai sanya wuri = ".input-small" >
  3. < class input = "input-medium" nau'in = "rubutu" mai sanya wuri = ".input-medium" >
  4. < class input = "input-large" nau'in = "rubutu" mai sanya wuri = ".input-large" >
  5. < class input = "input-xlarge" nau'in = "rubutu" mai sanya wuri = ".input-xlarge" >
  6. < 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.

  1. < class shigar = "span1" nau'in = "rubutu" mai sanya wuri = ".span1" >
  2. < class shigar = "span2" nau'in = "rubutu" mai sanya wuri = ".span2" >
  3. < class shigar = "span3" nau'in = "rubutu" mai sanya wuri = ".span3" >
  4. < class class = "span1" >
  5. ...
  6. </select>
  7. < class class = "span2" >
  8. ...
  9. </select>
  10. < class class = "span3" >
  11. ...
  12. </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 rugujewa farar sararin samaniya, yana saita iyakar da ya dace, kuma yana share mai iyo.

  1. <div class = "controls" >
  2. < class shigar = "span5" nau'in = "rubutu" mai sanya wuri = ".span5" >
  3. </div>
  4. <div class = "controls controls-jere" >
  5. < class shigar = "span4" nau'in = "rubutu" mai sanya wuri = ".span4" >
  6. < class shigar = "span1" nau'in = "rubutu" mai sanya wuri = ".span1" >
  7. </div>
  8. ...

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.

Wasu ƙima a nan
  1. <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-actions, maɓallan za su shiga ta atomatik don yin layi tare da sarrafa nau'i.

  1. <div class = "form-actions" >
  2. <button type = "submit" class = "btn btn-primary" > Ajiye canje-canje </button>
  3. <button type = "button" class = "btn" > Soke </button>
  4. </div>

Taimako rubutu

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

Taimakon cikin layi

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

Toshe taimako

Tsawon toshe na rubutu na taimako wanda ke karya sabon layi kuma yana iya wuce layi ɗaya.
  1. <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.

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

Abubuwan shigar da ba daidai ba

Abubuwan shigar da salo ta hanyar aikin tsoho mai bincike tare da :invalid. Ƙayyade a type, ƙara requiredsifa idan filin ba na zaɓi ba ne, kuma (idan an zartar) saka a pattern.

Babu wannan a cikin nau'ikan Internet Explorer 7-9 saboda rashin goyan bayan masu zaɓe na CSS.

  1. < class input = "span3" type = "email" da ake bukata >

Abubuwan da aka kashe

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

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

Wataƙila wani abu ya ɓace
Da fatan za a gyara kuskuren
Ana ɗaukar sunan mai amfani
Woohoo!
  1. <div class = "gargadin rukuni-rukuni" >
  2. <label class = "control-label" don = "inputWarning" > Shiga tare da gargadi </label>
  3. <div class = "controls" >
  4. < nau'in shigarwa = "rubutu" id = "inputWarning" >
  5. <span class = "help-inline" > Wataƙila wani abu ya ɓace </span>
  6. </div>
  7. </div>
  8.  
  9. <div class = "kuskuren rukuni-rukuni" >
  10. <label class = "control-label" don = "inputError" > Shiga tare da kuskure </label>
  11. <div class = "controls" >
  12. < nau'in shigarwa = "rubutu" id = "inputError" >
  13. <span class = "help-inline" > Da fatan za a gyara kuskuren </span>
  14. </div>
  15. </div>
  16.  
  17. <div class = "bayanan rukuni-rukuni" >
  18. <label class = "control-label" don = "inputInfo" > Shiga tare da bayani </label>
  19. <div class = "controls" >
  20. < nau'in shigarwa = "rubutu" id = "inputInfo" >
  21. <span class = "help-inline" > An riga an ɗauki sunan mai amfani </span>
  22. </div>
  23. </div>
  24.  
  25. <div class = "nasara-rukuni" >
  26. <label class = "control-label" don = "inputSuccess" > Shiga tare da nasara </label>
  27. <div class = "controls" >
  28. < nau'in shigarwa = "rubutu" id = "inputSuccess" >
  29. <span class = "help-inline" > Woohoo! </span>
  30. </div>
  31. </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 girbe 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.

  1. <p>
  2. <button class = "btn btn-large btn-primary" type = "button" > Babban maballin </button>
  3. <button class = "btn btn-large" type = "button" > Babban maballin </button>
  4. </p>
  5. <p>
  6. <button class = "btn btn-primary" type = "button" > Maɓallin tsoho </button>
  7. < class class = "btn" type = "button" > Maɓallin tsoho </button>
  8. </p>
  9. <p>
  10. <button class = "btn btn-small btn-primary" type = "button" > Ƙananan maɓalli </button>
  11. <button class = "btn btn-small" type = "button" > Ƙananan maɓalli </button>
  12. </p>
  13. <p>
  14. < class class = "btn btn-mini btn-primary" nau'in = "button" > Maɓallin ƙarami </button>
  15. < class class = "btn btn-mini" type = "button" > Maɓallin ƙarami </button>
  16. </p>

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

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > Maɓallin matakin toshe </button>
  2. <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

  1. <a href = "#" class = "btn btn-large btn-primary disabled" > Babban mahada </a>
  2. <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.

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "an kashe" > Maɓallin farko </button>
  2. <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.

mahada
  1. <a class = "btn" href = "" > Link </a>
  2. < class class = "btn" type = "submit" > Button </button>
  3. < class class = "btn" type = "button" darajar = "Input" >
  4. < 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.

140x140 140x140 140x140
  1. <img src = "..." class = "img-rounded" >
  2. <img src = "..." class = "img-circle" >
  3. <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:

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

  1. <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
  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. <a class = "btn" href = "#" ><i class = "icon-align-left" </i></a>
  4. <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>
  5. <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>
  6. <a class = "btn" href = "#" ><i class = "icon-align-justify" </i></a>
  7. </div>
  8. </div>
Zazzagewa a cikin rukunin maɓalli
  1. <div class = "btn-group" >
  2. <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Mai amfani </a>
  3. <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>
  4. <ul class = "zazzage-menu" >
  5. <li><a href = "#" ><i class = "icon-pencil" ></i> Gyara </a></li>
  6. <li><a href = "#" ><i class = "icon-trash" ></i> Share </a></li>
  7. <li><a href = "#" ><i class = "icon-ban-circle" ></i> Ban </a></li>
  8. <li class = "mai rarrabawa" </li>
  9. <li><a href = "#" ><i class = "i" ></i> Make admin </a></li>
  10. </ul>
  11. </div>
Girman maɓalli
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Tauraro </a>
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Tauraro </a>
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Tauraro </a>

Kewayawa

  1. <ul class = "nav-list" >
  2. <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Gida </a></li>
  3. <li><a href = "#" ><i class = "icon-book" ></i> Laburare </a></li>
  4. <li><a href = "#" ><i class = "icon-pencil" ></i> Aikace-aikace </a></li>
  5. <li><a href = "#" ><i class = "i" ></i> Misc </a></li>
  6. </ul>

Filayen tsari

  1. <div class = "control-group" >
  2. <label class = "control-label" don = "inputIcon" > Adireshin imel </label>
  3. <div class = "controls" >
  4. <div class = "input-prepend" >
  5. <span class = "add-on" ><i class = "ambulan icon" </i></span>
  6. < class shigar = "span2" id = "inputIcon" nau'in = "rubutu" >
  7. </div>
  8. </div>
  9. </div>