Fljótleg dæmi

Þarftu fljótleg sniðmát? Skoðaðu þessi grunndæmi sem við höfum sett saman:

Sjálfgefið rist

Sjálfgefið netkerfi sem er hluti af Bootstrap er 940px breitt 16 dálka rist. Það er bragð af hinu vinsæla 960 ristkerfi, en án viðbótar spássíu/fyllingar á vinstri og hægri hlið.

Dæmi um álagningu hnitanets

Eins og sýnt er hér er hægt að búa til grunnútlit með tveimur „dálkum“, sem hver spannar fjölda af þeim 16 grunndálkum sem við skilgreindum sem hluta af netkerfi okkar. Sjá dæmin hér að neðan fyrir fleiri afbrigði.

<div class = "röð" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

Hreiður súlur

Hreiður efnið þitt ef þú þarft með því að búa til .rowí núverandi dálki.

Dæmi um hreiðra dálka

<div class = "röð" > 
  <div class = "span12" > 
    Stig 1 dálks
    <div class = "röð" > 
      <div class = "span6" > 
        Stig 2
      </div>
      <div class = "span6" > 
        Stig 2
      </div>
    </div>
  </div>
</div>

Rúllaðu þitt eigið rist

Innbyggt í Bootstrap eru handfylli af breytum til að sérsníða sjálfgefna 940px ristkerfið. Með smá aðlögun geturðu breytt stærð dálka, þakrennum þeirra og ílátinu sem þeir eru í.

Inni í ristinni

Breyturnar sem þarf til að breyta netkerfinu eru nú allar í preboot.less.

Nú á að sérsníða

Að breyta ristinni þýðir að breyta @grid-*breytunum þremur og setja saman Less skrárnar aftur.

Bootstrap kemur útbúið til að takast á við ristkerfi með allt að 24 dálkum; sjálfgefið er bara 16. Svona myndu töflubreyturnar þínar líta út sérsniðnar fyrir 24 dálka rist.

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;   

Þegar búið er að setja saman aftur verðurðu stilltur!

Fast skipulag

Sjálfgefið og einfalt 940px-breitt, miðja skipulag fyrir nánast hvaða vefsíðu eða síðu sem er frá einni <div.container>.

<líkami>
  <div class = "gámur" > 
    ...
  </div>
</body>

Vökvaskipulag

Önnur, sveigjanleg fljótandi síðuuppbygging með lágmarks- og hámarksbreiddum og vinstri hliðarstiku. Frábært fyrir forrit og skjöl.

<líkami>
  <div class = "ílát-vökvi" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "content" > 
      ...
    </div>
  </div>
</body>

Fyrirsagnir & afrit

Staðlað leturfræðistigveldi til að skipuleggja vefsíðurnar þínar.

Allt leturfræðinetið er byggt á tveimur Less breytum í preboot.less skránni okkar: @basefontog @baseline. 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.

h1. Fyrirsögn 1

h2. Fyrirsögn 2

h3. Fyrirsögn 3

h4. Fyrirsögn 4

h5. Fyrirsögn 5

h6. Fyrirsögn 6

Dæmi málsgrein

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 ut id elit.

Dæmifyrirsögn Hefur undirfyrirsögn...

Ýmislegt. þættir

Notaðu áherslur, heimilisföng og skammstafanir

<strong> <em> <address> <abbr>

Hvenær á að nota

Áherslumerki ( <strong>og <em>) ætti að nota til að gefa til kynna frekari mikilvægi eða áherslu orðs eða orðasambands miðað við afrit þess í kring. Notaðu <strong>fyrir mikilvægi og <em>fyrir streituáherslu .

Áherslur í málsgrein

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ð: Það er samt í lagi að nota <b>og <i>tags í HTML5 og þau þurfa ekki að vera feitletruð og skáletruð í sömu röð (þó ef það er merkingarlegra þáttur, notaðu það). <b>er ætlað að varpa ljósi á orð eða orðasambönd án þess að koma til með að auka mikilvægi, en <i>er aðallega fyrir rödd, tæknileg hugtök osfrv.

Heimilisföng

Einingin <address>er notuð fyrir tengiliðaupplýsingar fyrir næsta forföður hans, eða allt verkið. Hér eru tvö dæmi um hvernig það gæti verið notað:

