Hotlink CSS

Za najbrži i najlakši početak, samo kopirajte ovaj isječak na svoju web stranicu.

Koristite ga sa manje

Obožavate li koristiti manje? Nema problema, samo klonirajte repo i dodajte ove redove:

Fork na GitHubu

Preuzmi, fork, pull, fajlove i još mnogo toga uz službeni Bootstrap repo na Githubu.

istorija

U ranijim danima Twittera, inženjeri su koristili gotovo svaku biblioteku koja im je bila poznata da bi ispunili zahtjeve front-enda. Bootstrap je započeo kao odgovor na izazove koji su se predstavili i razvoj se brzo ubrzao tokom prvog Twitter-ovog Hackweek-a.

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 obrasce dizajna front-enda.

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

Podrška za pretraživač

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

Latest Safari
Najnoviji Google Chrome
Firefox 4+
Internet Explorer 7+

Šta je uključeno

Bootstrap dolazi u kompletu sa prevedenim CSS, nekompajliranim i primjernim predlošcima.

Svi originalni .less fajlovi
Potpuno kompajliran i minimiziran CSS
Kompletna dokumentacija vodiča za stil
Primjer šablona stranice (više uskoro)

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

Offseting kolone

8 pomak 4

4 pomak 4

5 pomak 3

10 ofset 6

Fiksni raspored

Osnovni raspored kontejnera širine 940px, centriran za bilo koju web lokaciju ili stranicu.

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

Fluidni raspored

Fleksibilna fluidna ili tečna struktura stranice s minimalnom i maksimalnom širinom i lijevom bočnom trakom. Odlično za aplikacije.

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

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, ali one više ne dolaze s inherentnim stilovima. <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 kako to izgleda:

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

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

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

Liste

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

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Opis`dl`

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.

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.

#	Ime	Prezime	Jezik
1	Neki	Jedan	engleski
2	Joe	Trbušnjaci	engleski
3	Stu	Dent	Kod

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

Primjer: prugasta zebra

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

#	Ime	Prezime	Jezik
1	Neki	Jedan	engleski
2	Joe	Trbušnjaci	engleski
3	Stu	Dent	Kod

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

<table class = "zajednička tablica 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.

#	Ime	Prezime	Jezik
1	Tvoje	Jedan	engleski
2	Joe	Trbušnjaci	engleski
3	Stu	Dent	Kod

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

Fiksna gornja traka

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

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.

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

<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

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

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

Oh snap! Promijenite ovo i to i pokušajte ponovo.

Holy gaucamole! Najbolje da se proveri, ne izgledaš baš dobro.

Dobro urađeno! Uspješno ste pročitali ovu poruku upozorenja.

Glavu gore! Ovo je upozorenje koje zahtijeva vašu pažnju, ali još uvijek nije veliki prioritet.

Blokiraj poruke

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.

Oh snap! Imate grešku!Promijenite ovo i to i pokušajte ponovo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Preduzmi ovu akciju Ili uradi ovo

Holy gaucamole! Ovo je upozorenje!Najbolje da se proveri, ne izgledaš baš dobro. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Preduzmi ovu akciju Ili uradi ovo

Dobro urađeno!Uspješno ste pročitali ovu poruku upozorenja. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.

Preduzmi ovu akciju Ili uradi ovo

Glavu gore!Ovo je upozorenje koje zahtijeva vašu pažnju, ali još uvijek nije veliki prioritet.

Preduzmi ovu akciju Ili uradi ovo

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.

Savjeti za alate

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

Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta Eaque Beae Aplikal Explicabo, Voluptas Quia Odit Fugit Accupantium Totam Totam Architecto Explicabo Sit Quam Fugit Fugit Sunt Sed Dictas Nemo VolupTas VolupTatem Rem Quae Aut Veritatis Quae Quae.

ispod!

desno!

lijevo!

iznad!

Popovers

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

Bootstrap je napravljen sa Preboot -om , open-source paketom miksa i varijabli koje će se koristiti u sprezi sa Lessom , CSS predprocesorom za brži i lakši razvoj weba.

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

Koristite ovu opciju da biste u potpunosti iskoristili Bootstrapove Less varijable, mikseve i ugniježđenje u CSS-u putem javascripta u vašem pretraživaču.

<link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />    
<script 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.

Šta je uključeno

Evo nekih od najvažnijih detalja onoga što je uključeno u Twitter Bootstrap kao dio Bootstrapa. Idite na web stranicu Bootstrap ili stranicu projekta Github da preuzmete i naučite više.

Varijable boja

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

// Linkovi
@linkColor : #8b59c2;         
@linkColorHover : potamniti (     @linkColor , 10 ); 
 
// Greys
@black : #000;             
@grayDark :           posvijetliti ( @black , 25 %); 
@siva :               posvijetli ( @crna , 50 %); 
@grayLight :          posvijetliti ( @black , 70 %); 
@grayLighter :        posvijetliti ( @black , 90 %); 
@white : #fff;             
 
// Akcentne boje
@blue : #08b5fb;              
@green : #46a546;             
@red : #9d261d;               
@yellow : #ffc40d;            
@orange : #f89406;            
@pink : #c3325f;              
@ljubičasta : # 7a43b6 ;            
 
// Baseline
@baseline : 20px ;

Komentarišući

Less takođe pruža još jedan stil komentarisanja pored CSS-ove normalne /* ... */sintakse.

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

Mixins do wazoo

