Bootstrap

Začínáme

Přehled projektu, jeho obsahu a jak začít s jednoduchou šablonou.

1. Stáhnout

Před stažením se ujistěte, že máte editor kódu (doporučujeme Sublime Text 2 ) a určité pracovní znalosti HTML a CSS. Nebudeme zde procházet zdrojové soubory, ale jsou k dispozici ke stažení. Zaměříme se na to, jak začít s našimi zkompilovanými soubory Bootstrap.

Stahování zkompilováno

Nejrychlejší způsob, jak začít: získejte zkompilované a zmenšené verze našich CSS, JS a obrázků. Žádné dokumenty ani původní zdrojové soubory.

Stáhněte si Bootstrap

Stáhnout zdroj

Získejte originální soubory pro všechny CSS a Javasript spolu s místní kopií dokumentů stažením nejnovější verze přímo z GitHubu.

Stáhněte si zdroj Bootstrap

2. Struktura souboru

V rámci stažení naleznete následující strukturu a obsah souborů, které logicky seskupují běžné položky a poskytují kompilované i zmenšené varianty.

Po stažení rozbalte komprimovanou složku, abyste viděli strukturu (zkompilovaného) Bootstrapu. Uvidíte něco takového:

  bootstrap / ├── css / │ ├── bootstrap . css
   │ ├── bootstrap . min . css
   ├── js / │ ├── bootstrap . js
   │ ├── bootstrap . min . js
   ├── img / │ ├── glyphicons - halflings . png
   │ ├── glyfikony - půlčíky - bílé . png
  
  
        
        
        └── README . md

Toto je nejzákladnější forma Bootstrapu: kompilované soubory pro rychlé použití v téměř jakémkoli webovém projektu. Poskytujeme kompilované CSS a JS ( bootstrap.*), stejně jako kompilované a minifikované CSS a JS ( bootstrap.min.*). Soubory obrázků jsou komprimovány pomocí ImageOptim , aplikace pro Mac pro kompresi PNG.

3. Co je zahrnuto

Bootstrap je vybaven HTML, CSS a JS pro nejrůznější věci, ale lze je shrnout do několika kategorií, které jsou viditelné v horní části dokumentace k Bootstrapu .

Sekce dokumentů

Lešení

Globální styly pro tělo pro resetování typu a pozadí, styly odkazů, systém mřížky a dvě jednoduchá rozvržení.

Základní CSS

Styly pro běžné prvky HTML, jako je typografie, kód, tabulky, formuláře a tlačítka. Obsahuje také Glyphicons , skvělou sadu malých ikon.

Komponenty

Základní styly pro běžné součásti rozhraní, jako jsou karty a pilulky, navigační panel, upozornění, záhlaví stránek a další.

Javascriptové pluginy

Podobně jako komponenty jsou tyto pluginy Javascript interaktivní komponenty pro věci, jako jsou popisky, vyskakovací okna, modály a další.

Seznam komponentů

Sekce Components a Javascript plugins společně poskytují následující prvky rozhraní:

  • Skupiny tlačítek
  • Rozbalovací seznamy tlačítek
  • Navigační karty, pilulky a seznamy
  • Navbar
  • Štítky
  • Odznaky
  • Záhlaví stránek a jednotka hrdiny
  • Miniatury
  • Upozornění
  • Progress bary
  • Modály
  • Rozbalovací seznamy
  • Popisky
  • Popovers
  • Akordeon
  • Kolotoč
  • Přepisovat dopředu

V budoucích příručkách si možná projdeme tyto komponenty jednotlivě podrobněji. Do té doby hledejte každý z nich v dokumentaci, kde najdete informace o tom, jak je používat a přizpůsobovat.

4. Základní HTML šablona

S krátkým úvodem do obsahu z cesty se můžeme soustředit na používání Bootstrapu. K tomu použijeme základní HTML šablonu, která obsahuje vše, co jsme zmínili ve Strukturě souborů .

Nyní se podíváme na typický soubor HTML :

  1. <html>
  2.   <hlava>
  3.     <title> Šablona Bootstrap 101 </title>
  4.   </head>
  5.   <body>
  6.     <h1> Ahoj světe! </h1>
  7.   </body>
  8. </html>

Chcete-li z toho vytvořit šablonu Bootstrapped , stačí zahrnout příslušné soubory CSS a JS:

  1. <html>
  2.   <hlava>
  3.     <title> Šablona Bootstrap 101 </title>
  4.     <!-- Bootstrap -->
  5.     <link href = "css/bootstrap.min.css" rel = "stylesheet" >  
  6.   </head>
  7.   <body>
  8.     <h1> Ahoj světe! </h1>
  9.     <script src = "js/bootstrap.min.js" ></script> 
  10.   </body>
  11. </html>

A máte hotovo! Po přidání těchto dvou souborů můžete začít vyvíjet jakýkoli web nebo aplikaci pomocí Bootstrap.

5. Příklady

Přejděte za základní šablonu pomocí několika příkladů rozvržení. Vyzýváme lidi, aby si tyto příklady zopakovali a nepoužili je pouze jako konečný výsledek.

  • Základní marketingový web

    Obsahuje hrdinskou jednotku pro primární zprávu a tři podpůrné prvky.

  • Fluidní rozložení

    Využívá náš nový citlivý systém tekuté mřížky k vytvoření hladkého rozvržení kapaliny.

  • Startovací šablona

    Barebones HTML dokument se všemi Bootstrap CSS a javascriptem v ceně.

Co dále?

Přejděte do dokumentace, kde najdete informace, příklady a úryvky kódu, nebo udělejte další krok a přizpůsobte Bootstrap pro jakýkoli nadcházející projekt.

Navštivte dokumentaci Bootstrap Přizpůsobte Bootstrap