Athugið: Hver lína í línu <address>verður að enda með línuskilum ( <br />) eða vera vafin inn í blokkarmerki (td <p>) til að skipuleggja innihaldið á réttan hátt.

Skammstafanir

Fyrir skammstafanir og skammstafanir, notaðu <abbr>merkið ( <acronym>er úrelt í HTML5 ). Settu styttu eyðublaðið í merkinu og settu titil fyrir allt nafnið.

Blockquotes

<blockquote> <p> <small>

Hvernig á að vitna

Til að innihalda tilvitnun skaltu vefja <blockquote>um <p>og <small>merkja. Notaðu <small>þáttinn til að vitna í uppruna þinn og þ�� munt fá em strik á —undan honum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heiltala posuere erat a ante venenatis dapibus posuere velit aliquet.

Dr. Julius Hibbert

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heiltala posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small> Dr. Julius Hibbert </small>
</blockquote>

Óraðað<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Heiltala molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat kl
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Óstíll<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Heiltala molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat kl
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Pantaði<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Heiltala molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Lýsingdl

Lýsingarlistar

Lýsingarlisti er fullkominn til að skilgreina hugtök.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Kóði

<code> <pre>

Pimpaðu kóðann þinn í stíl með tveimur einföldum merkjum. Til að fá enn meiri ógnvekni í gegnum javascript skaltu smella inn í Google kóðann prettify bókasafn og þú ert tilbúinn.

Kynnir kóða

Hægt er að birta kóða, kubba af eða bara bútum í línu, með stíl með því að vefja inn rétta merkinu. <pre>Notaðu þáttinn fyrir kóðablokka sem spanna margar línur . Fyrir innbyggðan kóða, notaðu <code>þáttinn.

<div>
  <h1>Fyrirsögn</h1>
  <p>Eitthvað hérna...</p>
</div>

<div> <h1> Fyrirsögn </h1> <p> Eitthvað hérna... </p> </div>
  
  

Innbyggð merki

<span class="label">

Vekjaðu athygli á eða merktu hvaða setningu sem er í megintextanum þínum.

Merktu hvað sem er

Hefur alltaf þurft einn af þessum fínu Nýju! eða mikilvægir fánar þegar þú skrifar kóða? Jæja, nú hefur þú þá. Hér er það sem er innifalið sjálfgefið:

Miðlunarnet

Birta smámyndir af mismunandi stærðum á síðum með lítið HTML fótspor og lágmarks stíl.

Dæmi um smámyndir

Smámyndir í myndinni .media-gridgeta verið í hvaða stærð sem er, en þær virka best þegar þær eru kortlagðar beint á innbyggt Bootstrap grid kerfið. Myndbreiddir eins og 90, 210 og 330 sameinast nokkrum pixlum af fyllingu til að jafna stærðina .span2, .span4, og .span6dálka.

Stórt

Miðlungs

Lítil

Kóðar þá

Miðlunarnet eru auðveld í notkun og frekar einföld á álagningarhliðinni. Stærðir þeirra eru eingöngu byggðar á stærð myndanna sem fylgja með.

<ul class = "media-grid" > 
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

Byggja borð

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Borð eru frábær - fyrir margt. Frábærar töflur þurfa hins vegar smá merkingarást til að vera gagnlegar, skalanlegar og læsilegar (á kóðastigi). Hér eru nokkur ráð til að hjálpa.

Settu alltaf dálkahausana <thead>þannig að stigveldið sé <thead>> <tr>> <th>.

Svipað og dálkahausarnir, ætti allt meginefni töflunnar að vera pakkað inn í <tbody>svo stigveldið þitt sé <tbody>> <tr>> <td>.

Dæmi: Sjálfgefin töflustíll

Allar töflur verða sjálfkrafa stílaðar með aðeins nauðsynlegum ramma til að tryggja læsileika og viðhalda uppbyggingu. Engin þörf á að bæta við auka flokkum eða eiginleikum.

<borð>
  ...
</table>

Dæmi: Zebra-röndótt

Vertu smá flottur með borðin þín með því að bæta við sebra-röndum - bættu bara við .zebra-stripedbekknum.

Athugið: Zebra-striping er framsækin aukahlutur sem ekki er í boði fyrir eldri vafra eins og IE8 og neðar.

<table class = "zebra-röndóttur" > 
...
</table>

Dæmi: Zebra-röndótt m/ TableSorter.js