Miksini su u osnovi uključeni ili djelomični za CSS, što vam omogućava da kombinirate blok koda u jedan. Odlični su za svojstva s prefiksom dobavljača kao što su box-shadow, gradijenti među pretraživačima, skupovi fontova i još mnogo toga. Ispod je primjer mixina koji su uključeni u Bootstrap.

Stokovi fontova

#font {
  . skraćenica ( @weight : normalna , @size : 14px , @lineHeight : 20px ) {     
    font - size : @size ; 
    font - težina : @weight ; 
    linija - visina : @lineHeight ; 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
porodica     fontova : " Helvetica Neue" , Helvetica , Arial , sans - serif ;   
    font - size : @size ; 
    font - težina : @weight ; 
    linija - visina : @lineHeight ; 
  }
  . serif ( @weight : normalan , @size : 14px , @lineHeight : 20px ) {     
porodica     fontova : " Georgia" , Times New Roman , Times , sans - serif ;     
    font - size : @size ; 
    font - težina : @weight ; 
    linija - visina : @lineHeight ; 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    font - porodica : "Monaco" , Courier New , monospace ;   
    font - size : @size ; 
    font - težina : @weight ; 
    linija - visina : @lineHeight ; 
  }
}

Gradijent

#gradient {
  . horizontalno ( @startColor : #555, @endColor: #333) { 
    background - boja : @endColor ; 
    pozadina - ponavljanje : ponavljanje - x ;
    pozadina - slika : - khtml - gradijent ( linearno , lijevo gore , desno gore , od ( @startColor ), do ( @endColor )); // Konqueror   
    background - slika : - moz - linearno - gradijent ( lijevo , @startColor , @endColor ); // FF 3.6+    
    background - slika : - ms - linearno - 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+    
    background - slika : - webkit - linearni - gradijent ( lijevo , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    background - slika : - o - linearni - 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 
    background - slika : linearni - gradijent ( lijevo , @startColor , @endColor ); // Le standard   
  }
  . vertikalno ( @startColor : #555, @endColor: #333) { 
    background - boja : @endColor ; 
    pozadina - ponavljanje : ponavljanje - x ;
    pozadina - slika : - khtml - gradijent ( linearno , lijevo gore , lijevo dolje , od ( @startColor ), do ( @endColor )); // Konqueror   
    pozadina - slika : - moz - linearno - gradijent ( @startColor , @endColor ); // FF 3.6+   
    background - slika : - ms - linearno - 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+    
    background - slika : - webkit - linear - gradijent ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    background - slika : - o - linearni - 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 
    background - slika : linearni - gradijent ( @startColor , @endColor ); // Standard  
  }
  . usmjereno ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . vertikalno - tri - boje ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Operacije i mrežni sistem

Zamislite se i izvršite malo matematike kako biste generirali fleksibilne i moćne miksine poput onog ispod.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
 
// Mrežni sistem
. kontejner {
  širina : @siteWidth ; 
  margina : 0 auto ;  
  . clearfix ();
}
. kolone ( @columnSpan : 1 ) {  
  display : inline ; 
  float : lijevo ;
  širina : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  margina - lijevo : @gridGutterWidth ; 
  &: prvo - dijete {
    margina - lijevo : 0 ; 
  }
}
. pomak ( @columnOffset : 1 ) {  
  margina - lijevo : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! važno ;          
}

Bootstrap

Bootstrap, sa Twitter-a

Hotlink CSS

Koristite ga sa manje

Fork na GitHubu

O Bootstrapu Kratka istorija, podrška pretraživača i još mnogo toga

istorija

Podrška za pretraživač

Šta je uključeno

Mrežni sistem Rock standardnih 940px ili roll svoj

Zadana mreža

Primjer mrežne oznake

Offseting kolone

Izgledi Osnovni predlošci za kreiranje web stranica

Fiksni raspored

Fluidni raspored

Tipografija Naslovi, paragrafi, liste i drugi umetnuti elementi tipa

Naslovi i kopija

h1. Naslov 1

h2. Naslov 2

h3. Naslov 3

h4. Naslov 4

h5. Naslov 5

h6. Naslov 6

Primjer paragrafa

Primjer naslova Ima podnaslov…

Misc. elementi

Kada koristiti

Naglasak u paragrafu

Adrese

Skraćenice

Blockquotes

Kako citirati

Liste

Neuređeno<ul>

Unstyled<ul.unstyled>

Naručeno<ol>

Opisdl

Tabele Za, pogađate, tabelarne podatke

Građevinski stolovi

Primjer: Zadani stilovi tablice

Primjer: prugasta zebra

Primjer: Zebra sa prugama w/ TableSorter.js

Forms

Zadani stilovi

Naslagane forme

Dugmad

Primer dugmadi

Alternativne veličine

Disabled state

Linkovi

Dugmad

Navigacija

Fiksna gornja traka

ime projekta

Šta je

Prilagodljivo

Padajući meni uključeni

Tablete i pilule

Paginacija

Upozorenja i greške Stilovi za uspjeh, upozorenje i poruke o greškama ili upozorenja

Osnovna upozorenja

Blokiraj poruke

Popovers Komponente za prikaz sadržaja u modalima, opisima alata i iskačućim prozorima

Modals

Modalni naslov

Savjeti za alate

Popovers

Popover Title

Korištenje Bootstrapa s manje Napunite svoj CSS varijablama, miksevima i funkcijama

Kako ga koristiti

Šta je uključeno

Varijable boja

Komentarišući

Mixins do wazoo

Stokovi fontova

Gradijent

Operacije i mrežni sistem

Neuređeno`<ul>`

Unstyled`<ul.unstyled>`

Naručeno`<ol>`

Opis`dl`