Ar ben y sgaffaldiau, mae elfennau HTML sylfaenol yn cael eu steilio a'u gwella gyda dosbarthiadau estynadwy i ddarparu golwg a theimlad ffres, cyson.
Mae'r grid teipograffeg cyfan yn seiliedig ar ddau newidyn Llai yn ein ffeil variables.less: @baseFontSize
a @baseLineHeight
. Y cyntaf yw maint y ffont sylfaen a ddefnyddir drwyddo draw a'r ail yw uchder y llinell sylfaen.
Rydyn ni'n defnyddio'r newidynnau hynny, a rhywfaint o fathemateg, i greu'r ymylon, padinau, ac uchder llinell o'n holl fath a mwy.
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 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.
Elfen | Defnydd | Dewisol |
---|---|---|
<strong> |
Am bwysleisio pyt o destun gyda phwysig | Dim |
<em> |
Am bwysleisio pyt o destun gyda straen | Dim |
<abbr> |
Yn lapio byrfoddau ac acronymau i ddangos y fersiwn estynedig ar hofran | Cynhwyswch ddewisol title ar gyfer testun estynedig |
<address> |
Am wybodaeth gyswllt ar gyfer ei hynafiad agosaf neu'r corff cyfan o waith | Cadw fformatio trwy orffen pob llinell gyda<br> |
Fusce dapibus , tellus ac cursus comodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus . Maecenas faucibus mollis interdum. Nulla vitae elit libero, pharetra augue.
Nodyn: Mae croeso i chi ddefnyddio <b>
ac <i>
yn HTML5, ond mae eu defnydd wedi newid ychydig. <b>
i fod i amlygu geiriau neu ymadroddion heb gyfleu pwysigrwydd ychwanegol tra ei fod <i>
yn bennaf ar gyfer llais, termau technegol, ac ati.
Dyma ddwy enghraifft o sut y <address>
gellir defnyddio'r tag:
Mae talfyriadau wedi'u steilio â thestun priflythrennau ac ymyl gwaelod dotiog ysgafn. Mae ganddyn nhw hefyd gyrchwr cymorth ar hofran felly mae gan ddefnyddwyr arwydd ychwanegol y bydd rhywbeth yn cael ei ddangos ar hofran.
HTML yw'r peth gorau ers bara wedi'i sleisio.
Talfyriad o'r gair priodoledd yw attr .
Elfen | Defnydd | Dewisol |
---|---|---|
<blockquote> |
Elfen lefel bloc ar gyfer dyfynnu cynnwys o ffynhonnell arall | Ychwanegu .pull-left a .pull-right dosbarthiadau ar gyfer opsiynau arnofio |
<small> |
Elfen ddewisol ar gyfer ychwanegu dyfyniad sy'n wynebu'r defnyddiwr, fel arfer awdur gyda theitl y gwaith | Rhowch y <cite> o gwmpas y teitl neu enw'r ffynhonnell |
I gynnwys blockquote, amlapiwch <blockquote>
unrhyw HTML fel y dyfyniad. Ar gyfer dyfynbrisiau syth rydym yn argymell a <p>
.
Cynhwyswch elfen ddewisol <small>
i ddyfynnu'ch ffynhonnell a byddwch yn cael 'em dash' —
o'i blaen at ddibenion steilio.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cyfanrif posuere erat a ante venenatis. </p>
- <small> Rhywun enwog </small>
- </blockquote>
Mae dyfynbrisiau bloc diofyn wedi'u steilio fel a ganlyn:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cyfanrif posuere erat a ante venenatis.
Rhywun enwog yn Corff o waith
I arnofio eich blockquote i'r dde, ychwanegwch class="pull-right"
:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cyfanrif posuere erat a ante venenatis.
Rhywun enwog yn Corff o waith
<ul>
<ul class="unstyled">
<ol>
<dl>
Lapiwch bytiau mewnol o god gyda <code>
.
- Er enghraifft , dylai adran < code> </ code > gael ei lapio mewn llinell .
Defnyddiwch <pre>
ar gyfer llinellau cod lluosog. Byddwch yn siwr i droi unrhyw garets i mewn i'w cymeriadau unicode ar gyfer rendro priodol.
<p>Testun enghreifftiol yma...</p>
- <pre>
- <p>Testun enghreifftiol yma...</p>
- </pre>
Nodyn: Gwnewch yn siŵr eich bod chi'n cadw'r cod o fewn <pre>
tagiau mor agos i'r chwith â phosib; bydd yn rendro pob tab.
Cymerwch yr un <pre>
elfen ac ychwanegwch ddau ddosbarth dewisol ar gyfer rendro uwch.
- <p> Testun enghreifftiol yma... </p>
- < pre class = " prettyprint
- llieiniau" >
- <p>Testun enghreifftiol yma...</p>
- </pre>
Dadlwythwch google-code-prettify a gweld y readme ar gyfer sut i ddefnyddio.
Tag | Disgrifiad |
---|---|
<table> |
Elfen lapio ar gyfer arddangos data mewn fformat tabl |
<thead> |
Elfen cynhwysydd ar gyfer rhesi pennyn tabl ( <tr> ) i labelu colofnau tabl |
<tbody> |
Elfen gynhwysydd ar gyfer rhesi bwrdd ( <tr> ) yng nghorff y bwrdd |
<tr> |
Elfen cynhwysydd ar gyfer set o gelloedd bwrdd ( <td> neu <th> ) sy'n ymddangos ar un rhes |
<td> |
Cell tabl rhagosodedig |
<th> |
Cell bwrdd arbennig ar gyfer labeli colofn (neu res, yn dibynnu ar gwmpas a lleoliad) Rhaid ei defnyddio o fewn a <thead> |
<caption> |
Disgrifiad neu grynodeb o'r hyn sydd yn y tabl, sy'n arbennig o ddefnyddiol i ddarllenwyr sgrin |
- <bwrdd>
- <pen>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
Enw | Dosbarth | Disgrifiad |
---|---|---|
Diofyn | Dim | Dim arddulliau, dim ond colofnau a rhesi |
Syml | .table |
Dim ond llinellau llorweddol rhwng rhesi |
Ffiniog | .table-bordered |
Yn talgrynnu corneli ac yn ychwanegu border allanol |
Sebra-streipen | .table-striped |
Yn ychwanegu lliw cefndir llwyd golau at resi od (1, 3, 5, ac ati) |
Cyddwyso | .table-condensed |
Yn torri padin fertigol yn ei hanner, o 8px i 4px, o fewn td pob th elfen |
Mae tablau'n cael eu steilio'n awtomatig gyda dim ond ychydig o ffiniau i sicrhau darllenadwyedd a chynnal strwythur. Gyda 2.0, .table
mae angen y dosbarth.
- < table class = " bwrdd " >
- …
- </table>
# | Enw cyntaf | Enw olaf | Iaith |
---|---|---|---|
1 | Marc | Otto | CSS |
2 | Jacob | Thornton | Javascript |
3 | Stu | Dent | HTML |
Mynnwch ychydig o ffansi gyda'ch byrddau trwy ychwanegu stribedi sebra - ychwanegwch y .table-striped
dosbarth.
Nodyn: Mae tablau sbrintiedig yn defnyddio'r :nth-child
dewisydd CSS ac nid yw ar gael yn IE7-IE8.
- <table class = "table-striped" >
- …
- </table>
# | Enw cyntaf | Enw olaf | Iaith |
---|---|---|---|
1 | Marc | Otto | CSS |
2 | Jacob | Thornton | Javascript |
3 | Stu | Dent | HTML |
Ychwanegu borderi o amgylch y bwrdd cyfan a chorneli crwn at ddibenion esthetig.
- <table class = "table-bordered" >
- …
- </table>
# | Enw cyntaf | Enw olaf | Iaith |
---|---|---|---|
1 | Mark Otto | CSS | |
2 | Jacob | Thornton | Javascript |
3 | Stu | Dent | |
3 | Brosef | Stalin | HTML |
Gwnewch eich byrddau'n fwy cryno trwy ychwanegu'r .table-condensed
dosbarth i dorri padin cell bwrdd yn ei hanner (o 8px i 4px).
- <table class = "table-condensed" >
- …
- </table>
# | Enw cyntaf | Enw olaf | Iaith |
---|---|---|---|
1 | Marc | Otto | CSS |
2 | Jacob | Thornton | Javascript |
3 | Stu | Dent | HTML |
Mae croeso i chi gyfuno unrhyw un o'r dosbarthiadau bwrdd i gael golwg wahanol trwy ddefnyddio unrhyw un o'r dosbarthiadau sydd ar gael.
- <table class = "table-striped table-bordered table-condensed" >
- ...
- </table>
# | Enw cyntaf | Enw olaf | Iaith |
---|---|---|---|
1 | Marc | Otto | CSS |
2 | Jacob | Thornton | Javascript |
3 | Stu | Dent | HTML |
4 | Brosef | Stalin | HTML |
Y rhan orau am ffurflenni yn Bootstrap yw bod eich holl fewnbynnau a rheolyddion yn edrych yn wych ni waeth sut rydych chi'n eu hadeiladu yn eich marcio. Nid oes angen HTML diangen, ond rydym yn darparu'r patrymau ar gyfer y rhai sydd ei angen.
Daw cynlluniau mwy cymhleth gyda dosbarthiadau cryno a graddadwy ar gyfer steilio hawdd a rhwymo digwyddiadau, felly rydych chi'n cael eich gorchuddio ar bob cam.
Daw Bootstrap gyda chefnogaeth ar gyfer pedwar math o gynlluniau ffurflen:
Mae gwahanol fathau o gynlluniau ffurflenni yn gofyn am rai newidiadau i'r marcio, ond mae'r rheolaethau eu hunain yn aros ac yn ymddwyn yr un fath.
Mae ffurflenni Bootstrap yn cynnwys arddulliau ar gyfer yr holl reolaethau ffurf sylfaenol fel mewnbwn, ardal testun, a dewis y byddech chi'n ei ddisgwyl. Ond mae hefyd yn dod â nifer o gydrannau arfer fel mewnbynnau wedi'u hatodi ac wedi'u rhagpendodi a chefnogaeth ar gyfer rhestrau o flychau ticio.
Mae gwladwriaethau fel gwall, rhybudd a llwyddiant wedi'u cynnwys ar gyfer pob math o reolaeth ffurflen. Cynhwysir hefyd arddulliau ar gyfer rheolyddion anabl.
Mae Bootstrap yn darparu marcio ac arddulliau syml ar gyfer pedair arddull o ffurfiau gwe cyffredin.
Enw | Dosbarth | Disgrifiad |
---|---|---|
Fertigol (diofyn) | .form-vertical (ddim ei angen) |
Labeli wedi'u pentyrru, wedi'u halinio i'r chwith dros reolaethau |
Mewn llinell | .form-inline |
Label wedi'i alinio i'r chwith a rheolyddion bloc mewnol ar gyfer arddull gryno |
Chwiliwch | .form-search |
Mewnbwn testun allgrwn ar gyfer esthetig chwilio nodweddiadol |
Llorweddol | .form-horizontal |
Arnofio i'r chwith, labeli wedi'u halinio i'r dde ar yr un llinell â rheolyddion |
Gyda v2.0, mae gennym ni ragosodiadau ysgafnach a doethach ar gyfer arddulliau ffurf. Dim marcio ychwanegol, dim ond ffurf rheolaethau.
Gan adlewyrchu arddulliau WebKit rhagosodedig, ychwanegwch .form-search
ar gyfer meysydd chwilio crwn ychwanegol.
Mae mewnbynnau ar lefel bloc i ddechrau. Ar gyfer .form-inline
a .form-horizontal
, rydym yn defnyddio bloc mewnol.
Ar y chwith mae'r holl reolaethau ffurflen rhagosodedig rydyn ni'n eu cefnogi. Dyma'r rhestr fwledi:
Hyd at v1.4, roedd arddulliau ffurf rhagosodedig Bootstrap yn defnyddio'r gosodiad llorweddol. Gyda Bootstrap 2, gwnaethom ddileu'r cyfyngiad hwnnw i gael rhagosodiadau callach, mwy graddadwy ar gyfer unrhyw ffurf.
disabled
Mae Bootstrap yn cynnwys arddulliau ar gyfer ffocws a gwladwriaethau a gefnogir gan borwr . Rydym yn dileu'r Webkit rhagosodedig outline
ac yn cymhwyso box-shadow
yn ei le ar gyfer :focus
.
Mae hefyd yn cynnwys arddulliau dilysu ar gyfer gwallau, rhybuddion a llwyddiant. I'w ddefnyddio, ychwanegwch y dosbarth gwall i'r .control-group
.
- < set maes
- class = "gwall grŵp rheoli" >
- …
- </fieldset>
Mae grwpiau mewnbwn - gyda thestun wedi'i atodi neu wedi'i ragpendicynnu - yn darparu ffordd hawdd o roi mwy o gyd-destun i'ch mewnbynnau. Mae enghreifftiau gwych yn cynnwys yr arwydd @ ar gyfer enwau defnyddwyr Twitter neu $ ar gyfer cyllid.
Hyd at v1.4, roedd angen marcio ychwanegol ar Bootstrap o amgylch blychau ticio a radios i'w pentyrru. Nawr, mae'n fater syml o ailadrodd yr <label class="checkbox">
hyn sy'n lapio'r <input type="checkbox">
.
Cefnogir blychau ticio mewnol a radios hefyd. Dim ond ychwanegu .inline
at unrhyw .checkbox
neu .radio
ac rydych chi wedi gorffen.
I ddefnyddio rhagpend neu atodi mewnbynnau ar ffurf alin, gofalwch eich bod yn gosod y .add-on
ac input
ar yr un llinell, heb fylchau.
I ychwanegu testun cymorth ar gyfer eich mewnbynnau ffurflen, cynhwyswch destun cymorth mewnol gyda <span class="help-inline">
neu floc testun cymorth gydag <p class="help-block">
ar ôl yr elfen fewnbwn.
:after
. Yn y dogfennau, rydyn ni'n dangos lliw cefndir coch golau ar hofran i dynnu sylw at faint yr eicon.
Yn lle gwneud pob eicon yn gais ychwanegol, rydym wedi eu crynhoi yn sprite - criw o ddelweddau mewn un ffeil sy'n defnyddio CSS i osod y delweddau gyda background-position
. Dyma'r un dull rydyn ni'n ei ddefnyddio ar Twitter.com ac mae wedi gweithio'n dda i ni.
Mae'r holl ddosbarthiadau eiconau wedi'u rhagddodi â .icon-
bylchau enwau a chwmpasu priodol, yn debyg iawn i'n cydrannau eraill. Bydd hyn yn helpu i osgoi gwrthdaro ag offer eraill.
Mae Glyphicons wedi caniatáu i ni ddefnyddio set Halflings yn ein pecyn cymorth ffynhonnell agored cyn belled â'n bod yn darparu dolen a chlod yma yn y dogfennau. Ystyriwch wneud yr un peth yn eich prosiectau.
Gyda v2.0.0, rydym wedi dewis defnyddio <i>
tag ar gyfer ein holl eiconau, ond nid oes ganddynt ddosbarth achos - dim ond rhagddodiad a rennir. I'w ddefnyddio, rhowch y cod canlynol bron yn unrhyw le:
- <i class = "chwiliad eicon" ></i>
Mae yna hefyd arddulliau ar gael ar gyfer eiconau gwrthdro (gwyn), wedi'u paratoi gydag un dosbarth ychwanegol:
- <i class = "icon-search icon-white" ></i>
Mae yna 120 o ddosbarthiadau i ddewis ohonynt ar gyfer eich eiconau. Ychwanegwch <i>
dag gyda'r dosbarthiadau cywir ac rydych chi'n barod. Gallwch ddod o hyd i'r rhestr lawn yn sprites.less neu yma yn y ddogfen hon.
Mae eiconau'n wych, ond ble byddai rhywun yn eu defnyddio? Dyma ychydig o syniadau:
Yn y bôn, unrhyw le y gallwch chi roi <i>
tag, gallwch chi roi eicon.
Defnyddiwch nhw mewn botymau, grwpiau botwm ar gyfer bar offer, llywio, neu fewnbynnau ffurf wedi'u rhagpendodi.