Juu ya kiunzi, vipengele vya msingi vya HTML vimeundwa na kuimarishwa kwa madarasa ya kupanuliwa ili kutoa mwonekano na hisia mpya, thabiti.
Gridi nzima ya uchapaji inategemea vigezo viwili vya Chini katika faili zetu za vigezo.less: @baseFontSize
na @baseLineHeight
. Ya kwanza ni saizi ya msingi ya fonti inayotumika kote na ya pili ni urefu wa mstari wa msingi.
Tunatumia vigeu hivyo, na baadhi ya hesabu, ili kuunda kando, pedi, na urefu wa mstari wa aina zetu zote na zaidi.
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 dalali. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
Kipengele | Matumizi | Hiari |
---|---|---|
<strong> |
Kwa kusisitiza kijisehemu cha maandishi na muhimu | Hakuna |
<em> |
Kwa kusisitiza kijisehemu cha maandishi na mkazo | Hakuna |
<abbr> |
Hufunga vifupisho na vifupisho ili kuonyesha toleo lililopanuliwa kwenye kielelezo | Jumuisha hiari title kwa maandishi yaliyopanuliwa |
<address> |
Kwa habari ya mawasiliano kwa babu yake wa karibu au sehemu nzima ya kazi | Hifadhi umbizo kwa kumalizia mistari yote kwa<br> |
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.
Kumbuka: Jisikie huru kutumia <b>
na <i>
katika HTML5, lakini matumizi yao yamebadilika kidogo. <b>
inakusudiwa kuangazia maneno au vifungu vya maneno bila kuwasilisha umuhimu wa ziada huku <i>
zaidi ikiwa ni ya sauti, maneno ya kiufundi, n.k.
Hapa kuna mifano miwili ya jinsi <address>
lebo inaweza kutumika:
Vifupisho vimeundwa kwa herufi kubwa na mpaka wa chini wenye vitone. Pia zina kielekezi cha usaidizi kwenye kielelezo ili watumiaji wawe na dalili ya ziada kwamba kuna kitu kitaonyeshwa kwenye kielelezo.
HTML ndio kitu bora zaidi tangu mkate uliokatwa.
Kifupi cha neno sifa ni attr .
Kipengele | Matumizi | Hiari |
---|---|---|
<blockquote> |
Kipengele cha kiwango cha kuzuia kwa ajili ya kunukuu maudhui kutoka chanzo kingine | Ongeza .pull-left na .pull-right madarasa kwa chaguzi zilizoelea |
<small> |
Kipengele cha hiari cha kuongeza dondoo linalomlenga mtumiaji, kwa kawaida mwandishi aliye na jina la kazi | Weka <cite> kuzunguka kichwa au jina la chanzo |
Ili kujumuisha nukuu ya kuzuia, funika HTML<blockquote>
yoyote kama nukuu. Kwa nukuu moja kwa moja tunapendekeza a .<p>
Jumuisha kipengee cha hiari <small>
ili kutaja chanzo chako na utapata kistari cha em —
kabla yake kwa madhumuni ya kupiga maridadi.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nambari kamili imefikia kiwango cha awali. </ p>
- <small> Mtu maarufu </small>
- </blockquote>
Vizuizi chaguo-msingi vimeundwa kama vile:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nambari kamili imefikia kiwango cha awali.
Mtu maarufu katika Mwili wa kazi
Ili kuelea blockquote yako kulia, ongeza class="pull-right"
:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nambari kamili imefikia kiwango cha awali.
Mtu maarufu katika Mwili wa kazi
<ul>
<ul class="unstyled">
<ol>
<dl>
Funga vijisehemu vya ndani vya msimbo kwa <code>
.
- Kwa mfano , <code> sehemu </ code > inapaswa kufungwa kama inline .
Tumia <pre>
kwa mistari mingi ya msimbo. Hakikisha umegeuza matunzo yoyote kuwa vibambo vyao vya unicode kwa uwasilishaji unaofaa.
<p>Mfano wa maandishi hapa...</p>
- <kabla>
- <p>Mfano wa maandishi hapa...</p>
- </ pre>
Kumbuka: Hakikisha umeweka msimbo ndani ya <pre>
vitambulisho karibu na kushoto iwezekanavyo; itatoa tabo zote.
Chukua <pre>
kipengele sawa na uongeze madarasa mawili ya hiari kwa uwasilishaji ulioboreshwa.
- <p> Mfano wa maandishi hapa... </p>
- <pre class = "prettyprint
- linenums" >
- <p>Mfano wa maandishi hapa...</p>
- </ pre>
Pakua google-code-prettify na utazame usomaji wa jinsi ya kutumia.
Lebo | Maelezo |
---|---|
<table> |
Kipengele cha kufunga kwa ajili ya kuonyesha data katika umbizo la jedwali |
<thead> |
Kipengele cha chombo cha safu mlalo za vichwa vya jedwali ( <tr> ) kuweka lebo kwenye safu wima za jedwali |
<tbody> |
Kipengele cha chombo cha safu za jedwali ( <tr> ) kwenye mwili wa jedwali |
<tr> |
Kipengele cha chombo cha seti ya seli za jedwali ( <td> au <th> ) zinazoonekana kwenye safu mlalo moja |
<td> |
Seli chaguomsingi ya jedwali |
<th> |
Seli maalum za jedwali kwa safu wima (au safu mlalo, kulingana na upeo na uwekaji) lebo Lazima zitumike ndani ya <thead> |
<caption> |
Maelezo au muhtasari wa kile ambacho jedwali inashikilia, muhimu sana kwa visoma skrini |
- <meza>
- <kichwa>
- <tr>
- <th> … </th>
- <th> … </th>
- </ tr>
- </ kichwa>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </ tr>
- </tbody>
- </ meza>
Jina | Darasa | Maelezo |
---|---|---|
Chaguomsingi | Hakuna | Hakuna mitindo, safu wima na safu |
Msingi | .table |
Mistari ya mlalo pekee kati ya safu |
Imepakana | .table-bordered |
Huzungusha pembe na kuongeza mpaka wa nje |
Zebra-stripe | .table-striped |
Huongeza mandharinyuma ya kijivu hafifu kwenye safu mlalo zisizo za kawaida (1, 3, 5, n.k) |
Imefupishwa | .table-condensed |
Hukata pedi za wima katikati, kutoka 8px hadi 4px, ndani ya yote td na th vipengele |
Jedwali hupangwa kiotomatiki na mipaka michache tu ili kuhakikisha usomaji na kudumisha muundo. Na 2.0, .table
darasa linahitajika.
- <table class = "meza" >
- …
- </ meza>
# | Jina la kwanza | Jina la familia | Lugha |
---|---|---|---|
1 | Weka alama | Otto | CSS |
2 | Yakobo | Thornton | Javascript |
3 | Stu | Kinyesi | HTML |
Pata kupendeza kidogo na meza zako kwa kuongeza zebra-striping-ongeza tu .table-striped
darasa.
Kumbuka: Majedwali yaliyochapishwa hutumia kiteuzi cha :nth-child
CSS na haipatikani katika IE7-IE8.
- <table class = "table table-striped" >
- …
- </ meza>
# | Jina la kwanza | Jina la familia | Lugha |
---|---|---|---|
1 | Weka alama | Otto | CSS |
2 | Yakobo | Thornton | Javascript |
3 | Stu | Kinyesi | HTML |
Ongeza mipaka kuzunguka jedwali zima na pembe za mviringo kwa madhumuni ya urembo.
- <table class = "table-bordered" >
- …
- </ meza>
# | Jina la kwanza | Jina la familia | Lugha |
---|---|---|---|
1 | Mark Otto | CSS | |
2 | Yakobo | Thornton | Javascript |
3 | Stu | Kinyesi | |
3 | Brosef | Stalin | HTML |
Fanya majedwali yako yashikamane zaidi kwa kuongeza .table-condensed
darasa ili kukata pedi za seli za jedwali kwa nusu (kutoka 8px hadi 4px).
- <table class = "table table-condensed" >
- …
- </ meza>
# | Jina la kwanza | Jina la familia | Lugha |
---|---|---|---|
1 | Weka alama | Otto | CSS |
2 | Yakobo | Thornton | Javascript |
3 | Stu | Kinyesi | HTML |
Jisikie huru kuchanganya darasa zozote za jedwali ili kufikia mwonekano tofauti kwa kutumia aina zozote zinazopatikana.
- <table class = "table-striped table-bordered table-condensed" >
- ...
- </ meza>
# | Jina la kwanza | Jina la familia | Lugha |
---|---|---|---|
1 | Weka alama | Otto | CSS |
2 | Yakobo | Thornton | Javascript |
3 | Stu | Kinyesi | HTML |
4 | Brosef | Stalin | HTML |
Sehemu bora zaidi kuhusu fomu katika Bootstrap ni kwamba pembejeo na vidhibiti vyako vyote vinaonekana vyema bila kujali jinsi unavyoviunda kwenye lebo yako. Hakuna HTML ya ziada inayohitajika, lakini tunatoa muundo kwa wale wanaohitaji.
Mipangilio changamano zaidi huja na madarasa mafupi na yanayowezekana kwa urahisi wa kuweka mitindo na kufunga matukio, kwa hivyo unahudumiwa katika kila hatua.
Bootstrap inakuja na usaidizi wa aina nne za muundo wa fomu:
Aina tofauti za mpangilio wa fomu zinahitaji mabadiliko fulani ili kuweka alama, lakini vidhibiti vyenyewe hubaki na hufanya kazi sawa.
Fomu za Bootstrap ni pamoja na mitindo ya vidhibiti vyote vya fomu msingi kama vile ingizo, eneo la maandishi, na uchague unavyotarajia. Lakini pia inakuja na idadi ya vipengee maalum kama pembejeo zilizoambatishwa na zilizotanguliwa na usaidizi wa orodha za visanduku vya kuteua.
Mataifa kama makosa, onyo na mafanikio yanajumuishwa kwa kila aina ya udhibiti wa fomu. Pia imejumuishwa ni mitindo ya vidhibiti vilivyozimwa.
Bootstrap hutoa ghafi rahisi na mitindo kwa mitindo minne ya fomu za kawaida za wavuti.
Jina | Darasa | Maelezo |
---|---|---|
Wima (chaguo-msingi) | .form-vertical (haihitajiki) |
Lebo zilizopangwa kwa rafu, zilizopangiliwa kushoto juu ya vidhibiti |
Katika mstari | .form-inline |
Lebo zilizopangiliwa kushoto na vidhibiti vya kuzuia ndani ya mstari kwa mtindo wa kushikana |
Tafuta | .form-search |
Ingizo la maandishi yenye mduara wa ziada kwa urembo wa kawaida wa utafutaji |
Mlalo | .form-horizontal |
Elekea kushoto, lebo zilizopangiliwa kulia kwenye mstari sawa na vidhibiti |
Kwa v2.0, tuna chaguo-msingi nyepesi na nadhifu zaidi za mitindo ya umbo. Hakuna alama za ziada, tengeneza vidhibiti tu.
Inaonyesha mitindo chaguomsingi ya WebKit, ongeza tu .form-search
kwa uga za ziada za utafutaji zenye mduara.
Ingizo ni kiwango cha kuzuia kuanza. Kwa .form-inline
na .form-horizontal
, tunatumia inline-block.
Upande wa kushoto ni vidhibiti vyote chaguomsingi vya fomu tunazotumia. Hii ndio orodha iliyo na vitone:
Hadi v1.4, mitindo chaguomsingi ya Bootstrap ilitumia mpangilio mlalo. Kwa Bootstrap 2, tuliondoa kikwazo hicho ili kuwa na chaguo-msingi nadhifu, zinazoweza kupunguzwa zaidi za aina yoyote.
Bootstrap huangazia mitindo kwa umakini na hali zinazotumika na kivinjari disabled
. Tunaondoa Kit chaguomsingi cha Wavuti outline
na kutumia a box-shadow
mahali pake kwa :focus
.
Pia inajumuisha mitindo ya uthibitishaji kwa makosa, maonyo na mafanikio. Ili kutumia, ongeza darasa la makosa kwenye .control-group
.
- <seti ya uwanja
- class = "control-group error" >
- …
- </fieldset>
Vikundi vya ingizo—pamoja na maandishi yaliyoongezwa au yaliyotanguliwa—hutoa njia rahisi ya kutoa muktadha zaidi wa ingizo lako. Mifano mizuri ni pamoja na ishara ya @ kwa majina ya watumiaji ya Twitter au $ kwa ajili ya fedha.
Hadi v1.4, Bootstrap ilihitaji alama ya ziada karibu na visanduku vya kuteua na redio ili kuvipanga. Sasa, ni jambo rahisi kurudia <label class="checkbox">
ile inayofunika <input type="checkbox">
.
Visanduku vya kuteua vya ndani na redio pia vinatumika. Ongeza tu .inline
kwa yoyote .checkbox
au .radio
na umemaliza.
Ili kutumia vifaa vya kutayarisha au kuambatanisha katika fomu iliyo ndani ya mstari, hakikisha kuwa umeweka .add-on
na input
kwenye mstari huo huo, bila nafasi.
Ili kuongeza maandishi ya usaidizi kwa ingizo lako la fomu, jumuisha maandishi ya usaidizi ya ndani <span class="help-inline">
au maandishi ya usaidizi <p class="help-block">
baada ya kipengee cha kuingiza.
:after
. Katika hati, tunaonyesha rangi nyekundu isiyokolea kwenye sehemu ya juu ili kuangazia ukubwa wa ikoni.
Badala ya kufanya kila aikoni kuwa ombi la ziada, tumezikusanya katika sprite—mlundo wa picha katika faili moja inayotumia CSS kuweka picha kwenye background-position
. Hii ndiyo njia ile ile tunayotumia kwenye Twitter.com na imetufanyia kazi vizuri.
Madarasa yote ya aikoni yamewekwa awali .icon-
kwa nafasi sahihi ya majina na upeo, kama vile vipengele vyetu vingine. Hii itasaidia kuzuia migogoro na zana zingine.
Glyphicons imeturuhusu kutumia Halflings iliyowekwa katika zana huria ya zana mradi tu tutoe kiungo na mkopo hapa katika hati. Tafadhali zingatia kufanya vivyo hivyo katika miradi yako.
Kwa v2.0.0, tumechagua kutumia <i>
lebo kwa aikoni zetu zote, lakini hazina aina ya kesi—kiambishi awali tu kilichoshirikiwa. Ili kutumia, weka nambari ifuatayo karibu popote:
- <i class = "icon-search" ></i>
Pia kuna mitindo inayopatikana kwa ikoni zilizogeuzwa (nyeupe), zilizotayarishwa na darasa moja la ziada:
- <i class = "ikoni-ya utafutaji ikoni-nyeupe" ></i>
Kuna madarasa 120 ya kuchagua kutoka kwa ikoni zako. Ongeza tu <i>
lebo iliyo na madarasa sahihi na uko tayari. Unaweza kupata orodha kamili katika sprites.less au papa hapa katika hati hii.
Icons ni nzuri, lakini mtu angezitumia wapi? Hapa kuna mawazo machache:
Kimsingi, mahali popote unaweza kuweka <i>
lebo, unaweza kuweka ikoni.
Zitumie katika vitufe, vikundi vya vitufe kwa upau wa vidhibiti, usogezaji, au ingizo za fomu zilizotangulizwa.