Typographic scale

Iyo yese typographic grid yakavakirwa pane maviri Madiki akasiyana mune yedu variables.less faira: @baseFontSizeuye @baseLineHeight. Yekutanga ndiyo base font-saizi inoshandiswa mukati mese uye yechipiri ndiyo base mutsetse-urefu.

Isu tinoshandisa izvo zvinosiyanisa, uye mamwe masvomhu, kugadzira miganho, padding, uye mutsara-urefu hwemhando yedu yese nezvimwe.

Muenzaniso body text

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id 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.

Kushandisa kusimbisa

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, pharetra augue.

Cherechedza: Inzwa wakasununguka kushandisa <b>uye <i>muHTML5, asi kushandiswa kwavo kwachinja zvishoma. <b>inoitirwa kuratidza mazwi kana mitsara pasina kuendesa kukosha kwekuwedzera asi <i>kazhinji iri yezwi, tekinoroji mazwi, nezvimwe.

Enzaniso kero

Heino mienzaniso miviri yekuti <address>tag ingashandiswa sei:

Mienzaniso zvipfupiso

Zvidimburiso zvakataera zvine mavara makuru uye bhodha rezasi rine doti rakareruka. Ivo zvakare vane chitubu chekubatsira pane hover kuitira kuti vashandisi vave nekuwedzera chiratidzo chimwe chinhu chicharatidzwa pane hover.

HTML ndicho chinhu chakanakisa kubva pachingwa chakachekwa.

Muchidimbu chezwi rokuti attr .

Kusanganisira blockquote, peta <blockquote>chero HTML se quote. Kuti uwane mazwi akatwasuka tinokurudzira a <p>.

Sanganisira chinhu chinosarudzika <small>kuti utaure kwaunobva uye iwe uchawana em dash —pamberi payo nekuda kwemaitiro.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante venenatis. </ p>
  <mudiki> Mumwe munhu ane mukurumbira </ mudiki>
</blockquote>

Default blockquotes akanyorwa seizvi:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante venenatis.

Mumwe ane mukurumbira muBody yebasa

Kuyangarara yako blockquote kurudyi, wedzera class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante venenatis.

Mumwe ane mukurumbira muBody yebasa

Zvisina kurairwa

<ul>

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

Unstyled

<ul class="unstyled">

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

Ordered

<ol>

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

Tsanangudzo

<dl>

Tsanangudzo mazita

Rondedzero yerondedzero yakakwana pakutsanangura mazwi.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Inline

Putira zvidimbu zvemukati zvekodhi ne <code>.

Semuyenzaniso , < code> chikamu </ code > inofanira kuputirwa se inline .  

Basic block

Shandisa <pre>kune akawanda mitsara yekodhi. Ita shuwa yekusandura chero magaro kuita iwo unicode mavara kuti apihwe kwakaringana.

<p>Eyemuenzaniso mavara pano...</p>

<pre>
  <p>Eyemuenzaniso mavara pano...</p>
</pre>

Cherechedza: Iva nechokwadi chekuchengeta kodhi mukati <pre>memategi pedyo nekuruboshwe sezvinobvira; ichapa ma tabo ese.

Google Pretify

Tora <pre>chinhu chimwe uye wedzera makirasi maviri esarudzo ekuwedzera shanduro.

<p> Muenzaniso mavara pano... </p>

<pre class = "prettyprint 
     linenum" >
  <p>Eyemuenzaniso mavara pano...</p>
</pre>

Dhawunirodha google-code-prettify uye woona iyo readme yekushandisa sei.

<tafura>
  <musoro>
    <tr>
      <th> … </th>
      <th> … </th>
    </ tr>
  </ musoro>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </ tr>
  </ tbody>
</ table>

Matafura anongogadzirwa otomatiki aine mabhodha mashoma kuti ave nechokwadi chekuverengeka uye kuchengetedza chimiro. Ne 2.0, .tablekirasi inodiwa.

<tafura yekirasi = "tafura" > 
  …
</ table>

Wana shoo shoma nematafura ako nekuwedzera mbizi-striping-ingowedzera .table-stripedkirasi.

Cherechedza: Matafura eSprited anoshandisa :nth-childCSS selector uye haisi kuwanikwa muIE7-IE8.

<tafura yekirasi = "tafura tafura-mitsetse" > 
  …
</ table>

Wedzera miganho yakatenderedza tafura yese uye makona akatenderedzwa nekuda kwekunakisa.

