Įvadas

Pradėkite nuo „Bootstrap“ – populiariausios pasaulyje sistemos, skirtos kurti interaktyvias svetaines, pirmiausia mobiliesiems, su „jsDelivr“ ir šablono pradžios puslapiu.

Greita pradžia

Norite greitai pridėti „Bootstrap“ prie savo projekto? Naudokite jsDelivr, nemokamą atvirojo kodo CDN. Naudojate paketų tvarkyklę ar reikia atsisiųsti šaltinio failus? Eikite į atsisiuntimų puslapį .

CSS

Nukopijuokite ir įklijuokite stiliaus lapą <link>į savo <head>prieš visus kitus stilių lapus, kad įkeltumėte CSS.

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

JS

Kad veiktų daugelis mūsų komponentų, reikia naudoti JavaScript. Tiksliau, jiems reikia jQuery , Popper ir mūsų pačių JavaScript papildinių. Naudojame ploną jQuery versiją, tačiau palaikoma ir visa versija.

Įdėkite vieną iš toliau pateiktų <script>s puslapių pabaigoje, prieš pat baigiamąją </body>žymą, kad juos įgalintumėte. Pirmiausia turi būti „jQuery“, tada „Popper“, o tada „JavaScript“ papildiniai.

Bundle

Įtraukite kiekvieną „Bootstrap JavaScript“ papildinį į vieną iš dviejų mūsų paketų. Abu bootstrap.bundle.jsir bootstrap.bundle.min.jsapima „ Popper “, skirtą mūsų įrankių patarimams ir iššokantiems langams, bet ne „ jQuery “ . Pirmiausia įtraukite „jQuery“, tada „Bootstrap JavaScript“ paketą. Norėdami gauti daugiau informacijos apie tai, kas įtraukta į „Bootstrap“, žr. mūsų turinio skyrių.

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

Atskirai

Jei nuspręsite naudoti atskirų scenarijų sprendimą, pirmiausia turi būti „Popper“ (jei naudojate patarimus ar iššokančius elementus), o tada – „JavaScript“ papildinius.

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

Komponentai

Įdomu, kuriems komponentams aiškiai reikia „jQuery“, „JavaScript“ ir „Popper“? Spustelėkite toliau pateiktą nuorodą Rodyti komponentus. Jei nesate tikri dėl puslapio struktūros, toliau skaitykite puslapio šablono pavyzdį.

Rodyti komponentus, kuriems reikalingas „JavaScript“.

Įspėjimai dėl atleidimo
Mygtukai, skirti perjungti būsenas ir žymimąjį laukelį / radijo funkciją
Karuselė, skirta visoms skaidrėms, valdikliams ir indikatoriams
Sutraukti, kad perjungtumėte turinio matomumą
Išskleidžiamieji meniu rodymui ir padėties nustatymui (taip pat reikalingas Popper )
Rodymo, padėties nustatymo ir slinkimo režimai
Naršymo juosta, skirta išplėsti sutraukimo papildinį, kad būtų įdiegtas reaguojantis elgesys
Scrollspy slinkimo elgsenai ir naršymo naujinimams
Patarimai ir iššokantys langai, skirti rodyti ir nustatyti (taip pat reikalingas Popper )

Starterio šablonas

Būtinai nustatykite savo puslapius pagal naujausius dizaino ir kūrimo standartus. Tai reiškia, kad reikia naudoti HTML5 dokumento tipą ir įtraukti peržiūros srities metažymą, kad būtų tinkamai reaguojama. Sudėkite viską ir jūsų puslapiai turėtų atrodyti taip:

<!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>

Tai viskas, ko jums reikia bendriems puslapio reikalavimams. Apsilankykite maketavimo dokumentuose arba oficialiuose pavyzdžiuose , kad pradėtumėte dėlioti savo svetainės turinį ir komponentus.

Svarbūs globaliai

„Bootstrap“ naudoja keletą svarbių pasaulinių stilių ir nustatymų, kuriuos turėsite žinoti naudodami jį. Visi jie yra beveik išimtinai skirti kelių naršyklių stilių normalizavimui . Pasinerkime.

