in English

تونۇشتۇرۇش

JsDelivr ۋە قېلىپ باشلاش بېتى بىلەن ئىنكاس قايتۇرۇشچان ، كۆچمە بىرىنچى تور بېكەت قۇرۇشتىكى دۇنيادىكى ئەڭ ئالقىشقا ئېرىشكەن رامكا Bootstrap دىن باشلاڭ.

تېز باشلاش

تۈرىڭىزگە تېزلىكتە Bootstrap نى قوشماقچىمۇ؟ ھەقسىز ئوچۇق كودلۇق CDN jsDelivr نى ئىشلىتىڭ. بوغچا باشقۇرغۇچىنى ئىشلىتىۋاتامسىز ياكى ئەسلى ھۆججەتلەرنى چۈشۈرۈش كېرەكمۇ؟ چۈشۈرۈش بېتىگە باشلاڭ .

CSS

CSS نى يۈكلەش ئۈچۈن ئۇسلۇب جەدۋىلىنى باشقا بارلىق ئۇسلۇب جەدۋىلىدىن بۇرۇن <link>چاپلاڭ .<head>

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

JS

نۇرغۇن زاپچاسلىرىمىز JavaScript ئىشلىتىشنى تەلەپ قىلىدۇ. كونكرېت قىلىپ ئېيتقاندا ، ئۇلار jQuery ، Popper ۋە ئۆزىمىزنىڭ JavaScript قىستۇرمىلىرىنى تەلەپ قىلىدۇ. بىز jQuery نىڭ نېپىز قۇرۇلمىسىنى ئىشلىتىمىز ، ئەمما تولۇق نەشرىنىمۇ قوللايدۇ.

ئۇلارنى قوزغىتىش ئۈچۈن تۆۋەندىكى <script>s نىڭ بىرىنى بەتلىرىڭىزنىڭ ئاخىرىغا قويۇپ قويۇڭ </body>. jQuery ئالدى بىلەن ، ئاندىن Popper ، ئاندىن بىزنىڭ JavaScript قىستۇرمىلىرىمىز بولۇشى كېرەك.

Bundle

ھەر ئىككى بوغچىمىزنىڭ بىرى بولغان ھەر بىر Bootstrap JavaScript قىستۇرمىسىنى ئۆز ئىچىگە ئالىدۇ. ھەر ئىككىلىسى قورال قوراللىرى bootstrap.bundle.jsۋە پوپايكىلار ئۈچۈن Popperbootstrap.bundle.min.js نى ئۆز ئىچىگە ئالىدۇ ، ئەمما jQuery ئەمەس . ئالدى بىلەن jQuery نى ، ئاندىن Bootstrap JavaScript باغلىنىشىنى ئۆز ئىچىگە ئالىدۇ. Bootstrap دىكى مەزمۇنلار ھەققىدە تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن مەزمۇن بۆلىكىمىزنى كۆرۈڭ.

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

ئايرىم

ئەگەر سىز ئايرىم قوليازما ھەل قىلىش چارىسى بىلەن مېڭىشنى قارار قىلسىڭىز ، Popper چوقۇم ئالدى بىلەن كېلىشى كېرەك (ئەگەر قورال قوراللىرى ياكى ئېلېكترونلۇق كۆزنەكلەرنى ئىشلىتىۋاتقان بولسىڭىز) ، ئاندىن بىزنىڭ JavaScript قىستۇرمىلىرىمىز.

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

زاپچاسلار

قايسى زاپچاسلار ئېنىق ھالدا jQuery ، بىزنىڭ JavaScript ۋە Popper نى تەلەپ قىلىدۇ؟ تۆۋەندىكى كۆرسىتىش زاپچاسلىرى ئۇلانمىسىنى چېكىڭ. ئەگەر بەت قۇرۇلمىسىغا ئىشەنمىسىڭىز ، ئۈلگە بەت قېلىپىنى ئوقۇپ بېقىڭ.

