Johdanto
Aloita Bootstrapilla, joka on maailman suosituin kehys reagoivien, mobiililähtöisten sivustojen rakentamiseen jsDelivrillä ja aloitussivulla.
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.js
ja bootstrap.bundle.min.js
sisä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-sizing
arvosta content-box
. border-box
Tä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 ::before
ja :n kautta luotu sisältö – ::after
kaikki perivät sille box-sizing
mää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.chat
Palvelimella, kanavalla#bootstrap
. - Käyttöönotto-ohjeet löytyvät Stack Overflowsta (tagged
bootstrap-5
). - Kehittäjien tulee käyttää avainsanaa
bootstrap
paketeissa, 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.