Skele

Zahtijeva HTML5 tip dokumenta

Bootstrap koristi određene HTML elemente i CSS svojstva koja zahtijevaju upotrebu HTML5 doctype. Uključite ga na početak svih vaših projekata.

<!DOCTYPE html>
<html lang = "en" > 
  ...
</html>

Tipografija i linkovi

Bootstrap postavlja osnovni globalni prikaz, tipografiju i stilove veza. Konkretno, mi:

Uklonite marginna tijelu
Postavite background-color: white;nabody
Koristite atribute , i kao našu @baseFontFamilytipografsku @baseFontSizeosnovu@baseLineHeight
Postavite globalnu boju veze putem @linkColori primijenite podvučene veze samo na:hover

Ovi stilovi se mogu naći unutar skela.less .

Resetirajte preko Normalize

Uz Bootstrap 2, stari blok resetovanja je odbačen u korist Normalize.css , projekta Nicolasa Gallaghera i Jonathana Nila koji također pokreće HTML5 Boilerplate . Iako koristimo veći dio Normalize unutar našeg reset.less , uklonili smo neke elemente posebno za Bootstrap.

Primjer mreže uživo

Podrazumevani Bootstrap sistem mreže koristi 12 kolona , što čini kontejner širine 940px bez omogućenih responzivnih funkcija . Sa dodanom responzivnom CSS datotekom, mreža se prilagođava tako da bude široka 724px i 1170px u zavisnosti od vašeg okvira za prikaz. Ispod okvira za prikaz od 767px, kolone postaju fluidne i slažu se okomito.

Osnovna mreža HTML

Za jednostavan raspored u dva stupca, kreirajte a .rowi dodajte odgovarajući broj .span*kolona. Pošto je ovo mreža od 12 kolona, svaka .span*se proteže na broj od tih 12 kolona, i uvijek bi trebao zbrojiti do 12 za svaki red (ili broj kolona u nadređenom).

<div class = "red" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

S obzirom na ovaj primjer, imamo .span4i .span8, čineći ukupno 12 kolona i cijeli red.

Offseting kolone

Pomjerite stupce udesno koristeći .offset*klase. Svaka klasa povećava lijevu marginu kolone za cijeli stupac. Na primjer, .offset4kreće se .span4preko četiri kolone.

3 pomak 2

3 pomak 1

3 pomak 2

6 pomak 3

<div class = "red" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</div>

Nesting columns

Da biste svoj sadržaj ugnijezdili u zadanu mrežu, dodajte novu .rowi skup .span*kolona unutar postojeće .span*kolone. Ugniježđeni redovi trebaju uključivati skup kolona koji se zbrajaju sa brojem stupaca svog roditelja.

Nivo 1 kolona

Nivo 2

<div class = "red" > 
  <div class = "span9" > 
    Nivo 1 kolona
    <div class = "red" > 
      <div class = "span6" > Nivo 2 </div> 
      <div class = "span3" > Nivo 2 </div> 
    </div>
  </div>
</div>

Primjer mreže tekućine uživo

Sistem fluidne mreže koristi procente umjesto piksela za širinu kolona. Ima iste mogućnosti odziva kao i naš fiksni mrežni sistem, osiguravajući odgovarajuće proporcije za ključne rezolucije ekrana i uređaje.

Osnovna fluidna mreža HTML

Učinite bilo koji red "tečnim" mijenjanjem .rowu .row-fluid. Klase kolona ostaju potpuno iste, što olakšava prebacivanje između fiksne i fluidne mreže.

<div class = "red-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Fluid offseting

Funkcionira na isti način kao i fiksno odstupanje sistema mreže: dodajte .offset*bilo kojoj koloni da biste pomaknuli za toliko kolona.

4 pomak 4

3 pomak 3

6 pomak 6

<div class = "red-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</div>

Fluid nesting

Fluid mreže različito koriste ugniježđenje: svaki ugniježđeni nivo kolona treba da ima do 12 kolona. To je zato što fluidna mreža koristi procente, a ne piksele, za postavljanje širina.

Tečnost 12

Tečnost 6

<div class = "red-fluid" > 
  <div class = "span12" > 
    Tečnost 12
    <div class = "red-fluid" > 
      <div class = "span6" > 
        Tečnost 6
        <div class = "red-fluid" > 
          <div class = "span6" > Fluid 6 </div> 
          <div class = "span6" > Fluid 6 </div> 
        </div>
      </div>
      <div class = "span6" > Fluid 6 </div> 
    </div>
  </div>
</div>

