Primjeri za brzi početak

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

Zadana mreža

Podrazumevani sistem mreže koji je obezbeđen kao deo Bootstrapa je mreža sa 16 kolona širine 940px. To je okus popularnog 960 grid sistema, ali bez dodatnih margina/podstava na lijevoj i desnoj strani.

Primjer mrežne oznake

Kao što je ovde prikazano, osnovni raspored se može kreirati sa dve "kolone", od kojih svaka obuhvata niz od 16 temeljnih kolona koje smo definisali kao deo našeg sistema mreže. Pogledajte primjere u nastavku za više varijacija.

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

Nesting columns

Ugnijezdite svoj sadržaj ako morate kreiranjem .rowunutar postojeće kolone.

Primjer ugniježđenih stupaca

<div class = "red" > 
  <div class = "span12" > 
    Nivo 1 kolone
    <div class = "red" > 
      <div class = "span6" > 
        Nivo 2
      </div>
      <div class = "span6" > 
        Nivo 2
      </div>
    </div>
  </div>
</div>

Zamotajte svoju mrežu

U Bootstrap je ugrađeno nekoliko varijabli za prilagođavanje zadanog sistema mreže od 940px. Uz malo prilagođavanja, možete izmijeniti veličinu stupaca, njihovih oluka i kontejnera u kojem se nalaze.

Unutar mreže

Varijable potrebne za modifikaciju mrežnog sistema trenutno se nalaze u variables.less.

Sada da prilagodite

Izmjena mreže znači promjenu tri @grid-*varijable i ponovno kompajliranje Less datoteka.

Bootstrap je opremljen za rukovanje mrežnim sistemom sa do 24 kolone; zadana vrijednost je samo 16. Evo kako bi vaše varijable mreže izgledale prilagođene mreži od 24 stupca.

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

Nakon ponovnog kompajliranja, bit ćete postavljeni!

Fiksni raspored

Zadani i jednostavan 940px širok, centriran izgled za gotovo bilo koju web stranicu ili stranicu koju pruža jedan <div.container>.

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

Fluid layout

Alternativna, fleksibilna fluidna struktura stranice sa minimalnom i maksimalnom širinom i lijevom bočnom trakom. Odlično za aplikacije i dokumente.

<tijelo>
  <div class = "kontejner-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 je zasnovana na dvije varijable Less u našoj datoteci varijabli.less: @basefonti @baseline. Prva je osnovna veličina fonta koja se koristi u cijelom, a druga je visina osnovne linije.

Koristimo te varijable, i malo matematike, da kreiramo margine, dopune i visine linija svih naših tipova i još mnogo toga.

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…

Misc. elementi

Korištenje naglaska, adresa i skraćenica

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

Kada koristiti

Oznake za naglasak ( <strong>i <em>) treba da se koriste da ukažu na dodatnu važnost ili naglasak riječi ili fraze u odnosu na njenu okolnu kopiju. Koristite <strong>za važnost i <em>za naglašavanje stresa .

Naglasak u paragrafu

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, a pharetra augue.

Napomena: I dalje je u redu koristiti <b>i <i>oznake u HTML5 i ne moraju biti stilizovane podebljano i kurzivno (mada ako postoji više semantičkog elementa, koristite ga). <b>je namijenjen da istakne riječi ili fraze bez prenošenja dodatne važnosti, dok <i>je uglavnom za glas, tehničke termine, itd.

Adrese

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

Napomena: Svaki red u an <address>mora završiti prijelomom reda ( <br />) ili biti umotan u oznaku na nivou bloka (npr. <p>) kako bi se sadržaj pravilno strukturirao.

Skraćenice

Za skraćenice i akronime, koristite <abbr>oznaku ( <acronym>je zastarjela u HTML5 ). Stavite skraćeni obrazac unutar oznake i postavite naslov za kompletno ime.

Blockquotes

<blockquote> <p> <small>

Kako citirati

Da biste uključili blok citat , omotajte <blockquote>i oznake. Koristite element da citirate svoj izvor i prije njega ćete dobiti em crticu .<p><small><small>&mdash;

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

Unstyled<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer 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. Integer 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

Lista opisa je savršena 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.

Kod

<code> <pre>

Pojačajte svoj kod sa stilom s dvije jednostavne oznake. Za još više sjaja putem javascripta, ubacite Googleovu biblioteku koda pretify i spremni ste.

Predstavljanje koda

