Tudjon meg többet a Bootstrapről: Kezdje el az érzékeny webhelyek fejlesztését

Közzététel: Támogatása segít fenntartani a webhely működését! Az ezen az oldalon javasolt szolgáltatások némelyikén referenciadíjat keresünk.


Ez az útmutató bemutatja Önt a Bootstrap-ról, a webhelyek népszerű nyílt forráskódú felhasználói felületéről. Olvassa tovább a bevezetést és a rövid történetet, vagy használja a jobb oldali navigációt, hogy ugorjon a kívánt Bootstrap erőforrásra..

A 2. verzió óta a Bootstrap beépíti az Responsive Web Design (RWD) összetevőket, így kiváló eszköz a webhelyek méretezéséhez egyetlen kódbázissal, különféle eszközök között megosztva a CSS médialekérdezésekkel.

A Bootstrap nyílt forráskódú, és a GitHubon üzemelteti, fejleszti és karbantartja. Jelenleg ez a legszebb csillagú projekt a GitHub-on. Nézzük meg miért.

Mi az a Bootstrap??

A Bootstrap fejlesztését a Twitter Mark Otto és Jacob Thornton indította el egy belső eszköz kifejlesztésére irányuló erőfeszítésként – egy új keretrendszer a belső eszközök konzisztenciájának ösztönzésére a Twitteren.

A fejlesztés ezen korai szakaszában a Bootstrap eredetileg „Twitter Blueprint” elnevezést kapott. Az új keret gyorsan érkezett és 2011. augusztus 19-én nyílt forráskódú projektként került kiadásra.

A Bootstrap központi csapata folytatja a fejlesztést, és a legújabb verzió a Bootstrap 3, amelyet 2013 augusztusában adtak ki.

A Bootstrap egy ingyenes, nyílt forráskódú HTML, CSS és JS keret, amely sablonokat tartalmaz szövegekhez, űrlapokhoz, gombokhoz, navigációhoz és más releváns interfész összetevőkhöz.

Mivel front-end keretrendszer, a Bootstrap a felhasználói felület, ellentétben a háttér-kiszolgálón található kiszolgálóoldali kóddal. Az RWD komponensek használatával a Bootstrap automatikusan adaptálja a weboldalakat különböző képernyőméretekhez és pixelsűrűséghez a különböző eszközökön.

A Bootstrap segítségével a webfejlesztők a tervezésre való aggódás nélkül koncentrálhatnak a tényleges fejlesztésre, és gyorsan kinézhetnek egy jó megjelenésű weboldalt..

A Bootstrap felhasználható bármilyen fejlesztési környezetben vagy szerkesztőben, valamint bármilyen szerveroldali technológián és nyelven, az ASP.NET-től a PHP-ig a Ruby on Rails-ig.

2015. augusztus óta a hivatalos Bootstrap témák megvásárolhatók egyszeri fizetéssel és többszörös felhasználási licenccel, ingyenes frissítésekkel.

A Bootstrap a Twitter által védett, de az MIT licenc alapján kerül kiadásra, lehetővé téve a Bootstrap vagy annak alkotóelemeinek magán- és kereskedelmi célokra történő felhasználását és módosítását..

Bootstrap szolgáltatások

A Bootstrap kompatibilis a Google Chrome, a Mozilla Firefox, az Internet Explorer, az Opera és a Safari böngészők legújabb verzióival. Ezen böngészők egy részét nem minden platform támogatja.

A Bootstrap tartalmazza azokat a stíluslapokat, amelyek az alapvető stílusdefiníciókat tartalmazzák az összes főbb HTML összetevő számára, lehetővé téve a weboldal megjelenésének egyszerű testreszabását..

A Bootstrap egyik fő jellemzője a folyékony rácsrendszer, amely akár 12 oszlopot is méretezhet a képernyő mérete szerint, a mobil eszközöktől az asztali képernyő méretéig, és minden, ami között van, mind álló, mind fekvő tájolású.

Ez a rácsrendszer létrehozza a dinamikus oldalak alapvető elemeit.

A Bootstrap tartalmaz még sok más általános interfész elemet, beleértve a speciális funkciókkal ellátott gombokat, címkéket, listákat, miniatűröket, figyelmeztető üzeneteket, folyamatjelző sávokat és számos JavaScript összetevőt, például párbeszédpaneleket, körhintakat, eszköztippek, riasztások, gombok és így tovább.

Ezek közül az alkatrészek közül néhány kiterjeszti a meglévő interfész elemek működését, például hozzáad egy automatikus kiegészítés funkciót a beviteli mezőkhöz.

A Bootstrap használatának előnyei

Az elmúlt néhány évben a Bootstrap egyre népszerűbb front-end keretrendszerré vált, millió millió webhelyet használva.