<tafura yekirasi = "tafura tafura-yakaganhurwa" > 
  …
</ table>

Ita kuti matafura ako awedzere compact nekuwedzera .table-condensedkirasi kutema tafura cell padding nehafu (kubva pa8px kusvika 4px).

<tafura yekirasi = "tafura yetafura-yakaderedzwa" > 
  …
</ table>

Inzwa wakasununguka kusanganisa chero emakirasi etafura kuti uwane kutaridzika kwakasiyana nekushandisa chero anowanikwa makirasi.

<tafura kirasi = "tafura tafura-mitsetse tafura-yakaganhurwa tafura-yakapfupikiswa" > 
  ...
</ table>

Flexible HTML uye CSS

Chikamu chakanakisa nezvemafomu muBootstrap ndechekuti zvese zvaunopinza uye zvinodzora zvinotaridzika zvakanaka zvisinei kuti unozvivaka sei mumarkup yako. Hapana yakanyanyisa HTML inodiwa, asi isu tinopa mapatani kune avo vanoida.

Mamwe magadzirirwo akaomesesa anouya nemakirasi akapfupika uye anogona scalable e nyore kutaera uye kusungirirwa kwechiitiko, saka unofukidzwa padanho rega rega.

Zvirongwa zvina zvakabatanidzwa

Bootstrap inouya nerutsigiro rwemhando ina dzemafomu marongerwo:

• Yakamira (default)
• Search
• Inline
• Horizontal

Mhando dzakasiyana dzemagadzirirwo emafomu dzinoda shanduko kune markup, asi zvinodzora pachazvo zvinoramba uye zviite zvakafanana.

Kudzora nyika uye nezvimwe

Mafomu eBootstrap anosanganisira masitayipi eese mabhesi fomu ekudzora senge kupinza, textarea, uye sarudza iwe yaungatarisira. Asi zvakare inouya nenhamba yezvimiro zvetsika senge zvakaiswa uye zvakafanorongedzerwa mapindiro uye tsigiro yemazita emabhokisi ekutarisa.

Nyika dzakaita senge kukanganisa, yambiro, uye kubudirira zvinosanganisirwa kune yega yega yemhando yekudzora fomu. Zvinosanganisirwawo masitayera ezvidzori zvakaremara.

Ne v2.0, isu tine zvakareruka uye zvine hungwaru zvigadziriso zvemafomu masitayipi. Hapana imwe markup, ingo gadzira zvidzoreso.

Kuratidzira zvitaera zveWebKit zvakasarudzika, ingo wedzera .form-searchkune mamwe akatenderedzwa ekutsvaga minda.

Zvinopinza i block level yekutanga. Kune .form-inlineuye .form-horizontal, isu tinoshandisa inline-block.

Chii chinosanganisirwa

Anoratidzwa kuruboshwe ndiwo ese akasarudzika emafomu ekutonga atinotsigira. Heino rondedzero ine mabulleted:

• zvinyorwa zvinyorwa (zvinyorwa, password, email, nezvimwewo)
• checkbox
• redhiyo
• sarudza
• akawanda sarudza
• file input
• textarea

Zvitsva zvitsva zvine v2.0

Kusvika kuv1.4, Bootstrap's default fomu masitaera akashandisa yakachinjika marongero. NeBootstrap 2, isu takabvisa icho chinomanikidza kuti tive nehungwaru, zvakanyanya scalable defaults kune chero fomu.

Redesigned browser states

Bootstrap inoratidzira masitaera ebrowser-inotsigirwa yakatarisana uye disablednyika. Isu tinobvisa iyo default Webkit outlineuye toisa a box-shadowpanzvimbo yayo ye :focus.

Kusimbisa fomu

Inosanganisirawo zvitaera zvekusimbisa zvekukanganisa, yambiro, uye kubudirira. Kuti ushandise, wedzera kirasi yekukanganisa kune yakatenderedza .control-group.

<fieldset
  class = "control-group error" >
  …
</fieldset>

Gadzirira & wedzera zvinopinda

Mapoka ekuisa — ane mavara akaiswa kana akafanorongwa — anopa nzira iri nyore yekupa mamwe mamiriro ezvaunoisa. Mienzaniso mikuru inosanganisira iyo @ sign ye Twitter usernames kana $ yemari.

Checkboxes nemaredhiyo

Kusvika kuv1.4, Bootstrap yaida yakawedzera markup yakatenderedza mabhokisi ekutarisa nemaredhiyo kuti azviise. Zvino, inyaya yakapusa yekudzokorora <label class="checkbox">iyo inoputira iyo <input type="checkbox">.

