typographic sikelo

Gulu lonse la typographic grid limachokera pamitundu iwiri Yocheperako mufayilo yathu yosinthika.less: @baseFontSizendi @baseLineHeight. Choyamba ndi kukula kwa font komwe kumagwiritsidwa ntchito ponsepo ndipo chachiwiri ndi kutalika kwa mzere woyambira.

Timagwiritsa ntchito masinthidwe amenewo, ndi masamu ena, kupanga m'mphepete, ma padding, ndi kutalika kwa mzere wamitundu yathu yonse ndi zina zambiri.

Chitsanzo thupi lemba

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

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

Kugwiritsa ntchito kutsindika

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

Zindikirani: Khalani omasuka kugwiritsa ntchito <b>komanso <i>mu HTML5, koma kugwiritsa ntchito kwawo kwasintha pang'ono. <b>cholinga chake ndi kuwunikira mawu kapena ziganizo popanda kuwonetsa kufunikira kowonjezera pomwe <i>nthawi zambiri zimakhala za mawu, mawu aukadaulo, ndi zina.

Zitsanzo maadiresi

Nazi zitsanzo ziwiri za momwe <address>tag ingagwiritsire ntchito:

Zitsanzo zazidule

Mawu achidule amapangidwa ndi zilembo zazikulu komanso m'mphepete mwamadontho opepuka. Amakhalanso ndi cholozera chothandizira pa hover kuti ogwiritsa ntchito azikhala ndi chidziwitso chowonjezera kuti china chake chiziwonetsedwa pa hover.

HTML ndiye chinthu chabwino kwambiri kuyambira mkate wodulidwa.

Chidule cha mawu akuti attr .

Kuti muphatikizepo blockquote, sungani HTML<blockquote> iliyonse ngati mawuwo. Pamawu olunjika timalimbikitsa a .<p>

Phatikizani chinthu chomwe mukufuna <small>kuti mutchule gwero lanu ndipo mupeza dash ya em —patsogolo pake pazolinga zamakongoletsedwe.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere ndi ante venenatis. </p>
  <wamng'ono> Wina wotchuka </ wamng'ono>
</blockquote>

Ma blockquotes osasinthika amalembedwa motere:

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

Wina wotchuka mu Thupi la ntchito

Kuti muyandamitse blockquote yanu kumanja, onjezani class="pull-right":

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

Wina wotchuka mu Thupi la ntchito

Osalamulidwa

<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem ndi massa
• Facilisis mu pretium nisl aliquet
• Chotsatira cha 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

Osatchulidwa

<ul class="unstyled">

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem ndi massa
• Facilisis mu pretium nisl aliquet
• Chotsatira cha 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

Adalamulidwa

<ol>

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

Kufotokozera

<dl>

Mndandanda wamafotokozedwe

Mndandanda wamafotokozedwe ndi abwino kufotokozera mawu.

Euismod

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

Donec id ili si mi porta gravida ndi eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Motsatana

Manga zilembo zam'munsi zamakhodi ndi <code>.

Mwachitsanzo , <code> gawo < / code > iyenera kukulungidwa ngati inline .  

Choyambirira block

Gwiritsani <pre>ntchito mizere ingapo yamakhodi. Onetsetsani kuti mutembenuza ma carets aliwonse kukhala zilembo zawo za unicode kuti aperekedwe moyenera.

<p>Zitsanzo zalemba apa...</p>

<pre>
  <p>Zitsanzo za mawu apa...</p>
</ pre>

Zindikirani: Onetsetsani kuti mwasunga ma code mkati mwa <pre>ma tag pafupi ndi kumanzere momwe mungathere; idzapereka ma tabo onse.

Google Pretify

Tengani <pre>chinthu chomwecho ndikuwonjezera makalasi awiri omwe mungafune kuti mumasulire bwino.

<p> Chitsanzo cha mawu apa... </p>

<pre class = "prettyprint 
     mzere" >
  <p>Zitsanzo za mawu apa...</p>
</ pre>

Tsitsani google-code-prettify ndikuwona zowerengera momwe mungagwiritsire ntchito.

<tebulo>
  <mutu>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </ mutu>
  <chinthu>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </ thupi>
</table>

Matebulo amangosanjidwa ndi malire ochepa kuti awonetsetse kuti awerengeka komanso kuti asamangidwe bwino. Ndi 2.0, .tablekalasi ndiyofunika.

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

Pezani zokometsera pang'ono ndi matebulo anu powonjezera mbidzi - ingowonjezerani .table-stripedkalasi.

Zindikirani: Matebulo ojambulidwa amagwiritsa ntchito :nth-childchosankha cha CSS ndipo sichipezeka mu IE7-IE8.

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