A Bootstrapbay Christopher Gimmer szerint öt legfontosabb ok van a Bootstrap használatára.

Első, A Bootstrap növeli a fejlődés sebességét. A Bootstrap egyik fő előnye a puszta fejlődési sebesség.

A Bootstrap segítségével kész kódblokkokat is használhat, és a keret böngészőközi kompatibilitásával kombinálva gyorsan létrehozhat egy webhelyet. A kész Bootstrap témák használata és az igényeknek megfelelő módosítása még több időt takaríthat meg.

Másodszor, A Bootstrap érzékeny, mobil használatra kész webhelyeket generál.

A mobil eszközök népszerűségének folyamatos növekedésével és a globális mobil adatforgalom növekedésének optimista előrejelzéseivel egyre érzékeny webhely létrehozása egyre inkább fontos, hogy vadul különböző formai tényezőkkel működő készülékeken működhessen..

A Bootstrap beépített RWD komponenseivel és a folyadékrács elrendezésével, amely dinamikusan alkalmazkodik az eszköz képernyőfelbontásához, az érzékeny webhelyek létrehozásához a fejlesztőnek ezután semmilyen további erőfeszítése nincs szüksége.

Harmadik, A Bootstrap használata biztosítja a következetességet.

A Bootstrap-t eredetileg a következetesség ösztönzésére fejlesztették ki. A Bootstrap biztosítja a következetességet, függetlenül attól, hogy ki dolgozik a projekten. Ezen felül az eredmények egységesek a platformok között, tehát a kimenet változatlan marad a különféle böngészők között.

Negyedik, A Bootstrap könnyen testreszabható.

A Bootstrap testreszabható az egyedi projektek különböző igényei szerint. A fejlesztők kiválaszthatják a szükséges funkciókat a Bootstrap testreszabási oldal használatával, és csak ezeket a funkciókat tölthetik le a Bootstrap egyedi verziójában, ezáltal a kód karcsúbbá és tisztábbá téve a folyamatot.

Ötödik, Jó támogatás.

A közösség méretének és a Bootstrap népszerűségének köszönhetően a támogatás általában jó. A Bootstrap központi csapata szintén jót tett a frissítések időben történő közzétételében, és a fejlesztési munka folyamatos. Népszerűségére való tekintettel nem várjuk el, hogy ez hamarosan megváltozik.

Az Bootstrap indítása

Ha készen áll a Bootstrap használatának megtanulására, de még nem ismeri a HTML-t és a CSS-t, akkor a Bootstrap megtanulásának első lépése a HTML és CSS alapjainak megtanulása..

Alapvetően a Bootstrap CSS-re hivatkozni kell a HTML-fájlok fejrészében. A JavaScript fájlokat a HTML-fájlok törzsrészének végén hívjuk. Ezt az alapvető HTML struktúrát Bootstrap sablonnak nevezik.

A Bootstrap használata CSS osztályok és JavaScriptek alkalmazását teszi szükségessé HTML elemeire, ezért jól meg kell értenie a CSS-t és a HTML-t. Szerencsére ez nem lesz probléma a komoly fejlesztők számára.

Bootstrap fejlesztési környezet

A Bootstrap előre összeállított verziójának letöltése és kibontása után megkapja a Bootstrap fájlszerkezetet, amely nagyon egyszerű. A rendszerindító fájlok három könyvtárban találhatók: css, js és betűtípusok.

Ez a fájlszerkezet magától értetődő és egyszerűen beilleszthető bármilyen webprojektbe. A használatra kész CSS és JS fájlokon kívül a Glyphicons betűkészleteket is tartalmazza az opcionális alapértelmezett Bootstrap téma mellett.

A Bootstrap használatának megkezdése előtt integrálnia kell a fejlesztési környezetbe. A részletes utasítások megtalálhatók online a különböző platformokon, így a Bootstrap hozzáadása a fejlesztői környezethez nagyon egyszerű.

Bootstrap erőforrások

Népszerűségének köszönhetően nem kell gondot okoznia a rengeteg minőségi Bootstrap tananyag megtalálásáról az interneten. A közösség virágzik, és rendszeresen publikálnak új forrásokat.

Mivel azonban a Bootstrap egy viszonylag fiatal keret, nem fog sok papírcsomagot találni. A legtöbb Bootstrap-forrást online teszik közzé, tehát ne várja el, hogy a helyi könyvesboltban talál ilyen oldalt.

A GitHub jó hely a Bootstrap források keresésének megkezdéséhez. Ezenkívül számos Bootstrap útmutatót és útmutatót is megtalálhat az egyes fejlesztők és szoftvertársaságok által közzétett módon. Minőségük változhat, ezért mielőtt kiválasztaná, ellenőrizze a közösségi visszajelzéseket.

