Kezdje el a Bootstrap használatát

A Bootstrap egy erőteljes, funkciókban gazdag frontend eszközkészlet. Készítsen bármit – a prototípustól a gyártásig – percek alatt.

Ezen az oldalon

Gyors indítás

Kezdje azzal, hogy a Bootstrap gyártásra kész CSS-jét és JavaScriptjét CDN-en keresztül tartalmazza anélkül, hogy bármilyen összeállítási lépésre lenne szüksége. Tekintse meg ezt a gyakorlatban ezzel a Bootstrap CodePen bemutatóval .

Hozzon létre egy új index.htmlfájlt a projekt gyökérkönyvtárában. Szerelje be a <meta name="viewport">címkét is a megfelelő reagálás érdekében a mobileszközökön.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Tartalmazza a Bootstrap CSS-jét és JS-jét. Helyezze el a <link>címkét <head>a CSS-ünkhöz és a <script>JavaScript-csomagunk címkéjét (beleértve a Poppert a pozicionáláshoz legördülő menükhöz, előugró ablakokhoz és eszköztippekhez) a bezárás előtt </body>. Tudjon meg többet CDN-linkjeinkről .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

A Poppert és a JS-ünket külön is felveheti. Ha nem tervezi legördülő menük, felugró ablakok vagy eszköztippek használatát, spóroljon néhány kilobájtot, ha nem használja a Poppert.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

Helló Világ! Nyissa meg az oldalt a választott böngészőjében a Bootstrapped oldal megtekintéséhez. Most már elkezdheti az építést a Bootstrap segítségével saját elrendezés létrehozásával, több tucat összetevő hozzáadásával és hivatalos példáink felhasználásával .

CDN linkek

Referenciaként itt vannak az elsődleges CDN-hivatkozásaink.

Leírás	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

Használhatja a CDN-t a Tartalom oldalon felsorolt további buildjeink letöltésére is .

Következő lépések

Olvasson egy kicsit többet a Bootstrap által használt fontos globális környezeti beállításokról .
Olvassa el a Bootstrap tartalmát a Tartalom szakaszban , valamint a JavaScriptet igénylő összetevők listáját alább.
Kell még egy kis teljesítmény? Fontolja meg a Bootstrap használatával való építést a forrásfájlok csomagkezelőn keresztüli felvételével .
Modulként szeretné használni a Bootstrap-ot <script type="module">? Kérjük, olvassa el a Bootstrap modulként való használata című részt.

JS összetevők

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 és az Offcanvas beépülő modulok kiterjesztéséhez a reszponzív viselkedés megvalósításához
Navigáció a Tab beépülő modullal a tartalompanelek váltásához
Offcanvass megjelenítéséhez, pozicionálásához és görgetési viselkedéséhez
Scrollspy a görgetési viselkedéshez és a navigációs frissítésekhez
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 )

Fontos globálisok

A Bootstrap néhány fontos globális stílust és beállítást alkalmaz, amelyek 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 funky és hiányos stílust fog látni.

<!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 gyorsindításban 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 – ::beforemind ::afteröröklik az box-sizingehhez 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 .
Kérdezzen és fedezze fel GitHub-beszélgetéseinket .
Csevegés más Bootstrapperekkel az IRC-ben. A irc.libera.chatszerveren, a #bootstrapcsatorná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 bootstrapazokon a csomagokon kell használniuk, amelyek módosítják vagy kiegészí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.