Ievads

Sāciet darbu ar Bootstrap — pasaulē populārāko sistēmu adaptīvu, mobilajām ierīcēm paredzētu vietņu izveidei, izmantojot jsDelivr un veidnes sākuma lapu.

Šajā lapā

Ātrs sākums

Vai vēlaties savam projektam ātri pievienot Bootstrap? Izmantojiet jsDelivr, bezmaksas atvērtā koda CDN. Vai izmantojat pakotņu pārvaldnieku vai jālejupielādē avota faili? Dodieties uz lejupielāžu lapu .

CSS

Lai ielādētu mūsu CSS, nokopējiet un ielīmējiet stila lapu <link>savā <head>pirms pārējām stilu lapām.

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

JS

Daudzu mūsu komponentu darbībai ir nepieciešams izmantot JavaScript. Konkrēti, tiem ir nepieciešami mūsu pašu JavaScript spraudņi un Popper . Lai iespējotu, ievietojiet kādu no tālāk norādītajām <script>vienībām savu lapu beigās tieši pirms beigu </body>taga.

Saišķis

Iekļaujiet katru Bootstrap JavaScript spraudni un atkarību vienā no mūsu diviem komplektiem. Gan bootstrap.bundle.jsun bootstrap.bundle.min.jsietver Popper mūsu rīka padomiem un uznirstošiem ekrāniem. Lai iegūtu papildinformāciju par to, kas ir iekļauts Bootstrap, lūdzu, skatiet mūsu satura sadaļu.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Atsevišķi

Ja izlemjat izmantot atsevišķu skriptu risinājumu, vispirms ir jābūt Popperam (ja izmantojat rīka padomus vai uznirstošos logus), bet pēc tam mūsu JavaScript spraudņiem.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

Moduļi

Ja izmantojat <script type="module">, lūdzu, skatiet sadaļu Bootstrap kā moduļa izmantošana .

Sastāvdaļas

Vai vēlaties uzzināt, kuriem komponentiem ir nepieciešams mūsu JavaScript un Popper? Noklikšķiniet uz tālāk esošās saites rādīt komponentus. Ja neesat pārliecināts par vispārējo lapas struktūru, turpiniet lasīt lapas veidnes piemēru.

Rādīt komponentus, kuriem nepieciešams JavaScript

Brīdinājumi par atlaišanu
Pogas stāvokļu un izvēles rūtiņu/radio funkcionalitātes pārslēgšanai
Karuselis visām slaidu darbībām, vadīklām un indikatoriem
Sakļaut, lai pārslēgtu satura redzamību
Nolaižamās izvēlnes parādīšanai un pozicionēšanai (nepieciešams arī Popper )
Modāļi parādīšanai, pozicionēšanai un ritināšanai
Navigācijas josla mūsu Sakļaut spraudņa paplašināšanai, lai ieviestu reaģējošu darbību
Tosti parādīšanai un atlaišanai
Rīka padomi un uznirstošie elementi parādīšanai un pozicionēšanai (nepieciešams arī Popper )
Scrollspy ritināšanas darbībai un navigācijas atjauninājumiem

Startera veidne

Noteikti iestatiet savas lapas atbilstoši jaunākajiem dizaina un izstrādes standartiem. Tas nozīmē, ka ir jāizmanto HTML5 dokumenta tips un jāiekļauj skatvietas metataga pareizai reaģējošai darbībai. Salieciet to visu kopā, un jūsu lapām vajadzētu izskatīties šādi:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

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

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

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

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Lai veiktu nākamās darbības, apmeklējiet izkārtojuma dokumentus vai mūsu oficiālos piemērus , lai sāktu savas vietnes satura un komponentu izkārtošanu.

Svarīgi globāli

Bootstrap izmanto dažus svarīgus globālus stilus un iestatījumus, kas jums jāzina, to lietojot, un tie visi ir gandrīz tikai paredzēti vairāku pārlūkprogrammu stilu normalizēšanai . Nirsim iekšā.

HTML5 doktips

Lai izmantotu Bootstrap, ir jāizmanto HTML5 dokumenta tips. Bez tā jūs redzēsit dīvainu, nepilnīgu stilu, taču, iekļaujot to, nevajadzētu radīt ievērojamas žagas.

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

Adaptīvs metatags

Bootstrap vispirms tiek izstrādāts mobilajām ierīcēm — stratēģija, kurā mēs vispirms optimizējam kodu mobilajām ierīcēm un pēc tam, izmantojot CSS multivides vaicājumus, pēc vajadzības palielinām komponentus. Lai nodrošinātu pareizu renderēšanu un pieskāriena tālummaiņu visās ierīcēs, pievienojiet adaptīvā skatvietas metatagu savam <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Piemēru tam var redzēt darbībā sākuma veidnē .

Kastes izmēra noteikšana

Lai iegūtu vienkāršāku izmēru CSS, mēs pārslēdzam globālo box-sizingvērtību no content-boxuz border-box. Tas nodrošina padding, ka tas neietekmē elementa galīgo aprēķināto platumu, bet var radīt problēmas ar kādu trešo pušu programmatūru, piemēram, Google Maps un Google pielāgoto meklētājprogrammu.

Retos gadījumos, kad jums ir nepieciešams to ignorēt, izmantojiet kaut ko līdzīgu:

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

Izmantojot iepriekš minēto fragmentu, ligzdotie elementi, tostarp ģenerētais saturs, izmantojot ::beforeun , ::afterpārmantos tam box-sizingnorādīto .selector-for-some-widget.

Uzziniet vairāk par kastes modeli un izmēru noteikšanu vietnē CSS triki .

Reboot

Lai uzlabotu vairāku pārlūkprogrammu atveidošanu, mēs izmantojam funkciju Reboot , lai labotu neatbilstības pārlūkprogrammās un ierīcēs, vienlaikus nodrošinot nedaudz pārdomātākus HTML elementu atiestatīšanu.

kopiena

Saņemiet jaunāko informāciju par Bootstrap attīstību un sazinieties ar kopienu, izmantojot šos noderīgos resursus.

Izlasiet un abonējiet oficiālo sāknēšanas emuāru .
Tērzējiet ar citiem bootstrappers IRC. irc.libera.chatServerī, kanālā #bootstrap.
Ieviešanas palīdzību var atrast vietnē Stack Overflow (tagged bootstrap-5).
Izstrādātājiem ir jāizmanto atslēgvārds bootstrappakotnēs, kas pārveido vai papildina Bootstrap funkcionalitāti, izplatot, izmantojot npm vai līdzīgus piegādes mehānismus, lai nodrošinātu maksimālu atklāšanu.

Varat arī sekot @getbootstrap vietnē Twitter , lai skatītu jaunākās tenkas un satriecošos mūzikas videoklipus.