A legjobb Bootstrap oktatóanyagok az adaptív webdesignhoz

A Bootstrap egy népszerű front-end keretrendszer a webfejlesztéshez. Előre elkészített összetevőket és tervező elemeket tartalmaz a HTML-tartalom stílusához. A modern böngészők, például a Chrome, a Firefox, az Opera, a Safari és az Internet Explorer támogatják a Bootstrap programot.

A Bootstrap egy reszponzív rácsrendszert tartalmaz a különböző elrendezésekhez. Nagyszerű kiindulópont egy mobilbarát weboldal felépítéséhez. Ez magában foglalja az opcionális JavaScript funkciókat is, például összecsukható tartalmat, körhintakat és modálokat.

Verziótörténet

A Twitter eredetileg belső eszközként fejlesztette ki a Bootstrap keretrendszert. 2011 augusztusában nyílt forráskódú projektként adták ki.

A Bootstrap 2 2012 januárjában jelent meg. Az egyik elsődleges tulajdonság a 12 oszlopra reagáló rácsrendszer bevezetése volt. A Bootstrap 3 2013 augusztusában jelent meg, áttérve a lapos kialakításra és a mobil-első megközelítésre. A Bootstrap 4 2017 augusztusától béta verzióban érhető el, és mostantól tartalmazza a Sassot és a Flexboxot is.

A Bootstrap 4 két évig fejlesztés alatt állt, mielőtt 2017-ben kiadott néhány bétaverziót, míg az első stabil kiadás 2018 januárjában jelent meg. Néhány figyelemre méltó változás a következőket tartalmazza:

  • Lessről Sassra költözött;
  • A Flexbox és a továbbfejlesztett rácsrendszer közé került;
  • Hozzáadott kártyák (kutak, indexképek és panelek helyettesítése);
  • És még sok más!

Az írás idején a Bootstrap legújabb kiadása a 4.1.3. Ha szeretne lépést tartani a bejelentésekkel kapcsolatos hírekkel, kövesse őket itt.

Telepítés

Két fő lehetőség van a Bootstrap hozzáadására a webprojektjéhez. Linkelhet nyilvánosan elérhető forrásokra, vagy közvetlenül letöltheti a keretrendszert.

Kapcsolódás egy másik forráshoz

Hozzáadhatja a Bootstrap CSS-t a weboldal belsejében lévő elem segítségével, amely egy tartalomszolgáltató hálózatra (CDN) hivatkozik:

A Bootstrap JavaScript elemeinek hozzáadása hasonló az elemekkel, amelyeket általában a címke aljára helyezünk. Először szükség lehet néhány függőség felvételére. Fordítson különös figyelmet a felsorolt ​​sorrendre:

Megjegyzés: Ezek csak példák, és értesítés nélkül változhatnak. Kérjük, olvassa el a CDN-t a projektjébe felvett aktuális linkekről.

Letöltés / telepítés

A Bootstrap forrásfájlokat a Bower, a Composer, a Meteor vagy az npm segítségével töltheti le és telepítheti. Ez lehetővé teszi a nagyobb irányítást és a modulok szükség szerinti beépítését vagy kizárását.

npm install bootstrap

gem 'bootstrap', '~> 4.1.3'

Megjegyzés: Ezek csak példák, és értesítés nélkül változhatnak. Kérjük, olvassa el az üres 'rel =' nofollow '> Bootstrap webhelyet a legfrissebb linkekről.

A Bootstrap rácsrendszer

A rácsrendszer egy mobil-első flexbox rendszer, amely minden formájú és méretű elrendezést gyorsan felépít, alkalmas minden eszközre. 12 oszlopos elrendezésen alapul, és több szintje van, minden média lekérdezési tartományhoz egy.

A Bootstrap előre definiált rácsosztályokkal rendelkezik a jelöléssel történő felhasználáshoz. További részletek és példák: //getbootstrap.com/docs/4.1/layout/grid/

Boostrap funkciók

Több információ:

A Bootstrap alapos dokumentációval és sok példával, valamint egy HTML sablonnal rendelkezik az induláshoz (ebben a sablonban csak szkript található; nem tartalmazza a rácsrendszer felépítését, ha ezt szeretné).

Ezenkívül ingyenes és fizetős témákat is találhat, amelyek a Bootstrap keretrendszerre építenek, hogy személyre szabottabb és stílusosabb megjelenést biztosítsanak.

Bootstrap források:

A Bootstrap hivatalos blogja

Bootstrap site inspiráció

A Bootstrap használatával épített webhelyek bemutatása

HTML linter a Bootstrap programot használó projektekhez

Design elemek és kódrészletek a Bootstrap számára

Kód, téma és kiegészítő erőforrások a Bootstrap számára

Az első lépések a Bootstrap bemutatóval

A Bootstrap használata megkönnyíti a teljesen adaptív weboldal tervezését, és egy olyan keretrendszer, amelyet érdemes megtanulni.

