Source

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, yakapihwa mahara nevanhu pajsDelivr. 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-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

JS

Zvizhinji zvezvikamu zvedu zvinoda kushandiswa kweJavaScript kushanda. Kunyanya, ivo vanoda jQuery , Popper.js , uye yedu pachedu JavaScript plugins. Isa anotevera <script>s pedyo nekumagumo kwemapeji ako, pamberi pekuvhara </body>tag, kuti akwanise. jQuery inofanira kuuya kutanga, ipapo Popper.js, uye ipapo JavaScript yedu plugins.

Isu tinoshandisa jQuery's slim kuvaka , asi iyo yakazara vhezheni inotsigirwa zvakare.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Unoda kuziva kuti ndezvipi zvikamu zvinonyatsoda jQuery, JS yedu, uye Popper.js? Dzvanya ratidziro yezvikamu pazasi. Kana iwe usina chokwadi nezve yakajairika peji chimiro, ramba uchiverenga semuenzaniso peji template.

Yedu bootstrap.bundle.jsuye bootstrap.bundle.min.jsinosanganisira Popper , asi kwete jQuery . Kuti uwane rumwe ruzivo nezve izvo zvinosanganisirwa muBootstrap, ndapota ona yedu yemukati chikamu.

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
  • Madonhwe ekuratidza uye kuisa (zvinodawo Popper.js )
  • Modals yekuratidzira, yekumisikidza, uye maitiro emupumburu
  • Navbar yekuwedzera yedu Collapse plugin kuti tiite maitiro ekuteerera
  • Zvishandiso uye mapopovers ekuratidza uye kuisa (zvinodawo Popper.js )
  • 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, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 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.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" 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

For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

Community

Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.

  • Follow @getbootstrap on Twitter.
  • Read and subscribe to The Official Bootstrap Blog.
  • Chat with fellow Bootstrappers in IRC. On the irc.freenode.net server, in the ##bootstrap channel.
  • Implementation help may be found at Stack 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.