Primjeri za brzi početak

Trebate brze predloške? Pogledajte ove osnovne primjere koje smo sastavili:

Zadana mreža

Zadani sustav rešetki koji je dio Bootstrapa je mreža od 16 stupaca širine 940 piksela. To je okus popularnog sustava rešetki 960, ali bez dodatne margine/ispune s lijeve i desne strane.

Primjer označavanja mreže

Kao što je ovdje prikazano, osnovni izgled može se stvoriti s dva "stupca", od kojih svaki obuhvaća određeni broj od 16 temeljnih stupaca koje smo definirali kao dio našeg mrežnog sustava. Pogledajte primjere u nastavku za više varijacija.

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

Gniježđenje stupaca

Ugniježdite svoj sadržaj ako morate stvaranjem .rowunutar postojećeg stupca.

Primjer ugniježđenih stupaca

<div class = "row" > 
  <div class = "span12" > 
    Razina 1 stupca
    <div class = "row" > 
      <div class = "span6" > 
        Razina 2
      </div>
      <div class = "span6" > 
        Razina 2
      </div>
    </div>
  </div>
</div>

Zamotajte vlastitu mrežu

U Bootstrap je ugrađeno nekoliko varijabli za prilagodbu zadanog sustava rešetki od 940 piksela. Uz malo prilagodbe, možete promijeniti veličinu stupova, njihove oluke i spremnik u kojem se nalaze.

Unutar mreže

Varijable potrebne za izmjenu mrežnog sustava trenutno se nalaze u variables.less.

Sada za prilagodbu

Modificiranje rešetke znači promjenu triju @grid-*varijabli i ponovno kompajliranje Less datoteka.

Bootstrap dolazi opremljen za rukovanje mrežnim sustavom s do 24 stupca; zadano je samo 16. Evo kako bi vaše varijable rešetke izgledale prilagođene mreži od 24 stupca.

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

Nakon ponovnog kompajliranja, bit ćete spremni!

Fiksni raspored

Zadani i jednostavni raspored širine 940 piksela, centriran za bilo koje web mjesto ili stranicu koju pruža jedan <div.container>.

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

Fluidni raspored

Alternativna, fleksibilna fluidna struktura stranice s minimalnom i maksimalnom širinom i bočnom trakom na lijevoj strani. Izvrstan za aplikacije i dokumente.

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

Naslovi i kopija

Standardna tipografska hijerarhija za strukturiranje vaših web stranica.

Cijela tipografska mreža temelji se na dvije Less varijable u našoj datoteci variables.less: @basefonti @baseline. Prva je osnovna veličina fonta koja se koristi u cijelom tekstu, a druga je osnovna visina retka.

Koristimo te varijable i nešto matematike za stvaranje margina, ispuna i visina redaka svih naših tipova i više.

h1. Naslov 1

h2. Naslov 2

h3. Naslov 3

h4. Naslov 4

h5. Naslov 5

h6. Naslov 6

Primjer paragrafa

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.

Primjer naslova Ima podnaslov...

Razno. elementi

Korištenje isticanja, adresa i kratica

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

Kada koristiti

Oznake za naglašavanje ( <strong>i <em>) trebaju se koristiti za označavanje dodatne važnosti ili naglašavanja riječi ili izraza u odnosu na njegovu okolnu kopiju. Koristite <strong>za važnost i <em>za naglašavanje .

Naglasak u odlomku

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.

Napomena: i dalje je u redu koristiti oznake <b>i <i>u HTML5 i ne moraju biti stilizirane podebljano i kurzivno (iako postoji semantički element, koristite ga). <b>namijenjen je za isticanje riječi ili fraza bez prenošenja dodatne važnosti, dok <i>je uglavnom za glas, tehničke izraze itd.

Adrese

Element <address>se koristi za kontakt informacije za svog najbližeg pretka ili za cjelokupno djelo. Evo dva primjera kako se to može koristiti:

Napomena: Svaki redak u <address>mora završiti prijelomom retka ( <br />) ili biti omotan u oznaku na razini bloka (npr., <p>) kako bi se pravilno strukturirao sadržaj.

