Nhanganyaya

Tanga neBootstrap, iyo inonyanya kufarirwa pasi rose yekuvaka inoteerera, mobile-yekutanga masaiti, ine jsDelivr uye peji rekutanga template.

Pa peji ino

Kurumidza kutanga

Kutsvaga kukurumidza kuwedzera Bootstrap kupurojekiti yako? Shandisa jsDelivr, yemahara yakavhurwa sosi CDN. Uchishandisa mapakeji maneja kana kuda kudhawunirodha mafaera sosi? Enda kupeji yekudhawunirodha .

CSS

Kopa-namira shizha <link>mune yako <head>pamberi pemamwe ese masitayera kurodha CSS yedu.

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

JS

Zvizhinji zvezvikamu zvedu zvinoda kushandiswa kweJavaScript kushanda. Kunyanya, ivo vanoda yedu yedu JavaScript plugins uye Popper . Isa imwe yeinotevera <script>s pedyo nekumagumo kwemapeji ako, pamberi pekuvhara </body>tag, kuti vagone.

Bundle

Sanganisira yega Bootstrap JavaScript plugin uye kutsamira neimwe yemasumbu edu maviri. Zvose bootstrap.bundle.jsuye bootstrap.bundle.min.jszvinosanganisira Popper yematipi edu ezvishandiso uye mapopovers. Kuti uwane rumwe ruzivo nezve izvo zvinosanganisirwa muBootstrap, ndapota ona yedu yemukati chikamu.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Separate

Kana iwe ukafunga kuenda neyakasiyana script mhinduro, Popper anofanira kutanga kuuya (kana iwe uchishandisa maturusi kana mapovers), uyezve yedu JavaScript plugins.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Modules

Kana ukashandisa <script type="module">, ndapota tarisa kune yedu kushandisa Bootstrap sechikamu chemodule .

Zvikamu

Unoda kuziva kuti ndezvipi zvikamu zvinonyatsoda JavaScript yedu nePopper? Dzvanya ratidziro yezvikamu pazasi. Kana iwe usina chokwadi nezve yakajairika peji chimiro, ramba uchiverenga semuenzaniso peji template.

Ratidza zvikamu zvinoda JavaScript

Chenjedzo yekudzinga
Mabhatani ekushandura nyika uye cheki bhokisi/redhiyo kushanda
Carousel kune ese masiraidhi maitiro, zvidzoreso, uye zviratidzo
Kuputsika pakuita kuti zvinhu zvionekwe
Kudonhedza kwekuratidzira uye kuisa (inodawo Popper )
Modals yekuratidzira, yekumisikidza, uye maitiro emupumburu
Navbar yekuwedzera yedu Collapse plugin kuti tiite maitiro ekuteerera
Offcanvases yekuratidzira, yekumisikidza, uye maitiro ekupurudzira
Toasts yekutaridza nekubvisa
Zvishandiso uye mapopovers ekuratidza uye kuisa (zvinodawo Popper )
Scrollspy yemafambiro emupumburu uye zvigadziriso zvekufamba

Starter template

Ita shuwa kuti mapeji ako agadzirwe neazvino dhizaini uye kusimudzira zviyero. Izvi zvinoreva kushandisa HTML5 doctype uye kusanganisira yekuona meta tag yemafambiro akakodzera ekupindura. Isa zvese pamwe chete uye mapeji ako anofanira kutaridzika seizvi:

<!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-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 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-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 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-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Kuti uwane nhanho dzinotevera, shanyira Layout docs kana yedu yepamutemo mienzaniso kuti utange kuisa yako saiti zvirimo uye zvikamu.

Nyika dzakakosha

Bootstrap inoshandisa mashoma akakosha masitaera epasirese uye zvigadziriso zvauchazoda kuziva kana uchiishandisa, ese ayo anenge akarongedzerwa chete kune yakajairika yecross browser masitaera. Ngatinyure mukati.

HTML5 doctype

Bootstrap inoda kushandiswa kweiyo HTML5 doctype. Pasina iyo, iwe uchaona imwe funky isina kukwana styling, asi kusanganisira iyo haifanire kukonzera chero hiccups.

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

Inopindura meta tag

Bootstrap inogadzirwa nharembozha kutanga , zano ratinokwirisa kodhi yenharembozha kutanga uye tozokwidza zvikamu sezvinodiwa uchishandisa CSS midhiya mibvunzo. Kuti uve nechokwadi chekupa uye kubata kuswedera kune ese maturusi, wedzera inopindura yekuona meta tag kune yako <head>.

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

Iwe unogona kuona muenzaniso weizvi muchiito mune yekutanga template .

Bhokisi-kukura

Kuti uwedzere kuyera saizi muCSS, tinochinja box-sizingkukosha kwepasirese kubva content-boxku border-box. Izvi zvinovimbisa paddingkuti hazvikanganise iyo yekupedzisira computed upamhi hwechinhu, asi inogona kukonzera matambudziko neimwe yechitatu-bato software seGoogle Mepu neGoogle Tsika yekutsvaga Injini.

Muchiitiko chisingawanzwisisike iwe chaunoda kuchipfuura, shandisa chimwe chinhu chakadai chinotevera:

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

Iine snippet iri pamusoro, nested zvinhu-kusanganisira zvinogadzirwa kuburikidza ::beforene -- ::afterzvese zvichagara nhaka zvakatarwa box-sizingizvozvo .selector-for-some-widget.

Dzidza zvakawanda nezve bhokisi modhi uye saizi paCSS Tricks .

Reboot

Nekuvandudza kuchinjika kwebrowser, isu tinoshandisa Reboot kugadzirisa kusapindirana mumabhurawuza nemidziyo uku tichipa mamwe mafungiro ekugadzirisa kune zvakajairika HTML zvinhu.

Community

Gara uchiziva nezvekuvandudzwa kweBootstrap uye svika kune nharaunda nezvinhu zvinobatsira izvi.

Verenga uye unyore kuThe Official Bootstrap Blog .
Kurukura nevamwe Bootstrappers muIRC. Pane irc.libera.chatsevha, #bootstrapmuchiteshi.
Implementation rubatsiro inogona kuwanikwa paStack Overflow (tagged bootstrap-5).
Vagadziri vanofanira kushandisa izwi rakakosha bootstrappamapakeji anoshandura kana kuwedzera kune mashandiro eBootstrap kana achigovera kuburikidza nenpm kana nzira dzekutumira dzakafanana dzekuwanikwa kwakanyanya.

Iwe unogona zvakare kutevera @getbootstrap paTwitter kune azvino makuhwa uye anotyisa emimhanzi mavhidhiyo.