ئاساسلىق مەزمۇنغا ئاتلاڭ Docs يول باشلاش
Check
in English

Bootstrap دىن باشلاڭ

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

بۇ بەتتە

تېز باشلاش

Bootstrap نىڭ ئىشلەپچىقىرىشقا تەييارلانغان CSS ۋە JavaScript نى CDN ئارقىلىق ئۆز ئىچىگە ئېلىش ئارقىلىق باشلاڭ. بۇ Bootstrap CodePen كۆرسەتمىسى بىلەن ئۇنى ئەمەلىيەتتە كۆرۈڭ .


  1. index.htmlتۈر يىلتىزىڭىزدا يېڭى ھۆججەت قۇرۇڭ . كۆچمە ئۈسكۈنىلەردە مۇۋاپىق ئىنكاس قايتۇرۇش ھەرىكىتىگە<meta name="viewport"> بەلگە قوشۇڭ .

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

  2. Bootstrap نىڭ CSS ۋە JS نى ئۆز ئىچىگە ئالىدۇ. خەتكۈچنى بىزنىڭ CSS غا ، ۋە <link>JavaScript بوغچىمىزنىڭ بەلگىسىنى (تاقاش ، پوپايكا ۋە قورال قوراللىرىنى ئورۇنلاشتۇرىدىغان Popper نى ئۆز ئىچىگە ئالىدۇ) تاقاشتىن بۇرۇن قويۇڭ . CDN ئۇلانمىلىرى ھەققىدىكى تەپسىلاتلار .<head><script></body>

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

    سىز Popper ۋە JS نىمۇ ئۆز ئىچىگە ئالالايسىز. ئەگەر چۈشۈش ، پوپايكا ياكى قورال قوراللىرىنى ئىشلىتىشنى ئويلىمىسىڭىز ، 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>

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

پايدىلىنىش ماتېرىيالى سۈپىتىدە ، بۇ يەردە بىزنىڭ دەسلەپكى CDN ئۇلىنىشىمىز بار.

چۈشەندۈرۈش 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

سىز يەنە CDN ئارقىلىق مەزمۇن بېتىدە كۆرسىتىلگەن قوشۇمچە قۇرۇلۇشلىرىمىزنى ئالالايسىز .

كېيىنكى باسقۇچلار

JS زاپچاسلىرى

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

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

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

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

HTML5 تەلىمات

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

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

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

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

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

سىز بۇنىڭ مىسالىنى تېزلىكتە ھەرىكەتتە كۆرەلەيسىز .

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 نىڭ تەرەققىياتىدىن خەۋەردار بولۇڭ ۋە بۇ پايدىلىق مەنبەلەر بىلەن جەمئىيەت بىلەن ئالاقىلىشىڭ.

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