Kratice

Za kratice i akronime koristite <abbr>oznaku ( <acronym>zastarjela je u HTML5 ). Stavite stenografski obrazac unutar oznake i postavite naslov za cijelo ime.

Blok citati

<blockquote> <p> <small>

Kako citirati

Za uključivanje blok citata, omotajte <blockquote>okolo <p>i <small>oznake. Upotrijebite <small>element za navođenje izvora i dobit ćete crticu em —prije njega.

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>

Neuređeno<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Cijeli broj 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 at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Nestilizirano<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Cijeli broj 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 at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Naručeno<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Cijeli broj 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

Opisdl

Liste opisa

Popis opisa savršen je za definiranje pojmova.

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.

Kodirati

<code> <pre>

Pimpirajte svoj kod u stilu s dvije jednostavne oznake. Za još više nevjerojatnosti kroz javascript, ubacite Googleovu biblioteku za uljepšavanje koda i gotovi ste.

Predstavljanje koda

Kod, blokovi ili samo isječci u liniji, mogu se prikazati sa stilom samo umotavanjem u pravu oznaku. Za blokove koda koji obuhvaćaju više redaka, koristite <pre>element. Za ugrađeni kod koristite <code>element.

<div>
  <h1>Naslov</h1>
  <p>Nešto upravo ovdje...</p>
</div>

<div> <h1> Naslov </h1> <p> Nešto upravo ovdje... </p> </div>
  
  

Inline oznake

<span class="label">

Skrenite pozornost ili označite bilo koju frazu u svom tekstu.

Označite bilo što

Jeste li ikada trebali jedan od onih otmjenih New! ili Važne oznake prilikom pisanja koda? Pa, sada ih imate. Evo što je uključeno prema zadanim postavkama:

Medijska rešetka

Prikažite minijature različitih veličina na stranicama s malim HTML tragom i minimalnim stilovima.

Primjer sličica

Sličice u .media-gridmogu biti bilo koje veličine, ali najbolje funkcioniraju kada se mapiraju izravno na ugrađeni Bootstrap grid sustav. Širine slika kao što su 90, 210 i 330 kombiniraju se s nekoliko piksela ispune kako bi se izjednačile veličine .span2, .span4, i .span6stupaca.

velika

Srednji

Mali

Kodiranje ih

Medijske rešetke su jednostavne za korištenje i prilično jednostavne na strani označavanja. Njihove dimenzije isključivo se temelje na veličini uključenih slika.

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

Građevni stolovi

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

Stolovi su izvrsni—za mnoge stvari. Sjajne tablice, međutim, trebaju malo ljubavi prema označavanju da bi bile korisne, skalabilne i čitljive (na razini koda). Evo nekoliko savjeta koji će vam pomoći.

Uvijek omotajte zaglavlja stupaca <thead>tako da hijerarhija bude <thead>> <tr>> <th>.

Slično zaglavljima stupaca, sav sadržaj tijela vaše tablice trebao bi biti omotan u <tbody>tako da je vaša hijerarhija <tbody>> <tr>> <td>.

Primjer: Zadani stilovi tablice

Sve će se tablice automatski stilizirati samo s bitnim rubovima kako bi se osigurala čitljivost i zadržala struktura. Nema potrebe dodavati dodatne klase ili atribute.

<stol>
  ...
</table>

Primjer: Sažeta tablica

Za tablice koje zahtijevaju više podataka u skučenom prostoru, upotrijebite kondenzirani okus koji prepolovljuje ispunu. Također se može koristiti u kombinaciji s obrubima i zebrastim prugama, baš kao i zadani stilovi tablica.

Primjer: Obrubljeni stol

Učinite da vaši stolovi izgledaju malo elegantnije tako što ćete zaokružiti njihove kutove i dodati obrube sa svih strana.

<table class = "bordered-table" > 
  ...
</table>

Primjer: Zebrasto prugasto

Budite malo fensi sa svojim stolovima dodavanjem zebrastih pruga—samo dodajte .zebra-stripedklasu.

