in English

Johdanto

Aloita Bootstrapilla, joka on maailman suosituin kehys reagoivien, mobiililähtöisten sivustojen rakentamiseen, jsDelivrillä ja mallin 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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

Monet komponenteistamme edellyttävät JavaScriptin käyttöä toimiakseen. Erityisesti ne vaativat jQueryn , Popperin ja omat JavaScript-laajennukset. Käytämme jQueryn ohutta rakennetta , mutta myös täysversiota tuetaan.

Ota ne käyttöön sijoittamalla jokin seuraavista <script>sivujesi loppuun, juuri ennen sulkevaa </body>tunnistetta. Ensin tulee jQuery, sitten Popper ja sitten JavaScript-laajennukset.

Nippu

Sisällytä jokainen Bootstrap JavaScript-laajennus johonkin kahdesta paketistamme. Molemmat bootstrap.bundle.jssisältävät Popperin työkaluvinkkejämme ja ponnahdusikkunoita varten, mutta eivätbootstrap.bundle.min.js jQueryä . Sisällytä ensin jQuery ja sitten Bootstrap JavaScript -paketti. Lisätietoja Bootstrapin sisällöstä on sisältöosiossa.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" 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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Komponentit

Oletko utelias, mitkä komponentit vaativat nimenomaisesti jQueryä, JavaScriptiä ja Popperia? Napsauta alla olevaa Näytä komponentit -linkkiä. Jos olet epävarma sivun 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ä
  • Avattavat valikot näyttämistä ja paikantamista varten (vaatii myös Popperin )
  • Modaalit näyttöön, paikannukseen ja vierityskäyttäytymiseen
  • Navigointipalkki Collapse-laajennuksen laajentamiseen reagoivan toiminnan toteuttamiseksi
  • Scrollspy vierityskäyttäytymiseen ja navigointipäivityksiin
  • Työkaluvinkit ja ponnahdusikkunat näyttämistä ja sijoittelua varten (vaatii myös Popperin )

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, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Se on kaikki mitä tarvitset sivun yleisiin vaatimuksiin. Vieraile 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, shrink-to-fit=no">

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 mielivaltaisempia 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-4).
  • 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.

CSP:t ja sulautetut SVG:t

Useat Bootstrap-komponentit sisältävät CSS:ään upotettuja SVG-tiedostoja, jotka tekevät komponenttien tyylistä johdonmukaisesti ja helposti kaikissa selaimissa ja laitteissa. Organisaatioille, joilla on tiukemmat CSP - määritykset , olemme dokumentoineet kaikki sulautettujen SVG-tiedostojemme esiintymät (joita kaikkia käytetään -palvelun kautta background-image), jotta voit tarkastella vaihtoehtojasi perusteellisemmin.

Yhteisön keskustelun perusteella joitakin vaihtoehtoja tämän ratkaisemiseksi omassa koodikannassasi ovat URL-osoitteiden korvaaminen paikallisesti isännöidyillä resursseilla, kuvien poistaminen ja upotettujen kuvien käyttäminen (ei mahdollista kaikissa osissa) ja CSP:n muokkaaminen. Suosittelemme, että tarkistat huolellisesti omat tietoturvapolitiikkasi ja päätät tarvittaessa parhaasta tiestä eteenpäin.