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 ultricies vehicula ut id elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor dolor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
| 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 commodo , 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 bhlocchuóta a snámháil 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 |
| Séabra-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-condorded" >
- ...
- </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 = ""put-medium search-query" >
- <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 réamhshocraithe foirmeacha 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.
Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with background-position. This is the same method we use on Twitter.com and it has worked well for us.
All icons classes are prefixed with .icon- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.
Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.
Bootstrap uses an <i> tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:
- <i class="icon-search"></i>
There are also styles available for inverted (white) icons, made ready with one extra class:
- <i class="icon-search icon-white"></i>
There are 120 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.
Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.
Icons are great, but where would one use them? Here are a few ideas:
Essentially, anywhere you can put an <i> tag, you can put an icon.
Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.