Bootstrap

Elkezdeni

Áttekintés a projektről, annak tartalmáról és az indulásról egy egyszerű sablonnal.

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. Az összeállí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 Javasripthez, valamint a dokumentumok helyi másolatát a legújabb verzió letöltésével 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
  
  
        
        
        └── README . md

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.

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 beépülő modulok 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 összpontosíthatunk. 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. <html>
  2.   <fej>
  3.     <title> Bootstrap 101 sablon </title>
  4.   </head>
  5.   <test>
  6.     <h1> Helló világ! </h1>
  7.   </body>
  8. </html>

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

  1. <html>
  2.   <fej>
  3.     <title> Bootstrap 101 sablon </title>
  4.     <!-- Bootstrap -->
  5.     <link href = "css/bootstrap.min.css" rel = "stíluslap" >  
  6.   </head>
  7.   <test>
  8.     <h1> Helló világ! </h1>
  9.     <script src = "js/bootstrap.min.js" ></script> 
  10.   </body>
  11. </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.

  • 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.

  • Kezdő sablon

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

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