Tanga neBootstrap

Bootstrap ine simba, inoratidzira-yakazara pamberi peturusi rekushandisa. Vaka chero chinhu-kubva kune prototype kusvika kugadzira-mumaminitsi.

Pa peji ino

Kurumidza kutanga

Tanga nekusanganisira Bootstrap's kugadzirwa-yakagadzirira CSS uye JavaScript kuburikidza neCDN pasina kudiwa kwechero matanho ekuvaka. Zvione mukuita neiyi Bootstrap CodePen demo .

Gadzira index.htmlfaira idzva mumudzi weprojekti yako. Sanganisira iyo <meta name="viewport">tag pamwe nehunhu hwakakodzera hwekupindura mumidziyo nhare.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Sanganisira Bootstrap's CSS uye JS. Isa iyo <link>teki <head>muCSS yedu, <script>uye tegi yeJavaScript yedu bundle (inosanganisira Popper yekumisikidza kudonhedza, mapopu, uye maturusi) kusati kwavhara </body>. Dzidza zvakawanda nezve yedu CDN link .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

Iwe unogona zvakare kusanganisira Popper uye JS yedu zvakasiyana. Kana iwe usingaronge kushandisa kudonhedza, popovers, kana matipi ekushandisa, chengetedza mamwe kilobytes nekusabatanidza Popper.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

Mhoro, nyika! Vhura peji mubrowser yako yesarudzo kuti uone peji rako reBootstrapped. Iye zvino unogona kutanga kuvaka neBootstrap nekugadzira yako dhizaini , nekuwedzera akawanda ezvikamu , uye kushandisa yedu yepamutemo mienzaniso .

CDN links

Sekutaura, heino yedu yekutanga CDN link.

Tsanangudzo	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

Unogonawo kushandisa CDN kutora chero zvivakwa zvedu zvekuwedzera zvakanyorwa papeji yeZviri mukati .

Matanho anotevera

Verenga zvishoma nezve mamwe akakosha epasi rose marongero anoshandiswa neBootstrap.
Verenga nezve izvo zvinosanganisirwa muBootstrap mune yedu yemukati chikamu uye rondedzero yezvikamu zvinoda JavaScript pazasi.
Unoda rimwe simba shoma? Funga kuvaka neBootstrap nekubatanidza mafaera ekupa kuburikidza nemaneja wepakeji .
Kutsvaga kushandisa Bootstrap semodule ine <script type="module">? Ndokumbira utarise kune yedu kushandisa Bootstrap sechikamu chemodule .

JS 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 uye Offcanvas plugins kushandisa maitiro ekuteerera
Navs ine Tab plugin yekushandura zvirimo pane
Offcanvases yekuratidzira, yekumisikidza, uye maitiro ekupurudzira
Scrollspy yemafambiro emupumburu uye zvigadziriso zvekufamba
Toasts yekutaridza nekubvisa
Zvishandiso uye mapopovers ekuratidza uye kuisa (zvinodawo Popper )

Nyika dzakakosha

Bootstrap inoshandisa mashoma akakosha masitaera epasirese uye marongero, ese ayo anenge akasarudzika akagadzirirwa kune yakajairika yecross browser masitaera. Ngatinyure mukati.

HTML5 doctype

Bootstrap inoda kushandiswa kweiyo HTML5 doctype. Pasina iyo, iwe uchaona imwe inonakidza uye isina kukwana masitaera.

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

Inopindura meta tag

Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

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

You can see an example of this in action in the quick start.

Box-sizing

For more straightforward sizing in CSS, we switch the global box-sizing value from content-box to border-box. This ensures padding does not affect the final computed width of an element, but it can cause problems with some third-party software like Google Maps and Google Custom Search Engine.

On the rare occasion you need to override it, use something like the following:

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

With the above snippet, nested elements—including generated content via ::before and ::after—will all inherit the specified box-sizing for that .selector-for-some-widget.

Learn more about box model and sizing at CSS 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.

Read and subscribe to The Official Bootstrap Blog.
Ask and explore our GitHub Discussions.
Chat with fellow Bootstrappers in IRC. On the irc.libera.chat server, in the #bootstrap channel.
Implementation help may be found at Stack Overflow (tagged bootstrap-5).
Developers should use the keyword bootstrap on packages that modify or add to the functionality of Bootstrap when distributing through npm or similar delivery mechanisms for maximum discoverability.

You can also follow @getbootstrap on Twitter for the latest gossip and awesome music videos.