Ofan á vinnupallana eru helstu HTML þættir stílaðir og endurbættir með stækkanlegum flokkum til að veita ferskt, stöðugt útlit og tilfinningu.
Allt leturfræðinetið er byggt á tveimur Less breytum í variables.less skránni okkar: @baseFontSize
og @baseLineHeight
. Sú fyrri er grunnleturstærðin sem notuð er í gegn og sú seinni er grunnlínuhæðin.
Við notum þessar breytur, og smá stærðfræði, til að búa til spássíur, fyllingar og línuhæðir allra okkar tegunda og fleira.
Nullam quis risus eget urna mollis ornare vel eu leo. Þegar þú ert samfélagslegur og stórkostlegur í fæðingu, verður þú að hlakka til. Nullam id dolor id nibh ultricies vehicula.
Láttu málsgrein skera sig úr með því að bæta við .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor uppboðsmaður. Duis mollis, est non commodo luctus.
Frumefni | Notkun | Valfrjálst |
---|---|---|
<strong> |
Til að leggja áherslu á textabrot með mikilvægum | Enginn |
<em> |
Fyrir að leggja áherslu á textabrot með streitu | Enginn |
<abbr> |
Umlykur skammstafanir og skammstafanir til að sýna stækkaða útgáfuna á sveimi | Láttu valfrjálsa .initialism flokk fyrir hástafi skammstafanir. |
<address> |
Fyrir tengiliðaupplýsingar fyrir næsta forföður hans eða allt verkið | Varðveittu sniðið með því að enda allar línur með<br> |
Fusce dapibus , tellus ac cursus commodo , Tortor mauris condimentum nibh , út fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.
Athugið: Ekki hika við að nota <b>
og <i>
í HTML5, en notkun þeirra hefur breyst aðeins. <b>
er ætlað að varpa ljósi á orð eða orðasambönd án þess að koma á framfæri auknu mikilvægi en <i>
er aðallega fyrir rödd, tæknileg hugtök o.s.frv.
Hér eru tvö dæmi um hvernig <address>
hægt er að nota merkið:
Skammstafanir með title
eigind eru með ljósum doppuðum neðri ramma og hjálparbendill á sveimi. Þetta gefur notendum aukalega vísbendingu um að eitthvað verði sýnt á sveimi.
Bættu initialism
bekknum við skammstöfun til að auka leturfræðisamræmi með því að gefa honum aðeins minni textastærð.
HTML er það besta síðan sneið brauð.
Skammstöfun á orðinu eiginleiki er attr .
Frumefni | Notkun | Valfrjálst |
---|---|---|
<blockquote> |
Eining á blokkarstigi til að vitna í efni frá öðrum uppruna | Bættu við .pull-left og .pull-right flokkar fyrir fljótandi valkosti |
<small> |
Valfrjáls þáttur til að bæta við tilvitnun sem snýr að notanda, venjulega höfundur með titil verks | Settu <cite> utan um titil eða nafn heimildar |
Til að innihalda tilvitnun skaltu vefja <blockquote>
um hvaða HTML sem er sem tilvitnun. Fyrir beinar tilvitnanir mælum við með <p>
.
Láttu valfrjálsan <small>
þátt fylgja með til að vitna í upprunann þinn og þú færð em strik á —
undan honum í stíl tilgangi.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heiltala posuere ert a ante venenatis. </p>
- <small> Einhver frægur </small>
- </blockquote>
Sjálfgefnar blokkatilvitnanir eru stílaðar sem slíkar:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heiltala posuere ert a ante venenatis.
Einhver frægur í Body of work
Til að láta tilvitnunina þína fljóta til hægri skaltu bæta við class="pull-right"
:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heiltala posuere ert a ante venenatis.
Einhver frægur í Body of work
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Höfuð upp! Láréttir lýsingarlistar munu stytta hugtök sem eru of löng til að passa inn í vinstri dálkleiðréttingu text-overflow
. Í þrengri útsýnisgluggum munu þær breytast í sjálfgefið staflað útlit.
Vefjið innbyggða kóðabúta með <code>
.
- Til dæmis ætti <code> hluti </ code > að vera innbyggður .
Notaðu <pre>
fyrir margar línur af kóða. Vertu viss um að sleppa við allar hornklofa í kóðanum fyrir rétta flutning.
<p>Dæmi um texta hér...</p>
- <pre>
- <p>Dæmi um texta hér...</p>
- </pre>
Athugið: Vertu viss um að hafa kóða innan <pre>
merkja eins nálægt vinstri og mögulegt er; það mun gera alla flipa.
Þú getur valfrjálst bætt við .pre-scrollable
bekknum sem mun setja hámarkshæðina 350px og bjóða upp á y-ás skrunstiku.
Taktu sama <pre>
þáttinn og bættu við tveimur valkvæðum flokkum til að auka flutning.
- <p> Dæmi um texta hér... </p>
- <pre class = "prettyprint
- línunum" >
- <p>Dæmi um texta hér...</p>
- </pre>
Sæktu google-code-prettify og skoðaðu readme fyrir hvernig á að nota.
Merkja | Lýsing |
---|---|
<table> |
Umbúðir til að sýna gögn á töfluformi |
<thead> |
Gámaeining fyrir töfluhauslínur ( <tr> ) til að merkja töfludálka |
<tbody> |
Gámaeining fyrir töflulínur ( <tr> ) í meginmáli töflunnar |
<tr> |
Gámaeining fyrir mengi töfluhólfa ( <td> eða <th> ) sem birtist í einni línu |
<td> |
Sjálfgefin töflureitur |
<th> |
Sérstakur töflureitur fyrir dálka (eða röð, fer eftir umfangi og staðsetningu) merki Verður að nota innan a <thead> |
<caption> |
Lýsing eða samantekt á því sem taflan geymir, sérstaklega gagnleg fyrir skjálesendur |
- <borð>
- <haus>
- <tr>
- <þ> … </th>
- <þ> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
Nafn | bekk | Lýsing |
---|---|---|
Sjálfgefið | Enginn | Engir stílar, bara dálkar og raðir |
Basic | .table |
Aðeins láréttar línur á milli raða |
Á mörkum | .table-bordered |
Rúnar horn og bætir við ytri ramma |
Zebra-rönd | .table-striped |
Bætir ljósgráum bakgrunnslit við stakar línur (1, 3, 5, osfrv.) |
Þéttur | .table-condensed |
Klippir lóðrétta bólstrun í tvennt, frá 8px til 4px, innan allra td og th þátta |
Töflur eru sjálfkrafa stílaðar með aðeins nokkrum ramma til að tryggja læsileika og viðhalda uppbyggingu. Með 2.0 er .table
flokkurinn nauðsynlegur.
- <table class = "tafla" >
- …
- </table>
# | Fyrsta nafn | Eftirnafn | Notendanafn |
---|---|---|---|
1 | Mark | Ottó | @mdo |
2 | Jakob | Thornton | @feiti |
3 | Larry | fuglinn |
Vertu smá flottur með borðin þín með því að bæta við sebra-röndum - bættu bara við .table-striped
bekknum.
Athugið: Röndóttar töflur nota :nth-child
CSS veljarann og eru ekki fáanlegar í IE7-IE8.
- <table class = "borð borðröndótt" >
- …
- </table>
# | Fyrsta nafn | Eftirnafn | Notendanafn |
---|---|---|---|
1 | Mark | Ottó | @mdo |
2 | Jakob | Thornton | @feiti |
3 | Larry | fuglinn |
Bættu við ramma um allt borðið og ávölum hornum í fagurfræðilegum tilgangi.
- <table class = "borð með borði" >
- …
- </table>
# | Fyrsta nafn | Eftirnafn | Notendanafn |
---|---|---|---|
1 | Mark | Ottó | @mdo |
Mark | Ottó | @getbootstrap | |
2 | Jakob | Thornton | @feiti |
3 | Larry fuglinn |
Gerðu borðin þín þéttari með því að bæta .table-condensed
bekknum við til að skera töflufrumufyllingu í tvennt (frá 8px til 4px).
- <table class = "table table-condensed" >
- …
- </table>
# | Fyrsta nafn | Eftirnafn | Notendanafn |
---|---|---|---|
1 | Mark | Ottó | @mdo |
2 | Jakob | Thornton | @feiti |
3 | Larry fuglinn |
Ekki hika við að sameina hvaða borðflokka sem er til að ná fram mismunandi útliti með því að nota hvaða flokka sem er í boði.
- <table class = "borðröndóttar borðröndóttar borðþéttar" >
- ...
- </table>
Fullt nafn | |||
---|---|---|---|
# | Fyrsta nafn | Eftirnafn | Notendanafn |
1 | Mark | Ottó | @mdo |
2 | Jakob | Thornton | @feiti |
3 | Larry fuglinn |
Það besta við eyðublöð í Bootstrap er að öll inntak þín og stýringar líta vel út, sama hvernig þú byggir þau upp í merkingunni þinni. Enginn óþarfur HTML er krafist, en við útvegum mynstrin fyrir þá sem þurfa það.
Flóknari skipulag koma með hnitmiðuðum og skalanlegum flokkum til að auðvelda stíl og viðburðabindingu, svo þú ert þakinn í hverju skrefi.
Bootstrap kemur með stuðningi fyrir fjórar tegundir eyðublaða:
Mismunandi gerðir eyðublaðaútlita krefjast nokkurra breytinga á merkingu, en stýringarnar sjálfar eru áfram og hegða sér eins.
Eyðublöð Bootstrap innihalda stíla fyrir allar grunnformstýringar eins og inntak, textasvæði og val sem þú vilt búast við. En það kemur líka með fjölda sérsniðinna íhluta eins og viðbætta og áfyllta inntak og stuðning fyrir lista yfir gátreiti.
Ríki eins og villa, viðvörun og árangur eru innifalin fyrir hverja tegund eyðublaðastýringar. Einnig fylgja stíll fyrir óvirka stjórntæki.
Bootstrap veitir einfalda merkingu og stíla fyrir fjóra stíla af algengum vefformum.
Nafn | bekk | Lýsing |
---|---|---|
Lóðrétt (sjálfgefið) | .form-vertical (ekki krafist) |
Staflaðir, vinstrijafnaðir merkimiðar yfir stýringar |
Í línu | .form-inline |
Vinstri stillt merkimiða og innbyggður blokkastýringar fyrir þéttan stíl |
Leita | .form-search |
Extra ávalur textainnsláttur fyrir dæmigerða leitarfagurfræði |
Lárétt | .form-horizontal |
Fleygðu vinstri, hægri stilltum merkimiðum á sömu línu og stýringar |
Snjöll og létt sjálfgefna stilling án auka álagningar.
- <form class = "jæja" >
- <label> Heiti merkimiða </label>
- <input type = "text" class = "span3" placeholder = "Sláðu inn eitthvað…" >
- <span class = "help-block" > Dæmi um hjálpartexta á blokkarstigi hér. </span>
- <label class = "checkbox" >
- <input type = "checkbox" > Skoðaðu mig
- </label>
- <button type = "submit" class = "btn" > Senda </button>
- </form>
Bættu .form-search
við eyðublaðið og .search-query
við input
.
- <form class = "vel form-leit" >
- <input type = "text" class = "inntak-miðils leitarfyrirspurn" >
- <button type = "submit" class = "btn" > Leita </button>
- </form>
Bættu við .form-inline
til að fíngera lóðrétta jöfnun og bil á formstýringum.
- <form class = "well form-inline" >
- <input type = "text" class = "input-small" staðgengill = "Tölvupóstur" >
- <input type = "password" class = "input-small" staðgengill = "Lykilorð" >
- <label class = "checkbox" >
- <input type = "checkbox" > Mundu eftir mér
- </label>
- <button type = "submit" class = "btn" > Skráðu þig inn </button>
- </form>
Sýnd til hægri eru allar sjálfgefnu formstýringar sem við styðjum. Hér er punktalisti:
Miðað við eyðublaðaútlitið hér að ofan, hér er álagningin sem tengist fyrsta inntaks- og stýrihópnum. , .control-group
, .control-label
og .controls
flokkarnir eru allir nauðsynlegir fyrir stíl.
- <form class = "form-horisontal" >
- <fieldset>
- <legend> Legend texti </legend>
- <div class = "stjórnhópur" >
- <label class = "control-label" for = "input01" > Textainnsláttur </label>
- <div class = "stýrir" >
- <input type = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Stuðningstexti </p>
- </div>
- </div>
- </fieldset>
- </form>
Bootstrap býður upp á stíla fyrir vafra-studd fókus og disabled
ástand. Við fjarlægjum sjálfgefna Webkit outline
og notum a box-shadow
í staðinn fyrir :focus
.
Það inniheldur einnig staðfestingarstíl fyrir villur, viðvaranir og árangur. Til að nota skaltu bæta villuflokknum við umhverfið .control-group
.
- <fieldset
- class = "stjórnhópsvilla" >
- …
- </fieldset>
Innsláttarhópar—með viðbættum eða áfylltum texta—veita auðveld leið til að gefa meira samhengi fyrir inntakið þitt. Frábær dæmi eru @ táknið fyrir Twitter notendanöfn eða $ fyrir fjármál.
Allt að v1.4 þurfti Bootstrap aukalega merkingu í kringum gátreiti og útvarp til að stafla þeim. Nú, það er einfalt mál að endurtaka það <label class="checkbox">
sem umlykur <input type="checkbox">
.
Innbyggðir gátreitir og útvarp eru einnig studd. Bættu bara við .inline
hvaða .checkbox
eða .radio
og þú ert búinn.
Til að nota prepend eða add-inntak á innbyggðu formi, vertu viss um að setja .add-on
og input
á sömu línu, án bils.
Til að bæta við hjálpartexta fyrir innslátt eyðublaðsins skaltu hafa innbyggðan hjálpartexta með <span class="help-inline">
eða hjálpartextablokk með <p class="help-block">
á eftir innsláttareiningunni.
Í stað þess að gera hvert tákn að aukabeiðni, höfum við safnað þeim saman í sprite - fullt af myndum í einni skrá sem notar CSS til að staðsetja myndirnar með background-position
. Þetta er sama aðferð og við notum á Twitter.com og hefur reynst okkur vel.
Allir táknflokkar eru með forskeyti .icon-
fyrir rétt nafnabil og umfang, líkt og aðrir hlutir okkar. Þetta mun hjálpa til við að forðast árekstra við önnur tæki.
Glyphicons hefur leyft okkur að nota Halflings settið í opnum tækjabúnaði okkar svo framarlega sem við gefum upp hlekk og kredit hér í skjölunum. Vinsamlegast íhugaðu að gera slíkt hið sama í verkefnum þínum.
Bootstrap notar <i>
merki fyrir öll tákn, en þau hafa engan tilviksflokk - aðeins sameiginlegt forskeyti. Til að nota skaltu setja eftirfarandi kóða nánast hvar sem er:
- <i class = "icon-search" ></i>
Það eru líka stíll í boði fyrir öfug (hvít) tákn, gerð tilbúin með einum aukaflokki:
- <i class = "icon-search icon-white" ></i>
Það eru 140 flokkar til að velja úr fyrir táknin þín. Bættu bara við <i>
merki með réttum flokkum og þú ert tilbúinn. Þú getur fundið allan listann í sprites.less eða hér í þessu skjali.
Höfuð upp! Þegar þú notar við hliðina á textastrengjum, eins og í hnöppum eða nav-tenglum, vertu viss um að skilja eftir bil á eftir <i>
merkinu fyrir rétt bil.
Tákn eru frábær, en hvar myndi maður nota þau? Hér eru nokkrar hugmyndir:
Í meginatriðum, hvar sem þú getur sett <i>
merki, geturðu sett tákn.
Notaðu þá í hnöppum, hnappahópum fyrir tækjastiku, flakk eða innsláttarform.