Giriş

JsDelivr we şablon başlangyç sahypasy bilen täsirli, ykjam ilkinji saýtlary gurmak üçin dünýäniň iň meşhur çarçuwasy Bootstrap bilen başlaň.

Çalt başlangyç

Taslamaňyza “Bootstrap” -y çalt goşmak isleýärsiňizmi? Mugt açyk çeşme CDN jsDelivr ulanyň. Bukja dolandyryjysyny ulanýarsyňyzmy ýa-da çeşme faýllaryny göçürip almalymy? Göçürip almak sahypasyna başlaň .

CSS

CSS-ni ýüklemek üçin stil tablisasyny beýleki ähli stil tablisalaryndan ozal <link>göçüriň .<head>

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

JS

Komponentlerimiziň köpüsi işlemek üçin JavaScript-i ulanmagy talap edýär. Hususan-da, jQuery , Popper we öz JavaScript plaginlerimizi talap edýär. JQuery-iň inçe gurluşyny ulanýarys , ýöne doly wersiýasy hem goldanýar.

Aşakdakylardan birini<script> sahypalaryňyzyň ujuna, ýapmak belliginiň öň ýanynda goýuň , </body>olary işletmek üçin. jQuery ilki gelmeli, soň Popper, soň bolsa JavaScript plaginlerimiz.

Bukja

Iki bukjanyň biri bilen her Bootstrap JavaScript pluginini goşuň. Bularyň ikisine -de gurallarymyz bootstrap.bundle.jswe popoversimiz üçin Popperbootstrap.bundle.min.js girýär , ýöne jQuery däl . Ilki bilen jQuery, soň bolsa Bootstrap JavaScript bukjasyny goşuň. “Bootstrap” -a girýänler barada has giňişleýin maglumat üçin mazmun bölümimize serediň.

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

Aýry-aýry

Aýry-aýry skriptler çözgüdi bilen gitmek kararyna gelseňiz, Popper ilki bilen gelmeli (gurallar ýa-da popovers ulanýan bolsaňyz), soňra bolsa JavaScript plaginlerimiz.

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

Komponentler

Haýsy komponentleriň jQuery, JavaScript we Popper-i aç-açan talap edýändigi bilen gyzyklanýarsyňyzmy? Aşakdaky görkeziş komponentleriniň baglanyşygyna basyň. Sahypanyň gurluşy barada bilmeýän bolsaňyz, mysal sahypasynyň şablony üçin okaň.

JavaScript talap edýän komponentleri görkeziň

Işden aýyrmak üçin duýduryşlar
Döwletleri üýtgetmek we bellik gutusy / radio işleýşi üçin düwmeler
Slhli slaýd häsiýetleri, dolandyryşlar we görkezijiler üçin karusel
Mazmunyň görnükliligini üýtgetmek üçin çöküň
Görkezmek we ýerleşdirmek üçin aşak düşmeler ( Popper -i hem talap edýär )
Özüňi alyp barşyňy görkezmek, ýerleşdirmek we aýlamak üçin modeller
Duýgur hereketleri amala aşyrmak üçin “Collapse” pluginimizi giňeltmek üçin “Navbar”
Aýlamak häsiýeti we nawigasiýa täzelenmeleri üçin Scrollspy
Görkezmek we ýerleşdirmek üçin gurallar we açyjylar ( Popper -i hem talap edýär )

Başlangyç şablon

Sahypalaryňyzy iň täze dizaýn we ösüş ülňüleri bilen düzüň. Diýmek, HTML5 doktipini ulanmak we dogry jogap bermek üçin görüniş meta belligini goşmak. Hemmesini bir ýere jemläň we sahypalaryňyz şeýle bolmaly:

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

Sahypanyň umumy talaplary üçin size gerek zat. Sahypaňyzyň mazmunyny we böleklerini ýerleşdirip başlamak üçin Layout resminamalaryna ýa-da resmi mysallarymyza giriň .

Möhüm globallar

“Bootstrap”, ulanylanda hökman bilmeli möhüm global stilleri we sazlamalary ulanýar, bularyň hemmesi diňe brauzer stilleriniň kadalaşmagyna gönükdirilen. Geliň.

HTML5 doktip görnüşi

