Bootstrap

Začíname

Prehľad projektu, jeho obsahu a ako začať pomocou jednoduchej šablóny.

1. Stiahnite si

Pred stiahnutím sa uistite, že máte editor kódu (odporúčame Sublime Text 2 ) a určité pracovné znalosti HTML a CSS. Nebudeme tu prechádzať zdrojovými súbormi, ale sú k dispozícii na stiahnutie. Zameriame sa na začiatok s skompilovanými súbormi Bootstrap.

Sťahovanie skompilované

Najrýchlejší spôsob, ako začať: získajte skompilované a zmenšené verzie našich CSS, JS a obrázkov. Žiadne dokumenty ani pôvodné zdrojové súbory.

Stiahnite si Bootstrap

Stiahnite si zdroj

Získajte pôvodné súbory pre všetky CSS a JavaScript spolu s lokálnou kópiou dokumentov stiahnutím najnovšej verzie priamo z GitHub.

Stiahnite si zdroj Bootstrap

2. Štruktúra súboru

V rámci stiahnutia nájdete nasledujúcu štruktúru a obsah súborov, ktoré logicky zoskupujú bežné položky a poskytujú skompilované aj zmenšené variácie.

Po stiahnutí rozbaľte komprimovaný priečinok, aby ste videli štruktúru (skompilovaného) Bootstrapu. Uvidíte niečo takéto:

  bootstrap / ├── css / │ ├── bootstrap . css
   │ ├── bootstrap . min . css
   ├── js / │ ├── bootstrap . js
   │ ├── bootstrap . min . js
   └── img / ├── glyfikony - polovičky . png
       └── glyfikony - polovičky - biele . png

Toto je najzákladnejšia forma Bootstrapu: skompilované súbory na rýchle použitie v takmer akomkoľvek webovom projekte. Poskytujeme kompilované CSS a JS ( bootstrap.*), ako aj kompilované a minifikované CSS a JS ( bootstrap.min.*). Obrazové súbory sú komprimované pomocou ImageOptim , aplikácie pre Mac na kompresiu PNG.

Upozorňujeme, že všetky doplnky JavaScript vyžadujú zahrnutie jQuery.

3. Čo je zahrnuté

Bootstrap je vybavený HTML, CSS a JS pre všetky druhy vecí, ale dajú sa zhrnúť do niekoľkých kategórií viditeľných v hornej časti dokumentácie Bootstrap .

Sekcie dokumentov

Lešenie

Globálne štýly tela na obnovenie typu a pozadia, štýly odkazov, systém mriežky a dve jednoduché rozloženia.

Základné CSS

Štýly pre bežné prvky HTML, ako sú typografia, kód, tabuľky, formuláre a tlačidlá. Obsahuje tiež Glyphicons , skvelú malú sadu ikon.

Komponenty

Základné štýly pre bežné komponenty rozhrania, ako sú karty a pilulky, navigačná lišta, upozornenia, hlavičky stránok a ďalšie.

JavaScript pluginy

Podobne ako komponenty, aj tieto doplnky JavaScriptu sú interaktívne komponenty pre veci, ako sú popisy, kontextové okná, modály a ďalšie.

Zoznam komponentov

Sekcie Components a JavaScript plugins spolu poskytujú nasledujúce prvky rozhrania:

  • Skupiny tlačidiel
  • Rozbaľovacie zoznamy tlačidiel
  • Navigačné karty, pilulky a zoznamy
  • Navbar
  • Štítky
  • Odznaky
  • Hlavičky stránok a hrdinská jednotka
  • Miniatúry
  • Upozornenia
  • Ukazovatele pokroku
  • Modály
  • Rozbaľovacie ponuky
  • Popisy
  • Popovers
  • Akordeón
  • Kolotoč
  • Prepisujte dopredu

V budúcich sprievodcoch si tieto komponenty možno prejdeme podrobnejšie. Dovtedy hľadajte každý z nich v dokumentácii, kde nájdete informácie o tom, ako ich využiť a prispôsobiť.

4. Základná HTML šablóna

S krátkym úvodom do obsahu z cesty sa môžeme sústrediť na používanie Bootstrapu. Na tento účel použijeme základnú šablónu HTML, ktorá obsahuje všetko, čo sme spomenuli v štruktúre súborov .

Teraz je tu pohľad na typický súbor HTML :

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title> Šablóna Bootstrap 101 </title>
  5.     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  6.   </head>
  7.   <body>
  8.     <h1> Ahoj, svet! </h1>
  9.     <script src = "https://code.jquery.com/jquery.js" ></script> 
  10.   </body>
  11. </html>

Ak chcete vytvoriť šablónu Bootstrapped , stačí zahrnúť príslušné súbory CSS a JS:

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title> Šablóna Bootstrap 101 </title>
  5.     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  6.     <!-- Bootstrap -->
  7.     <link href = "css/bootstrap.min.css" rel = "stylesheet" media = "screen" >   
  8.   </head>
  9.   <body>
  10.     <h1> Ahoj, svet! </h1>
  11.     <script src = "https://code.jquery.com/jquery.js" ></script> 
  12.     <script src = "js/bootstrap.min.js" ></script> 
  13.   </body>
  14. </html>

A máte hotovo! Po pridaní týchto dvoch súborov môžete začať s vývojom akejkoľvek lokality alebo aplikácie pomocou Bootstrapu.

5. Príklady

Prejdite za základnú šablónu pomocou niekoľkých príkladov rozložení. Odporúčame ľuďom opakovať tieto príklady a nie ich jednoducho použiť ako konečný výsledok.

  • Štartovacia šablóna

    Barebones HTML dokument so všetkými Bootstrap CSS a JavaScript zahrnutými.

  • Základná marketingová stránka

    Obsahuje hrdinskú jednotku pre primárnu správu a tri podporné prvky.

  • Fluidné rozloženie

    Používa náš nový citlivý systém tekutej mriežky na vytvorenie hladkého rozloženia kvapaliny.

  • Úzky marketing

    Tenká, ľahká marketingová šablóna pre malé projekty alebo tímy.

  • Odôvodnené nav

    Marketingová stránka s navigačnými odkazmi rovnakej šírky v upravenom navigačnom paneli.

  • Prihlásiť sa

    Barebone prihlasovací formulár s vlastnými, väčšími ovládacími prvkami a flexibilným rozložením.

  • Lepiaca päta

    Pripnite pätu s pevnou výškou na spodok používateľského výrezu.

  • Kolotočový jumbotron

    Interaktívnejší riff na základnej marketingovej stránke s výrazným kolotočom.

Čo ďalej?

Prejdite do dokumentácie, kde nájdete informácie, príklady a úryvky kódu, alebo urobte ďalší krok a prispôsobte Bootstrap pre akýkoľvek nadchádzajúci projekt.

Navštívte dokumenty Bootstrap Prispôsobte Bootstrap