Mi az a reszponzív webhely?

A reszponzív webhely egy olyan webhely, amely átméretezi és átrendezi az oldalon található elemeket a böngésző méretétől függően. Reszponzív webhely esetén, ha átméretezi böngészőjét, láthatja, hogy a változások valós időben történnek. A Bootstrap reagálási lehetőséget nyújt webhelyére.

A Bootstrap hozzáadása az oldalához

A bootstrap hozzáadása az oldalához gyors folyamat, csak adja hozzá a következőket a kód címkéihez.

A bodykódban lévő címkék közé a következőket is hozzá kell adnia . A bootstrap segítségével címkéket fog használni . A Bootstrap számos szolgáltatásának használatakor minden címkének saját egyedi osztálykészletet kell alkalmaznia, amely lehetővé teszi a címke számára a feladat végrehajtását. A Bootstrap útmutató további szakaszai további példákat mutatnak be arra vonatkozóan, hogy a Bootstrap hogyan használja a címkéket. (A címkék nem kizárólagosak a Bootstrap számára, azonban a Bootstrap használja őket.).

Az alábbiakban található az a kód, amely hozzáadódik bodya kód címkéihez, hogy befejezhesse az indulást. Ne feledje, hogy míg ez létrehozza a tárolót, az oldal továbbra is üres marad, amíg tartalmat nem ad hozzá a tárolóhoz.

Congratulations!

Bootstrap is now working on this page

Sablonok

A sablonok előre elkészített eszközkészletek, amelyek szellővé teszik az új weboldal pörgetését. Ha van egy általános elképzelése a kívánt elrendezésről, vagy ha át szeretné tallózni a közös elrendezési sablonok könyvtárát, akkor a Bootstrap sablonok az unalmas fáradtságot és a frusztrációt elviselik a kezdeti összeállítási folyamatból. Ez a segítség segít abban, hogy a projekt finomabb részleteire összpontosítson, ahelyett, hogy kíváncsi lenne, miért nem működik együtt a CSS.

Elkezdeni

Sablon linkek

Navigációs sáv

A Bootstrap keretrendszer egy funkcióhívás navigációs sávot kínál. Röviden: a navigációs sáv (más néven navigációs sáv) egy fejléc az oldal tetején, amely a navigációs információkat jeleníti meg.

Hogyan kell használni

A Bootstrap navigációs sávok használatához hozzá kell adnia egy elemet a weboldal tetején belüli tetejéhez . Különböző stílusok adhatók hozzá a navbarok megjelenítésének testreszabásához.

Kódpélda

Ez az alapvető navigációs sáv létrehozásához szükséges kód.

 Site Name 
      
  • Home
  • Page 1
  • Page 2
  • Page 3

Navbar stílusok

A Bootstrap osztályok készletét biztosítja a Bootstrap keretrendszerben a navbarok stílusához. Ezek az osztályok a következők:

Legördülő menük hozzáadása a navigációs sávhoz

A legördülő menüt felveheti a navigációs sávba. A funkció működéséhez meg kell adnia a Bootstrap javascript fájlját.

  • Drop down
    • Item 1
    • Item 2
    • Item 3
  • Gombok hozzáadása a navigációs sávhoz

    Hozzáadhat gombokat a navigációs sávon. A meglévő Bootstrap Button osztályok működnek, azonban az osztályt navbar-btnfel kell vennie az osztálylista végére.

    Button

    Űrlapok hozzáadása a navigációs sávhoz

    Űrlapokat is hozzáadhat a navigációs sávhoz. Ezt fel lehet használni olyan feladatokhoz, mint a keresési mező, a gyors bejelentkezési mező stb.

     Search 

    Az elemek jobbra igazítása a navigációs sávon

    Bizonyos esetekben érdemes a navigációs sávban lévő elemeket jobbra igazítani (például egy bejelentkezési vagy regisztrációs gombot.). Ehhez használnia kell az navbar-rightosztályt.

     Site Name 
          
    • Home
    • Page 1
    • Page 2
    • Page 3
    • Action Link #1
    • Action Link #2

    A navigációs sáv megjelenítése a görgetéstől függetlenül

    Bizonyos esetekben érdemes a navigációs sávot a képernyő tetején vagy alján tartani, a görgetéstől függetlenül. Az elemhez hozzá kell adnia a navbar-fixed-topvagy navbar-fixed-bottomosztályt .

     Site Name 
          
    • Home
    • Page 1
    • Page 2
    • Page 3

    Összeomlik a navbar

    Egy kis képernyőn (például telefonon vagy táblagépen) a navigációs sáv túl sok helyet foglal el. Szerencsére létezik a navigációs sáv összecsukásának lehetősége. Ezt a következő példa segítségével hajthatja végre.

     Site Name 
          
    • Home
    • Page 1
    • Page 2
    • Page 3

    Navbar Példák