“Bootstrap” HTML5 doktipiniň ulanylmagyny talap edýär. Onsuz, gülkünç doly däl görnüşi görersiňiz, ýöne şol bir wagtyň özünde-de ep-esli bökdençlige sebäp bolmaz.

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

Jogapkär meta belligi

“Bootstrap” ilki ykjam işlenip düzülýär , bu strategiýa ilki bilen ykjam enjamlar üçin kod optimizirleýäris, soňra bolsa CSS media talaplaryny ulanyp komponentleri ulaldýarys. Deviceshli enjamlar üçin dogry görkezilmegini we ulaldylyşyny üpjün etmek üçin, täsirli görnüş meta belligini özüňize goşuň <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Munuň mysalyny başlangyç şablonyndan görüp bilersiňiz .

Guty ululygy

CSS-de has gönümel ulalmak üçin global bahany box-sizingüýtgedýäris . Bu elementiň soňky hasaplanan giňligine täsir etmezligini üpjün edýär, ýöne Google Kartalar we Google Custom Search Engine ýaly üçünji tarap programma üpjünçiliginde kynçylyk döredip biler.content-boxborder-boxpadding

Seýrek ýagdaýlarda ony ýok etmeli, aşakdaky ýaly bir zady ulanyň:

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

Aboveokardaky bölek bilen, içerki elementler, şol sanda döredilen mazmun ::beforewe ::afterbularyň hemmesi görkezilenleri miras box-sizingalar .selector-for-some-widget.

CSS hilelerinde guty modeli we ululygy barada has giňişleýin öwreniň .

Gaýtadan açyň

Kesgitli brauzer görkezişini gowulandyrmak üçin , umumy HTML elementlerine birneme has köp pikirlenýän nollary hödürlemek bilen, brauzerler we enjamlardaky gapma-garşylyklary düzetmek üçin Reboot ulanýarys.

Jemgyýet

“Bootstrap” -yň ösüşi barada habarly boluň we bu peýdaly çeşmeler bilen jemgyýet bilen habarlaşyň.

Resmi “Bootstrap” blogyny okaň we ýazylyň .
IRC-de ýoldaş Bootstrappers bilen söhbetdeşlik. irc.libera.chatSerwerde, kanalda #bootstrap.
Durmuşa geçirmek kömegi Stack Overflow-da tapylyp bilner (bellikli bootstrap-4).
Döredijiler npm ýa-da iň ýokary açyş üçin şuňa meňzeş gowşuryş mehanizmleri bootstraparkaly paýlanylanda Bootstrap-yň işleýşini üýtgedýän ýa-da goşýan paketlerdäki açar sözden peýdalanmalydyrlar .

Şeýle hem iň soňky gybat we ajaýyp aýdym-saz wideolary üçin Twitter - de @getbootstrap yzarlap bilersiňiz .

CSP-ler we oturdylan SVG-ler

“Bootstrap” -yň birnäçe komponentleri brauzerlerde we enjamlarda yzygiderli we aňsat stil düzmek üçin CSS-de oturdylan SVG-leri öz içine alýar. Has berk CSP konfigurasiýasybackground-image bolan guramalar üçin , öz saýlamalaryňyzy has içgin gözden geçirip bilersiňiz , oturdylan SVG-leriň (bularyň hemmesi ulanylýar) ähli ýagdaýlaryny dokumentleşdirdik .

Closeapmak düwmesi (duýduryşlarda we modallarda ulanylýar)
Checkörite bellikler we radio düwmeleri
Form açarlary
Barlag nyşanlary
Selectörite saýlama menýulary
Karusel dolandyryşlary
Navbar düwmelerini üýtgetmek

Jemgyýetçilik söhbetdeşligine esaslanyp, öz kod bazasyndaky bu meseläni çözmek üçin käbir wariantlar URL-leri ýerli ýerleşdirilen aktiwler bilen çalyşmagy, suratlary aýyrmagy we içerki suratlary ulanmagy (ähli komponentlerde mümkin däl) we CSP-ni üýtgetmegi öz içine alýar. Biziň maslahatymyz, öz howpsuzlyk syýasatlaryňyzy üns bilen gözden geçirmek we zerur bolsa öňe barýan iň gowy ýoly kesgitlemekdir.