Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Bootstrap je skup alata iz Twittera dizajniran da pokrene razvoj web aplikacija i web lokacija.
Uključuje osnovni CSS i HTML za tipografiju, obrasce, dugmad, tabele, mreže, navigaciju i još mnogo toga.
Upozorenje za štrebera: Bootstrap je napravljen sa Less -om i dizajniran je da radi izvan vrata sa samo modernim pretraživačima na umu.
Za najbrži i najlakši početak, samo kopirajte ovaj isječak na svoju web stranicu.
Obožavate li koristiti manje? Nema problema, samo klonirajte repo i dodajte ove redove:
Preuzmi, fork, pull, fajlove i još mnogo toga uz službeni Bootstrap repo na Githubu.
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.
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 stupaca" >
- ...
- </div>
- <div class = "span10 columns" >
- ...
- </div>
- </div>
Osnovni raspored kontejnera širine 940px, centriran za bilo koju web lokaciju ili stranicu.
- <tijelo>
- <div class = "kontejner" >
- ...
- </div>
- </body>
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>
Standardna tipografska hijerarhija za strukturiranje vaših web stranica.
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.
Također možete dodati podnaslove sa <strong>
i<em>
Korištenje naglaska, adresa i skraćenica
<strong>
<em>
<address>
<abbr>
Oznake za naglasak ( <strong>
i <em>
) treba da se koriste za dodavanje vizuelne razlike između reči ili fraze i njene kopije koja ih okružuje. Koristite <strong>
za običnu staru pažnju i <em>
za glatku pažnju i naslove.
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.
Element address
se koristi za - pogađate! - adrese. Evo kako to izgleda:
Napomena: Svaki red u an address
mora završiti prijelomom reda ( <br />
) kako bi se sadržaj pravilno strukturirao kako se čita u stvarnom životu bez primijenjenih stilova.
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.
<blockquote>
<p>
<cite>
Obavezno zamotajte svoje blockquote
i paragraph
oznake cite
. Kada citirate izvor, koristite cite
element. CSS će automatski staviti pred ime em crticu (—).
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
dr Julius Hibbert
<ul>
<ul.unstyled>
<ol>
dl
<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
.
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>
Zamislite se malo sa svojim stolovima dodavanjem zebrastih pruga—samo dodajte .zebra-striped
klasu.
# | Ime | Prezime | Jezik |
---|---|---|---|
1 | Neki | Jedan | engleski |
2 | Joe | Trbušnjaci | engleski |
3 | Stu | Dent | Kod |
- <table class = "zajednička tablica zebra-prugasta" >
- ...
- </table>
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 |
- < tip skripte = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script>
- < type type = "text/javascript" >
- $ ( dokument ). spreman ( funkcija () {
- $ ( "table#sortTableExample" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );
- });
- </script>
- <table class = "zajednička tablica zebra-prugasta" >
- ...
- </table>
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.
Dodajte .form-stacked
u 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.
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, ali .primary
je dostupna plava klasa. Osim toga, lako je izvući vlastite stilove.
Stilovi dugmadi se mogu primijeniti na sve što je .btn
primijenjeno. Obično ćete ih željeti primijeniti samo na elemente a
, button
, i select . input
Evo kako to izgleda:
Želite veće ili manje dugmad? Imajte to!
Za dugmad koja nisu aktivna ili ih je aplikacija onemogućila iz jednog ili drugog razloga, koristite stanje onemogućeno. To je .disabled
za veze i :disabled
za button
elemente.
Poruke u jednom redu za isticanje neuspjeha, mogućeg neuspjeha ili uspjeha akcije. Posebno korisno za formulare.
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.
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.
Jedno lepo telo...
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.
Koristite skočne prozore za pružanje podtekstualnih informacija stranici bez utjecaja na izgled.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
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.
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" type = "text/css" href = "less/bootstrap.less" media = "all" />
- < type 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.
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 u Lessu savršene su 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 );
- // Grays
- @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 ;
Less takođe pruža još jedan stil komentarisanja pored CSS-ove normalne /* ... */
sintakse.
- // Ovo je komentar
- /* Ovo je također komentar */
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, hrpe fontova i još mnogo toga. Ispod je primjer mixina koji su uključeni u Bootstrap.
- #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 ;
- }
- }
- #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
- pozadina - slika : linearna - 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
- pozadina - slika : linearna - gradijent ( @startColor , @endColor ); // Standard
- }
- . usmjereno ( @startColor : #555, @endColor: #333, @deg: 45 stupnjeva) {
- ...
- }
- . vertikalno - tri - boje ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
- ...
- }
- }
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 ;
- }