Primeri hitrega začetka

Potrebujete hitre predloge? Oglejte si te osnovne primere, ki smo jih sestavili:

Privzeta mreža

Privzeti mrežni sistem, ki je na voljo kot del Bootstrapa, je 940 slikovnih pik široka mreža s 16 stolpci. Je okus priljubljenega sistema mreže 960, vendar brez dodatnega roba/oblazinjenja na levi in ​​desni strani.

Primer označevanja mreže

Kot je prikazano tukaj, je mogoče ustvariti osnovno postavitev z dvema "stolpcema", od katerih vsak zajema več od 16 temeljnih stolpcev, ki smo jih definirali kot del našega mrežnega sistema. Oglejte si spodnje primere za več različic.

<div class = "row" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

Gnezdenje stolpcev

Če morate, ugnezdite svojo vsebino tako, da ustvarite .rowznotraj obstoječega stolpca.

Primer ugnezdenih stolpcev

<div class = "row" > 
  <div class = "span12" > 
    1. raven stolpca
    <div class = "row" > 
      <div class = "span6" > 
        2. stopnja
      </div>
      <div class = "span6" > 
        2. stopnja
      </div>
    </div>
  </div>
</div>

Zavijte svojo mrežo

V Bootstrap je vgrajena peščica spremenljivk za prilagajanje privzetega sistema mreže 940 slikovnih pik. Z malo prilagajanja lahko spremenite velikost stebrov, njihovih žlebov in vsebnika, v katerem se nahajajo.

Znotraj mreže

Spremenljivke, potrebne za spreminjanje omrežnega sistema, se trenutno nahajajo v preboot.less.

Zdaj za prilagajanje

Spreminjanje mreže pomeni spreminjanje treh @grid-*spremenljivk in ponovno prevajanje datotek Less.

Bootstrap je opremljen za upravljanje mrežnega sistema z do 24 stolpci; privzeta vrednost je samo 16. Tukaj je opisano, kako bi bile vaše mrežne spremenljivke videti prilagojene mreži s 24 stolpci.

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

Ko boste znova prevedeni, boste pripravljeni!

Fiksna postavitev

Privzeta in preprosta 940 slikovnih pik široka, sredinska postavitev za skoraj vsako spletno mesto ali stran, ki jo ponuja en <div.container>.

<telo>
  <div class = "container" > 
    ...
  </div>
</body>

Tekoča postavitev

Alternativna, prilagodljiva tekoča struktura strani z najmanjšo in največjo širino ter levo stransko vrstico. Odlično za aplikacije in dokumente.

<telo>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "content" > 
      ...
    </div>
  </div>
</body>

Naslovi in ​​kopija

Standardna tipografska hierarhija za strukturiranje vaših spletnih strani.

Celotna tipografska mreža temelji na dveh spremenljivkah Less v naši datoteki preboot.less: @basefontin @baseline. Prva je osnovna velikost pisave, ki se uporablja povsod, druga pa je osnovna višina vrstice.

Te spremenljivke in nekaj matematike uporabljamo za ustvarjanje robov, oblazinjenja in višin vrstic vseh naših vrst in še več.

h1. Naslov 1

h2. Naslov 2

h3. Naslov 3

h4. Naslov 4

h5. Naslov 5

h6. Naslov 6

Primer odstavka

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

Primer naslova Ima podnaslov ...

razno elementi

Uporaba poudarkov, naslovov in okrajšav

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

Kdaj uporabiti

Poudarjene oznake ( <strong>in <em>) je treba uporabiti za označevanje dodatnega pomena ali poudarka besede ali besedne zveze glede na njeno okoliško kopijo. Uporabite <strong>za pomembnost in <em>za poudarjanje poudarka.

Poudarek v odstavku

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Mecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Opomba:<b> uporaba oznak in v HTML5 je še vedno v redu <i>in ni jim treba oblikovati krepko oziroma ležeče (čeprav obstaja bolj semantičen element, ga uporabite). <b>je namenjeno poudarjanju besed ali besednih zvez brez izražanja dodatnega pomena, medtem ko <i>je večinoma za glas, tehnične izraze itd.

