Source

Į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, kurį nemokamai teikia jsDelivr žmonės. 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-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

JS

Kad veiktų daugelis mūsų komponentų, reikia naudoti JavaScript. Tiksliau, jiems reikia jQuery , Popper.js ir mūsų pačių JavaScript papildinių. Įdėkite šiuos <script>s netoli savo puslapių pabaigos, prieš pat baigiamąją </body>žymą, kad juos įgalintumėte. Pirmiausia turi būti „jQuery“, tada „Popper.js“, o tada „JavaScript“ papildiniai.

Naudojame ploną jQuery versiją, tačiau palaikoma ir visa versija.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Įdomu, kuriems komponentams aiškiai reikia „jQuery“, mūsų JS ir Popper.js? Spustelėkite toliau pateiktą nuorodą Rodyti komponentus. Jei visai nesate tikri dėl bendros 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.js )
  • Rodymo, padėties nustatymo ir slinkimo režimai
  • Naršymo juosta, skirta išplėsti sutraukimo papildinį, kad būtų įdiegtas reaguojantis elgesys
  • Patarimai ir iššokantys langai, skirti rodyti ir nustatyti (taip pat reikia Popper.js )
  • Scrollspy slinkimo elgsenai ir naršymo naujinimams

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-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 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.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 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 requires the use of the HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.

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

Responsive meta tag

Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

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

You can see an example of this in action in the starter template.

Box-sizing

For more straightforward sizing in CSS, we switch the global box-sizing value from content-box to border-box. This ensures padding does not affect the final computed width of an element, but it can cause problems with some third party software like Google Maps and Google Custom Search Engine.

On the rare occasion you need to override it, use something like the following:

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

With the above snippet, nested elements—including generated content via ::before and ::after—will all inherit the specified box-sizing for that .selector-for-some-widget.

Learn more about box model and sizing at CSS Tricks.

Reboot

For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

Community

Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.

  • Follow @getbootstrap on Twitter.
  • Read and subscribe to The Official Bootstrap Blog.
  • Chat with fellow Bootstrappers in IRC. On the irc.freenode.net server, in the ##bootstrap channel.
  • Implementation help may be found at Stack Overflow (tagged 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šų.