Povijest

U ranijim danima Twittera, inženjeri su koristili gotovo sve biblioteke koje su im bile poznate kako bi zadovoljili zahtjeve front-enda. Bootstrap je započeo kao odgovor na izazove koji su se pojavili i razvoj se brzo ubrzao tijekom prvog Twitterovog Hackweeka.

Uz pomoć i povratne informacije mnogih inženjera na Twitteru, Bootstrap je značajno narastao kako bi obuhvatio ne samo osnovne stilove, već i elegantnije i izdržljivije prednje dizajne.

Pročitajte više na dev.twitter.com ›

Podrška za preglednik

Bootstrap je testiran i podržan u glavnim modernim preglednicima kao što su Chrome, Safari, Internet Explorer i Firefox.

• Najnoviji Safari
• Najnoviji Google Chrome
• Firefox 4+
• Internet Explorer 7+
• Opera 11

Što je uključeno

Bootstrap dolazi zajedno s kompajliranim CSS-om, neprevedenim i oglednim predlošcima.

• Sve izvorne .less datoteke
• Potpuno kompajliran i smanjen CSS
• Potpuna dokumentacija stilskog vodiča
• Primjer predloška stranice (više uskoro)

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

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 preboot.less datoteci: @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 kako to izgleda:

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

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, zaokruži <blockquote>i <p>oznake <small>. 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

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.

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.

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

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

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.

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

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

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 može je nešto drugo i njezin odabir će poništiti odabir opcije 1

  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

X-veliki unos

Mali isječak teksta pomoći

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.

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

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

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

div.alert-message

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

Blokiraj poruke

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

Modali

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

Savjeti za alate

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

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" href = "less/bootstrap.less" media = "all" />    
<script src = "js/less-1.1.3.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

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 mreža
@osnovnifont : 13px ;          
@osnovna linija : 18px ;          

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    
    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   
    pozadina - slika : linearna - gradijent ( @startColor , @endColor ); // Standard  
  }
  . usmjeren ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . okomito - tri - boje ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @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 ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// Grid sustav
. kontejner {
  širina : @siteWidth ; 
  margina : 0 auto ;  
  . clearfix ();
}
. stupci ( @columnSpan : 1 ) {  
  širina : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}
. pomak ( @columnOffset : 1 ) {  
  margina - lijevo : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
}