Með því að taka fyrra dæmið bætum við notagildi borðanna okkar með því að bjóða upp á flokkunarvirkni í gegnum jQuery og Tablesorter viðbótina. Smelltu á haus hvaða dálks sem er til að breyta röðun.

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<handrit > 
  $ ( fall () { 
    $ ( "tafla#flokkaTaflaDæmi" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "zebra-röndóttur" > 
  ...
</table>

Sjálfgefin stíll

Öll eyðublöð fá sjálfgefna stíla til að setja þau fram á læsilegan og skalanlegan hátt. Stílar eru til staðar fyrir textainnslátt, vallista, textasvæði, valhnappa og gátreiti og hnappa.

Staflað form

Bættu .form-stackedvið HTML eyðublaðsins þíns og þú munt hafa merki ofan á reitunum þeirra í stað þess að vera til vinstri. Þetta virkar frábærlega ef eyðublöðin þín eru stutt eða þú ert með tvo dálka af inntak fyrir þyngri eyðublöð.

Stærðir eyðublaða

Sérsníddu hvaða form sem inputer select, eða textareabreidd með því að bæta örfáum flokkum við álagninguna þína.

Frá og með v1.3.0 höfum við bætt við stærðarflokkum sem byggjast á rist fyrir formþætti. Vinsamlegast notaðu þetta yfir núverandi .mini, .small, etc flokka.

Hnappar

Sem venja eru hnappar notaðir fyrir aðgerðir á meðan tenglar eru notaðir fyrir hluti. Til dæmis gæti "Hlaða niður" verið hnappur og "nýleg virkni" gæti verið hlekkur.

Allir hnappar hafa sjálfgefið ljósgráa stíl, en hægt er að nota fjölda hagnýtra flokka fyrir mismunandi litastíla. Þessir flokkar innihalda bláan .primaryflokk, ljósbláan .infoflokk, grænan .successflokk og rauðan .dangerflokk.

Dæmi um hnappa

Hægt er að nota hnappastíla á hvað sem er með .btnbeittum. Venjulega viltu nota þetta aðeins á <a>, <button>, og valda <input>þætti. Svona lítur það út:

Aðrar stærðir

Langar þig í stærri eða minni hnappa? Hafið það!

Óvirkt ástand

Notaðu óvirka stöðuna fyrir hnappa sem eru ekki virkir eða eru óvirkir af appinu af einni eða annarri ástæðu. Það er .disabledfyrir tengla og :disabledfyrir <button>þætti.

Tenglar

Hnappar

Hvað er það

Toppstikan okkar er fastur stika sem hýsir lógó eða nafn vefsíðu, aðalleiðsögn og leitarform.

Sérhannaðar

Allir þættir innan, og öll toppstikan líka, eru valfrjálsir. Þú getur valið að innihalda lógó/nafn, nav, leit og aukanav—eða einhverja samsetningu af því.

Fellilistar innifalinn

Sem hluti af aðalleiðsögninni höfum við innifalið möguleikann fyrir þig til að bæta fellivalmyndum við siglingakerfið þitt. Skoðaðu aukanav að ofan (hægrijafnað) til að sjá hvernig það er gert. Dropdown limerki styðja einnig .activetil að sýna núverandi síðuval.

Tabs og pillur

Búðu til einfalda aukaleiðsögn með <ul>. Skiptu á milli flipa eða pilla með því að bæta við viðeigandi flokki.

Frábært fyrir undirkafla efnis eins og reikningsstillingasíður okkar og tímalínur notenda til að skipta á milli síðna með svipað efni. Fáanlegt í flipa eða pillum stíl.

• Heim
• Prófíll
• Skilaboð
• Stillingar
• Hafðu samband
• Fellilisti
  • Aukatengill
  • Eitthvað annað hérna
  • Annar linkur

<ul class = "flipar" > 
  <li class = "active" ><a href = "#" > Heim </a></li>  
  <li><a href = "#" > Prófíll </a></li> 
  <li><a href = "#" > Skilaboð </a></li> 
  <li><a href = "#" > Stillingar </a></li> 
  <li><a href = "#" > Tengiliður </a></li> 
</ul>

• Heim
• Prófíll
• Skilaboð
• Stillingar
• Hafðu samband

<ul class = "pillur" > 
  <li class = "active" ><a href = "#" > Heim </a></li>  
  <li><a href = "#" > Prófíll </a></li> 
  <li><a href = "#" > Skilaboð </a></li> 
  <li><a href = "#" > Stillingar </a></li> 
  <li><a href = "#" > Tengiliður </a></li> 
</ul>

Brauðmylsna

Breadcrumb flakk er notað sem leið til að sýna notendum hvar þeir eru í forriti eða vefsvæði, en ekki fyrir aðalleiðsögn.

• Heim

• Heim /
• Miðsíða

• Heim /
• Miðsíða /
• Annar

• Heim /
• Miðsíða /
• Annað /
• Þú ert hér

<ul class = "brauðmola" > 
  <li><a href = "#" > Heim </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Miðsíða </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Annar einn </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Þú ert hér </li> 
</ul>

Síðuskipting

Ofur einfölduð og lítillega stíluð blaðsíðugerð innblásin af Rdio. Erfitt er að missa af stóra kubbnum, hann er auðvelt að skala og býður upp á stór smellisvæði.

<div class = "pagetion" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← Fyrri </a></li>  
    <li class = "virkur" ><a href = "#" > 1 </a></li>  
    <li > <a href = "#"> 2 </a></li> 
    <li > <a href = "#"> 3 </a></li> 
    <li > <a href = "#"> 4 </a></li> 
    <li > <a href = "#"> 5 </a></li> 
    <li class = "next" ><a href = "#" > Næsta → </a></li>  
  </ul>
</div>

Grunnviðvaranir

.alert-message

Skilaboð í einni línu til að undirstrika bilun, hugsanlega mistök eða árangur aðgerðar. Sérstaklega gagnlegt fyrir eyðublöð.

Fáðu javascriptið »

Dæmi um kóða

<div class = "alert-message warning" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Heilagt guacamole! </strong> Best að athuga sjálfan þig, þú lítur ekki of vel út. </p>
</div>

Lokaðu fyrir skilaboð

.alert-message.block-message

Fyrir skilaboð sem krefjast smá útskýringar höfum við tilkynningar um málsgreinastíl. Þetta er fullkomið til að blaðra upp lengri villuskilaboð, vara notanda við aðgerð sem er í bið, eða bara kynna upplýsingar til að leggja meiri áherslu á síðuna.

Fáðu javascriptið »

Dæmi um kóða

<div class = "viðvörun-skilaboð blokk-skilaboð viðvörun" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Heilagt guacamole! Þetta er viðvörun! </strong> Best að athuga sjálfan þig, þú lítur ekki of vel út. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "alert-actions" > 
    <a class = "btn small" href = "#" > Gerðu þessa aðgerð </a> <a class = "btn small" href = "#" > Eða gerðu þetta </a>     
  </div>
</div>

Modals

Modals—dálka eða ljóskassa—eru frábært fyrir samhengisaðgerðir í aðstæðum þar sem mikilvægt er að bakgrunnssamhenginu sé viðhaldið.

Fáðu javascriptið »

Verkfæraráð

Twipsies eru mjög gagnlegar til að aðstoða ruglaðan notanda og vísa þeim í rétta átt.

Fáðu javascriptið »

Popovers

Notaðu sprettiglugga til að veita undirtextaupplýsingar á síðu án þess að hafa áhrif á uppsetningu.

Fáðu javascriptið »

Að byrja

Það er mjög auðvelt að samþætta javascript við Bootstrap bókasafnið. Hér að neðan förum við yfir grunnatriðin og útvegum þér frábær viðbætur til að koma þér af stað!

Skoða javascript skjöl »

Hvað er innifalið

Gleymdu sumum af aðalþáttum Bootstrap lífi með nýjum sérsniðnum viðbótum sem vinna með jQuery og Ender . Við hvetjum þig til að stækka og breyta þeim til að passa við sérstakar þróunarþarfir þínar.

Er javascript nauðsynlegt?

Neibb! Bootstrap er fyrst og fremst hannað til að vera CSS bókasafn. Þetta javascript veitir grunn gagnvirkt lag ofan á meðfylgjandi stíla.

Hins vegar, fyrir þá sem þurfa javascript, höfum við útvegað viðbæturnar hér að ofan til að hjálpa þér að skilja hvernig á að samþætta Bootstrap við javascript og gefa þér fljótlegan, léttan valkost fyrir grunnvirknina strax.

Fyrir frekari upplýsingar og til að sjá nokkur kynningar í beinni, vinsamlegast skoðaðu viðbótina okkar .