Kod, blokovi ili samo isječci u liniji, mogu se prikazati sa stilom samo umotavanjem u desnu oznaku. Za blokove koda koji obuhvataju više redova, koristite <pre>element. Za inline 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 etikete

<span class="label">

Skrenite pažnju ili označite bilo koju frazu u svom tekstu.

Označite bilo šta

Oduvijek vam je trebao jedan od ovih otmjenih novih! ili Važne zastavice prilikom pisanja koda? Pa, sada ih imate. Evo šta je podrazumevano uključeno:

Medijska mreža

Prikažite sličice različitih veličina na stranicama s malim HTML otiskom i minimalnim stilovima.

Primjer sličica

Sličice .media-gridmogu biti bilo koje veličine, ali najbolje rade kada se mapiraju direktno na ugrađeni Bootstrap sistem mreže. Širina slike kao što je 90, 210 i 330 kombinuje se sa nekoliko piksela dopuna da bi se izjednačile veličine .span2, .span4, i .span6kolone.

Veliko

Srednje

Mala

Kodiranje ih

Mreže medija su jednostavne za korištenje i prilično jednostavne na strani označavanja. Njihove dimenzije su isključivo zasnovane 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đevinski stolovi

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

Stolovi su odlični - za mnoge stvari. Sjajnim tablicama je, međutim, potrebno malo markupiranja da bi bile korisne, skalabilne i čitljive (na nivou koda). Evo nekoliko savjeta koji će vam pomoći.

Uvijek umotajte zaglavlja stupaca u <thead>tako da je hijerarhija <thead>> <tr>> <th>.

Slično zaglavljima kolona, ​​sav sadržaj tijela vaše tablice treba biti umotan u a <tbody>tako da je vaša hijerarhija <tbody>> <tr>> <td>.

Primjer: Zadani stilovi tablice

Sve tabele će biti automatski stilizovane samo sa osnovnim ivicama kako bi se osigurala čitljivost i zadržala struktura. Nema potrebe za dodavanjem dodatnih klasa ili atributa.

<tablica>
  ...
</table>

Primjer: sažeta tablica

Za tabele koje zahtevaju više podataka u skučenim prostorima, koristite zgusnutu aromu koja smanjuje dopunu na pola. Takođe se može koristiti u kombinaciji sa ivicama i zebrastim prugama, baš kao i podrazumevani stilovi tabele.

Primjer: obrubljena tablica

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

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

Primjer: prugasta zebra

Zamislite se malo sa svojim stolovima dodavanjem zebrastih pruga—samo dodajte .zebra-stripedklasu.

Napomena: Zebra-traka je progresivno poboljšanje koje nije dostupno za starije pretraživače poput IE8 i starijih.

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

Primjer: Zebra sa prugama w/ TableSorter.js

Uzimajući prethodni primjer, poboljšavamo korisnost naših tabela pružanjem funkcionalnosti sortiranja putem jQueryja i dodatka Tablesorter . Kliknite na zaglavlje bilo koje kolone da promijenite sortiranje.

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

Zadani stilovi

Svim obrascima su dati zadani stilovi kako bi se predstavili na čitljiv i skalabilan način. Stilovi su obezbeđeni za unos teksta, birane liste, tekstualne oblasti, radio dugmad i polja za potvrdu i dugmad.

Naslagane forme

Dodajte .form-stackedu HTML svog 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 dvije kolone unosa za teže obrasce.

Veličine polja obrazaca

Prilagodite bilo koji oblik input, selectili textareaširinu dodavanjem samo nekoliko klasa vašoj markaciji.

Od v1.3.0, dodali smo klase za određivanje veličine zasnovane na mreži za elemente obrasca. Molimo koristite ove preko postojećih .mini, .small, itd klasa.

Dugmad

Kao konvencija, dugmad se koriste za radnje, dok se veze koriste za objekte. Na primjer, "Preuzmi" može biti dugme, a "nedavna aktivnost" može biti veza.

Svi tasteri su podrazumevani svetlosivi stil, ali brojne funkcionalne klase se mogu primeniti za različite stilove boja. Ove klase uključuju plavu .primaryklasu, svijetloplavu .infoklasu, zelenu .successklasu i klasu crvene boje .danger.

Primer dugmadi

Stilovi dugmadi se mogu primijeniti na sve što je .btnprimijenjeno. Obično ćete ih željeti primijeniti samo na elemente <a>, <button>, i select . <input>Evo kako to izgleda:

Alternativne veličine

Želite veće ili manje dugmad? Imajte to!

Disabled state

