Ma'aunin rubutu

Gabaɗayan grid ɗin rubutun ya dogara ne akan ƙananan ma'auni guda biyu a cikin masu canjin mu.Fayil maras kyau: @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-sauye, da wasu maths, don ƙirƙira margins, paddings, da tsayin layi na kowane nau'in mu da ƙari.

Misali rubutun jiki

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

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

Amfani da girmamawa

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Lura: Jin kyauta don amfani <b>kuma <i>a cikin HTML5, amma amfanin su ya ɗan canza kaɗan. <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.

Misali adireshi

Ga misalai guda biyu na yadda <address>za a iya amfani da alamar:

Misali gajarta

An tsara gajarta tare da babban rubutu da iyakar ƙasa mai dige-dige mai haske. Hakanan suna da siginan taimako akan hover don haka masu amfani suna da ƙarin nunin wani abu da za a nuna akan hover.

HTML shine abu mafi kyau tun yankakken gurasa.

Gajartawar kalmar sifa ita ce attr .

Don haɗa da blockquote, kunsa <blockquote>kowane HTML azaman abin ƙira. Don madaidaiciyar magana muna ba da shawarar a <p>.

Haɗa wani zaɓi na zaɓi <small>don faɗi tushen ku kuma za ku sami dash —a gabansa don dalilai na salo.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer yana da alaƙa da ante venenatis. </p>
  <small> Wani sanannen </small>
</blockquote>

Tsohuwar blockquotes an tsara su kamar haka:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer yana da alaƙa da ante venenatis.

Wani shahararre a Jikin aiki

Don shawagi blockquote zuwa dama, ƙara class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer yana da alaƙa da ante venenatis.

Wani shahararre a Jikin aiki

Ba a ba da oda ba

<ul>

• 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

Mara salo

<ul class="unstyled">

• 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

An yi oda

<ol>

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

Bayani

<dl>

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.

Layin layi

Kunna snippets na layi tare da <code>.

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

Tushe na asali

Yi amfani <pre>da layukan lamba da yawa. Tabbata juya kowane kulawa zuwa haruffan unicode su don yin daidai.

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

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

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

Google Prettify

Ɗauki kashi iri <pre>ɗaya kuma ƙara azuzuwan zaɓi biyu don ingantacciyar ma'ana.

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

<pre class = "prettyprint 
     linenums" >
  <p>Sample rubutu a nan...</p>
</pre>

Zazzage google-code-prettify kuma duba readme don yadda ake amfani da su.

<tebur>
  <fito>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </fadi>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</text>

Ana yin salo ta atomatik tare da ƴan iyakoki don tabbatar da karantawa da kiyaye tsari. Tare da 2.0, .tableana buƙatar aji.

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

Samun ɗan zato tare da tebur ɗinku ta ƙara zakin zebra - ƙara .table-stripedaji kawai.

Lura: Tebura masu yatsa suna amfani da :nth-childmai zaɓin CSS kuma babu shi a cikin IE7-IE8.

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

Ƙara iyakoki kewaye da dukan teburi da sasanninta masu zagaye don dalilai na ado.

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

Sanya tebur ɗin ku ya zama ƙarami ta ƙara .table-condensedajin don yanke fakitin tantanin halitta a rabi (daga 8px zuwa 4px).

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

Jin kyauta don haɗa kowane azuzuwan tebur don cimma kamanni daban-daban ta amfani da kowane ɗayan darussan da ake da su.

< class class = "Table-stried table-condensed table-condensed" > 
  ...
</text>

HTML da CSS masu sassauƙa

Mafi kyawun sashi game da fom a cikin Bootstrap shine cewa duk abubuwan shigar ku da abubuwan sarrafawa suna da kyau komai yadda kuka gina su a cikin alamarku. Ba a buƙatar babban HTML, amma muna samar da tsari ga waɗanda ke buƙatar sa.