JavaScript تەلەپ قىلىدىغان زاپچاسلارنى كۆرسىتىڭ
  • ئىشتىن بوشىتىش توغرىسىدا ئاگاھلاندۇرۇش
  • ھالەتنى ئۆزگەرتىش كۇنۇپكىسى ۋە تەكشۈرۈش ساندۇقى / رادىئو ئىقتىدارى
  • بارلىق تام تەسۋىر ھەرىكەتلىرى ، كونتروللىرى ۋە كۆرسەتكۈچلىرى ئۈچۈن كارۇسېل
  • مەزمۇننىڭ كۆرۈنۈشچانلىقىنى ئۆزگەرتىش ئۈچۈن يىمىرىلىدۇ
  • كۆرسىتىش ۋە ئورۇن بەلگىلەشنىڭ تامچىلىرى ( Popper نىمۇ تەلەپ قىلىدۇ )
  • كۆرسىتىش ، ئورۇن بەلگىلەش ۋە سىيرىلما ھەرىكەتنىڭ مودېللىرى
  • ئىنكاسچان ھەرىكەتلەرنى يولغا قويۇش ئۈچۈن يىمىرىلىش قىستۇرمىمىزنى كېڭەيتىش ئۈچۈن يولباشچى
  • سىيرىلما ھەرىكەت ۋە يول باشلاش يېڭىلانمىلىرى
  • كۆرسىتىش ۋە ئورۇن بەلگىلەش قوراللىرى ۋە پوپايكىلار ( Popper نىمۇ تەلەپ قىلىدۇ )

Starter template

بەتلىرىڭىزنى ئەڭ يېڭى لايىھىلەش ۋە ئېچىش ئۆلچىمى بىلەن تەڭشەشكە كاپالەتلىك قىلىڭ. يەنى HTML5 تەلىماتىنى ئىشلىتىش ۋە مۇۋاپىق ئىنكاس قايتۇرۇش ھەرىكەتلىرى ئۈچۈن كۆرۈش مېتا بەلگىسىنى ئۆز ئىچىگە ئالىدۇ. ھەممىنى بىر يەرگە قويۇڭ ، بەتلىرىڭىز مۇنداق بولۇشى كېرەك:

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

بۇ پەقەت ئومۇمىي بەت تەلىپىگە ئېھتىياجلىق. تور بېتىڭىزنىڭ مەزمۇنى ۋە زاپچاسلىرىنى ئورۇنلاشتۇرۇشنى باشلاش ئۈچۈن Layout ھۆججىتى ياكى رەسمىي مىساللىرىمىزنى زىيارەت قىلىڭ .

مۇھىم يەر شارى

Bootstrap بىر قانچە مۇھىم دۇنياۋى ئۇسلۇب ۋە تەڭشەكلەرنى ئىشلىتىدۇ ، ئۇنى ئىشلەتكەندە دىققەت قىلىشىڭىز كېرەك ، بۇلارنىڭ ھەممىسى ئاساسەن دېگۈدەك تور كۆرگۈچ ئۇسلۇبىنىڭ نورماللىشىشىغا قارىتىلغان. سۇغا شۇڭغۇپ باقايلى.

HTML5 تەلىمات

Bootstrap HTML5 تەلىپىنى ئىشلىتىشنى تەلەپ قىلىدۇ. ئۇ بولمىسا سىز بىر قىسىم قىزىقارلىق تولۇق بولمىغان ئۇسلۇبلارنى كۆرىسىز ، ئەمما ئۇنى ئۆز ئىچىگە ئالغاندا ئانچە چوڭ چاتاق چىقماسلىقى كېرەك.

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

ئىنكاسچان مېتا بەلگىسى

Bootstrap ئالدى بىلەن كۆچمە تېلېفوننى تەرەققىي قىلدۇردى ، بۇ ئىستراتېگىيىدە بىز ئالدى بىلەن كۆچمە ئۈسكۈنىلەرنىڭ كودىنى ئەلالاشتۇرىمىز ، ئاندىن CSS مېدىيا سوئاللىرىدىن پايدىلىنىپ زاپچاسلارنى كېڭەيتىمىز. بارلىق ئۈسكۈنىلەرنىڭ مۇۋاپىق تەسۋىرلىنىشى ۋە سېزىمچانلىقىنى چوڭايتىشقا كاپالەتلىك قىلىش ئۈچۈن ، ئىنكاسچان كۆرۈنۈش مېتا بەلگىسىنى قوشۇڭ <head>.

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

سىز بۇنىڭ ئۈلگىسىنى باشلىنىش قېلىپىدىن كۆرەلەيسىز.

Box-sizing

CSS دىكى تېخىمۇ چوڭ رازمېر ئۈچۈن ، بىز دۇنيا box-sizingقىممىتىنى content-boxئۆزگەرتىمىز border-box. بۇ paddingئېلېمېنتنىڭ ئاخىرقى ھېسابلانغان كەڭلىكىگە تەسىر كۆرسەتمەيدۇ ، ئەمما ئۇ گۇگۇل خەرىتىسى ۋە Google ئىختىيارى ئىزدەش ماتورى قاتارلىق ئۈچىنچى تەرەپ يۇمشاق دېتاللىرىدا مەسىلە پەيدا قىلىدۇ.

