Source

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? JsDelivr-de adamlar mugt üpjün edilen 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-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

JS

Komponentlerimiziň köpüsi işlemek üçin JavaScript-i ulanmagy talap edýär. Hususan-da, jQuery , Popper.js we öz JavaScript plaginlerimizi talap edýär. Aşakdakylary <script>sahypalaryňyzyň ujuna, ýapmak </body>belliginiň öň ýanynda goýuň, olary işletmek üçin. jQuery ilki gelmeli, soň Popper.js, soň bolsa JavaScript plaginlerimiz.

JQuery-iň inçe gurluşyny ulanýarys , ýöne doly wersiýasy hem goldanýar.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

JQuery, JS we Popper.js haýsy komponentleri aç-açan talap edýär? Aşakdaky görkeziş komponentleriniň baglanyşygyna basyň. Umumy sahypanyň gurluşy barada düýbünden 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.js -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”
  • Görkezmek we ýerleşdirmek üçin gurallar we açyjylar ( Popper.js hem talap edýär )
  • Aýlamak häsiýeti we nawigasiýa täzelenmeleri üçin Scrollspy

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 Viewport 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-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 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.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 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 käbir üçü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ň.

  • Twitterde @getbootstrap yzarlaň .
  • Resmi “Bootstrap” blogyny okaň we ýazylyň .
  • IRC-de ýoldaş Bootstrappers bilen söhbetdeşlik. irc.freenode.netSerwerde, kanalda ##bootstrap.
  • Durmuşa geçirmek kömegi Stack Overflow-da tapylyp bilner (bellikli bootstrap-4).
  • Işläp düzüjiler, 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 .