Bootstrap

Začíname

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

Hlavy hore! Tieto dokumenty sú pre verziu 2.3.2, ktorá už nie je oficiálne podporovaná. Pozrite si najnovšiu verziu Bootstrapu!

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é prostriedky 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 ľubovoľnej 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