كەم ئۇچرايدىغان ئەھۋال ئاستىدا ، ئۇنى بېسىپ ئۆتۈشكە توغرا كېلىدۇ ، تۆۋەندىكىدەك نەرسىلەرنى ئىشلىتىڭ:

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

يۇقارقى ئۈزۈندە ، ئۇۋا ئېلېمېنتلىرى ئارقىلىق ھاسىل قىلىنغان مەزمۇنلارنى ئۆز ئىچىگە ئالىدۇ ::beforeۋە ھەممىسى بۇنىڭ ئۈچۈن ::afterبەلگىلەنگەن ۋارىسلىق قىلىدۇ .box-sizing.selector-for-some-widget

CSS Tricks دىكى ساندۇق مودېلى ۋە چوڭ-كىچىكلىكى توغرىسىدىكى تەپسىلاتلارنى بىلىڭ .

قايتا قوزغىتىش

توركۆرگۈ ھالقىغان رەسىمنى ياخشىلاش ئۈچۈن ، بىز قايتا قوزغىتىش ئارقىلىق ئورتاق HTML ئېلېمېنتلىرىغا ئازراق پىكىرلىك ئەسلىگە كەلتۈرۈش بىلەن بىر ۋاقىتتا ، توركۆرگۈچ ۋە ئۈسكۈنىلەرنىڭ ماس كەلمەسلىكىنى تۈزىتىمىز.

مەھەللە

Bootstrap نىڭ تەرەققىياتىدىن خەۋەردار بولۇپ ، بۇ پايدىلىق مەنبەلەر بىلەن جەمئىيەت بىلەن ئالاقىلىشىڭ.

  • رەسمىي Bootstrap بىلوگىغا ئوقۇش ۋە مۇشتەرى بولۇش .
  • IRC دىكى تورداشلار بىلەن پاراڭلىشىڭ. irc.libera.chatمۇلازىمېتىردا ، قانالدا #bootstrap.
  • bootstrap-4يولغا قويۇش ياردىمى Stack Overflow (خەتكۈچ ) دىن تېپىلغان بولۇشى مۇمكىن .
  • پروگراممېرلار ئەڭ يۇقىرى بايقاش ئۈچۈن npm ياكى شۇنىڭغا ئوخشاش يەتكۈزۈش مېخانىزىمى bootstrapئارقىلىق تارقاتقاندا Bootstrap نىڭ ئىقتىدارىنى ئۆزگەرتىدىغان ياكى قوشىدىغان ئورالمىلاردىكى ئاچقۇچلۇق سۆزنى ئىشلىتىشى كېرەك .

سىز ئەڭ يېڭى پىتنە-ئىغۋا ۋە قالتىس مۇزىكا سىنلىرى ئۈچۈن Twitter دىكى @getbootstrap غا ئەگىشىڭ.

CSPs ۋە قىستۇرۇلغان SVGs

بىر قانچە Bootstrap زاپچاسلىرى بىزنىڭ CSS غا قىستۇرۇلغان SVG لارنى تور كۆرگۈچ ۋە ئۈسكۈنىلەردە ئىزچىل ۋە ئاسان ئۇسلۇبتىكى زاپچاسلارغا ئۆز ئىچىگە ئالىدۇ. تېخىمۇ قاتتىق CSP سەپلىمىسى بار تەشكىلاتلارغا قىستۇرۇلغان SVG لىرىمىزنىڭ ھەممىسىنى خاتىرىلىدۇق (بۇلارنىڭ ھەممىسى قوللىنىلىدۇ background-image) ، تاللانمىلىرىڭىزنى تېخىمۇ تەپسىلىي كۆرەلەيسىز.

مەھەللە پاراڭلىرىغا ئاساسەن ، ئۆزىڭىزنىڭ كود يەشكۈچتە بۇنى ھەل قىلىشنىڭ بەزى تاللاشلىرى URL لارنى يەرلىك ساھىبخانلىق مۈلۈككە ئالماشتۇرۇش ، رەسىملەرنى ئۆچۈرۈش ۋە ئىچكى رەسىملەرنى ئىشلىتىش (بارلىق زاپچاسلاردا مۇمكىن ئەمەس) ۋە CSP نى ئۆزگەرتىشنى ئۆز ئىچىگە ئالىدۇ. تەۋسىيەمىز ، ئۆزىڭىزنىڭ بىخەتەرلىك سىياسىتىنى ئەستايىدىللىق بىلەن تەكشۈرۈپ ، زۆرۈر تېپىلغاندا ئەڭ ياخشى ئىلگىرىلەش يولىنى قارار قىلىش.