Source

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, ko bez maksas nodrošina jsDelivr darbinieki. 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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

Daudzu mūsu komponentu darbībai ir nepieciešams izmantot JavaScript. Konkrēti, tiem ir nepieciešami jQuery , Popper.js un mūsu pašu JavaScript spraudņi. Ievietojiet tālāk norādītos <script>s savu lapu beigās tieši pirms beigu </body>taga, lai tos iespējotu. Vispirms ir jābūt jQuery, pēc tam Popper.js un pēc tam mūsu JavaScript spraudņiem.

Mēs izmantojam jQuery slaido versiju, taču tiek atbalstīta arī pilna versija.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Vai vēlaties uzzināt, kuriem komponentiem ir nepieciešams jQuery, mūsu JS un Popper.js? 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.

Mūsu bootstrap.bundle.jsun bootstrap.bundle.min.jsietver Popper , bet ne jQuery . Lai iegūtu papildinformāciju par to, kas ir iekļauts Bootstrap, lūdzu, skatiet mūsu satura sadaļu.

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.js )
  • 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
  • Rīka padomi un uznirstošie elementi parādīšanai un pozicionēšanai (nepieciešams arī Popper.js )
  • 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, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 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.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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.

  • Sekojiet @getbootstrap vietnē Twitter .
  • Izlasiet un abonējiet oficiālo sāknēšanas emuāru .
  • Tērzējiet ar citiem bootstrappers IRC. irc.freenode.netServerī, 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.