Naslovi

Element <address>se uporablja za kontaktne informacije njegovega najbližjega prednika ali celotnega dela. Tukaj sta dva primera, kako bi ga lahko uporabili:

Opomba: vsaka vrstica v se <address>mora končati s prelomom vrstice ( <br />) ali biti zavita v oznako na ravni bloka (npr. <p>), da pravilno strukturirate vsebino.

Okrajšave

Za okrajšave in akronime uporabite <abbr>oznako ( <acronym>je zastarelo v HTML5 ). Skrajšan obrazec postavite znotraj oznake in nastavite naslov za celotno ime.

Blockquotes

<blockquote> <p> <small>

Kako citirati

Če želite vključiti navedbo bloka, zavijte <blockquote>okoli <p>in <small>oznake. Uporabite <small>element za navajanje vira in pred njim boste dobili pomišljaj —.

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

Dr. Julius Hibbert

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

Neurejeno<ul>

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

Brez sloga<ul.unstyled>

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

Naročeno<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molesteie lorem in 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

Opisdl

Seznami opisov

Opisni seznam je kot nalašč za definiranje izrazov.

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.

Koda

<code> <pre>

Pipirajte svojo kodo v stilu z dvema preprostima oznakama. Za še več osupljivosti prek javascripta spustite Googlovo knjižnico kode prettyify in pripravljeni ste.

Predstavitev kode

Kodo, bloke ali samo delčke v vrstici je mogoče prikazati s slogom samo z zavijanjem v pravo oznako. Za bloke kode, ki obsegajo več vrstic, uporabite <pre>element. Za vgrajeno kodo uporabite <code>element.

<div>
  <h1>Naslov</h1>
  <p>Tukaj je nekaj ...</p>
</div>

<div> <h1> Naslov </h1> <p> Tukaj je nekaj ... </p> </div>
  
  

Vgrajene oznake

<span class="label">

Pritegnite pozornost ali označite kateri koli stavek v svojem telesu besedila.

Označite karkoli

Ste kdaj potrebovali enega od teh modnih New! ali Pomembne zastavice pri pisanju kode? No, zdaj jih imate. Tukaj je privzeto vključeno:

Medijska mreža

Prikažite sličice različnih velikosti na straneh z nizkim odtisom HTML in minimalnimi slogi.

Primeri sličic

Sličice so .media-gridlahko poljubne velikosti, vendar najbolje delujejo, če so preslikane neposredno v vgrajeni mrežni sistem Bootstrap. Širine slik, kot so 90, 210 in 330, se kombinirajo z nekaj slikovnimi pikami oblazinjenja, da so enake velikostim .span2, .span4, in .span6stolpcev.

Velik

Srednje

majhna

Kodiranje jih

Medijske mreže so enostavne za uporabo in precej preproste na strani označevanja. Njihove dimenzije temeljijo izključno na velikosti vključenih slik.

<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>

Gradbene mize

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

Mize so odlične - za veliko stvari. Odlične tabele pa potrebujejo malo ljubezni do označevanja, da so uporabne, razširljive in berljive (na ravni kode). Tukaj je nekaj nasvetov za pomoč.

Glave stolpcev vedno ovijte <thead>tako, da je hierarhija <thead>> <tr>> <th>.

Podobno kot pri naslovih stolpcev mora biti vsa vsebina telesa vaše tabele ovita v a <tbody>, tako da je vaša hierarhija <tbody>> <tr>> <td>.

Primer: privzeti slogi tabel

Vse tabele bodo samodejno oblikovane samo z bistvenimi robovi, da se zagotovi berljivost in ohrani struktura. Ni treba dodajati dodatnih razredov ali atributov.

<tabela>
  ...
</table>

Primer: Zebrasto črtasto

Bodite malce navdušeni nad svojimi mizami, tako da dodate zebraste črte – samo dodajte .zebra-stripedrazred.

