Nhanganyaya

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

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

JS

Zvizhinji zvezvikamu zvedu zvinoda kushandiswa kweJavaScript kushanda. Kunyanya, ivo vanoda jQuery , Popper , uye yedu pachedu JavaScript plugins. Isu tinoshandisa jQuery's slim kuvaka , asi iyo yakazara vhezheni inotsigirwa zvakare.

Isa imwe yeinotevera <script>s pedyo nekumagumo kwemapeji ako, pamberi pekuvhara </body>tag, kuti vagone. jQuery inofanira kuuya kutanga, ipapo Popper, uyezve yedu JavaScript plugins.

Bundle

Sanganisira yega yega Bootstrap JavaScript plugin neimwe yemasumbu edu maviri. Ose ari maviri bootstrap.bundle.jsuye bootstrap.bundle.min.jsanosanganisira Popper yezvishandiso zvedu uye mapopovers, asi kwete jQuery . Sanganisira jQuery kutanga, wozoita Bootstrap JavaScript bundle. Kuti uwane rumwe ruzivo nezve izvo zvinosanganisirwa muBootstrap, ndapota ona yedu yemukati chikamu.

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

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

Zvikamu

Unoda kuziva kuti ndezvipi zvikamu zvinonyatsoda jQuery, JavaScript yedu, uye Popper? Dzvanya ratidziro yezvikamu pazasi. Kana iwe usina chokwadi nezve peji peji, 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
Scrollspy yemafambiro emupumburu uye zvigadziriso zvekufamba
Zvishandiso uye mapopovers ekuratidza uye kuisa (zvinodawo Popper )

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

Ndizvo chete zvaunoda kune zvese zvinodiwa peji. Shanyira iyo 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, shrink-to-fit=no">

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 hupamhi hwemakomputa hwekupedzisira hwechinhu, asi zvinogona kukonzera matambudziko neimwe yechitatu software seGoogle Mepu neGoogle Custom Search Engine.

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

CSPs uye yakadzamidzirwa maSVGs

Zvikamu zvinoverengeka zveBootstrap zvinosanganisira zvakadzikwa maSVG muCSS yedu kuita zvimiro zvinogara uye zviri nyore pamabhurawuza nemidziyo. Kune masangano ane zvigadziro zveCSP zvakanyanya , takanyora zvese zvemaSVG akamisikidzwa (ese anoshandiswa kuburikidza background-image) kuti ugone kunyatsoongorora sarudzo dzako.

Vhara bhatani (rinoshandiswa mukuzivisa uye modal)
Custom checkboxes nemabhatani eredhiyo
Mafomu anochinja
Fomu yekusimbisa zvidhori
Custom sarudza mamenu
Carousel controls
Navbar shandura mabhatani

Zvichienderana nenhaurirano yenharaunda , dzimwe sarudzo dzekugadzirisa izvi mucodebase yako dzinosanganisira kutsiva maURL nemidziyo inogarwa munharaunda, kubvisa mifananidzo uye kushandisa inline mifananidzo (hazvigoneke muzvikamu zvese), uye kugadzirisa CSP yako. Kurudziro yedu ndeyekunyatsoongorora yako wega chengetedzo marongero uye sarudza nzira yakanakisa yekumberi, kana zvichidikanwa.