Onjezani malire kuzungulira tebulo lonse ndi ngodya zozungulira pazokongoletsa.

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

Pangani matebulo anu kukhala ophatikizika powonjezera .table-condensedkalasi kuti mudule ma cell a tebulo pakati (kuchokera 8px mpaka 4px).

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

Khalani omasuka kuphatikiza magulu aliwonse a tebulo kuti mukwaniritse mawonekedwe osiyanasiyana pogwiritsa ntchito makalasi aliwonse omwe alipo.

<tebulo kalasi = "tebulo-mizeremizeremizere tebulo-m'malire tebulo-condensed" > 
  ...
</table>

Flexible HTML ndi CSS

Gawo labwino kwambiri la mafomu mu Bootstrap ndikuti zolowa zanu zonse ndi zowongolera zimawoneka zabwino ngakhale mungazipangire bwanji muzolemba zanu. Palibe HTML yofunikira kwambiri yomwe imafunikira, koma timapereka mawonekedwe kwa omwe akufuna.

Masanjidwe ovuta kwambiri amabwera ndi makalasi achidule komanso osinthika kuti mukhale ndi masitayelo osavuta komanso omangirira zochitika, kotero mumaphunzitsidwa pamlingo uliwonse.

Masanjidwe anayi adaphatikizidwa

Bootstrap imabwera ndi chithandizo chamitundu inayi yamapangidwe:

• Oyima (chofikira)
• Sakani
• Motsatana
• Chopingasa

Mitundu yosiyanasiyana ya masanjidwe amitundu imafuna kusintha kwina, koma zowongolera zokha zimakhalabe chimodzimodzi.

Control limati ndi zina

Mafomu a Bootstrap amaphatikiza masitayilo azowongolera zonse zoyambira monga zolowetsa, zolemba, ndi kusankha zomwe mungayembekezere. Koma imabweranso ndi zida zingapo monga zolowetsa ndi zokonzedweratu ndikuthandizira mndandanda wamabokosi.

Maiko monga zolakwika, chenjezo, ndi kupambana akuphatikizidwa pamtundu uliwonse wa kuwongolera mawonekedwe. Zinanso ndi masitayelo a zowongolera zolephereka.

Ndi v2.0, tili ndi zosasintha zopepuka komanso zanzeru zama masitayelo amitundu. Palibe chowonjezera chowonjezera, ingowongolera mawonekedwe.

Kuwonetsa masitayelo a WebKit osakhazikika, .form-searchingowonjezerani kusaka kozungulira.

Zolowetsa ndi mulingo woyambira. Kwa .form-inlinendi .form-horizontal, timagwiritsa ntchito inline-block.

Zomwe zikuphatikizidwa

Zowonetsedwa kumanzere ndi mawonekedwe onse osasinthika omwe timathandizira. Nawu mndandanda wa zipolopolo:

• zolemba (mawu, mawu achinsinsi, imelo, ndi zina)
• bokosi
• wailesi
• sankhani
• angapo kusankha
• kulowetsa fayilo
• textarea

Zosintha zatsopano ndi v2.0

Kufikira v1.4, masitayilo a mawonekedwe a Bootstrap adagwiritsa ntchito masanjidwe opingasa. Ndi Bootstrap 2, tidachotsa choletsacho kuti tikhale ndi zosintha zanzeru, zowopsa zamtundu uliwonse.

Zokonzedwanso msakatuli zimanena

Bootstrap imakhala ndi masitayelo azomwe amathandizidwa ndi osatsegula komanso disabledmadera. Timachotsa Webkit yokhazikika outlinendikuyika box-shadowa m'malo mwake :focus.

Kutsimikizika kwa fomu

Zimaphatikizanso masitayelo otsimikizira zolakwa, machenjezo, ndi kupambana. Kuti mugwiritse ntchito, onjezani kalasi yolakwika pazozungulira .control-group.

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

Konzani & onjezerani zolowa

Magulu olowetsa—okhala ndi mawu ongowonjezeredwa kapena okonzedweratu—amapereka njira yosavuta yofotokozera zambiri za zomwe mwalemba. Zitsanzo zabwino zikuphatikiza @ sign ya ma usernames a Twitter kapena $ pazachuma.

Mabokosi ndi mawailesi

Kufikira v1.4, Bootstrap inkafunika zolembera zoonjezera mozungulira mabokosi ndi mawayilesi kuti muyike. Tsopano, ndi nkhani yosavuta kubwereza <label class="checkbox">zomwe zimakutira <input type="checkbox">.