Napomena: Zebra-striping je progresivno poboljšanje koje nije dostupno za starije preglednike poput IE8 i starijih.

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

Primjer: Zebrasto prugasto s TableSorter.js

Uzimajući prethodni primjer, poboljšavamo korisnost naših tablica pružanjem funkcije sortiranja putem jQueryja i dodatka Tablesorter . Pritisnite zaglavlje bilo kojeg stupca da biste promijenili sortiranje.

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

Zadani stilovi

Svi obrasci imaju zadane stilove kako bi ih predstavili na čitljiv i skalabilan način. Stilovi su predviđeni za unose teksta, popise odabira, tekstualna područja, radio gumbe i potvrdne okvire te gumbe.

Naslagani obrasci

Dodajte .form-stackedu HTML obrasca i imat ćete oznake na vrhu njihovih polja umjesto s njihove lijeve strane. Ovo odlično funkcionira ako su vaši obrasci kratki ili imate dva stupca unosa za teže obrasce.

Veličine polja obrasca

Prilagodite bilo koji oblik input, selectili textareaširinu dodavanjem samo nekoliko klasa vašem označavanju.

Od verzije 1.3.0, dodali smo klase veličine koje se temelje na mreži za elemente obrasca. Molimo koristite ove umjesto postojećih klasa .mini, .smallitd.

Gumbi

Kao konvencija, gumbi se koriste za akcije, dok se veze koriste za objekte. Na primjer, "Preuzimanje" može biti gumb, a "nedavna aktivnost" može biti poveznica.

Svi gumbi prema zadanim postavkama imaju svijetlo sivi stil, no moguće je primijeniti brojne funkcionalne klase za različite stilove boja. Ove klase uključuju plavu .primaryklasu, svijetloplavu .infoklasu, zelenu .successklasu i crvenu .dangerklasu.

Primjer gumba

Stilovi gumba mogu se primijeniti na bilo što s .btnprimijenjenim. Obično ćete ih željeti primijeniti samo na <a>, <button>i odabrane <input>elemente. Evo kako to izgleda:

Alternativne veličine

Želite li veće ili manje gumbe? Navalite na to!

Onesposobljeno stanje

Za gumbe koji nisu aktivni ili ih je aplikacija onemogućila iz ovog ili onog razloga, koristite stanje onemogućeno. To je .disabledza veze i :disabledza <button>elemente.

Linkovi

Gumbi

Što je

Naša gornja traka je fiksna traka na kojoj se nalazi logotip ili naziv web stranice, primarna navigacija i obrazac za pretraživanje.

Prilagodljiv

Svi elementi unutar, kao i cijela gornja traka, nisu obavezni. Možete uključiti logotip/ime, navigaciju, pretraživanje i sekundarnu navigaciju—ili bilo koju kombinaciju toga.

Padajući izbori uključeni

Kao dio glavne navigacije, uključili smo mogućnost dodavanja padajućih izbornika vašoj navigaciji. Pogledajte sekundarnu navigaciju iznad (desno poravnato) da vidite kako se to radi. Padajuće lioznake također podržavaju .activeprikazivanje trenutnog odabira stranice.

Tablete i pilule

Stvorite jednostavnu sekundarnu navigaciju s <ul>. Mijenjajte tablete ili pilule dodavanjem odgovarajuće klase.

Izvrsno za pododjeljke sadržaja kao što su naše stranice s postavkama računa i korisničke vremenske trake za prebacivanje između stranica sličnog sadržaja. Dostupan u obliku kartica ili tableta.

Primjer osnovnih kartica

Kartice se mogu koristiti kao redovita navigacija (učitavanje vanjskih stranica u istoj kartici) ili kao područja sadržaja s karticama za izmjenu okna sadržaja. Imamo dodatak za kartice koji se može koristiti za integraciju potonjeg.

• Dom
• Profil
• Poruke
• postavke
• Kontakt
• Padajući izbornik
  • Sekundarna veza
  • Nešto drugo ovdje
  • Još jedna poveznica

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Početna </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Poruke </a></li> 
  <li><a href = "#" > Postavke </a></li> 
  <li><a href = "#" > Kontakt </a></li> 
