Anuas ar an scafall, déantar buneilimintí HTML a stíliú agus a fheabhsú le ranganna sínte chun cuma agus mothú úr comhsheasmhach a sholáthar.
Tá an eangach clóghrafaíoch ar fad bunaithe ar dhá athróg Lúide inár gcomhad athróg.less: @baseFontSizeagus @baseLineHeight. Is é an chéad cheann an clómhéid a úsáidtear tríd síos agus is é an dara ceann an bonnlíne airde.
Bainimid úsáid as na hathróga sin, agus roinnt matamaitice, chun na himill, na stuáil, agus na hairde líne de gach cineál againn agus níos mó a chruthú.
Nullam quis risus eget urna mollis ornare vel eu leo. Le sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Déan alt seasamh amach trí chur leis .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor dolor. Duis mollis, est non commodo luctus.
| Eilimint | Úsáid | Roghnach |
|---|---|---|
<strong> |
Chun béim a chur ar phíosa téacs le tábhachtach | Dada |
<em> |
Chun béim a chur ar phíosa téacs le strus | Dada |
<abbr> |
Fillteann giorrúcháin agus acrainmneacha chun an leagan méadaithe ar ainlíon a thaispeáint | Cuir tréith roghnach san áireamh .initialisman rang le haghaidh giorrúcháin i gcás uachtair. |
<address> |
Chun eolas teagmhála a fháil dá sinsear is gaire nó don chorpas iomlán oibre | Formáidiú a chaomhnú trí gach líne a chríochnú le<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.
Nóta: Thig leat a úsáid <b>agus <i>i HTML5, ach tá a n-úsáid athraithe beagán. <b>Tá sé i gceist focail nó frásaí a aibhsiú gan tábhacht bhreise a chur in iúl agus <i>é don chuid is mó do ghuthú, téarmaí teicniúla, etc.
Seo dhá shampla de conas is féidir an <address>chlib a úsáid:
Tá teorainn íochtair poncaithe éadrom agus cúrsóir cabhrach ar ainlíon ag giorrúcháin a bhfuil titletréith acu. Tugann sé seo le fios d’úsáideoirí go dtaispeánfar rud éigin ar ainlíon.
Cuir an initialismrang le giorrúchán chun comhchuibheas clóghrafach a mhéadú trí mhéid téacs beagán níos lú a thabhairt dó.
Is é HTML an rud is fearr ó arán slisnithe.
Giorrúchán den tréith focal is ea attr .
| Eilimint | Úsáid | Roghnach |
|---|---|---|
<blockquote> |
Eilimint blocleibhéil chun ábhar a lua ó fhoinse eile | Cuir .pull-leftagus .pull-rightranganna le haghaidh roghanna floated |
<small> |
Gné roghnach chun lua atá dírithe ar an úsáideoir a chur leis, go hiondúil údar le teideal an tsaothair | Cuir an <cite>timpeall teideal nó ainm na foinse |
Chun blockquote a chur san áireamh, cuir <blockquote>thart ar aon HTML mar an luachan. Le haghaidh Sleachta díreach molaimid a <p>.
Cuir eilimint roghnach san áireamh <small>chun do fhoinse a lua agus gheobhaidh tú em dash —roimh é chun críocha stílithe.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tá slánuimhir posuere agus ante venenatis. </p>
- <small> Duine cáiliúil </small>
- </blockquote>
Is mar seo a leanas a dhéantar na bloc-quota réamhshocraithe:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tá slánuimhir posuere agus ante venenatis.
Duine a bhfuil cáil air in Body of work
Chun do bhlocquote a shnámhadh ar dheis, cuir class="pull-right":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tá slánuimhir posuere agus ante venenatis.
Duine a bhfuil cáil air in Body of work
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Cinnirí suas! Teascóidh liostaí tuairisce cothrománacha téarmaí atá ró-fhada le feistiú sa cholún ar chlé text-overflow. I bpoirt amhairc níos cúinge, athróidh siad go dtí an leagan amach réamhshocraithe cruachta.
Wrap sleachta inlíne den chód le <code>.
- Mar shampla , ba cheart alt <code > </ code > a fhilleadh mar inlíne .
Úsáid <pre>le haghaidh línte iolracha de chód. Bí cinnte éalú ó aon lúibíní uillinne sa chód le haghaidh rindreála cuí.
<p>Téacs samplach anseo...</p>
- <réamh>
- <p>téacs samplach anseo...</p>
- </pre>
Nóta: Bí cinnte cód a choinneáil laistigh de <pre>chlibeanna chomh gar don taobh clé agus is féidir; déanfaidh sé gach tabs.
Is féidir leat an rang a chur leis go roghnach .pre-scrollablea shocróidh uasairde 350px agus a sholáthróidh scrollbharra y-ais.
Glac an <pre>eilimint chéanna agus cuir dhá rang roghnacha le haghaidh rindreála feabhsaithe.
- <p> Téacs samplach anseo... </p>
- < pre class = " prettyprint
- línéadaigh" >
- <p>téacs samplach anseo...</p>
- </pre>
Íoslódáil google-code-prettify agus féach ar an readme le haghaidh conas é a úsáid.
| Chlib | Cur síos |
|---|---|
<table> |
Eilimint fillte chun sonraí a thaispeáint i bhformáid tábla |
<thead> |
Eilimint coimeádán le haghaidh sraitheanna ceanntásca tábla ( <tr>) chun colúin tábla a lipéadú |
<tbody> |
Eilimint coimeádán le haghaidh sraitheanna boird ( <tr>) i gcorp an tábla |
<tr> |
Eilimint coimeádán le haghaidh sraith de chealla tábla ( <td>nó <th>) atá le feiceáil ar ró amháin |
<td> |
Cill tábla réamhshocraithe |
<th> |
Cill tábla speisialta do lipéid cholúin (nó ró, ag brath ar raon feidhme agus socrúcháin) Ní mór é a úsáid laistigh de a <thead> |
<caption> |
Cur síos nó achoimre ar a bhfuil sa tábla, atá úsáideach go háirithe do léitheoirí scáileáin |
- <tábla>
- <thead>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
| Ainm | Aicme | Cur síos |
|---|---|---|
| Réamhshocrú | Dada | Uimh stíleanna, ach colúin agus sraitheanna |
| Bunúsach | .table |
Níl ach línte cothrománacha idir na sraitheanna |
| Teorann | .table-bordered |
Babhtaí coirnéil agus cuireann sé teorainn sheachtrach leis |
| Riabhach-stiall | .table-striped |
Cuireann sé dath cúlra liath éadrom le sraitheanna corr (1, 3, 5, srl) |
| Comhdhlúite | .table-condensed |
Gearrtar stuáil ingearach ina dhá leath, ó 8px go 4px, laistigh de gach tdagus theilimintí |
Stílítear táblaí go huathoibríoch agus gan ach roinnt teorainneacha acu chun inléiteacht a chinntiú agus struchtúr a chothabháil. Le 2.0, tá an .tablerang ag teastáil.
- < tábla rang = "tábla" >
- …
- </table>
| # | Ainm | Sloinne | Ainm úsáideora |
|---|---|---|---|
| 1 | Marcáil | Otto | @mdo |
| 2 | Iacób | Thornton | @saille |
| 3 | Larry | an t-éan |
Faigh beagán mhaisiúil le do tháblaí trí stiallacha séabra a chur leis - níl le déanamh ach an .table-stripedrang a chur leis.
Nóta: Úsáideann táblaí stiallacha an :nth-childroghnóir CSS agus níl sé ar fáil in IE7-IE8.
- <table class = "table table-striped" >
- …
- </table>
| # | Ainm | Sloinne | Ainm úsáideora |
|---|---|---|---|
| 1 | Marcáil | Otto | @mdo |
| 2 | Iacób | Thornton | @saille |
| 3 | Larry | an t-éan |
Cuir teorainneacha timpeall an tábla ar fad agus coirnéil chothromú chun críocha aeistéitiúla.
- <table class = "table-bordered" >
- …
- </table>
| # | Ainm | Sloinne | Ainm úsáideora |
|---|---|---|---|
| 1 | Marcáil | Otto | @mdo |
| Marcáil | Otto | @getbootstrap | |
| 2 | Iacób | Thornton | @saille |
| 3 | Larry an t-éan | ||
Déan do tháblaí níos dlúithe tríd an .table-condensedrang a chur leis an stuáil cille boird a ghearradh ina dhá leath (ó 8px go 4px).
- < tábla rang = "tábla comhdhlúite" >
- …
- </table>
| # | Ainm | Sloinne | Ainm úsáideora |
|---|---|---|---|
| 1 | Marcáil | Otto | @mdo |
| 2 | Iacób | Thornton | @saille |
| 3 | Larry an t-éan | ||
Ná bíodh drogall ort aon cheann de na ranganna boird a chur le chéile chun cuma éagsúla a bhaint amach trí úsáid a bhaint as aon cheann de na ranganna atá ar fáil.
- <table class = ""table-striped table-bordered table-comdensed" >
- ...
- </table>
| Ainm iomlán | |||
|---|---|---|---|
| # | Ainm | Sloinne | Ainm úsáideora |
| 1 | Marcáil | Otto | @mdo |
| 2 | Iacób | Thornton | @saille |
| 3 | Larry an t-éan | ||
Is é an chuid is fearr maidir le foirmeacha i Bootstrap ná go bhfuil cuma iontach ar d’ionchuir agus ar na rialuithe go léir is cuma cén chaoi a gcuireann tú le do mharcáil iad. Níl aon HTML iomarcach ag teastáil, ach soláthraímid na patrúin dóibh siúd a dteastaíonn sé uathu.
Tagann leagan amach níos casta le ranganna gonta agus inscálaithe le haghaidh stílithe éasca agus ceangailteach imeachtaí, mar sin tá tú clúdaithe ag gach céim.
Tagann Bootstrap le tacaíocht do cheithre chineál leagan amach foirmeacha:
Éilíonn cineálacha éagsúla leagan amach foirmeacha roinnt athruithe ar mharcáil, ach fanann na rialuithe féin agus iad féin a iompar mar an gcéanna.
Áirítear le foirmeacha Bootstrap stíleanna do na rialuithe bonnfhoirme go léir ar nós ionchur, textarea, agus roghnaigh a mbeifeá ag súil leis. Ach tagann sé freisin le roinnt comhpháirteanna saincheaptha ar nós ionchuir i gceangal agus prepended agus tacaíocht do liostaí de ticbhoscaí.
Áirítear le stáit cosúil le hearráid, rabhadh, agus rath le haghaidh gach cineál rialaithe foirme. Áirítear freisin stíleanna do rialuithe faoi mhíchumas.
Soláthraíonn Bootstrap marcáil shimplí agus stíleanna do cheithre stíleanna foirmeacha gréasáin coitianta.
| Ainm | Aicme | Cur síos |
|---|---|---|
| Ingearach (réamhshocraithe) | .form-vertical (ní gá) |
Lipéid cruachta, ailínithe ar chlé thar rialuithe |
| I líne | .form-inline |
Lipéad ar chlé-ailíniú agus rialtáin bloc inlíne le haghaidh stíl dhlúth |
| Cuardach | .form-search |
Ionchur téacs seach-chothromaithe le haghaidh aeistéitiúil cuardaigh tipiciúil |
| Cothrománach | .form-horizontal |
Snámh ar chlé, lipéid dheis-ailínithe ar an líne chéanna leis na rialuithe |
Mainneachtainí cliste agus éadroma gan marcáil bhreise.
- <form rang = "go maith" >
- <label> Ainm an lipéid </label>
- <input type = "text" class = "span3" placeholder = "Clóscríobh rud éigin…" >
- <span class = "help-block" > Sampla de théacs cabhrach blocleibhéil anseo. </span>
- <label class = "ticbhosca" >
- <input type = "ticbox" > Seiceáil mé amach
- </label>
- <button type = "submit" class = "btn" > Cuir isteach </button>
- </form>
Cuir .form-searchleis an bhfoirm agus .search-queryleis an input.
- <form class = "well form-search" >
- <input type = "text" class = "cheist chuardaigh-mheán-ionchuir" >
- <button type = "submit" class = "btn" > Cuardaigh </button>
- </form>
Cuir .form-inlineleis an ailíniú ingearach agus spásáil na rialuithe foirme le míne.
- <form class = "well form-inline" >
- <input type = "text" class = "input-small" placeholder = "R-phost" >
- <input type = "password" class = "input-small" placeholder = "Pasfhocal" >
- <label class = "ticbhosca" >
- <input type = "ticbhosca" > Cuimhnigh orm
- </label>
- <button type = "submit" class = "btn" > Sínigh isteach </button>
- </form>
Taispeántar ar dheis na rialuithe foirmeacha réamhshocraithe a dtacaímid leo. Seo é an liosta le hurchair:
I bhfianaise leagan amach na foirme samplach thuas, seo é an marcáil a bhaineann leis an gcéad ghrúpa ionchuir agus rialaithe. Tá an .control-group, .control-label, agus .controlsna ranganna ag teastáil le haghaidh stílithe.
- <form class = "form-horizontal" >
- <fieldset>
- <legend> Litir téacs </legend>
- <div class = "control-group" >
- <label class = "control-label" for = "input01" > Ionchur téacs </label>
- <div class = "rialuithe" >
- <input type = "text" class = "input-xlarge" id = "ionchur01" >
- <p class = "help-block" > Téacs cabhrach tacaíochta </p>
- </div>
- </div>
- </fieldset>
- </form>
Tá stíleanna ag Bootstrap le haghaidh fócasaithe agus disabledstáit atá tacaithe ag brabhsálaí. Bainimid an Webkit réamhshocraithe outlineagus cuirimid box-shadowi bhfeidhm ina áit le haghaidh :focus.
Áiríonn sé freisin stíleanna bailíochtaithe le haghaidh earráidí, rabhaidh agus rath. Chun é a úsáid, cuir an rang earráide leis an .control-group.
- < tacar páirce
- class = "earráid ghrúpa rialaithe" >
- …
- </fieldset>
Soláthraíonn grúpaí ionchuir - le téacs i gceangal nó prepended - bealach éasca chun tuilleadh comhthéacs a thabhairt do d'ionchuir. I measc na samplaí iontacha tá an comhartha @ le haghaidh ainmneacha úsáideoirí Twitter nó $ le haghaidh airgeadas.
Go dtí v1.4, bhí marcáil bhreise ag teastáil ó Bootstrap timpeall ar bhoscaí seiceála agus raidiónna chun iad a chruachadh. Anois, tá sé ina ábhar simplí athrá ar an <label class="checkbox">rud a wraps an <input type="checkbox">.
Tacaítear freisin le ticbhoscaí agus raidiónna inlíne. Just a chur .inlinele haon .checkboxnó .radioagus tá tú ag déanamh.
Chun prepend nó ionchuir i gceangal i bhfoirm inlíne a úsáid, a bheith cinnte a chur ar an .add-onagus inputar an líne chéanna, gan spásanna.
Chun téacs cabhrach a chur le d’ionchur foirme, cuir téacs cabhrach inlíne leis <span class="help-inline">nó bloc téacs cabhrach leis <p class="help-block">i ndiaidh na heiliminte ionchuir.
In ionad iarratas breise a dhéanamh ar gach íocón, tá sprite curtha le chéile againn - sraith íomhánna i gcomhad amháin a úsáideann CSS chun na híomhánna a shuíomh le background-position. Is é seo an modh céanna a úsáidimid ar Twitter.com agus d'oibrigh sé go maith dúinn.
Déantar na ranganna deilbhíní go léir a réamhshocrú le spásáil .icon-ainmneacha agus scóip chuí, cosúil lenár gcomhpháirteanna eile. Cabhróidh sé seo le coinbhleachtaí le huirlisí eile a sheachaint.
Thug Glyphicons deis dúinn úsáid a bhaint as an tacar Halflings inár bhfoireann uirlisí foinse oscailte chomh fada agus a chuirimid nasc agus creidiúint ar fáil anseo sna doiciméid. Déan machnamh le do thoil ar an rud céanna a dhéanamh i do thionscadail.
Úsáideann Bootstrap <i>clib do na deilbhíní go léir, ach níl aon chás-aicme acu - gan ach réimír roinnte. Chun é a úsáid, cuir an cód seo a leanas beagnach áit ar bith:
- <i class = "icon-search" ></i>
Tá stíleanna ar fáil freisin le haghaidh deilbhíní inbhéartaithe (bán), atá réidh le haicme amháin breise:
- <i class = "icon-search icon-white" ></i>
Tá 140 rang le roghnú as do dheilbhíní. Cuir <i>clib leis na ranganna cearta leis agus tá tú socraithe. Is féidir leat teacht ar an liosta iomlán i sprites.less nó ar dheis anseo sa doiciméad seo.
Cinnirí suas! Nuair a bheidh tú ag úsáid teaghráin in aice le téacs, mar atá i gcnaipí nó naisc nascleanúna, bí cinnte go bhfágfá spás i ndiaidh na <i>clibe le spásáil cheart a dhéanamh.
Tá deilbhíní iontach, ach cá n-úsáidfeadh duine iad? Seo cúpla smaoineamh:
Go bunúsach, áit ar bith is féidir leat <i>clib a chur, is féidir leat deilbhín a chur.
Úsáid iad i gcnaipí, i ngrúpaí cnaipí le haghaidh barra uirlisí, nascleanúint, nó ionchuir fhoirm réamhullmhaithe.