Mabokosi apaintaneti ndi mawayilesi amathandizidwanso. Ingowonjezerani .inlinechilichonse .checkboxkapena .radiomwatha.

Mafomu apaintaneti ndikuwonjezera / kukonzekera

Kuti mugwiritse ntchito zolembera zokonzeratu kapena kuwonjezera pamizere, onetsetsani kuti mwayika .add-onndi inputpamzere womwewo, popanda mipata.

Fomu yothandizira mawu

Kuti muwonjezere mawu okuthandizani pazolowetsa mafomu anu, phatikizani mawu okuthandizani okhala ndi <span class="help-inline">kapena mawu othandizira <p class="help-block">pambuyo pa zomwe mwalowetsa.

Mabatani a zochita

Monga msonkhano, mabatani ayenera kugwiritsidwa ntchito pochita zinthu pomwe ma hyperlink ayenera kugwiritsidwa ntchito pazinthu. Mwachitsanzo, "Kutsitsa" kuyenera kukhala batani pomwe "zochitika zaposachedwa" ziyenera kukhala ulalo.

Kwa anangula ndi mafomu

Mabatani a mabatani amatha kugwiritsidwa ntchito pa chilichonse chomwe .btnchikugwiritsidwa ntchito. Komabe, nthawi zambiri mudzafuna kugwiritsa ntchito izi pazokha <a>komanso <button>zinthu.

Chidziwitso: Mabatani onse ayenera kukhala ndi .btnkalasi. Mitundu ya mabatani iyenera kugwiritsidwa ntchito <button>ndi <a>zinthu kuti zigwirizane.

Ma size angapo

Mukufuna mabatani akulu kapena ang'onoang'ono? Khalani nazo!

Chochita choyambirira Zochita

Chochita choyambirira Zochita

Dziko olumala

Kwa mabatani olumala, gwiritsani .btn-disabledntchito maulalo ndi :disabledzinthu <button>.

Chochita choyambirira Zochita

Chochita choyambirira Zochita

Kugwirizana kwa msakatuli

Mu IE9, timagwetsa gradient pa mabatani onse mokomera ngodya zozungulira popeza IE9 simadula ma gradients akumbuyo kumakona.

Zofananira, IE9 imasokoneza buttonzinthu zolephereka, kupangitsa mawu kukhala imvi ndi chithunzi choyipa - mwatsoka sitingathe kukonza izi.

Kumangidwa ngati sprite

M'malo mopanga chithunzi chilichonse kukhala chowonjezera, tachipanga kukhala sprite-mulu wa zithunzi mufayilo imodzi yomwe imagwiritsa ntchito CSS kuyika zithunzizo ndi background-position. Iyi ndi njira yomweyi yomwe timagwiritsa ntchito pa Twitter.com ndipo yatithandiza bwino.

Makasitomala onse azithunzi amapangidwa .icon-kuti akhale ndi malo oyenera a mayina ndi ma scoping, monga zida zathu zina. Izi zidzathandiza kupewa mikangano ndi zida zina.

Ma Glyphicons atipatsa mwayi wogwiritsa ntchito ma Halflings omwe ali mu zida zathu zotseguka malinga ngati tikupereka ulalo ndi ngongole pano muzolemba. Chonde lingalirani kuchita zomwezo pamapulojekiti anu.

Momwe mungagwiritsire ntchito

Ndi v2.0.0, tasankha kugwiritsa ntchito <i>tag pamafano athu onse, koma alibe gawo lamilandu - ndi prefix yogawana. Kuti mugwiritse ntchito, ikani khodi ili pafupi kulikonse:

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

Palinso masitaelo omwe amapezeka pazithunzi zopindika (zoyera), zokonzedwa ndi gulu limodzi lowonjezera:

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

Pali makalasi 120 oti musankhe pazithunzi zanu. Ingowonjezerani <i>tag yokhala ndi makalasi oyenera ndipo mwakonzeka. Mutha kupeza mndandanda wathunthu mu sprites.less kapena pomwe pano m'chikalatachi.

Gwiritsani ntchito milandu

Zithunzi ndizabwino, koma munthu angazigwiritsa ntchito kuti? Nawa malingaliro angapo:

• Monga zowonera pamayendedwe anu am'mbali
• Kwa navigation yoyendetsedwa ndi zithunzi
• Kuti mabatani athandizire kufotokozera tanthauzo la chochitika
• Ndi maulalo oti mugawane zomwe munthu akupita

Kwenikweni, kulikonse komwe mungaike <i>tag, mutha kuyika chizindikiro.

Tsitsaninso Onani Chotsani

Ndemanga Zokonda Zambiri