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 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.
Trenutno v1.3.0
Inženjeri u Twitter-u su kroz istoriju koristili skoro svaku biblioteku koja im je bila poznata kako bi ispunili zahtjeve front-enda. Bootstrap je započeo kao odgovor na izazove koji su se pojavili. Uz pomoć mnogih sjajnih ljudi, Bootstrap je značajno porastao.
Pročitajte više na dev.twitter.com ›
Bootstrap je testiran i podržan u glavnim modernim pretraživačima kao što su Chrome, Safari, Internet Explorer i Firefox.
Bootstrap dolazi u kompletu sa prevedenim CSS, nekompajliranim i primjernim predlošcima.
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" >
- ...
- </div>
- <div class = "span10" >
- ...
- </div>
- </div>
Ugnijezdite svoj sadržaj ako morate kreiranjem .row
unutar postojeće kolone.
- <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>
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.
Varijable potrebne za modifikaciju mrežnog sistema trenutno se nalaze u preboot.less
.
Varijabilna | Zadana vrijednost | Opis |
---|---|---|
@gridColumns |
16 | Broj kolona unutar mreže |
@gridColumnWidth |
40px | Širina svake kolone unutar mreže |
@gridGutterWidth |
20px | Negativni razmak između svake kolone |
@siteWidth |
Izračunati zbir svih stubova i oluka | Koristimo neke osnovne podudarnosti da prebrojimo broj kolona i oluka i postavimo širinu .fixed-container() mixina. |
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!
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>
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>
Standardna tipografska hijerarhija za strukturiranje vaših web stranica.
Cijela tipografska mreža je zasnovana na dvije Less varijable u našoj preboot.less datoteci: @basefont
i @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.
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.
Korištenje naglaska, adresa i skraćenica
<strong>
<em>
<address>
<abbr>
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 .
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.
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.
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>
<small>
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
- <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>
<ul>
<ul.unstyled>
<ol>
dl
<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.
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.
Element | Rezultat |
---|---|
<code> |
U ovakvom redu teksta, vaš omotani kod će izgledati kao ovaj >html< element. |
<pre> |
<div> <h1>Naslov</h1> <p>Nešto upravo ovdje...</p> </div> Napomena: Obavezno držite kod unutar |
<pre class="prettyprint"> |
Koristeći biblioteku google-code-prettify, blokovi koda dobijaju malo drugačiji vizuelni stil i automatsko isticanje sintakse. <div> <h1> Naslov </h1> <p> Nešto upravo ovdje... </p> </div> Preuzmite google-code-prettify i pogledajte readme za korištenje. |
<span class="label">
Skrenite pažnju ili označite bilo koju frazu u svom tekstu.
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:
Label | Rezultat |
---|---|
<span class="label">Default</span> |
Default |
<span class="label success">New</span> |
Novo |
<span class="label warning">Warning</span> |
Upozorenje |
<span class="label important">Important</span> |
Bitan |
<span class="label notice">Notice</span> |
Biljeska |
Prikažite sličice različitih veličina na stranicama s malim HTML otiskom i minimalnim stilovima.
Sličice .media-grid
mogu 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 .span6
kolone.
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>
<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 |
- <tablica>
- ...
- </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 |
Napomena: Zebra-traka je progresivno poboljšanje koje nije dostupno za starije pretraživače poput IE8 i starijih.
- <table class = "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 |
---|---|---|---|
2 | Joe | Trbušnjaci | engleski |
3 | Stu | Dent | Kod |
1 | Tvoje | Jedan | engleski |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <skripta >
- $ ( funkcija () {
- $ ( "table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "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.
Prilagodite bilo koji oblik input
, select
ili 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.
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 .primary
klasu, svijetloplavu .info
klasu, zelenu .success
klasu i klasu crvene boje .danger
.
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.
.alert-message
Poruke u jednom redu za isticanje neuspjeha, mogućeg neuspjeha ili uspjeha akcije. Posebno korisno za formulare.
- <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>
.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.
- <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>
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 fino 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.
Integracija javascripta sa Bootstrap bibliotekom je super jednostavna. U nastavku prelazimo na osnove i pružamo vam neke sjajne dodatke za početak!
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.
File | Opis |
---|---|
bootstrap-modal.js | Naš Modal dodatak je super tanka verzija tradicionalnog modalnog js dodatka! Posebno smo vodili računa da uključimo samo golu funkcionalnost koja nam je potrebna na twitteru. |
bootstrap-alerts.js | Dodatak za upozorenje je super mala klasa za dodavanje bliske funkcionalnosti upozorenjima. |
bootstrap-dropdown.js | Ovaj dodatak služi za dodavanje interakcije padajućeg menija na gornju traku za pokretanje ili navigaciju sa karticama. |
bootstrap-scrollspy.js | Dodatak ScrollSpy služi za dodavanje automatskog ažuriranja navigacije na osnovu pozicije skrolovanja na gornju traku za pokretanje. |
bootstrap-tabs.js | Ovaj dodatak dodaje brzu, dinamičnu funkcionalnost kartica i tableta za kretanje kroz lokalni sadržaj. |
bootstrap-twipsy.js | Zasnovan na odličnom dodatku jQuery.tipsy koji je napisao Jason Frame; twipsy je ažurirana verzija, koja se ne oslanja na slike, koristi css3 za animacije i data-atribute za lokalno skladištenje naslova! |
bootstrap-popover.js | Popover dodatak pruža jednostavno sučelje za dodavanje popovera vašoj aplikaciji. On proširuje dodatak boostrap-twipsy.js , pa svakako zgrabite i tu datoteku kada uključujete iskačuće elemente u svoj projekat! |
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 .
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" 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.
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 ;
- // Osnovna mreža
- @basefont : 13px ;
- @baseline : 18px ;
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 ;
- }
- ...
- }
- #gradient {
- ...
- . 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
- pozadina - slika : linearna - gradijent ( @startColor , @endColor ); // Standard
- }
- ...
- }
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 ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Napravite neke kolone
- . kolone ( @columnSpan : 1 ) {
- širina : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
Nakon modifikacije .less
fajlova u /lib/, moraćete da ih ponovo kompajlirate da biste ponovo generisali bootstrap-*.*.*.css i bootstrap-*.*.*.min.css datoteke. Ako šaljete zahtjev za povlačenje na GitHub, uvijek morate ponovo kompajlirati.
Metoda | Koraci |
---|---|
Čvor sa makefileom | Instalirajte manje kompajler komandne linije sa npm-om tako što ćete pokrenuti sljedeću naredbu: $ npm install lessc Jednom instaliran samo pokrenite Dodatno, ako imate instaliran watchr , možete pokrenuti |
Javascript | Preuzmite najnoviji Less.js i uključite putanju do njega (i Bootstrap) u
Da ponovo kompajlirate .less fajlove, samo ih sačuvajte i ponovo učitajte svoju stranicu. Less.js ih kompajlira i pohranjuje u lokalnu pohranu. |
Komandna linija | Ako već imate instaliran alat manje komandne linije, jednostavno pokrenite sljedeću naredbu: $ lessc ./lib/bootstrap.less > bootstrap.css Obavezno uključite |
Manje Mac aplikacija | Neslužbena Mac aplikacija prati direktorije .less datoteka i kompajlira kod u lokalne datoteke nakon svakog spremanja gledanog .less datoteke. Ako želite, možete uključiti postavke u aplikaciji za automatsko minimiziranje i u kojem direktoriju završavaju kompajlirani fajlovi. |