Ƙarin rikitattun shimfidu suna zuwa tare da taƙaitattun azuzuwan da za a iya daidaita su don salo mai sauƙi da ɗaure taron, don haka ana rufe ku a kowane mataki.

An haɗa shimfidu huɗu

Bootstrap ya zo tare da tallafi don nau'ikan shimfidu nau'i huɗu:

• A tsaye (tsoho)
• Bincika
• Layin layi
• A kwance

Daban-daban na shimfidu na tsari suna buƙatar wasu canje-canje don yin alama, amma abubuwan sarrafawa da kansu sun kasance kuma suna yin iri ɗaya.

Sarrafa jihohin da sauransu

Siffofin Bootstrap sun haɗa da salo don duk tushen tsarin sarrafawa kamar shigarwa, yanki, da zaɓin da kuke so. Amma kuma yana zuwa tare da adadin abubuwan da aka gyara na al'ada kamar abubuwan da aka haɗa da waɗanda aka riga aka tsara da kuma goyan bayan lissafin akwatuna.

Jihohi kamar kuskure, gargaɗi, da nasara an haɗa su don kowane nau'in sarrafa nau'i. Hakanan an haɗa da salo don sarrafa nakasassu.

Tare da v2.0, muna da mafi sauƙi kuma mafi wayo don tsarin tsari. Babu ƙarin alama, kawai samar da sarrafawa.

Nuna tsoffin salon WebKit, kawai ƙara .form-searchdon ƙarin wuraren bincike mai zagaye.

Abubuwan shigarwa sune matakin toshe don farawa. Don .form-inlinekuma .form-horizontal, muna amfani da block-line.

Me ya hada

Ana nunawa a gefen hagu duk tsoffin tsarin sarrafa fom da muke tallafawa. Ga jerin harsashi:

• shigar da rubutu (rubutu, kalmar sirri, imel, da sauransu)
• akwati
• rediyo
• zaɓi
• zaɓi da yawa
• shigar da fayil
• yankin rubutu

Sabbin abubuwan da suka dace tare da v2.0

Har zuwa v1.4, Siffofin sigar tsoho ta Bootstrap sun yi amfani da shimfidar kwance. Tare da Bootstrap 2, mun cire wannan ƙuntatawa don samun mafi wayo, mafi girman ma'auni na kowane nau'i.

Jahohin mai binciken da aka sake tsarawa

Bootstrap yana fasalta salo don mai da hankali mai goyan bayan mai lilo da disabledjihohi. Muna cire tsohowar Webkit outlinekuma muna amfani da box-shadowa wurinsa don :focus.

Tabbatar da tsari

Hakanan ya haɗa da salon tabbatarwa don kurakurai, faɗakarwa, da nasara. Don amfani, ƙara ajin kuskure zuwa kewaye .control-group.

<filaye
  class = "kuskuren rukuni-rukuni" >
  …
</fieldset>

Shirya & saka abubuwan shigarwa

Ƙungiyoyin shigarwa-tare da rubutun da aka haɗa ko riga-kafi-suna samar da hanya mai sauƙi don ba da ƙarin mahallin abubuwan da kuka shigar. Manyan misalai sun haɗa da alamar @ don sunayen masu amfani da Twitter ko $ don kuɗi.

Akwatunan rajista da rediyo

Har zuwa v1.4, Bootstrap yana buƙatar ƙarin alama a kusa da akwatunan bincike da rediyo don tara su. Yanzu, abu ne mai sauƙi na maimaita abin <label class="checkbox">da ke kunshe da <input type="checkbox">.

Hakanan ana tallafawa akwatunan rajistan layi da rediyo. Kawai ƙara .inlinezuwa kowane .checkboxko .radiokuma kun gama.

Siffofin layi da haɗawa/gabatarwa

Don amfani da prepend ko saka bayanai a cikin hanyar layi, tabbatar da sanya .add-onkuma inputakan layi ɗaya, ba tare da sarari ba.

Samar da rubutun taimako

