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"> klasa = "red" >
  <div class = "span6 stupaca" > 
    ...
  </div>
  <div class = "span10 columns" > 
    ...
  </div>
</div>

Fiksni raspored

Osnovni raspored spremnika širine 940 piksela, centriran za gotovo bilo koje mjesto ili stranicu.

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

Fluidni raspored

Fleksibilna fluidna ili tekuća struktura stranice s minimalnom i maksimalnom širinom i bočnom trakom na lijevoj strani. Izvrstan za aplikacije.

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

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

Također možete dodati podnaslove pomoću <strong>i<em>

Razno. elementi

Korištenje isticanja, adresa i kratica

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

Kada koristiti

Oznake za naglašavanje ( <strong>i <em>) trebale bi se koristiti za dodavanje vizualne razlike između riječi ili fraze i njezine okolne kopije. Koristite <strong>za običnu staru pozornost i <em>za uglađenu pozornost i naslove.

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.

Adrese

Element addressse koristi za — pogađate! — adrese. Evo kako to izgleda:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Napomena: Svaki redak addressmora završavati prijelomom retka ( <br />) kako bi se pravilno strukturirao sadržaj onako kako se čita u stvarnom životu bez primjene ikakvih stilova.

Kratice

Za kratice i akronime koristite abbroznaku ( acronymzastarjela je u HTML5 ). Stavite stenografski obrazac unutar oznake i postavite naslov za cijelo ime.

Blok citati

<blockquote> <p> <cite>

Obavezno zamotajte svoje blockquoteoko paragraphi citeoznake. Kada navodite izvor, koristite citeelement. CSS će automatski ispred imena staviti crticu (—).

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...

dr. Julius Hibbert

Neuređeno<ul>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Moji suigrači
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Novi čovjek
• Ivana Jakova
• Paul Pierce
• Kevin Garnett

Nestilizirano<ul.unstyled>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Moji suigrači
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Novi čovjek
• Ivana Jakova
• Paul Pierce
• Kevin Garnett

Naručeno<ol>

1. Jeremy Bixby
2. Robert Dezure
3. Josh Washington
4. Anton Capresi
5. Moji suigrači
   1. George Castanza
   2. Jerry Seinfeld
   3. Cosmo Kramer
   4. Elaine Bennis
   5. Novi čovjek
6. Ivana Jakova
7. Paul Pierce
8. Kevin Garnett

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.

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 theadtako da hijerarhija bude thead> tr> th.

Slično zaglavljima stupaca, sav sadržaj tijela vaše tablice trebao bi biti omotan u tbodytako 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.

#	Ime	Prezime	Jezik
1	Neki	Jedan	Engleski
2	Joe	Sixpack	Engleski
3	Stu	Utiskivati	Kodirati

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

Primjer: Zebrasto prugasto

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

#	Ime	Prezime	Jezik
1	Neki	Jedan	Engleski
2	Joe	Sixpack	Engleski
3	Stu	Utiskivati	Kodirati

<table class = "common-table 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.

#	Ime	Prezime	Jezik
1	Vaš	Jedan	Engleski
2	Joe	Sixpack	Engleski
3	Stu	Utiskivati	Kodirati

<script type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script>  
<script type = "text/javascript" > 
  $ ( dokument ). spreman ( funkcija () { 
    $ ( "table#sortTableExample" ). sorter tablica ( { sortirajList : [[ 1 , 0 ]]} );   
  });
</script>
<table class = "common-table 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.

Primjer legende obrasca

X-veliki unos

Odaberi

1 2 3 4 5

Odaberi

1 2 3 4 5

Unos koji se ne može uređivati

Ovdje ima neke vrijednosti

Onemogućen unos

X-veliki unos

Mali isječak teksta pomoći

Primjer legende obrasca

Tekst na početku

@

Dodani potvrdni okvir

Dodan potvrdni okvir

Unos datoteke

Primjer legende obrasca

Popis opcija

• Prva opcija je ovo i to—obavezno navedite zašto je super
• Opcija dva također se može provjeriti i uključiti u rezultate obrasca
• Opcija tri se također može provjeriti i uključiti u rezultate obrazaca, da, pogodili ste
• Opcija četiri ne može se označiti jer je onemogućena.