HTML5 doctype

„Bootstrap“ reikalauja naudoti HTML5 dokumento tipą. Be jo pamatysite keistą nebaigtą stilių, tačiau įtraukus jį neturėtų kilti didelių kliūčių.

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

Atsakinga metažyma

„Bootstrap“ pirmiausia sukurta mobiliesiems , tai strategija, pagal kurią pirmiausia optimizuojame kodą mobiliesiems įrenginiams, o tada prireikus padidiname komponentus naudodami CSS medijos užklausas. Norėdami užtikrinti tinkamą visų įrenginių atvaizdavimą ir mastelio keitimą liečiant, pridėkite interaktyvią peržiūros srities metažymą prie savo <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Pavyzdį, kaip tai veikia, galite pamatyti starterio šablone .

Dėžutės dydžio nustatymas

Kad būtų paprasčiau nustatyti dydį CSS, pakeičiame visuotinę box-sizingreikšmę iš content-boxį border-box. Tai užtikrina padding, kad tai neturės įtakos galutiniam apskaičiuotam elemento pločiui, bet gali sukelti problemų su kai kurios trečiosios šalies programine įranga, pvz., „Google“ žemėlapiais ir „Google“ tinkintos paieškos programa.

Retais atvejais reikia nepaisyti, naudokite kažką panašaus į šiuos:

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

Naudojant aukščiau pateiktą fragmentą, įdėtieji elementai, įskaitant sugeneruotą turinį per ::beforeir, ::afterpaveldės tam nurodytus box-sizingelementus .selector-for-some-widget.

Sužinokite daugiau apie dėžutės modelį ir dydį apsilankę CSS Tricks .

Perkraukite

Siekdami patobulinti kelių naršyklių atvaizdavimą, naudojame perkrovimą , kad ištaisytume naršyklių ir įrenginių neatitikimus, o įprastų HTML elementų nustatymai būtų šiek tiek labiau pagrįsti.

bendruomenė

Gaukite naujausią informaciją apie „Bootstrap“ kūrimą ir susisiekite su bendruomene naudodami šiuos naudingus išteklius.

Skaitykite ir užsiprenumeruokite oficialų „Bootstrap“ tinklaraštį .
Kalbėkitės su kolegomis Bootstrappers IRC. Serveryje irc.libera.chat, #bootstrapkanale.
Diegimo pagalbos galite rasti Stack Overflow (pažymėta bootstrap-4).
Kūrėjai turėtų naudoti raktinį žodį bootstrappaketuose, kurie modifikuoja arba papildo „Bootstrap“ funkcijas platindami per npm ar panašius pristatymo mechanizmus, kad būtų galima maksimaliai aptikti.

Taip pat galite sekti @getbootstrap „Twitter “, kad gautumėte naujausių paskalų ir nuostabių muzikinių vaizdo įrašų.

CSP ir įterptieji SVG

Kai kurie „Bootstrap“ komponentai apima įterptus SVG į mūsų CSS, kad būtų galima nuosekliai ir lengvai formuoti komponentus visose naršyklėse ir įrenginiuose. Organizacijoms, turinčioms griežtesnes CSP konfigūracijas , dokumentavome visus įterptųjų SVG atvejus (visi jie taikomi per background-image), kad galėtumėte nuodugniau peržiūrėti savo parinktis.

Uždaryti mygtukas (naudojamas įspėjimuose ir modaluose)
Pasirinktiniai žymės langeliai ir radijo mygtukai
Formos jungikliai
Formos patvirtinimo piktogramos
Pasirinktinis meniu
Karuselės valdikliai
Navigacijos juostos perjungimo mygtukai

Remiantis bendruomenės pokalbiais , kai kurios parinktys, kaip tai išspręsti savo kodų bazėje, apima URL pakeitimą vietoje priglobtais ištekliais, vaizdų pašalinimą ir įtrauktų vaizdų naudojimą (ne visuose komponentuose) ir CSP modifikavimą. Rekomenduojame atidžiai peržiūrėti savo saugos politiką ir, jei reikia, nuspręsti, kaip elgtis toliau.