Opomba: Zebra-striping je progresivna izboljšava, ki ni na voljo za starejše brskalnike, kot je IE8 in nižji.

<table class = "zebra-striped" > 
...
</table>

Primer: Zebra-striped w/ TableSorter.js

Če vzamemo prejšnji primer, izboljšamo uporabnost naših tabel z zagotavljanjem funkcije razvrščanja prek jQuery in vtičnika Tablesorter . Kliknite glavo katerega koli stolpca, da spremenite razvrščanje.

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( funkcija () { 
    $ ( "table#sortTableExample" ). razvrščevalnik tabel ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "zebra-striped" > 
  ...
</table>

Privzeti slogi

Vsi obrazci imajo privzete sloge, da so predstavljeni na berljiv in razširljiv način. Slogi so na voljo za vnose besedila, izbirne sezname, besedilna polja, izbirne gumbe in potrditvena polja ter gumbe.

Zloženi obrazci

Dodajte .form-stackedv HTML svojega obrazca in imeli boste oznake na vrhu njihovih polj namesto na njihovi levi. To deluje odlično, če so vaši obrazci kratki ali imate dva stolpca vnosov za težje obrazce.

Velikosti polj obrazca

Prilagodite poljubno obliko input, select, ali textareaširino tako, da svojemu označevanju dodate le nekaj razredov.

Od različice 1.3.0 smo dodali razrede velikosti na podlagi mreže za elemente obrazca. Uporabite te namesto obstoječih razredov .mini, .smallitd.

Gumbi

Po dogovoru se gumbi uporabljajo za dejanja, medtem ko se povezave uporabljajo za predmete. Na primer, »Prenos« je lahko gumb, »nedavna dejavnost« pa povezava.

Vsi gumbi so privzeto nastavljeni na svetlo siv slog, vendar je mogoče uporabiti številne funkcionalne razrede za različne barvne sloge. Ti razredi vključujejo modri .primaryrazred, svetlo modri .inforazred, zeleni .successrazred in rdeči .dangerrazred.

Primeri gumbov

Sloge gumbov je mogoče uporabiti za vse, kar je .btnuporabljeno. Običajno jih boste želeli uporabiti samo <a>za , <button>in izbrane <input>elemente. Tako je videti:

Nadomestne velikosti

Ste všeč večji ali manjši gumbi? Imej to!

Onemogočeno stanje

Za gumbe, ki niso aktivni ali jih je aplikacija zaradi enega ali drugega razloga onemogočila, uporabite onemogočeno stanje. To velja za .disabledpovezave in elemente.:disabled<button>

Povezave

Gumbi

Kaj je to

Naša zgornja vrstica je fiksna vrstica, ki vsebuje logotip ali ime spletnega mesta, primarno navigacijo in obrazec za iskanje.

Prilagodljiv

Vsi elementi znotraj in tudi celotna zgornja vrstica so neobvezni. Izberete lahko, da vključite logotip/ime, navigacijo, iskanje in sekundarno navigacijo ali katero koli kombinacijo tega.

Spustni meniji vključeni

Kot del glavne navigacije smo vključili možnost dodajanja spustnih menijev v navigacijo. Oglejte si sekundarno krmarjenje zgoraj (desno poravnano), da vidite, kako je to narejeno. Spustne lioznake podpirajo tudi .activeprikaz trenutne izbire strani.

Tablete in tablete

Ustvarite preprosto sekundarno navigacijo z <ul>. Zamenjajte med zavihki ali tabletami z dodajanjem ustreznega razreda.

Odlično za pododdelke vsebine, kot so naše strani z nastavitvami računa in uporabniške časovnice za preklapljanje med stranmi s podobno vsebino. Na voljo v obliki zavihkov ali tablet.

• domov
• Profil
• Sporočila
• nastavitve
• Kontakt
• Spustni meni
  • Sekundarna povezava
  • Tukaj je nekaj drugega
  • Še ena povezava

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Domača stran </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Sporočila </a></li> 
  <li><a href = "#" > Nastavitve </a></li> 
  <li><a href = "#" > Kontakt </a></li> 
</ul>

• domov
• Profil
• Sporočila
• nastavitve
• Kontakt

<ul class = "tablete" > 
  <li class = "active" ><a href = "#" > Domača stran </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Sporočila </a></li> 
  <li><a href = "#" > Nastavitve </a></li> 
  <li><a href = "#" > Kontakt </a></li> 
</ul>

Krušne drobtine

Navigacija po poti se uporablja kot način za prikaz uporabnikom, kje so v aplikaciji ali na spletnem mestu, vendar ne za primarno navigacijo.

• domov

• Domov /
• Srednja stran

• Domov /
• Srednja stran /
• Še en

• Domov /
• Srednja stran /
• Še ena /
• Tukaj ste

<ul class = "breadcrumb" > 
  <li><a href = "#" > Domov </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Srednja stran </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Še ena </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Tukaj ste </li> 
</ul>

Paginacija

Izjemno poenostavljeno in minimalistično oblikovano paginiranje po navdihu Rdio. Velik blok je težko zgrešiti, zlahka ga je mogoče povečati in nudi velika območja klikanja.

<div class = "pagination" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← Prejšnji </a></li>  
    <li class = "active" ><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 = "naslednji" ><a href = "#" > Naslednji → </a></li>  
  </ul>
</div>

Osnovna opozorila

.alert-message

Enovrstična sporočila za poudarjanje neuspeha, možnega neuspeha ali uspeha dejanja. Še posebej uporabno za obrazce.

Pridobite javascript »

Primer kode

<div class = "opozorilo o opozorilnem sporočilu" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Sveti guacamole! </strong> Najbolje, da preverite sami, niste videti preveč dobro. </p>
</div>

Blokiraj sporočila

.alert-message.block-message

Za sporočila, ki zahtevajo malo razlage, imamo opozorila o slogu odstavkov. Te so kot nalašč za prikazovanje daljših sporočil o napakah, opozarjanje uporabnika na čakajoče dejanje ali samo za predstavitev informacij za večji poudarek na strani.

Pridobite javascript »

Primer kode

<div class = "alert-message block-message warning" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Sveti guacamole! To je opozorilo! </strong> Najbolje, da preverite sami, niste videti preveč dobro. 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 = "#" > Izvedite to dejanje </a> <a class = "btn small" href = "#" > Ali naredite to </a>     
  </div>
</div>

Modali

Modali – pogovorna okna ali svetlobne škatle – so odlični za kontekstualna dejanja v situacijah, ko je pomembno, da se ohrani kontekst ozadja.

Pridobite javascript »

Namigi orodij

Twipsies so super uporabni za pomoč zmedenemu uporabniku in ga usmerijo v pravo smer.

Pridobite javascript »

Popoverji

Uporabite pojavne elemente, da strani zagotovite podbesedilne informacije, ne da bi to vplivalo na postavitev.

Pridobite javascript »

Začetek

Integracija javascripta s knjižnico Bootstrap je zelo enostavna. V nadaljevanju vam bomo predstavili osnove in vam ponudili nekaj odličnih vtičnikov za lažji začetek!

Oglejte si dokumente javascript »

Kaj je vključeno

Oživite nekatere glavne komponente Bootstrapa z novimi vtičniki po meri, ki delujejo z jQuery in Ender . Spodbujamo vas, da jih razširite in spremenite tako, da ustrezajo vašim posebnim razvojnim potrebam.

Je javascript potreben?

Ne! Bootstrap je zasnovan predvsem kot knjižnica CSS. Ta javascript nudi osnovno interaktivno plast poleg vključenih slogov.

Vendar smo za tiste, ki potrebujejo javascript, ponudili zgornje vtičnike, ki vam pomagajo razumeti, kako integrirati Bootstrap z javascriptom, in vam takoj ponudijo hitro in lahko možnost za osnovno funkcionalnost.

Za več informacij in ogled nekaterih predstavitev v živo si oglejte našo stran z dokumentacijo vtičnikov .