Source

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-ohjelmaa, jonka jsDelivrin ihmiset tarjoavat ilmaiseksi. 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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

Monet komponenteistamme edellyttävät JavaScriptin käyttöä toimiakseen. Erityisesti ne vaativat jQueryn , Popper.js :n ja omia JavaScript-laajennuksiamme. Ota seuraavat <script>s:t käyttöön sivujesi lopussa, juuri ennen sulkevaa </body>tagia. Ensin tulee olla jQuery, sitten Popper.js ja sitten JavaScript-laajennukset.

Käytämme jQueryn ohutta rakennetta , mutta myös täysversiota tuetaan.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Oletko utelias, mitkä komponentit vaativat nimenomaisesti jQueryn, JS:n ja Popper.js:n? Napsauta alla olevaa Näytä komponentit -linkkiä. Jos olet epävarma sivun yleisestä rakenteesta, jatka esimerkkisivumallin lukemista.

Meidän bootstrap.bundle.jsja bootstrap.bundle.min.jssisältää Popper , mutta ei jQuery . Lisätietoja Bootstrapin sisällöstä on sisältöosiossa.

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 Popper.js:n )
  • Modaalit näyttöön, paikannukseen ja vierityskäyttäytymiseen
  • Navigointipalkki Collapse-laajennuksen laajentamiseen reagoivan toiminnan toteuttamiseksi
  • Työkaluvinkit ja ponnahdusikkunat näyttämistä ja paikantamista varten (vaatii myös Popper.js:n )
  • 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, shrink-to-fit=no">

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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.

  • Seuraa @getbootstrap Twitterissä .
  • Lue ja tilaa virallinen Bootstrap-blogi .
  • Keskustele muiden Bootstrapperien kanssa IRC:ssä. irc.freenode.netPalvelimella, 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.