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.

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

JS

Daudzu mūsu komponentu darbībai ir nepieciešams izmantot JavaScript. Konkrēti, tiem ir nepieciešami jQuery , Popper un mūsu pašu JavaScript spraudņi. Mēs izmantojam jQuery slaido versiju, taču tiek atbalstīta arī pilna versija.

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 noslēdzošā </body>taga. Vispirms ir jābūt jQuery, pēc tam Popper un pēc tam mūsu JavaScript spraudņiem.

Saišķis

Iekļaujiet katru Bootstrap JavaScript spraudni vienā no mūsu diviem komplektiem. Gan bootstrap.bundle.jsun bootstrap.bundle.min.jsietver Popper mūsu rīka padomiem un uznirstošiem logiem, bet ne jQuery . Vispirms iekļaujiet jQuery, pēc tam Bootstrap JavaScript komplektu. 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/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>

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

Sastāvdaļas

Vai vēlaties zināt, kuriem komponentiem ir nepieciešams jQuery, mūsu JavaScript un Popper? Noklikšķiniet uz tālāk esošās saites rādīt komponentus. Ja neesat pārliecināts par 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
Scrollspy ritināšanas darbībai un navigācijas atjauninājumiem
Rīka padomi un uznirstošie elementi parādīšanai un pozicionēšanai (nepieciešams arī Popper )

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

Tas ir viss, kas jums nepieciešams vispārējām lapas prasībām. 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, shrink-to-fit=no">

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-4).
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.

CSP un iegultie SVG

Vairāki Bootstrap komponenti ietver mūsu CSS iegultos SVG, lai konsekventi un ērti veidotu komponentus visās pārlūkprogrammās un ierīcēs. Organizācijām ar stingrākām CSP konfigurācijām esam dokumentējuši visus mūsu iegulto SVG gadījumus (tie visi tiek lietoti, izmantojot background-image), lai jūs varētu rūpīgāk pārskatīt savas iespējas.

Aizvērt poga (izmanto brīdinājumos un modālos)
Pielāgotas izvēles rūtiņas un radio pogas
Veidlapu slēdži
Veidlapu apstiprināšanas ikonas
Pielāgotas atlases izvēlnes
Karuseļa vadīklas
Navigācijas joslas pārslēgšanas pogas

Pamatojoties uz kopienas sarunu , dažas iespējas, kā to risināt savā kodu bāzē, ietver vietrāžu URL aizstāšanu ar lokāli mitinātiem līdzekļiem, attēlu noņemšanu un iekļauto attēlu izmantošanu (nav iespējams visos komponentos) un CSP modificēšanu. Mēs iesakām rūpīgi pārskatīt savas drošības politikas un, ja nepieciešams, izlemt par labāko turpmāko ceļu.