Bevezetés
Kezdje el a Bootstrap használatát, amely a világ legnépszerűbb keretrendszere az adaptív, mobil-első webhelyek létrehozásához, a jsDelivr-rel és egy sablon kezdőoldallal.
Gyors indítás
Szeretné gyorsan hozzáadni a Bootstrap programot a projektjéhez? Használja a jsDelivr-t, egy ingyenes nyílt forráskódú CDN-t. Csomagkezelőt használ, vagy le kell töltenie a forrásfájlokat? Menjen a letöltési oldalra .
CSS
A CSS betöltéséhez másolja be a stíluslapot <link>
a saját stíluslapjaiba <head>
az összes többi stíluslap elé.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
JS
Számos összetevőnk működéséhez JavaScript használata szükséges. Pontosabban, saját JavaScript-bővítményekre és Popperre van szükség . Helyezze el az alábbi <script>
jelek egyikét oldalai végéhez, közvetlenül a záró </body>
címke elé, hogy engedélyezze őket.
Csomag
Tartalmazzon minden Bootstrap JavaScript beépülő modult és függőséget két csomagunk egyikével. Mindkettő bootstrap.bundle.js
és bootstrap.bundle.min.js
tartalmazza a Poppert az eszköztippjeinkhez és az előugró ablakainkhoz. A Bootstrap tartalmával kapcsolatos további információkért tekintse meg a Tartalom szakaszt.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Különálló
Ha úgy dönt, hogy a különálló szkriptek megoldását választja, a Poppernek kell először lennie (ha eszköztippeket vagy előugró ablakokat használ), majd a JavaScript beépülő moduljainkat.
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
Modulok
Ha használja <script type="module">
, kérjük, olvassa el a Bootstrap modulként való használata című részt.
Alkatrészek
Kíváncsi, hogy mely összetevők igényelik kifejezetten a JavaScriptet és a Poppert? Kattintson a lenti összetevők megjelenítése linkre. Ha egyáltalán nem biztos az oldal általános szerkezetében, olvasson tovább egy példaoldalsablonért.
JavaScriptet igénylő összetevők megjelenítése
- Figyelmeztetések elvetésről
- Gombok az állapotok és a jelölőnégyzet/rádiófunkciók váltásához
- Körhinta az összes csúszási viselkedéshez, vezérlőelemhez és jelzőhöz
- Összecsukása a tartalom láthatóságának váltásához
- Legördülő menük megjelenítéshez és pozicionáláshoz ( Popper is szükséges )
- Modálok a megjelenítéshez, pozicionáláshoz és görgetési viselkedéshez
- Navigációs sáv az Összecsukás beépülő modulunk kiterjesztéséhez a reagáló viselkedés megvalósításához
- Offcanvass megjelenítéséhez, pozicionálásához és görgetési viselkedéséhez
- Pirítósok a megjelenítéshez és az elvetéshez
- Eszköztippek és előugró ablakok a megjelenítéshez és pozicionáláshoz ( Popper is szükséges )
- Scrollspy a görgetési viselkedéshez és a navigációs frissítésekhez
Kezdő sablon
Ügyeljen arra, hogy oldalai a legújabb tervezési és fejlesztési szabványok szerint legyenek beállítva. Ez azt jelenti, hogy HTML5-dokumentumtípust kell használni, és be kell építeni egy nézetablak metacímkét a megfelelő reagáló viselkedés érdekében. Tedd össze az egészet, és az oldalaid így nézzenek ki:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
A következő lépésekért keresse fel az elrendezési dokumentumokat vagy hivatalos példáinkat , és kezdje meg a webhely tartalmának és összetevőinek elrendezését.
Fontos globálisok
A Bootstrap néhány fontos globális stílust és beállítást alkalmaz, amelyekkel tisztában kell lennie a használat során, és ezek mindegyike szinte kizárólag a böngészők közötti stílusok normalizálására irányul. Merüljünk el.
HTML5 doctype
A Bootstrap a HTML5 doctype használatát igényli. Enélkül néhány mókás, hiányos stílust fog látni, de ez nem okozhat jelentős csuklást.
<!doctype html>
<html lang="en">
...
</html>
Reszponzív meta tag
A Bootstrap-et először mobilra fejlesztették ki , egy olyan stratégiát, amelyben először a mobileszközökhöz optimalizáljuk a kódot, majd szükség szerint bővítjük az összetevőket CSS-médialekérdezések segítségével. Az összes eszköz megfelelő megjelenítésének és érintéses nagyításának biztosítása érdekében adja hozzá az adaptív nézetablak metacímkét a <head>
.
<meta name="viewport" content="width=device-width, initial-scale=1">
A kezdősablonban láthat egy példát erre működés közben .
Dobozméretezés
Az egyszerűbb méretezéshez a CSS-ben a globális box-sizing
értéket content-box
átváltjuk értékről értékre border-box
. Ez biztosítja padding
, hogy nem befolyásolja az elem végső számított szélességét, de problémákat okozhat néhány harmadik féltől származó szoftverrel, például a Google Térképpel és a Google Egyéni Keresőmotorral.
Ritka esetekben, amikor felül kell írnia, használja a következőkhöz hasonlót:
.selector-for-some-widget {
box-sizing: content-box;
}
A fenti kódrészlettel a beágyazott elemek – beleértve a és keresztül generált tartalmat is – ::before
mind ::after
öröklik az box-sizing
ehhez megadottakat .selector-for-some-widget
.
Tudjon meg többet a dobozmodellről és a méretezésről a CSS Tricks oldalon .
Indítsa újra
A böngészők közötti jobb megjelenítés érdekében az Újraindítást használjuk a böngészők és eszközök közötti ellentmondások kijavításához, miközben a gyakori HTML-elemekhez némileg meggyőzőbb visszaállítást biztosítunk.
Közösség
Legyen naprakész a Bootstrap fejlesztésével kapcsolatban, és forduljon a közösséghez ezekkel a hasznos forrásokkal.
- Olvassa el és iratkozzon fel a The Official Bootstrap Blogra .
- Csevegés más Bootstrapperekkel az IRC-ben. A
irc.libera.chat
szerveren, a#bootstrap
csatornán. - A megvalósítási súgó a Stack Overflow oldalon található (címkézett
bootstrap-5
). - A fejlesztőknek a kulcsszót
bootstrap
azokon a csomagokon kell használniuk, amelyek módosítják vagy bővítik a Bootstrap funkcióit, amikor npm -en vagy hasonló kézbesítési mechanizmusokon keresztül terjesztik a maximális felfedezhetőség érdekében.
A Twitteren is követheti a @getbootstrap oldalt a legújabb pletykákért és fantasztikus zenei videókért.