Aloita Bootstrapin käyttö

Bootstrap on tehokas, monipuolinen käyttöliittymätyökalusarja. Rakenna mitä tahansa – prototyypeistä tuotantoon – muutamassa minuutissa.

Tällä sivulla

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.htmltiedosto 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.