Ingyenes interaktív tanfolyamok

A szoftverekről és a keretekről olvasva megmutathatja az alapvető használati modelleket és szabályokat, de ha valóban meg akarja érezni, hogy egy keret hogyan teljesít, akkor látnia kell azt működésben..

Az ingyenes online interaktív tanfolyamok a legjobb módja annak, hogy valósághű hangulatot kapjanak arról, hogy a keret hogyan teljesít, és mit tehet.

Ezekre a kurzusokra online fordító tartozik, így a példákat azonnal végrehajthatja és megtekintheti:

  • Nézze meg a Bootstrap alapjait a Codecademy bemutatóján. Ez egy rövid kezdő oktatóprogram, amely végigvezeti Önt az alapvető HTML, CSS és a Bootstrap hozzáadása webhelyén. Ez az oktatóanyag megmutatja a Bootstrap és az online fordító alapvető szintaxisát.
  • A W3Schools Bootstrap 3 bemutatója egy átfogó és nagyon részletes lépésről-lépésre szóló útmutató, amely tartalmazza az összes CSS osztály, összetevő és JavaScript-bővítmény teljes Bootstrap-hivatkozását..
  • Tutorialspoint A Bootstrap oktatóanyaga nagyon részletes, és szinte mindent lefed, amit tudnia kell a Bootstrap-ról, a Bootstrap CSS-től, az elrendezési komponensektől, a beépülő moduloktól, a demokat és a hasznos erőforrásokat. Ez a Bootstrap oktatóprogram egy online fordítót is tartalmaz, és PDF formátumban is letölthető.

Ezeknek az interaktív tanfolyamoknak elég jó ismereteket kell adniuk a Bootstrap-ról, hogy sok gond nélkül elkezdhesse használni a projektjein..

Bootstrap bemutatók és kiegészítő források

Mivel a Bootstrap annyira népszerű és széles körben használt, nem könnyű néhány webhelyet különválasztani, hogy bemutassa annak hatalmát és jellemzőit.

Ezért hagyjuk ezt a választást a Bootstrap alapcsapatának, és eljuttatjuk a hivatalos Bootstrap Expo-ra a Bootstrap gyönyörű és inspiráló példáival..

Nyissa meg a példákat, és módosítsa a böngészőablak méretét, hogy láthassa a Bootstrap RWD funkcióit működésben, az oldal elrendezését dinamikusan adaptálva a különböző képernyőméretekhez.

Ha készen áll a Bootstrap használatára, és további hasznos forrásokra van szüksége a projektekhez, ellenőrizze az alábbiak valamelyikét:

  • A Bootstrap hivatalos témái a Bootstrap alkotóitól
  • Prémium, kereskedelmi Bootstrap témákkal és sablonokkal ellátott piacterek: creativemarket.com, wrapbootstrap.com, themeforest.net
  • Ingyenes Bootstrap sablonok és témák: startbootstrap.com, shapebootstrap.net, bootstrapzero.com.

Természetesen sok más Bootstrap forrás is elérhető online, és a közösség rendszeresen hozzájárul újakhoz, tehát a szükséges megtalálása nem jelent problémát..

Könyvek és papírkötegek

Nagyon sok online forrás érhető el a Bootstrap számára, de ha könyvet vagy e-könyvet szeretsz, a választás korlátozott.

Annak ellenére, hogy oly sok ingyenes online oktatóanyag és forrás biztosítja, hogy jobb, ha előbb kipróbálja ezeket a freebies-eket. Miután elsajátította őket, megfontolhatja néhány könyv vásárlását.

Ha inkább a fizikai szövegeket és a könyveket szeretné, íme néhány a mai Bootstrap szövegek közül:

  • Lépésről lépésre Bootstrap 3: Rövid útmutató a reagáló webfejlesztéshez a Bootstrap 3 használatával, készítette Riwanto Megosinarso, valódi lépésről lépésre a kezdők számára. Ajánlott, ha teljesen új vagy a Bootstrap alkalmazásban, és elegendő lefedéssel rendelkezik az induláshoz.
  • Syed Fazle Rahman Jump Start Bootstrap kiválóan alkalmas kezdőknek és középhaladó fejlesztőknek, mindent megtalálva, amire szüksége van a Bootstrap megvalósításához..
  • A Bootstrap Site tervrajzai, David Cochran és Ian Whitley a kezdő és a köztes front-fejlesztők számára készültek. Jó lefedettség a Bootstrap összetevők és elrendezések testreszabására.

Mindhárom eBook formában elérhető a Kindle számára.

Fontos linkek

  • bootstrap
  • Bootstrap a GitHubon.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me