Fiksni raspored

Pruža zajednički raspored fiksne širine (i opciono prilagodljiv) sa samo <div class="container">potrebnim.

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

Fluid layout

Napravite fluidnu stranicu sa dvije kolone sa <div class="container-fluid">—odlično za aplikacije i dokumente.

<div class = "kontejner-fluid" > 
  <div class = "red-fluid" > 
    <div class = "span2" > 
      <!--Sadržaj bočne trake-->
    </div>
    <div class = "span10" > 
      <!--Sadržaj tijela-->
    </div>
  </div>
</div>

Omogućavanje responzivnih funkcija

Uključite responzivni CSS u svom projektu uključivanjem odgovarajuće meta oznake i dodatne liste stilova unutar <head>vašeg dokumenta. Ako ste sastavili Bootstrap sa stranice Prilagodi, trebate samo uključiti meta oznaku.

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
<link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

Glavu gore!Bootstrap trenutno ne uključuje responzivne funkcije prema zadanim postavkama jer ne mora sve biti responzivno. Umjesto da ohrabrujemo programere da uklone ovu funkciju, smatramo da je najbolje omogućiti je po potrebi.

O responzivnom Bootstrapu

Medijski upiti omogućavaju prilagođeni CSS na osnovu brojnih uslova – omjera, širine, tipa prikaza, itd. – ali se obično fokusira na min-widthi max-width.

Izmijenite širinu kolone u našoj mreži
Složite elemente umjesto plutajućih gdje god je potrebno
Promijenite veličinu naslova i teksta kako bi bili prikladniji za uređaje

Koristite medijske upite odgovorno i samo kao početak za svoju mobilnu publiku. Za veće projekte, razmotrite namjenske baze koda, a ne slojeve medijskih upita.

Podržani uređaji

Bootstrap podržava pregršt medijskih upita u jednoj datoteci kako bi vaši projekti bili prikladniji na različitim uređajima i rezolucijama ekrana. Evo šta je uključeno:

Label	Širina rasporeda	Širina kolone	Širina oluka
Veliki displej	1200px i više	70px	30px
Default	980px i više	60px	20px
Portret tablete	768px i više	42px	20px
Od telefona do tableta	767px i manje	Stubovi fluida, bez fiksnih širina
Telefoni	480px i manje	Stubovi fluida, bez fiksnih širina

/* Velika radna površina */
@media ( min - širina : 1200px ) { ... }     
 
/* Portret tablet na pejzaž i desktop */
@media ( min - širina : 768px ) i ( max - širina : 979px ) { ... }        
 
/* Pejzažni telefon u portret tablet */
@media ( max - širina : 767px ) { ... }     
 
/* Landscape phones and down */
@media ( max - širina : 480px ) { ... }

Odazivne uslužne klase

Za brži razvoj prilagođen mobilnim uređajima, koristite ove uslužne klase za prikazivanje i skrivanje sadržaja po uređaju. Ispod je tabela dostupnih klasa i njihov učinak na dati izgled medijskog upita (označen prema uređaju). Mogu se naći u responsive.less.

Klasa	Telefoni767px i manje	Tablete979px do 768px	Stoni računariDefault
`.visible-phone`	Vidljivo	Skriveno	Skriveno
`.visible-tablet`	Skriveno	Vidljivo	Skriveno
`.visible-desktop`	Skriveno	Skriveno	Vidljivo
`.hidden-phone`	Skriveno	Vidljivo	Vidljivo
`.hidden-tablet`	Vidljivo	Skriveno	Vidljivo
`.hidden-desktop`	Vidljivo	Vidljivo	Skriveno

Kada koristiti

Koristite na ograničenoj osnovi i izbjegavajte stvaranje potpuno različitih verzija iste stranice. Umjesto toga, koristite ih za dopunu prezentacije svakog uređaja. Responzivni uslužni programi ne bi se trebali koristiti sa tabelama i kao takvi nisu podržani.

Testni slučaj responzivnih uslužnih programa

Promijenite veličinu vašeg pretraživača ili učitajte na različite uređaje kako biste testirali gore navedene klase.

Vidljivo na...

Zelene kvačice označavaju da je klasa vidljiva u vašem trenutnom prozoru za prikaz.

Telefon✔ Telefon
Tablet✔ Tablet
Desktop✔ Desktop

Skriven na...

Ovdje zelene oznake označavaju da je klasa skrivena u vašem trenutnom prozoru za prikaz.

Telefon✔ Telefon
Tablet✔ Tablet
Desktop✔ Desktop

Globalne postavke