Inline cheki mabhokisi uye redhiyo zvinotsigirwa zvakare. Ingo wedzera .inlinekune chero .checkboxkana .radiouye wapedza.

Inline mafomu uye wedzera / gadzirira

Kuti ushandise prepend kana kuwedzera mapimendi mune inline fomu, iva nechokwadi chekuisa .add-onuye inputpamutsetse mumwechete, pasina nzvimbo.

Mameseji ekubatsira fomu

Kuti uwedzere mameseji erubatsiro ezvaunopinda mufomu, sanganisira mavara erubatsiro emukati ane <span class="help-inline">kana mameseji erubatsiro ane <p class="help-block">mushure mechinhu chekuisa.

Mabhatani ezviito

Semusangano, mabhatani anofanirwa kungoshandiswa kuita zviito nepo hyperlink ichizoshandiswa pazvinhu. Semuenzaniso, "Kudhawunirodha" kunofanirwa kunge kuri bhatani nepo "zvichangobva kuitika" zvichifanira kunge zviri chinongedzo.

Zvezvibatiso uye mafomu

Mabhatani masitayera anogona kuiswa kune chero chinhu chine .btnyakaiswa. Nekudaro, kazhinji iwe unozoda kushandisa izvi kune chete <a>uye <button>zvinhu.

Cherechedza: Mabhatani ese anofanira kusanganisira .btnkirasi. Mabhatani masitaera anofanirwa kuiswa kune <button>uye <a>zvinhu zvekuenderana.

Saizi dzakawanda

Unoda mabhatani makuru kana madiki? Iva nazvo!

Chiito chekutanga Chiito

Chiito chekutanga Chiito

Disabled state

Pamabhatani akaremara, shandisa .btn-disabledmalink uye :disabledmaelement <button>.

Chiito chekutanga Chiito

Chiito chekutanga Chiito

Cross browser kuenderana

MuIE9, tinodonhedza gradient pamabhatani ese tichifarira makona akatenderedzwa sezvo IE9 isingachekere kumashure magradients kumakona.

Zvinechekuita, IE9 inobvisa buttonzvinhu zvakavharwa, ichipa mavara egrey nemavara akashata-mumvuri-zvinosuruvarisa kuti hatikwanise kugadzirisa izvi.

Yakavakwa se sprite

Panzvimbo pekuita kuti chiratidzo chega chega chive chikumbiro chekuwedzera, takazvibatanidza kuita sprite - boka remifananidzo mufaira rimwe rinoshandisa CSS kuisa mifananidzo ne background-position. Iyi ndiyo nzira imwe chete yatinoshandisa pa Twitter.com uye yatiitira zvakanaka.

Ese makirasi ezvidhori .icon-anotangwa neakakodzera mazita enzvimbo uye scoping, senge zvimwe zvinhu zvedu. Izvi zvichabatsira kudzivirira kusawirirana nemamwe maturusi.

Glyphicons yakatipa kushandisa maHalflings akaiswa mune yedu yakavhurika-sosi toolkit chero isu tichipa chinongedzo uye kiredhiti pano mune zvinyorwa. Ndapota funga kuita zvakafanana mumapurojekiti ako.

Kushandisa sei

Ne v2.0.0, takasarudza kushandisa <i>tag yezvidhori zvedu zvese, asi ivo havana kesi class — chete chivakashure chakagovaniswa. Kuti ushandise, isa kodhi inotevera chero kupi zvako:

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

Kune zvakare masitaera anowanikwa kune inverted (chena) icons, akagadzirirwa nekirasi imwe yekuwedzera:

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

Kune 120 makirasi ekusarudza kubva kune ako icons. Ingo wedzera <i>tag ine makirasi akakodzera uye wagadzirira. Unogona kuwana runyoro rwakazara mu sprites.less kana ipo pano mugwaro rino.

Shandisa makesi

Icons yakanaka, asi munhu angaishandisa kupi? Heano mamwe mazano:

• Sezvinoonekwa zvepasidebar navigation yako
• Zvekungofamba-famba kunofambiswa nemifananidzo
• Kuti mabhatani abatsire kuburitsa zvinoreva chiito
• Nemanongedzo ekugovera mamiriro emushandisi kwekwaanosvika

Chaizvoizvo, chero kwaunogona kuisa <i>tag, unogona kuisa icon.

Refresh Buda Delete

Comment Settings More Info