2011-ben a Twitter bemutatta a Bootstrap keretrendszert. Azóta ez a CSS-keretrendszer két jelentős átíráson ment keresztül, a legutóbbi (Bootstrap 3) 2013-ban jelent meg. A Bootstrap 3 átalakította a CSS-könyvtárat egy mobil-first megközelítés bevezetésével, amely a keretrendszert teljesen reagálóvá tette.
2022-től a Bootstrap ötödik verziója, és az egyik legnépszerűbb frontend keretrendszer. Előre elkészített összetevők széles listájával és lenyűgöző JavaScript-bővítmények gyűjteményével rendelkezik. Ebből a cikkből megtudhatja, hogyan kell használni a Bootstrap szolgáltatást, és hogyan hozhatja ki a legtöbbet annak funkcióiból.
A Bootstrap telepítése a projektben
Ennek három módja van használja a Bootstrapet a projektben. Letöltheti és tárolhatja a CSS- és JavaScript-fájlokat, telepítheti a projektbe az npm használatával, vagy másolhatja és beillesztheti a megfelelő cdn-hivatkozásokat a projektbe.
A cdn megközelítéssel ne felejtse el elhelyezni a Bootstrap hivatkozást minden más CSS-hivatkozás előtt a HTML-fájl head címkéjében.
Egyes Bootstrap-összetevők funkcionális tevékenységekkel rendelkeznek, például a gombok váltása és pozicionálása JavaScript és Popper-szkript importálását igényli. Tehát, ha bármilyen funkcionális összetevőt kíván használni, akkor a script címkét is hozzá kell adnia a HTML-fájlhoz.
Az utolsó dolog, amit el kell kezdenie használni a Bootstrap-et, az nézetablak címke.
Mivel a Bootstrap egy mobil-első technológia, a nézetablak címke segít a reszponzív tervezésben. A bootstrap használatának egyszerű módja a projektben való másolás A Bootstrap indítósablonja.
Weboldal készítése Bootstrap segítségével
Amikor új webhelyet hoz létre, az egyik első dolog, amit figyelembe kell vennie, az az elrendezés. Ezt követően áttérhet más összetevőkre, például a gombokra és a tipográfiára.
A Bootstrap szerkezeti összetevők gyűjteményével rendelkezik, amelyek segítségével rendszerezheti az elemeket egy weboldalon. Ezek az elrendezési struktúrák a következőket tartalmazzák:
- Konténerek
- Rács
- Oszlopok
- Ereszcsatornák
- Töréspontok
A Bootstrap indítósablon kissé módosított változatával elkezdheti felvázolni a weboldal szerkezetét, és új összetevőket adhat hozzá.
Az index.html fájl
Szükséges metacímkékBootstrap CSS
Bootstrap
Külön Popper és Bootstrap JS
A Bootstrap Container Class
A Bootstrap tartály osztály padokba helyezi, tartalmazza és igazítja az elemeket a weboldalán. Ha a Bootstrap használatát tervezi alapértelmezett rács, akkor a Bootstrap-et is használnia kell tartály osztály. Három típusa van tartály osztályok; tartály, tartály-folyadék, és konténer-{töréspont}. A tároló osztály az alapértelmezett tároló; érzékeny, és fix szélessége van a Bootstraps hat töréspontján.
A Bootstrap hat alapértelmezett töréspontja a következőket tartalmazza:
- Extra kicsi: Kevesebb, mint 576 képpont.
- Kicsi: Nagyobb vagy egyenlő, mint 576 képpont.
- Közepes: Nagyobb vagy egyenlő, mint 768 képpont.
- Nagy: Nagyobb vagy egyenlő, mint 992 képpont.
- X nagy: 1200 képpont vagy annál nagyobb.
- XX-nagy: 1400 képpont vagy annál nagyobb.
A Bootstrap használatához tartály a projektben egyszerűen hozzáadhatja a kívánt tárolóosztályt a külsőhöz div az Ön weboldalán.
A Bootstrap's Container használata
helyezze el ide a weboldal elemeit Ha beilleszti a fenti kódot a meglévő HTML-fájl törzsébe, akkor a weboldal reszponzív lesz, és kitöltést is hoz létre a weboldal mindkét oldalán.
A Bootstrap Grid rendszer
A Bootstrap rácsja tizenkét oszlopos rendszert használ, amely a sor és col grid osztályok, valamint a konténer osztály. Minden sor tizenkét oszlopból áll, és bármelyik elem átnyúlhat egy vagy több oszlopon. Az oszloposztály jelzi, hogy egy elemnek hány oszlopot kell elfoglalnia. Például egy elem, amely a 2. oszlop osztály két oszlopot fog át, egy elem a col-3 osztály három oszlopot fog átívelni, és így tovább.
A Bootstrap grid rendszer a flexbox modulon alapul. Ha csak két oszlop foglal el egy sort, akkor egyenlően osztják fel egymás között a helyet. Az esővízcsatorna osztály a Bootstrap egyik szerkezeti eleme, és ez szabályozza az egyes oszlopok közötti távolságot a rács rendszer. Minden egyes rács oszlop mindkét oldalán 12 képpontos kitöltés található.
A Bootstrap grid rendszerének használata
egy weboldal fő tartalma
Cikk
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae
obcaecati illo laboriosam a, voluptate molestias eum velit, differentio impedit
ratione facere numquam, optio eligendi delectus cumque quos.
A fenti kód beillesztése a tároló div részébe egy három sorból és két oszlopból álló Bootstrap rácsrendszer jön létre. A felső első sorban a navigációs sáv, az alsó harmadik sorban a webhely lábléce, a középső második sorban pedig a weboldal tartalma található. A második sorban két oszlop van – a fő cikk és egy mellékoszlop.
Ha létrehoz egy helyi CSS-fájlt, és szegélyt ad a rács egyes szakaszaihoz, akkor tisztábban láthatja azokat.
A style.css fájl
.sor{
keret: 2px kék, szilárd;
}
.col, .col-sm-4{
szegély: 2px piros szilárd;
}
A fenti CSS-fájlra való hivatkozással a következő kimenet jön létre a böngészőben:
A fenti képen látható különbség az oszlopok mérete. Általában két (vagy több) oszlop egy sorban ugyanannyi helyet foglal el, hacsak kifejezetten másként nem jelzi. Az col-sm-4 osztály a fenti HTML-kódban biztosítja, hogy a második oszlop a sor tizenkét oszlopa közül csak négyet fedjen le. Az sm ban,-ben col-sm-4 osztály képviseli a kis töréspontot, így a mellékszakasz csak négy oszlopot foglal el a kis törésponttól és afelett.
Bootstrap komponensek
Miután eldöntötte weboldala elrendezését, a következő lépés a webhely-építő elemek hozzáadása, amelyeket a Bootstrap komponenseknek nevez. A Bootstrap összetevőinek listája a következőket tartalmazza:
- Navbar
- Gombok
- Gombcsoport
- Listacsoport
- Kártyák
- Összeomlás
- Legördülő menük
A Bootstrap Navbar osztály
Minden Bootstrap navigációs sáv megköveteli a navigációs sáv osztály. Használatuk is szükséges a vagy a „navigáció” kulcsszó hozzárendelése a Bootstraphez szerep attribútum a navigációs sáv szülőjében div. Ahhoz, hogy a navigációs sáv érzékeny legyen, a JavaScript beépülő modul összecsukása.
A Bootstrap navigációs sáv osztály használ egy ária-áram attribútum, amely az „oldal” értéket veszi fel az aktuális oldal jelzésére, vagy az „igaz” értéket a weboldal aktuális szakaszának jelzésére. A hozzárendelt érték a webhely szerkezetétől függ (egyoldalas vagy többoldalas). Használnia kell továbbá a aktív osztály az aktuális oldal vagy szakasz jelzésére.
A Bootstrap navigációs sávjának használata
A navigáció cseréje sor a Bootstrap rács a fenti kóddal a következő kimenetet hozza létre a böngészőjében:
Számos más fontos osztály és Bootstrap attribútum is található a fenti kódban, mint például a navbar-márka osztály, amely az Ön logóját célozza meg navigációs sáv. Az navigációs sáv is teljesen érzékeny, köszönhetően a JavaScript beépülő modul összecsukása.
Érzékeny Navbar
Emlékezhet, hogy a Bootstrap hat alapértelmezés szerint rendelkezik töréspontok és az egyik töréspont nagy (lg). Az navbar-expand-lg osztályban a fent a navigációs elemek vízszintes listájává bővül a nagy töréspontnál és a felett, és ez a lista visszavált egy gombba a nagy töréspontoknál.
Ha többet szeretne megtudni a reszponzív webhelyek létrehozásáról, összeállítottunk egy vázlatot hogyan lehet ezt megtenni médialekérdezésekkel HTML-ben és CSS-ben.
A Bootstrap gomb komponens
A Bootstrap gomb komponens használja a és megköveteli, hogy beállítsa a típus attribútumot a „gombhoz”.
A Bootstrap többféle gombbal rendelkezik. A hagyományosabb gomb létrehozásához használja a btn osztályban, de a fenti kódhoz hasonló hamburgergomb létrehozásához használja a Navbar-toggle osztály.
Mikor érdemes Bootstrapet használni?
A Bootstrap az egyik legnépszerűbb CSS-keretrendszerként ismert, mivel úttörő. Jóval azelőtt, hogy a reszponzív tervezés annyira általánossá vált a szoftverfejlesztésben, a Bootstrap teljesen érzékeny keretrendszerré változott.
Az évek során a Bootstrap folyamatosan fejlődött és fejlődött, így az első számú választás a vezető cégek, például a Twitter és a Spotify számára. Ez azonban nem mindig a legjobb megoldás az Ön szoftverfejlesztési igényeinek kielégítésére. Ha például egy React alkalmazást hoz létre, van egy MUI nevű tervezőrendszer, amely a React alkalmazásokhoz van testreszabva.
A Material-UI új nevet kapott, és célja egy új tervezési rendszer létrehozása a Material Design helyett. Így használhatja a MUI-t a ReactJS projektekben.
Olvassa el a következőt
- Programozás
- Kódolási tippek
- Programozás
- Programozási eszközök
Kadeisha Kean Full-stack szoftverfejlesztő és műszaki/technológiai író. Megvan az a képessége, hogy leegyszerűsítse a legbonyolultabb technológiai fogalmakat; olyan anyagok gyártása, amelyek könnyen megérthetők minden technológiai kezdő számára. Szenvedélye az írás, az érdekes szoftverek fejlesztése és a világutazás (dokumentumfilmeken keresztül).
Iratkozzon fel hírlevelünkre
Csatlakozzon hírlevelünkhöz műszaki tippekért, ismertetőkért, ingyenes e-könyvekért és exkluzív ajánlatokért!
Kattintson ide az előfizetéshez
