Pradėkite naudotis „Bootstrap“.

„Bootstrap“ yra galingas, daug funkcijų turintis priekinės sistemos įrankių rinkinys. Sukurkite bet ką – nuo prototipo iki gamybos – per kelias minutes.

Šiame puslapyje

Greita pradžia

Pradėkite įtraukdami „Bootstrap“ gamybai paruoštą CSS ir „JavaScript“ per CDN, neatlikdami jokių kūrimo veiksmų. Pamatykite tai praktiškai naudodami šią Bootstrap CodePen demonstraciją .

Sukurkite naują index.htmlfailą savo projekto šaknyje. Taip pat įtraukite <meta name="viewport">žymą, kad tinkamai reaguotumėte mobiliuosiuose įrenginiuose.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Įtraukite „Bootstrap“ CSS ir JS. Prieš uždarydami įdėkite <link>žymą į <head>mūsų CSS ir į <script>mūsų „JavaScript“ paketo žymą (įskaitant „Popper“, skirtą padėties nustatymo išskleidžiamiesiems meniu, popperiams ir patarimams) </body>. Sužinokite daugiau apie mūsų CDN nuorodas .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

Taip pat galite įtraukti Popper ir mūsų JS atskirai. Jei neketinate naudoti išskleidžiamųjų meniu, iššokančių langų ar patarimų, sutaupykite keletą kilobaitų neįtraukdami Popper.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

Labas pasauli! Atidarykite puslapį pasirinktoje naršyklėje, kad pamatytumėte „Bootstrapped“ puslapį. Dabar galite pradėti kurti naudodami Bootstrap, sukurdami savo išdėstymą , pridėdami daugybę komponentų ir naudodami oficialius pavyzdžius .

CDN nuorodos

Kaip nuoroda, čia yra mūsų pagrindinės CDN nuorodos.

apibūdinimas	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

Taip pat galite naudoti CDN, kad gautumėte bet kurią iš mūsų papildomų versijų, išvardytų puslapyje Turinys .

Tolesni žingsniai

Skaitykite šiek tiek daugiau apie kai kuriuos svarbius pasaulinės aplinkos parametrus , kuriuos naudoja „Bootstrap“.
Apie tai, kas įtraukta į „Bootstrap“, skaitykite mūsų turinio skiltyje ir toliau pateiktą komponentų, kuriems reikalinga „JavaScript “ , sąrašą.
Reikia šiek tiek daugiau galios? Apsvarstykite galimybę kurti naudojant Bootstrap, įtraukdami šaltinio failus per paketų tvarkyklę .
Norite naudoti „Bootstrap“ kaip modulį su <script type="module">? Peržiūrėkite skyrių „Bootstrap“ naudojimas kaip modulis .

JS komponentai

Įdomu, kuriems komponentams aiškiai reikia „JavaScript“ ir „Popper“? 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 )
Rodymo, padėties nustatymo ir slinkimo režimai
Naršymo juosta, skirta išplėsti įskiepius Collapse ir Offcanvas, kad būtų įdiegtas reaguojantis elgesys
Navigacijos su skirtuko papildiniu, skirtu perjungti turinio sritis
Išorinės drobės, skirtos rodyti, nustatyti ir slinkti
Scrollspy slinkimo elgsenai ir naršymo naujinimams
Tostai, skirti rodyti ir atmesti
Patarimai ir iššokantys langai, skirti rodyti ir nustatyti (taip pat reikalingas Popper )

Svarbūs globaliai

„Bootstrap“ naudoja keletą svarbių pasaulinių stilių ir nustatymų, kurie beveik išimtinai yra skirti kelių naršyklių stilių normalizavimui . Pasinerkime.

HTML5 doctype

„Bootstrap“ reikalauja naudoti HTML5 dokumento tipą. Be jo pamatysite keistą ir neišsamų stilių.

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

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

Tai veikiantį pavyzdį galite pamatyti trumpoje pradžioje .

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 kuriomis trečiųjų šalių programomis, tokiomis kaip „Google“ žemėlapiai 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ų atstatymas būtų šiek tiek labiau pagrįstas.

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į .
Klauskite ir tyrinėkite mūsų GitHub diskusijas .
Kalbėkitės su kolegomis Bootstrappers IRC. Serveryje irc.libera.chat, #bootstrapkanale.
Diegimo pagalbos galite rasti Stack Overflow (pažymėta bootstrap-5).
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šų.