Sāciet darbu ar Bootstrap

Bootstrap ir jaudīgs, ar funkcijām bagāts priekšgala rīku komplekts. Izveidojiet jebko — no prototipa līdz ražošanai — dažu minūšu laikā.

Šajā lapā

Ātrs sākums

Sāciet darbu, iekļaujot Bootstrap ražošanai gatavu CSS un JavaScript, izmantojot CDN, bez nepieciešamības veikt nekādas veidošanas darbības. Skatiet to praksē ar šo Bootstrap CodePen demonstrāciju .

Izveidojiet jaunu index.htmlfailu sava projekta saknē. Iekļaujiet arī <meta name="viewport">tagu, lai nodrošinātu pareizu reaģēšanu mobilajās ierīcēs.

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

Iekļauts Bootstrap CSS un JS. Pirms aizvēršanas ievietojiet <link>tagu <head>mūsu CSS un <script>JavaScript komplekta tagu (tostarp Popper pozicionēšanas nolaižamajām izvēlnēm, popperiem un rīka padomiem) </body>. Uzziniet vairāk par mūsu CDN saitēm .

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

Varat arī iekļaut Popper un mūsu JS atsevišķi. Ja neplānojat izmantot nolaižamās izvēlnes, uznirstošos logus vai rīka padomus, ietaupiet dažus kilobaitus, neiekļaujot 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>

Sveika pasaule! Atveriet lapu izvēlētajā pārlūkprogrammā, lai skatītu savu Bootstrapped lapu. Tagad varat sākt veidot ar Bootstrap, izveidojot savu izkārtojumu , pievienojot desmitiem komponentu un izmantojot mūsu oficiālos piemērus .

CDN saites

Kā atsauce šeit ir mūsu galvenās CDN saites.

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

Varat arī izmantot CDN, lai ielādētu jebkuru no mūsu papildu būvēm, kas norādītas satura lapā .

Nākamie soļi

Lasiet nedaudz vairāk par dažiem svarīgiem globālās vides iestatījumiem , ko izmanto Bootstrap.
Par to, kas ir iekļauts Bootstrap, lasiet mūsu satura sadaļā un tālāk norādīto komponentu sarakstu, kuriem nepieciešams JavaScript .
Nepieciešams nedaudz vairāk jaudas? Apsveriet iespēju izveidot, izmantojot Bootstrap, iekļaujot avota failus, izmantojot pakotņu pārvaldnieku .
Vai vēlaties izmantot Bootstrap kā moduli ar <script type="module">? Lūdzu, skatiet sadaļu Bootstrap kā moduļa izmantošana .

JS 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 Collapse un Offcanvas spraudņu paplašināšanai, lai ieviestu reaģējošu darbību
Navigācijas ar spraudni Tab satura rūtu pārslēgšanai
Audekls attēlošanai, pozicionēšanai un ritināšanai
Scrollspy ritināšanas darbībai un navigācijas atjauninājumiem
Tosti parādīšanai un atlaišanai
Rīka padomi un uznirstošie elementi parādīšanai un pozicionēšanai (nepieciešams arī Popper )

Svarīgi globāli

Bootstrap izmanto dažus svarīgus globālus stilus un iestatījumus, kas 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 un nepilnīgu stilu.

<!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ības īsajā sākumā .

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 .
Jautājiet un izpētiet mūsu GitHub diskusijas .
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.