Za dugmad koja nisu aktivna ili ih je aplikacija onemogućila iz jednog ili drugog razloga, koristite stanje onemogućeno. To je .disabledza veze i :disabledza <button>elemente.

Linkovi

Dugmad

Šta je

Naša gornja traka je fiksna traka koja sadrži logotip ili naziv web stranice, primarnu navigaciju i obrazac za pretraživanje.

Prilagodljivo

Svi elementi unutar, kao i cijela gornja traka, su opcioni. Možete odabrati da uključite logotip/ime, navigaciju, pretragu i sekundarnu navigaciju—ili bilo koju kombinaciju toga.

Padajući meni uključeni

Kao dio glavne navigacije, uključili smo mogućnost za dodavanje padajućih menija u svoju navigaciju. Pogledajte sekundarnu navigaciju iznad (desno poravnato) da vidite kako se to radi. Padajuće lioznake takođe podržavaju .activeprikaz trenutnog odabira stranice.

Tablete i pilule

Napravite jednostavnu sekundarnu navigaciju pomoću <ul>. Prebacivanje između tableta ili tableta dodavanjem odgovarajuće klase.

Odlično za pododjeljke sadržaja kao što su naše stranice s postavkama računa i vremenski okviri korisnika za prebacivanje između stranica sličnog sadržaja. Dostupan u obliku tableta ili tableta.

Primjer osnovnih kartica

Kartice se mogu koristiti kao redovna navigacija (učitavanje vanjskih stranica u istoj kartici) ili kao područja sadržaja sa karticama za zamjenu panela sadržaja. Imamo dodatak za tabs koji se može koristiti za integraciju potonjeg.

• Dom
• Profil
• Poruke
• Postavke
• Kontakt
• Ispustiti
  • Sekundarna veza
  • Nešto drugo ovdje
  • Još jedan link

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

Mrvice hljeba

Breadcrumb navigacija se koristi kao način da se korisnicima pokaže gdje se nalaze unutar aplikacije ili web lokacije, ali ne i za primarnu navigaciju.

• Dom

• Početna /
• Srednja stranica

• Početna /
• Srednja stranica /
• Drugi

• Početna /
• Srednja stranica /
• jos 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" > Vi ste ovdje </li> 
</ul>

Paginacija

Ultra pojednostavljena i minimalno stilizovana paginacija inspirisana Rdio-om. Veliki blok je teško promašiti, lako je skalabilan i pruža velike površine klikova.

<div class = "paginacija" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← Prethodno </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

Poruke u jednom redu za isticanje neuspjeha, mogućeg neuspjeha ili uspjeha akcije. Posebno korisno za formulare.

Preuzmite javascript »

Primjer koda

<div class = "upozorenje o poruci upozorenja" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Sveti guacamole! </strong> Najbolje 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 pasusa. Oni su savršeni za pojavljivanje dužih poruka o grešci, upozorenje korisnika na radnju na čekanju ili samo predstavljanje informacija radi većeg naglaska na stranici.

Preuzmite javascript »

Primjer koda

<div class = "upozorenje o blok-poruci poruke upozorenja" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Sveti guacamole! Ovo je upozorenje! </strong> Najbolje 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 uradi ovo </a>     
  </div>
</div>

Modals

Modali — dijalozi ili okviri za pregled — odlični su za kontekstualne radnje u situacijama u kojima je važno da se pozadinski kontekst održava.

Preuzmite javascript »

Alati

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

Preuzmite javascript »

Popovers

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

Preuzmite javascript »

Počinjemo

Integracija javascripta sa Bootstrap bibliotekom je super jednostavna. U nastavku prelazimo na osnove i pružamo vam neke sjajne dodatke za početak!

Prikaži javascript dokumente »

Šta je uključeno

Oživite neke od primarnih komponenti Bootstrapa pomoću novih prilagođenih dodataka koji rade sa jQuery i Ender . Podstičemo vas da ih proširite i modifikujete kako bi odgovarali vašim specifičnim razvojnim potrebama.

Da li je javascript neophodan?

Ne! Bootstrap je prvenstveno dizajniran da bude CSS biblioteka. Ovaj javascript pruža osnovni interaktivni sloj na vrhu uključenih stilova.

Međutim, za one kojima je potreban javascript, dali smo gornje dodatke koji će vam pomoći da shvatite kako da integrišete Bootstrap sa javascriptom i da vam odmah damo brzu, laganu opciju za osnovnu funkcionalnost.

Za više informacija i da vidite neke demonstracije uživo, pogledajte našu stranicu dokumentacije dodataka .