Don ƙara rubutun taimako don shigar da sigar ku, haɗa da rubutun taimakon layi tare da <span class="help-inline">ko toshe rubutun taimako tare da <p class="help-block">bayan ɓangaren shigarwar.

Maɓallai don ayyuka

A matsayin al'ada, maɓalli ya kamata a yi amfani da su kawai don ayyuka yayin da za a yi amfani da hanyoyin haɗin kai don abubuwa. Misali, "Zazzagewa" ya kamata ya zama maɓalli yayin da "aikin kwanan nan" ya zama hanyar haɗi.

Don anchors da siffofi

Za a iya amfani da salon maɓalli ga kowane abu tare da abin da aka .btnyi amfani da shi. Koyaya, yawanci kuna son amfani da waɗannan ga kawai <a>da <button>abubuwa.

Lura: Duk maɓallan dole ne su haɗa da .btnajin. Ya kamata a yi amfani da salon maɓalli zuwa <button>da <a>abubuwa don daidaito.

Girma masu yawa

Kuna son manyan maɓalli ko ƙarami? Ku zo da shi!

Mataki na farko Aiki

Mataki na farko Aiki

Jihar naƙasassu

Don maɓallan nakasassu, yi amfani .btn-disabledda hanyoyin haɗin gwiwa da :disabledabubuwa <button>.

Mataki na farko Aiki

Mataki na farko Aiki

Tsallake dacewa da mai bincike

A cikin IE9, muna sauke gradient akan duk maɓallai don jin daɗin sasanninta masu zagaye kamar yadda IE9 ba ya girbi gradients na baya zuwa sasanninta.

Mai alaƙa, IE9 yana jankifies buttonabubuwan nakasassu, yana sanya rubutu launin toka tare da inuwar rubutu mara kyau - abin takaici ba za mu iya gyara wannan ba.

Gina a matsayin sprite

Maimakon yin kowane gunki ƙarin buƙatu, mun tattara su cikin sprite — tarin hotuna a cikin fayil ɗaya wanda ke amfani da CSS don sanya hotuna tare da background-position. Wannan hanya ɗaya ce da muke amfani da ita akan Twitter.com kuma ta yi mana aiki da kyau.

Duk azuzuwan gumaka an riga an sanya su da su .icon-don daidaita sunaye masu dacewa da ƙwanƙwasa, kamar sauran abubuwan haɗinmu. Wannan zai taimaka kauce wa rikice-rikice tare da wasu kayan aikin.

Glyphicons ya ba mu damar amfani da Halflings da aka saita a cikin buɗaɗɗen kayan aikin kayan aikin mu muddin mun samar da hanyar haɗi da ƙima anan a cikin takaddun. Da fatan za a yi la'akari da yin haka a cikin ayyukanku.

Yadda ake amfani

Tare da v2.0.0, mun zaɓi yin amfani da <i>alama don duk gumakan mu, amma ba su da wani nau'i na shari'a-kawai share fage. Don amfani, sanya lambar mai zuwa kusan ko'ina:

<i class = "icon-search" >> 

Hakanan akwai salo don gumaka masu jujjuya (fararen), waɗanda aka shirya tare da ƙarin aji ɗaya:

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

Akwai azuzuwan 120 da za a zaɓa daga don gumakanku. Kawai ƙara <i>alama tare da azuzuwan da suka dace kuma an saita ku. Kuna iya samun cikakken jeri a sprites.less ko dama anan cikin wannan takarda.

Yi amfani da lokuta

Gumaka suna da kyau, amma a ina mutum zai yi amfani da su? Ga 'yan ra'ayoyi:

• A matsayin abubuwan gani don kewayawa na gefe
• Don kewayawa mai sarrafa alamar zalla
• Don maɓalli don taimakawa isar da ma'anar wani aiki
• Tare da hanyoyin haɗin kai don raba mahallin akan inda mai amfani yake nufi

Mahimmanci, duk inda za ku iya sanya <i>alama, kuna iya sanya gunki.

Sake sabuntawa Dubawa Share

Sharhi Saituna Karin Bayani