Pamwamba pa scaffolding, zoyambira za HTML zimasinthidwa ndikuwonjezeredwa ndi makalasi owonjezera kuti apereke mawonekedwe atsopano, osasinthika.
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.
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.
| Chinthu | Kugwiritsa ntchito | Zosankha |
|---|---|---|
<strong> |
Potsindika kachidutswa kakang'ono ka mawu ndi kofunikira | Palibe |
<em> |
Potsindika kagawo kakang'ono ka mawu ndi kupsinjika | Palibe |
<abbr> |
Amakulunga mawu achidule ndi ma acronyms kuti awonetse mtundu wowonjezedwa pa hover | Phatikizani zomwe mungasankhe .initialismntchito zilembo zazikuluzikulu za kalasi. |
<address> |
Kuti mudziwe zambiri za makolo ake apafupi kapena gulu lonse lantchito | Sungani masanjidwe pomaliza mizere yonse ndi<br> |
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.
Nazi zitsanzo ziwiri za momwe <address>tag ingagwiritsire ntchito:
Mawu achidule okhala ndi tanthauzo titleali ndi malire a madontho owala pansi ndi cholozera chothandizira pa hover. Izi zimapatsa ogwiritsa ntchito chidziwitso chowonjezera china chake chomwe chidzawonetsedwa pa hover.
Onjezani initialismkalasi ku chidule cha mawu kuti muonjezere mgwirizano wa kalembedwe powapatsa kukula kwa mawu ocheperako.
HTML ndiye chinthu chabwino kwambiri kuyambira mkate wodulidwa.
Chidule cha mawu akuti attr .
| Chinthu | Kugwiritsa ntchito | Zosankha |
|---|---|---|
<blockquote> |
Chofunikira pa block-level potengera zomwe zili kugwero lina | Onjezani .pull-leftndi .pull-rightmakalasi pazosankha zoyandama |
<small> |
Chosankha chowonjezera mawu omwe amayang'ana ogwiritsa ntchito, makamaka wolemba wokhala ndi mutu wantchito | Ikani <cite>mozungulira mutu kapena dzina la gwero |
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
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Mungodziwiratu! Mafotokozedwe opingasa adzafupikitsa mawu omwe ndi aatali kwambiri kuti agwirizane ndi kukonza ndime yakumanzere text-overflow. Pamalo ocheperako, asintha kukhala mawonekedwe osakhazikika.
Manga zilembo zam'munsi zamakhodi ndi <code>.
- Mwachitsanzo , <code> gawo < / code > iyenera kukulungidwa ngati inline .
Gwiritsani <pre>ntchito mizere ingapo yamakhodi. Onetsetsani kuti mwathawa m'mabokosi aliwonse mu code kuti mumasulire bwino.
<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.
Mutha kuwonjezera .pre-scrollablekalasi yomwe ingakhazikitse kutalika kwa 350px ndikupereka y-axis scrollbar.
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.
| Tagi | Kufotokozera |
|---|---|
<table> |
Kukulunga chinthu chowonetsera deta mumtundu wa tabular |
<thead> |
Chotengera chamizere yapamutu patebulo ( <tr>) kuti mulembe mizati yatebulo |
<tbody> |
Chotengera cha mizere ya tebulo ( <tr>) mu thupi la tebulo |
<tr> |
Chotengera chamagulu amagulu a tebulo ( <td>kapena <th>) omwe amawonekera pamzere umodzi |
<td> |
Selo ya tebulo lofikira |
<th> |
Selo lapadera la tebulo lazambiri (kapena mzere, kutengera kukula ndi kuyika) zilembo Ayenera kugwiritsidwa ntchito mkati mwa <thead> |
<caption> |
Kufotokozera kapena chidule cha zomwe tebulo ili, makamaka zothandiza kwa owerenga zenera |
- <tebulo>
- <mutu>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </ mutu>
- <chinthu>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </ thupi>
- </table>
| Dzina | Kalasi | Kufotokozera |
|---|---|---|
| Zosasintha | Palibe | Palibe masitayilo, mizati ndi mizere yokha |
| Basic | .table |
Mizere yopingasa yokha pakati pa mizere |
| Wamalire | .table-bordered |
Amazungulira ngodya ndikuwonjezera malire akunja |
| Mzere wa Zebra | .table-striped |
Imawonjezera mtundu wotuwa wopepuka ku mizere yosamvetseka (1, 3, 5, ndi zina) |
| Kufupikitsidwa | .table-condensed |
Imadula zotchingira zoyimirira pakati, kuchokera pa 8px mpaka 4px, mkati mwa zonse tdndi thzinthu |
Matebulo amangosanjidwa ndi malire ochepa kuti awonetsetse kuti awerengeka komanso kuti asamangidwe bwino. Ndi 2.0, .tablekalasi ndiyofunika.
- <table class = "table" >
- …
- </table>
| # | Dzina loyamba | Dzina lomaliza | Dzina lolowera |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Yakobo | Thornton | @mafuta |
| 3 | Larry | Mbalame |
Pezani zokometsera pang'ono ndi matebulo anu powonjezera mbidzi - ingowonjezerani .table-stripedkalasi.
Zindikirani: Matebulo amizere amagwiritsa ntchito :nth-childchosankha cha CSS ndipo sapezeka mu IE7-IE8.
- <table class = "table table-mizere" >
- …
- </table>
| # | Dzina loyamba | Dzina lomaliza | Dzina lolowera |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Yakobo | Thornton | @mafuta |
| 3 | Larry | Mbalame |
Onjezani malire kuzungulira tebulo lonse ndi ngodya zozungulira pazokongoletsa.
- <table class = "table-bordered" >
- …
- </table>
| # | Dzina loyamba | Dzina lomaliza | Dzina lolowera |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| Mark | Otto | @getbootstrap | |
| 2 | Yakobo | Thornton | @mafuta |
| 3 | Larry Mbalame | ||
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>
| # | Dzina loyamba | Dzina lomaliza | Dzina lolowera |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Yakobo | Thornton | @mafuta |
| 3 | Larry Mbalame | ||
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>
| Dzina lonse | |||
|---|---|---|---|
| # | Dzina loyamba | Dzina lomaliza | Dzina lolowera |
| 1 | Mark | Otto | @mdo |
| 2 | Yakobo | Thornton | @mafuta |
| 3 | Larry Mbalame | ||
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.
Bootstrap imabwera ndi chithandizo chamitundu inayi yamapangidwe:
Mitundu yosiyanasiyana ya masanjidwe amitundu imafuna kusintha kwina, koma zowongolera zokha zimakhalabe chimodzimodzi.
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.
Bootstrap imapereka mawonekedwe osavuta komanso masitayelo amitundu inayi yamitundu wamba.
| Dzina | Kalasi | Kufotokozera |
|---|---|---|
| Oyima (chofikira) | .form-vertical (osafunikira) |
Malebulo otungidwa, okhala kumanzere pa zowongolera |
| Motsatana | .form-inline |
Zoyang'ana kumanzere ndi zowongolera zolowera kumanzere kwa kalembedwe kophatikizana |
| Sakani | .form-search |
Mawu ozungulira mowonjezera pazokometsera zakusaka |
| Chopingasa | .form-horizontal |
Zolondera kumanzere, zolowera kumanja pamzere womwewo ngati zowongolera |
Zosasintha zanzeru komanso zopepuka popanda chizindikiro chowonjezera.
- <form class = "chabwino" >
- <label> Dzina lalemba </ label>
- <input type = "text" class = "span3" placeholder = " Type something..." >
- <span class = "help-block" > Maupangiri othandizira apa. </span>
- <label class = "checkbox" >
- <input type = "checkbox" > Ndifufuzeni
- </ label>
- <button type = "submit" class = "btn" > Tumizani </ batani>
- </ fomu>
Onjezani .form-searchku fomu ndi .search-queryku input.
- <form class = "well form-search" >
- <input type = "text" class = "input-medium search-query" >
- <button type = "submit" class = "btn" > Sakani </ batani>
- </ fomu>
Onjezani .form-inlinekuwongolera koyima ndi masitayilo a mawonekedwe.
- <form class = "well form-inline" >
- <input type = "text" class = "input-small" placeholder = "Imelo" >
- <input type = "password" class = "input-small" placeholder = "Password" >
- <label class = "checkbox" >
- <input type = "checkbox" > Ndikumbukireni
- </ label>
- <button type = "submit" class = "btn" > Lowani </ batani>
- </ fomu>
Zowonetsedwa kumanja ndi maulamuliro onse amafomu omwe timathandizira. Nawu mndandanda wa zipolopolo:
Potengera mawonekedwe achitsanzo omwe ali pamwambapa, nayi chizindikiro cholumikizidwa ndi gulu loyamba lolowetsa ndi lowongolera. The .control-group, .control-label, ndi .controlsmakalasi onse amafunikira pamakongoletsedwe.
- <form class = "form-horizontal" >
- <munda>
- <legend> Zolemba za nthano </legend>
- <div class = "control-group" >
- <label class = "control-label" for = "input01" > Kulowetsa mawu </label>
- <div class = "controls" >
- <input type = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Mawu othandizira </p>
- </div>
- </div>
- </fieldset>
- </ fomu>
Bootstrap imakhala ndi masitayelo azomwe amathandizidwa ndi osatsegula komanso disabledmadera. Timachotsa Webkit yokhazikika outlinendikuyika box-shadowa m'malo mwake :focus.
Zimaphatikizanso masitayelo otsimikizira zolakwa, machenjezo, ndi kupambana. Kuti mugwiritse ntchito, onjezani kalasi yolakwika pazozungulira .control-group.
- <magawo
- class = "control-group error" >
- …
- </fieldset>
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.
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.
Kuti mugwiritse ntchito zolembera zokonzeratu kapena kuwonjezera pamizere, onetsetsani kuti mwayika .add-onndi inputpamzere womwewo, popanda mipata.
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.
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.
Bootstrap imagwiritsa ntchito <i>chizindikiro pazithunzi zonse, koma alibe kalasi yamilandu-chimake choyambirira chogawana. 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.
Mungodziwiratu! Mukamagwiritsa ntchito m'mbali mwa zingwe zamalemba, monga mabatani kapena maulalo a nav, onetsetsani kuti mwasiya malo pambuyo pa <i>tagi kuti mutalikirane bwino.
Zithunzi ndizabwino, koma munthu angazigwiritsa ntchito kuti? Nawa malingaliro angapo:
Kwenikweni, kulikonse komwe mungaike <i>tag, mutha kuyika chizindikiro.
Agwiritseni ntchito m'mabatani, m'magulu a batani lazida, kusakatula, kapena zolowetsa mafomu omwe mwakonzedweratu.