Aloita Bootstrapin käyttö
Bootstrap on tehokas, monipuolinen käyttöliittymätyökalusarja. Rakenna mitä tahansa – prototyypeistä tuotantoon – muutamassa minuutissa.
Pika-aloitus
Aloita sisällyttämällä Bootstrapin tuotantovalmis CSS ja JavaScript CDN:n kautta ilman rakennusvaiheita. Katso se käytännössä tämän Bootstrap CodePen - demon avulla .
-
Luo uusi
index.html
tiedosto projektisi juureen. Sisällytä<meta name="viewport">
tunniste myös oikeanlaisen reagoivan toiminnan varmistamiseksi mobiililaitteissa.<!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>
-
Sisällytä Bootstrapin CSS ja JS. Sijoita
<link>
tunniste<head>
CSS-<script>
koodiamme varten ja JavaScript-pakettimme tagi (mukaan lukien Popper paikannuspudotusvalikoihin, poppereihin ja työkaluvihjeisiin) ennen sulkemista</body>
. Lue lisää CDN-linkeistämme .<!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>
Voit myös sisällyttää Popperin ja JS:mme erikseen. Jos et aio käyttää avattavia valikoita, ponnahdusikkunoita tai työkaluvihjeitä, säästä muutama kilotavu jättämällä pois Popper.
<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>
-
Hei maailma! Avaa sivu valitsemallasi selaimella nähdäksesi Bootstrapped-sivusi. Nyt voit aloittaa rakentamisen Bootstrapilla luomalla oman ulkoasun , lisäämällä kymmeniä komponentteja ja hyödyntämällä virallisia esimerkkejämme .
CDN-linkit
Viitteenä tässä ovat ensisijaiset CDN-linkit.
Kuvaus | URL-osoite |
---|---|
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 |
Voit myös käyttää CDN:ää noutaaksesi minkä tahansa Sisältö-sivulla luetelluista lisäversioistamme .
Seuraavat vaiheet
-
Lue hieman lisää tärkeistä globaaleista ympäristöasetuksista , joita Bootstrap käyttää.
-
Lue sisältöosiossa Bootstrapin sisällöstä ja alla olevasta luettelosta JavaScriptiä vaativista komponenteista .
-
Tarvitsetko vähän lisää tehoa? Harkitse rakentamista Bootstrapilla sisällyttämällä lähdetiedostot paketinhallinnan kautta .
-
Haluatko käyttää Bootstrapia moduulina
<script type="module">
? Katso Bootstrapin käyttö moduulina -osiossa.
JS komponentit
Haluatko tietää, mitkä komponentit vaativat JavaScriptiä ja Popperia? Napsauta alla olevaa Näytä komponentit -linkkiä. Jos olet epävarma sivun yleisestä rakenteesta, jatka esimerkkisivumallin lukemista.
Näytä JavaScriptiä vaativat komponentit
- Hälytykset hylkäämisestä
- Painikkeet tilojen ja valintaruutujen/radiotoimintojen vaihtamiseen
- Karuselli kaikille liukukäyttäytymisille, säätimille ja ilmaisimille
- Tiivistä, jos haluat vaihtaa sisällön näkyvyyttä
- Pudotusvalikot näyttämistä ja sijoittamista varten (vaatii myös Popperin )
- Modaalit näyttöön, paikannukseen ja vierityskäyttäytymiseen
- Navigointipalkki Collapse- ja Offcanvas-laajennusten laajentamiseen reagoivan toiminnan toteuttamiseksi
- Navigaatiot Tab-laajennuksella sisältöruutujen vaihtamista varten
- Offcanvases esittelyyn, sijoitteluun ja vierityskäyttäytymiseen
- Scrollspy vierityskäyttäytymiseen ja navigointipäivityksiin
- Paahtoleipää näyttämistä ja hylkäämistä varten
- Työkaluvinkit ja ponnahdusikkunat näyttämistä ja sijoittelua varten (vaatii myös Popperin )
Tärkeitä globaaleja
Bootstrap käyttää kourallista tärkeitä maailmanlaajuisia tyylejä ja asetuksia, jotka kaikki on lähes yksinomaan suunnattu eri selaimien tyylien normalisointiin . Sukeltakaamme sisään.
HTML5 doctype
Bootstrap vaatii HTML5-dokumenttityypin käyttöä. Ilman sitä näet hienon ja epätäydellisen muotoilun.
<!doctype html>
<html lang="en">
...
</html>
Responsiivinen sisällönkuvauskenttä
Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>
.
<meta name="viewport" content="width=device-width, initial-scale=1">
You can see an example of this in action in the quick start.
Box-sizing
For more straightforward sizing in CSS, we switch the global box-sizing
value from content-box
to border-box
. This ensures padding
does not affect the final computed width of an element, but it can cause problems with some third-party software like Google Maps and Google Custom Search Engine.
On the rare occasion you need to override it, use something like the following:
.selector-for-some-widget {
box-sizing: content-box;
}
With the above snippet, nested elements—including generated content via ::before
and ::after
—will all inherit the specified box-sizing
for that .selector-for-some-widget
.
Learn more about box model and sizing at CSS Tricks.
Reboot
For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.
Community
Stay up-to-date on the development of Bootstrap and reach out to the community with these helpful resources.
- Read and subscribe to The Official Bootstrap Blog.
- Ask and explore our GitHub Discussions.
- Chat with fellow Bootstrappers in IRC. On the
irc.libera.chat
server, in the#bootstrap
channel. - Implementation help may be found at Stack Overflow (tagged
bootstrap-5
). - Developers should use the keyword
bootstrap
on packages that modify or add to the functionality of Bootstrap when distributing through npm or similar delivery mechanisms for maximum discoverability.
You can also follow @getbootstrap on Twitter for the latest gossip and awesome music videos.