Bootstrap

Elkezdeni

Áttekintés a projektről, annak tartalmáról és az indulásról egy egyszerű sablon segítségével.

Fel a fejjel! Ezek a dokumentumok a 2.3.2-es verzióhoz készültek, amely hivatalosan már nem támogatott. Tekintse meg a Bootstrap legújabb verzióját!

1. Letöltés

Letöltés előtt győződjön meg arról, hogy rendelkezik kódszerkesztővel (a Sublime Text 2 -t ajánljuk ), valamint némi HTML és CSS-ismerettel. A forrásfájlokat itt nem járjuk végig, de letölthetők. A lefordított Bootstrap fájlokkal való kezdésre összpontosítunk.

Letöltés összeállítva

Az indulás leggyorsabb módja: szerezze be CSS-ünk, JS-ünk és képeink összeállított és kicsinyített verzióit. Nincsenek dokumentumok vagy eredeti forrásfájlok.

Töltse le a Bootstrap programot

Letöltés forrás

Szerezze be az eredeti fájlokat az összes CSS-hez és JavaScript-hez, valamint a dokumentumok helyi másolatát, ha letölti a legújabb verziót közvetlenül a GitHubról.

Töltse le a Bootstrap forrást

2. Fájlszerkezet

A letöltésen belül a következő fájlstruktúra és -tartalom található, amely logikusan csoportosítja a közös eszközöket, és lefordított és kicsinyített változatokat is biztosít.

A letöltés után bontsa ki a tömörített mappát a (lefordított) Bootstrap szerkezetének megtekintéséhez. Valami ehhez hasonlót fog látni:

  bootstrap / ├── css / │ ├── bootstrap . css
   │ ├── bootstrap . min . css
   ├── js / │ ├── bootstrap . js
   │ ├── bootstrap . min . js
   └── img / ├── glyphicons - félszerzetek . png
       └── glifikonok - félszerzetek - fehér . png

Ez a Bootstrap legalapvetőbb formája: összeállított fájlok a gyors beugró használathoz szinte bármilyen webes projektben. Lefordított CSS-t és JS-t ( bootstrap.*), valamint lefordított és minimalizált CSS-t és JS-t ( bootstrap.min.*) biztosítunk. A képfájlokat az ImageOptim , egy PNG- fájlok tömörítésére szolgáló Mac-alkalmazás tömöríti.

Kérjük, vegye figyelembe, hogy minden JavaScript-bővítményhez jQuery szükséges.

3. Mit tartalmaz

A Bootstrap HTML-lel, CSS-sel és JS-sel van felszerelve mindenféle dologhoz, de ezek a Bootstrap dokumentációjának tetején látható maroknyi kategóriával összefoglalhatók .

Dokumentumok szakaszok

Állvány

Globális stílusok a törzs számára a típus és a háttér visszaállításához, hivatkozásstílusok, rácsrendszer és két egyszerű elrendezés.

Alap CSS

Stílusok az olyan gyakori HTML-elemekhez, mint a tipográfia, kód, táblázatok, űrlapok és gombok. Tartalmazza a Glyphicons -t is , egy nagyszerű kis ikonkészletet.

Alkatrészek

Alapstílusok az olyan gyakori interfész-összetevőkhöz, mint a lapok és tabletták, a navigációs sáv, a figyelmeztetések, az oldalfejlécek és egyebek.

JavaScript bővítmények

A Components-hoz hasonlóan ezek a JavaScript-bővítmények interaktív összetevők olyan dolgokhoz, mint például az eszköztippek, előugró ablakok, módozatok és egyebek.

Összetevők listája

Az Összetevők és a JavaScript-bővítmények szakaszok együttesen a következő felületelemeket biztosítják:

  • Gombcsoportok
  • Gombok legördülő menüi
  • Navigációs lapok, tabletták és listák
  • Navbar
  • Címkék
  • Jelvények
  • Oldalfejlécek és hős egység
  • Miniatűrök
  • Figyelmeztetések
  • Haladásjelző sávok
  • Modálok
  • Legördülő menük
  • Eszköztippek
  • Popovers
  • Harmonika
  • Körhinta
  • Írja előre

A jövőbeni útmutatókban ezeket az összetevőket egyenként részletesebben is végigjárhatjuk. Addig is keresse meg ezeket a dokumentációban, hogy tájékozódjon a használatukról és testreszabásukról.

4. Alap HTML sablon

A tartalom rövid bemutatásával a Bootstrap használatára koncentrálhatunk. Ehhez egy alapvető HTML-sablont fogunk használni, amely mindent tartalmaz, amit a Fájlszerkezetben említettünk .

Most pedig nézzünk meg egy tipikus HTML-fájlt :

  1. <!DOCTYPE html>
  2. <html>
  3.   <fej>
  4.     <title> Bootstrap 101 sablon </title>
  5.     <meta name = "viewport" content = "width=device-width, inicial-scale=1.0" >  
  6.   </head>
  7.   <test>
  8.     <h1> Helló világ! </h1>
  9.     <script src = "https://code.jquery.com/jquery.js" ></script> 
  10.   </body>
  11. </html>

Ahhoz, hogy ez egy Bootstrapped sablon legyen , csak adja meg a megfelelő CSS- és JS-fájlokat:

  1. <!DOCTYPE html>
  2. <html>
  3.   <fej>
  4.     <title> Bootstrap 101 sablon </title>
  5.     <meta name = "viewport" content = "width=device-width, inicial-scale=1.0" >  
  6.     <!-- Bootstrap -->
  7.     <link href = "css/bootstrap.min.css" rel = "stylesheet" media = "képernyő" >   
  8.   </head>
  9.   <test>
  10.     <h1> Helló világ! </h1>
  11.     <script src = "https://code.jquery.com/jquery.js" ></script> 
  12.     <script src = "js/bootstrap.min.js" ></script> 
  13.   </body>
  14. </html>

És kész! A két fájl hozzáadásával megkezdheti bármely webhely vagy alkalmazás fejlesztését a Bootstrap segítségével.

5. Példák

Lépjen túl az alapsablonon néhány példa elrendezéssel. Arra biztatjuk az embereket, hogy ismételjék meg ezeket a példákat, és ne csak végeredményként használják őket.

  • Kezdő sablon

    Barebone HTML dokumentum, amely tartalmazza az összes Bootstrap CSS-t és JavaScriptet.

  • Alapvető marketing oldal

    Tartalmaz egy hős egységet az elsődleges üzenethez és három kiegészítő elemet.

  • Folyékony elrendezés

    Új érzékeny, folyékony rácsrendszerünket használja a zökkenőmentes folyadékelrendezés létrehozásához.

  • Szűk marketing

    Vékony, könnyű marketingsablon kis projektekhez vagy csapatokhoz.

  • Igazolt nav

    Marketingoldal egyenlő szélességű navigációs hivatkozásokkal egy módosított navigációs sávban.

  • Bejelentkezés

    A Barebone bejelentkezési űrlap egyéni, nagyobb űrlapvezérlőkkel és rugalmas elrendezéssel.

  • Ragadós lábléc

    Rögzítsen egy rögzített magasságú láblécet a felhasználó nézetablakának aljára.

  • Carousel jumbotron

    Interaktívabb riff az alapvető marketingwebhelyen, amelyen egy feltűnő körhinta található.

Mi a következő?

Nyissa meg a dokumentumokat információkért, példákért és kódrészletekért, vagy tegye meg a következő ugrást, és szabja testre a Bootstrap programot bármely közelgő projekthez.

Látogassa meg a Bootstrap dokumentumokat A Bootstrap testreszabása