Etiam porta sem malesuada magna mollis euismod. Mecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum i eros.
Bootstrap je Twitter alat dizajniran za pokretanje razvoja web aplikacija i web stranica.
Uključuje osnovni CSS i HTML za tipografiju, obrasce, gumbe, tablice, rešetke, navigaciju i još mnogo toga.
Upozorenje štreberu: Bootstrap je izgrađen s Lessom i dizajniran je za rad izvan vrata s modernim preglednicima na umu.
Za najbrži i najlakši početak jednostavno kopirajte ovaj isječak na svoju web stranicu.
Obožavatelj korištenja Lessa? Nema problema, samo klonirajte repo i dodajte ove retke:
Preuzimanje, račvanje, povlačenje, problemi s datotekama i još mnogo toga uz službeni Bootstrap repo na Githubu.
Trenutno v1.3.0
Inženjeri na Twitteru kroz povijest 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. Uz pomoć mnogih izvrsnih ljudi, Bootstrap je značajno narastao.
Pročitajte više na dev.twitter.com ›
Bootstrap je testiran i podržan u glavnim modernim preglednicima kao što su Chrome, Safari, Internet Explorer i Firefox.
Bootstrap dolazi zajedno s kompajliranim CSS-om, neprevedenim i oglednim predlošcima.
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.
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" >
- ...
- </div>
- <div class = "span10" >
- ...
- </div>
- </div>
Ugniježdite svoj sadržaj ako morate stvaranjem .row
unutar postojećeg stupca.
- <div class = "row" >
- <div class = "span12" >
- Razina 1 stupca
- <div class = "row" >
- <div class = "span6" >
- Razina 2
- </div>
- <div class = "span6" >
- Razina 2
- </div>
- </div>
- </div>
- </div>
U Bootstrap je ugrađeno nekoliko varijabli za prilagodbu zadanog sustava rešetki od 940 piksela. Uz malo prilagodbe, možete promijeniti veličinu stupova, njihove oluke i spremnik u kojem se nalaze.
Varijable potrebne za izmjenu mrežnog sustava trenutno se nalaze u preboot.less
.
Varijabilna | Zadana vrijednost | Opis |
---|---|---|
@gridColumns |
16 | Broj stupaca unutar mreže |
@gridColumnWidth |
40 px | Širina svakog stupca unutar mreže |
@gridGutterWidth |
20 px | Negativni razmak između svakog stupca |
@siteWidth |
Izračunati zbroj svih stupova i oluka | Koristimo neko osnovno podudaranje za brojanje stupaca i oluka i postavljanje širine .fixed-container() mixina. |
Modificiranje rešetke znači promjenu triju @grid-*
varijabli i ponovno kompajliranje Less datoteka.
Bootstrap dolazi opremljen za rukovanje mrežnim sustavom s do 24 stupca; zadano je samo 16. Evo kako bi vaše varijable rešetke izgledale prilagođene mreži od 24 stupca.
- @gridColumns : 24 ;
- @gridColumnWidth : 20px ;
- @gridGutterWidth : 20px ;
Nakon ponovnog kompajliranja, bit ćete spremni!
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>
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>
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: @basefont
i @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.
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 isticanja, adresa i kratica
<strong>
<em>
<address>
<abbr>
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 .
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.
Element <address>
se koristi za kontakt informacije za svog najbližeg pretka ili za cjelokupno djelo. Evo dva primjera kako se to može koristiti:
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.
Za kratice i akronime koristite <abbr>
oznaku ( <acronym>
zastarjela je u HTML5 ). Stavite stenografski obrazac unutar oznake i postavite naslov za cijelo ime.
<blockquote>
<p>
<small>
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
- <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>
Pimpirajte svoj kod u stilu s dvije jednostavne oznake. Za još više nevjerojatnosti kroz javascript, ubacite Googleovu biblioteku za uljepšavanje koda i gotovi ste.
Kod, blokovi ili samo isječci u liniji, mogu se prikazati sa stilom samo umotavanjem u pravu oznaku. Za blokove koda koji obuhvaćaju više redaka, koristite <pre>
element. Za ugrađeni kod koristite <code>
element.
Element | Proizlaziti |
---|---|
<code> |
U retku teksta kao što je ovaj, vaš omotani kod će izgledati kao ovaj >html< element. |
<pre> |
<div> <h1>Naslov</h1> <p>Nešto upravo ovdje...</p> </div> Napomena: Vodite računa da kod unutar |
<pre class="prettyprint"> |
Koristeći biblioteku google-code-prettify, vaši blokovi koda dobivaju nešto drugačiji vizualni 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 pozornost ili označite bilo koju frazu u svom tekstu.
Jeste li ikada trebali jedan od onih otmjenih New! ili Važne oznake prilikom pisanja koda? Pa, sada ih imate. Evo što je uključeno prema zadanim postavkama:
Označiti | Proizlaziti |
---|---|
<span class="label">Default</span> |
Zadano |
<span class="label success">New</span> |
Novi |
<span class="label warning">Warning</span> |
Upozorenje |
<span class="label important">Important</span> |
Važno |
<span class="label notice">Notice</span> |
Obavijest |
Prikažite minijature različitih veličina na stranicama s malim HTML tragom i minimalnim stilovima.
Sličice u .media-grid
mogu biti bilo koje veličine, ali najbolje funkcioniraju kada se mapiraju izravno na ugrađeni Bootstrap grid sustav. Širine slika kao što su 90, 210 i 330 kombiniraju se s nekoliko piksela ispune kako bi se izjednačile veličine .span2
, .span4
, i .span6
stupaca.
Medijske rešetke su jednostavne za korištenje i prilično jednostavne na strani označavanja. Njihove dimenzije isključivo se temelje 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 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>
.
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>
Budite malo fensi sa svojim stolovima dodavanjem zebrastih pruga—samo dodajte .zebra-striped
klasu.
# | 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>
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 |
---|---|---|---|
2 | Joe | Sixpack | Engleski |
3 | Stu | Utiskivati | Kodirati |
1 | Vaš | Jedan | Engleski |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <skripta >
- $ ( funkcija () {
- $ ( "table#sortTableExample" ). Tablet sorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "zebra-striped" >
- ...
- </table>
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.
Dodajte .form-stacked
u 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.
Prilagodite bilo koji oblik input
, select
ili textarea
širinu dodavanjem samo nekoliko klasa vašem označavanju.
Od verzije 1.3.0, dodali smo klase veličine koje se temelje na mreži za elemente obrasca. Molimo koristite ove umjesto postojećih klasa .mini
, .small
itd.
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 .primary
klasu, svijetloplavu .info
klasu, zelenu .success
klasu i crvenu .danger
klasu.
Stilovi gumba mogu se primijeniti na bilo što s .btn
primijenjenim. Obično ćete ih željeti primijeniti samo na <a>
, <button>
i odabrane <input>
elemente. Evo kako to izgleda:
Želite li veće ili manje gumbe? Navalite na to!
Za gumbe koji nisu aktivni ili ih je aplikacija onemogućila iz ovog ili onog razloga, koristite stanje onemogućeno. To je .disabled
za veze i :disabled
za <button>
elemente.
.alert-message
Jednolinijske poruke za isticanje neuspjeha, mogućeg neuspjeha ili uspjeha akcije. Posebno korisno za obrasce.
- <div class = "upozorenje o poruci upozorenja" >
- <a class = "close" href = "#" > × </a>
- <p><strong> Sveti guacamole! </strong> Najbolje da provjerite sami, ne izgledate baš dobro. </p>
- </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.
- <div class = "alert-message block-message warning" >
- <a class = "close" href = "#" > × </a>
- <p><strong> Sveti guacamole! Ovo je upozorenje! </strong> Najbolje da 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 učini ovo </a>
- </div>
- </div>
Modali—dijalozi ili svjetlosni okviri—odlični su za kontekstualne radnje u situacijama u kojima je važno zadržati pozadinski kontekst.
Jedno fino tijelo…
Twipsies su super korisni za pomoć zbunjenom korisniku i usmjeravanje 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 beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit Acuzantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae Accusantium fugit voluptas nemo voluptas voluptatem rem quaesi aut veritaetis.
Koristite skočne prozore za pružanje podtekstualnih informacija stranici bez utjecaja na izgled.
Etiam porta sem malesuada magna mollis euismod. Mecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum i eros.
Integracija javascripta s bibliotekom Bootstrap vrlo je jednostavna. U nastavku ćemo proći kroz osnove i pružiti vam neke sjajne dodatke za početak!
Oživite neke od primarnih komponenti Bootstrapa s novim prilagođenim dodacima koji rade s jQuery i Ender . Potičemo vas da ih proširite i modificirate kako bi odgovarali vašim specifičnim razvojnim potrebama.
Datoteka | Opis |
---|---|
bootstrap-modal.js | Naš Modalni dodatak je super tanka verzija tradicionalnog modalnog js dodatka! Posebno smo pazili da uključimo samo gole funkcije koje su nam potrebne na twitteru. |
bootstrap-alerts.js | Dodatak upozorenja je super malena klasa za dodavanje bliske funkcionalnosti upozorenjima. |
bootstrap-dropdown.js | Ovaj dodatak služi za dodavanje padajuće interakcije na gornju traku za pokretanje ili navigacije s karticama. |
bootstrap-scrollspy.js | Dodatak ScrollSpy služi za dodavanje navigacije koja se automatski ažurira na temelju položaja pomicanja na gornjoj traci pokretanja. |
bootstrap-tabs.js | Ovaj dodatak dodaje brzu, dinamičnu funkciju kartice i pilule za kruženje kroz lokalni sadržaj. |
bootstrap-twipsy.js | Temeljeno na izvrsnom 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 lokalnu pohranu naslova! |
bootstrap-popover.js | Popover plugin pruža jednostavno sučelje za dodavanje popover-a vašoj aplikaciji. Proširuje boostrap-twipsy.js dodatak, pa svakako zgrabite i tu datoteku kada uključujete popover u svoj projekt! |
Ne! Bootstrap je dizajniran prije svega kao CSS biblioteka. Ovaj javascript pruža osnovni interaktivni sloj povrh uključenih stilova.
Međutim, za one koji trebaju javascript, osigurali smo gore navedene dodatke kako bismo vam pomogli razumjeti kako integrirati Bootstrap s javascriptom i da bismo vam odmah pružili brzu, laganu opciju za osnovnu funkcionalnost.
Za više informacija i da vidite neke demonstracije uživo, pogledajte našu stranicu s dokumentacijom o dodacima .
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.
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.
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 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 ;
Less također nudi drugi stil komentiranja uz uobičajenu /* ... */
sintaksu CSS-a.
- // Ovo je komentar
- /* Ovo je također komentar */
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.
- #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 ;
- }
- ...
- }
- #gradijent {
- ...
- . 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
- }
- ...
- }
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 ));
- // Napravite nekoliko stupaca
- . stupci ( @columnSpan : 1 ) {
- širina : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
Nakon izmjene .less
datoteka u /lib/, morat ćete ih ponovno kompajlirati kako biste ponovno generirali datoteke bootstrap-*.*.*.css i bootstrap-*.*.*.min.css. Ako GitHubu šaljete zahtjev za povlačenjem, uvijek morate ponovno kompajlirati.
metoda | Koraci |
---|---|
Čvor s makefileom | Instalirajte manje prevoditelj naredbenog retka s npm-om izvođenjem sljedeće naredbe: $ npm instaliraj manjesc Jednom instaliran samo pokrenite Osim toga, ako imate instaliran watchr , možete pokrenuti |
Javascript | Preuzmite najnoviji Less.js i uključite put do njega (i Bootstrapa) u
Za ponovno kompajliranje .less datoteka, samo ih spremite i ponovno učitajte svoju stranicu. Less.js ih kompajlira i pohranjuje u lokalnu pohranu. |
Naredbeni redak | Ako već imate instaliran alat manje naredbenog retka, jednostavno pokrenite sljedeću naredbu: $lessc ./lib/bootstrap.less > bootstrap.css Obavezno uključite |
Manje aplikacije za Mac | Neslužbena Mac aplikacija prati direktorije .less datoteka i kompajlira kod u lokalne datoteke nakon svakog spremanja promatrane .less datoteke. Ako želite, možete promijeniti postavke u aplikaciji za automatsko smanjivanje i direktorij u kojem kompajlirane datoteke završavaju. |