Napomena: Oznake okružuju sve opcije za mnogo veća područja klika i upotrebljiviji obrazac.

Raspon datuma

do Sva su vremena prikazana kao pacifičko standardno vrijeme (GMT -08:00).

Textarea

Blok teksta pomoći za opis gornjeg polja ako je potrebno.

Popis opcija

• Prva opcija je ovo i to—obavezno navedite zašto je super
• Opcija dva također se može provjeriti i uključiti u rezultate obrasca

Spremi promjene Otkazati

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.

Primjer legende obrasca

X-veliki unos

Odaberi

1 2 3 4 5

Primjer legende obrasca

Popis opcija

• Prva opcija je ovo i to—obavezno navedite zašto je super
• Opcija dva također se može provjeriti i uključiti u rezultate obrasca

Napomena: Oznake okružuju sve opcije za mnogo veća područja klika i upotrebljiviji obrazac.

Spremi promjene Otkazati

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.

Zadani su svi gumbi u svijetlo sivom stilu, ali .primaryje dostupna plava klasa. Osim toga, lako je oblikovati vlastite stilove.

Primjer gumba

Stilovi gumba mogu se primijeniti na bilo što s .btnprimijenjenim. Obično ćete ih željeti primijeniti samo na a, buttoni odabrane inputelemente. 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 buttonelemente.

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.

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.

• Dom
• Profil
• Poruke
• postavke
• Kontakt

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

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

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 = "pret disabled" ><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

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

Blokiraj poruke

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.

Modali

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

Popovers

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

Bootstrap je izgrađen s Prebootom , open-source paketom mixina i varijabli koje se koriste zajedno s Lessom , CSS pretprocesorom za brži i lakši web razvoj.

Provjerite kako smo koristili Preboot u Bootstrapu i kako ga možete iskoristiti ako odlučite pokrenuti Less na svom sljedećem projektu.

Kako ga koristiti

Upotrijebite ovu opciju kako biste u potpunosti iskoristili Bootstrapove Less varijable, mixins i ugniježđivanje u CSS putem javascripta u vašem pregledniku.

<link rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" media = "all" />     
<script type = "text/javascript" src = "js/less-1.0.41.min.js" ></script>  

Ne osjećate .js rješenje? Isprobajte aplikaciju Less Mac ili koristite Node.js za kompajliranje kada implementirate svoj kod.

Što je uključeno

Ovdje su neke od istaknutih stvari koje su uključene u Twitter Bootstrap kao dio Bootstrapa. Idite na web stranicu Bootstrap ili stranicu Github projekta kako biste preuzeli i saznali više.

Varijable boja

Varijable u Lessu savršene su za održavanje i ažuriranje vašeg CSS-a bez glavobolje. Kada želite promijeniti vrijednost boje ili često korištenu vrijednost, ažurirajte je na jednom mjestu i gotovi ste.

// Veze
@linkColor : #8b59c2;         
@linkColorHover :     potamniti ( @linkColor , 10 ); 
 
// Sivi
@crna : #000;             
@grayDark :           posvijetliti ( @black , 25 %); 
@sivo :               posvijetliti ( @crno , 50 %); 
@grayLight :          posvijetliti ( @black , 70 %); 
@grayLighter :        posvijetliti ( @black , 90 %); 
@bijelo : #fff;             
 
// Naglašene boje
@plava : #08b5fb;              
@zeleno : #46a546;             
@crveno : #9d261d;               
@žuta : #ffc40d ;            
@narančasta : #f89406 ;            
@ružičasta : #c3325f ;              
@ljubičasta : #7a43b6 ;            
 
// Osnovna linija
@osnovna linija : 20px ;          

Komentiranje

Less također nudi drugi stil komentiranja uz uobičajenu /* ... */sintaksu CSS-a.

// Ovo je komentar
/* Ovo je također komentar */

Miješa wazoo

Miksini su u osnovi uključeni ili djelomični za CSS, omogućujući vam da kombinirate blok koda u jedan. Izvrsni su za svojstva s prefiksom dobavljača kao što su box-shadow, gradijenti u različitim preglednicima, hrpe fontova i više. Ispod je uzorak mixina koji su uključeni u Bootstrap.

