in English

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 package 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-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

JS

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

Isa imwe yeanotevera <script>s pedyo nekumagumo kwemapeji ako, pamberi pekuvhara </body>tag, kuti akwanise. jQuery inofanira kuuya kutanga, ipapo Popper.js, uye ipapo JavaScript yedu plugins.

Bundle

Batanidza zvese zvaunoda mune imwe script nebundle redu. 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.

<script src="https://code.jquery.com/jquery-3.5.1.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-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

Separate

Kana ukafunga kuenda neyakasiyana magwaro mhinduro, Popper.js inofanira kuuya kutanga, uyezve yedu JavaScript plugins.

<script src="https://code.jquery.com/jquery-3.5.1.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-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

Zvikamu

Unoda kuziva kuti ndezvipi zvikamu zvinonyatsoda jQuery, JS yedu, uye Popper.js? 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
  • Madonhwe ekuratidza uye kuisa (zvinodawo Popper.js )
  • Modals yekuratidzira, yekumisikidza, uye maitiro emupumburu
  • Navbar yekuwedzera yedu Collapse plugin kuti tiite maitiro ekuteerera
  • Toasts yekutaridza nekubvisa
  • Maturusi ezvishandiso uye mapopovers ekuratidzira nekumisikidza (zvinodawo Popper.js )
  • Scrollspy yemafambiro emupumburu uye zvigadziriso zvekufamba

Starter template

Ita shuwa kuti mapeji ako agadzirwe neazvino dhizaini nekusimudzira 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-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" 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://code.jquery.com/jquery-3.5.1.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-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <script src="https://code.jquery.com/jquery-3.5.1.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-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" 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 kweHTML5 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 unofanirwa kuibvisa, 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 neizvi zvinobatsira zviwanikwa.

  • Tevera @getbootstrap pa Twitter .
  • Verenga uye unyore kuThe Official Bootstrap Blog .
  • Kurukura nevamwe Bootstrappers muIRC. Pane irc.freenode.netsevha, ##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.