</ul>

Primjer osnovnih tableta

• Dom
• Profil
• Poruke
• postavke
• Kontakt

<ul class = "pilule" > 
  <li class = "active" ><a href = "#" > Početna </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Poruke </a></li> 
  <li><a href = "#" > Postavke </a></li> 
  <li><a href = "#" > Kontakt </a></li> 
</ul>

Krušne mrvice

Navigacija putem puta koristi se kao način da se korisnicima pokaže gdje se nalaze unutar aplikacije ili web-mjesta, ali ne za primarnu navigaciju.

• Dom

• Početna /
• Srednja stranica

• Početna /
• Srednja stranica /
• Još jedan

• Početna /
• Srednja stranica /
• još jedan /
• Ti si ovdje

<ul class = "breadcrumb" > 
  <li><a href = "#" > Početna </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Srednja stranica </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Još jedan </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Ovdje ste </li> 
</ul>

Paginacija

Izuzetno pojednostavljena i minimalistički stilizirana paginacija inspirirana Rdio-om. Veliki blok teško je promašiti, lako ga je prilagoditi i pruža velika područja klika.

<div class = "pagination" > 
  <ul>
    <li class = "prethodno onemogućeno" ><a href = "#" > ← Prethodna </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 = "next" ><a href = "#" > Next → </a></li>  
  </ul>
</div>

Osnovna upozorenja

.alert-message

Jednolinijske poruke za isticanje neuspjeha, mogućeg neuspjeha ili uspjeha akcije. Posebno korisno za obrasce.

Preuzmite javascript »

Primjer koda

<div class = "upozorenje o poruci upozorenja" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Sveti guacamole! </strong> Najbolje da provjerite sami, ne izgledate baš dobro. </p>
</div>

Blokiraj poruke

.alert-message.block-message

Za poruke koje zahtijevaju malo objašnjenja, imamo upozorenja o stilu odlomka. Oni su savršeni za pojavljivanje dužih poruka o pogrešci, upozoravanje korisnika na radnju na čekanju ili samo predstavljanje informacija za veći naglasak na stranici.

Preuzmite javascript »

Primjer koda

<div class = "alert-message block-message warning" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Sveti guacamole! Ovo je upozorenje! </strong> Najbolje da provjerite sami, ne izgledate baš 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 = "#" > Poduzmi ovu radnju </a> <a class = "btn small" href = "#" > Ili učini ovo </a>     
  </div>
</div>

Modali

Modali—dijalozi ili svjetlosni okviri—odlični su za kontekstualne radnje u situacijama u kojima je važno zadržati pozadinski kontekst.

Preuzmite javascript »

Opisi alata

Twipsies su super korisni za pomoć zbunjenom korisniku i usmjeravanje u pravom smjeru.

Preuzmite javascript »

Popovers

Koristite skočne prozore za pružanje podtekstualnih informacija stranici bez utjecaja na izgled.

Preuzmite javascript »

Početak rada

Integracija javascripta s bibliotekom Bootstrap vrlo je jednostavna. U nastavku ćemo proći kroz osnove i pružiti vam neke sjajne dodatke za početak!

Pogledaj javascript dokumente »

Što je uključeno

Oživite neke od primarnih komponenti Bootstrapa s novim prilagođenim dodacima koji rade s jQuery i Ender . Potičemo vas da ih proširite i modificirate kako bi odgovarali vašim specifičnim razvojnim potrebama.

Je li potreban javascript?

Ne! Bootstrap je dizajniran prije svega kao CSS biblioteka. Ovaj javascript pruža osnovni interaktivni sloj povrh uključenih stilova.

Međutim, za one koji trebaju javascript, osigurali smo gore navedene dodatke kako bismo vam pomogli razumjeti kako integrirati Bootstrap s javascriptom i da bismo vam odmah pružili brzu, laganu opciju za osnovnu funkcionalnost.

Za više informacija i da vidite neke demonstracije uživo, pogledajte našu stranicu s dokumentacijom o dodacima .