Hrpe fontova

#font {
  . skraćeno ( @weight : normalno , @size : 14px , @lineHeight : 20px ) {     
veličina     fonta : @ veličina ; 
težina     fonta : @ težina ; 
    linija - visina : @lineHeight ; 
  }
  . sans - serif ( @weight : normalno , @size : 14px , @lineHeight : 20px ) {     
obitelj     fontova : " Helvetica Neue" , Helvetica , Arial , sans - serif ;   
veličina     fonta : @ veličina ; 
težina     fonta : @ težina ; 
    linija - visina : @lineHeight ; 
  }
  . serif ( @weight : normalno , @size : 14px , @lineHeight : 20px ) {     
obitelj     fontova : " Georgia" , Times New Roman , Times , sans - serif ;     
veličina     fonta : @ veličina ; 
težina     fonta : @ težina ; 
    linija - visina : @lineHeight ; 
  }
  . monospace ( @weight : normalno , @size : 12px , @lineHeight : 20px ) {     
    font - obitelj : "Monaco" , Courier New , monospace ;   
veličina     fonta : @ veličina ; 
težina     fonta : @ težina ; 
    linija - visina : @lineHeight ; 
  }
}

Gradijenti

#gradijent {
  . horizontalno ( @startColor : #555, @endColor: #333) { 
boja     pozadine : @endColor ; _ 
    pozadina - ponavljanje : ponavljanje - x ;
    pozadina - slika : - khtml - gradijent ( linearno , lijevo gore , desno gore , od ( @startColor ), do ( @endColor )); // Konqueror   
    pozadina - slika : - moz - linearna - gradijent ( lijevo , @startColor , @endColor ); // FF 3.6+    
    pozadina - slika : - ms - linearna - gradijent ( lijevo , @startColor , @endColor ); // IE10    
    pozadina - slika : - webkit - gradijent ( linearno , lijevo gore , desno gore , boja - stop ( 0 %, @startColor ), boja - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    pozadina - slika : - webkit - linearna - gradijent ( lijevo , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    pozadina - slika : - o - linearna - gradijent ( lijevo , @startColor , @endColor ); // Opera 11.10    
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 & IE7 
    pozadina - slika : linearna - gradijent ( lijevo , @startColor , @endColor ); // Le standard   
  }
  . okomito ( @startColor : #555, @endColor: #333) { 
boja     pozadine : @endColor ; _ 
    pozadina - ponavljanje : ponavljanje - x ;
    pozadina - slika : - khtml - gradijent ( linearno , lijevo gore , lijevo dolje , od ( @startColor ), do ( @endColor )); // Konqueror   
    pozadina - slika : - moz - linearna - gradijent ( @startColor , @endColor ); // FF 3.6+   
    pozadina - slika : - ms - linearna - gradijent ( @startColor , @endColor ); // IE10   
    pozadina - slika : - webkit - gradijent ( linearno , lijevo gore , lijevo dolje , boja - stop ( 0 %, @startColor ), boja - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    pozadina - slika : - webkit - linearna - gradijent ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    pozadina - slika : - o - linearna - gradijent ( @startColor , @endColor ); // Opera 11.10   
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 & IE7 
    pozadina - slika : linearna - gradijent ( @startColor , @endColor ); // Standard  
  }
  . usmjeren ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . okomito - tri - boje ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Operacije i grid sustav

Budite maštoviti i izvedite neke matematike kako biste generirali fleksibilne i moćne miksine kao što je ovaj u nastavku.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
 
// Grid sustav
. kontejner {
  širina : @siteWidth ; 
  margina : 0 auto ;  
  . clearfix ();
}
. stupci ( @columnSpan : 1 ) {  
  prikaz : inline ; 
  plovak : lijevo ;
  širina : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  margina - lijevo : @gridGutterWidth ; 
  &: prvi - dijete {
    margina - lijevo : 0 ; 
  }
}
. pomak ( @columnOffset : 1 ) {  
  margina - lijevo : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! važno ;          
}