Johdanto

Aloita Bootstrapilla, joka on maailman suosituin kehys reagoivien, mobiililähtöisten sivustojen rakentamiseen jsDelivrillä ja aloitussivulla.

Tällä sivulla

Pika-aloitus

Haluatko nopeasti lisätä Bootstrapin projektiisi? Käytä jsDelivr, ilmainen avoimen lähdekoodin CDN. Käytätkö paketinhallintaa vai haluatko ladata lähdetiedostot? Siirry lataussivulle .

CSS

Kopioi ja liitä tyylitaulukko <link>omaan <head>ennen kaikkia muita tyylisivuja ladataksesi CSS:n.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

JS

Monet komponenteistamme edellyttävät JavaScriptin käyttöä toimiakseen. Erityisesti ne vaativat omat JavaScript-laajennukset ja Popperin . Ota ne käyttöön sijoittamalla jokin seuraavista <script>sivujesi loppuun, juuri ennen sulkevaa </body>tunnistetta.

Nippu

Sisällytä kaikki Bootstrapin JavaScript-laajennukset ja riippuvuudet johonkin kahdesta paketistamme. Molemmat bootstrap.bundle.jsja bootstrap.bundle.min.jssisältävät Popperin työkaluvinkkejämme ja ponnahdusikkunoita varten. Lisätietoja Bootstrapin sisällöstä on sisältöosiossa.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Erillinen

Jos päätät käyttää erillistä komentosarjaratkaisua, Popperin on oltava ensin (jos käytät työkaluvihjeitä tai ponnahdusikkunoita) ja sitten JavaScript-laajennuksiamme.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

Moduulit

Jos käytät <script type="module">, tutustu Bootstrapin käyttäminen moduulina -osioon.

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-laajennuksen laajentamiseen reagoivan toiminnan toteuttamiseksi
Paahtoleipää näyttämistä ja hylkäämistä varten
Työkaluvinkit ja ponnahdusikkunat näyttämistä ja sijoittelua varten (vaatii myös Popperin )
Scrollspy vierityskäyttäytymiseen ja navigointipäivityksiin

Aloitusmalli

Varmista, että sivusi ovat uusimpien suunnittelu- ja kehitysstandardien mukaisia. Tämä tarkoittaa HTML5-dokumenttityypin käyttöä ja näkymän sisällönkuvauskentän sisällyttämistä oikeaan reagoivaan toimintaan. Yhdistä kaikki ja sivujesi pitäisi näyttää tältä:

<!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-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 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-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Seuraavia vaiheita varten käy Layout-dokumenteissa tai virallisissa esimerkeissämme aloittaaksesi sivustosi sisällön ja komponenttien asettelun.

Tärkeitä globaaleja

Bootstrap käyttää kourallista tärkeitä maailmanlaajuisia tyylejä ja asetuksia, jotka sinun on oltava tietoisia sitä käyttäessäsi. Kaikki ne ovat lähes yksinomaan suunnattu eri selaimien tyylien normalisointiin . Sukeltakaamme sisään.

HTML5 doctype

Bootstrap vaatii HTML5-dokumenttityypin käyttöä. Ilman sitä näet omituisen epätäydellisen muotoilun, mutta sen sisällyttämisen ei pitäisi aiheuttaa suuria hikkauksia.

<!doctype html>
<html lang="en">
  ...
</html>

Responsiivinen sisällönkuvauskenttä

Bootstrap on kehitetty ensin mobiililaitteille , strategia, jossa optimoimme koodin ensin mobiililaitteille ja sitten skaalaamme komponentteja tarpeen mukaan käyttämällä CSS-mediakyselyitä. Varmistaaksesi oikean hahmontamisen ja kosketuszoomauksen kaikille laitteille lisäämällä responsiivisen näkymän sisällönkuvauskentän .<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

Näet esimerkin tästä toiminnassa aloitusmallissa .

Laatikon mitoitus

CSS:n koon yksinkertaistamiseksi vaihdamme globaalin arvon box-sizingarvosta content-box. border-boxTämä varmistaa padding, ettei se vaikuta elementin lopulliseen laskettuun leveyteen, mutta se voi aiheuttaa ongelmia joidenkin kolmannen osapuolen ohjelmistojen, kuten Google Mapsin ja Google-täsmähakukoneen, kanssa.

Harvinaisissa tapauksissa sinun on ohitettava se, käytä jotain seuraavan kaltaista:

.selector-for-some-widget {
  box-sizing: content-box;
}

Yllä olevan katkelman avulla sisäkkäiset elementit – mukaan lukien ::beforeja :n kautta luotu sisältö – ::afterkaikki perivät sille box-sizingmääritetyn .selector-for-some-widget.

Lisätietoja laatikon malleista ja mitoista on CSS Tricks -sivustolla .

Käynnistä uudelleen

Selaimien välisen hahmontamisen parantamiseksi käytämme uudelleenkäynnistystä korjaamaan selainten ja laitteiden väliset epäjohdonmukaisuudet ja tarjoamalla yleisten HTML-elementtien hieman mielipiteellisempiä nollauksia.

Yhteisö

Pysy ajan tasalla Bootstrapin kehityksestä ja ota yhteyttä yhteisöön näiden hyödyllisten resurssien avulla.

Lue ja tilaa virallinen Bootstrap-blogi .
Keskustele muiden Bootstrapperien kanssa IRC:ssä. irc.libera.chatPalvelimella, kanavalla #bootstrap.
Käyttöönotto-ohjeet löytyvät Stack Overflowsta (tagged bootstrap-5).
Kehittäjien tulee käyttää avainsanaa bootstrappaketeissa, jotka muokkaavat tai lisäävät Bootstrapin toimintoja, kun ne levitetään npm :n tai vastaavien toimitusmekanismien kautta maksimaalisen löydettävyyden saavuttamiseksi.

Voit myös seurata @getbootstrap Twitterissä saadaksesi uusimmat juorut ja mahtavia musiikkivideoita.