چۈشۈرۈش

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

Bootstrap CDN

JsDelivr دىكى كىشىلەر مەرھەمەت بىلەن Bootstrap نىڭ CSS ۋە JavaScript نى CDN قوللايدۇ. بۇ Bootstrap CDN ئۇلانمىسىنى ئىشلىتىڭ.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Bower بىلەن قاچىلاڭ

سىز يەنە Bower ئارقىلىق Bootstrap نىڭ Less ، CSS ، JavaScript ۋە خەت نۇسخىسىنى قاچىلاپ باشقۇرالايسىز :

$ bower install bootstrap

Npm بىلەن قاچىلاڭ

سىز يەنە npm ئارقىلىق Bootstrap نى قاچىلىسىڭىز بولىدۇ :

$ npm install bootstrap@3

require('bootstrap')Bootstrap نىڭ بارلىق jQuery قىستۇرمىلىرىنى jQuery ئوبيېكتىغا يۈكلەيدۇ. بۇ bootstrapبۆلەكنىڭ ئۆزى ھېچقانداق نەرسە چىقارمايدۇ. /js/*.jsبوغچىنىڭ يۇقىرى دەرىجىلىك مۇندەرىجىسى ئاستىدىكى ھۆججەتلەرنى يۈكلەش ئارقىلىق Bootstrap نىڭ jQuery قىستۇرمىلىرىنى ئايرىم يۈكلىيەلەيسىز .

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

• less- Bootstrap نىڭ ئاساسلىق مەنبە مەنبە ھۆججىتى
• style- Bootstrap نىڭ كىچىكلىتىلگەن CSS غا بارىدىغان يول ، كۆڭۈلدىكى تەڭشەكلەر ئارقىلىق ئالدىن تەييارلانغان (ئىختىيارىي يوق)

كومپوزىتور بىلەن قاچىلاڭ

سىز يەنە كومپوزىتور ئارقىلىق Bootstrap نىڭ Less ، CSS ، JavaScript ۋە خەت نۇسخىسىنى قاچىلاپ باشقۇرالايسىز :

$ composer require twbs/bootstrap

Less / Sass ئۈچۈن Autoprefixer تەلەپ قىلىنىدۇ

Bootstrap Autoprefixer ئارقىلىق CSS ساتقۇچى ئالدى قوشۇلغۇچىسىنى بىر تەرەپ قىلىدۇ . ئەگەر سىز Bootstrap نى ئۇنىڭ Less / Sass مەنبەسىدىن تۈزۈۋاتقان بولسىڭىز ھەمدە بىزنىڭ Gruntfile نى ئىشلەتمىسىڭىز ، Autoprefixer نى ئۆزىڭىزنىڭ قۇرۇلۇش جەريانىغا بىرلەشتۈرۈشىڭىز لازىم. ئەگەر سىز ئالدىن تەييارلانغان Bootstrap نى ئىشلىتىۋاتقان ياكى بىزنىڭ Gruntfile نى ئىشلىتىۋاتقان بولسىڭىز ، بۇنىڭدىن ئەنسىرىمىسىڭىزمۇ بولىدۇ ، چۈنكى Autoprefixer ئاللىقاچان بىزنىڭ Gruntfile غا بىرلەشتۈرۈلگەن.

نېمىلەرنى ئۆز ئىچىگە ئالىدۇ

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

ئالدىن تەييارلانغان Bootstrap

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

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

بۇ Bootstrap نىڭ ئەڭ ئاساسلىق شەكلى: ھەر قانداق تور تۈرىدە دېگۈدەك تېز سۈرئەتتە ئىشلىتىشكە ئىشلىتىلىدىغان ھۆججەتلەر. بىز تۈزۈلگەن CSS ۋە JS ( bootstrap.*) ، شۇنداقلا تۈزۈلگەن ۋە كىچىكلىتىلگەن CSS ۋە JS ( bootstrap.min.*) بىلەن تەمىنلەيمىز. CSS مەنبە خەرىتىسى ( bootstrap.*.map) بەزى توركۆرگۈچلەرنىڭ ئاچقۇچىلار قوراللىرى بىلەن ئىشلىتىشكە بولىدۇ. ئىختىيارىي Bootstrap تېمىسىغا ئوخشاش Glyphicons نىڭ خەت نۇسخىسىمۇ بار.

Bootstrap مەنبە كودى

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

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

The less/, js/and fonts/are are source code for our CSS, JS, and icon fonts (respectively). بۇ dist/ھۆججەت قىسقۇچ ئۈستىدىكى ئالدىن چۈشۈرۈلگەن چۈشۈرۈش بۆلىكىدە كۆرسىتىلگەن ھەممە نەرسىنى ئۆز ئىچىگە ئالىدۇ. بۇ docs/ھۆججەت قىسقۇچ بىزنىڭ ھۆججەتلىرىمىزنىڭ مەنبە كودى ۋە examples/Bootstrap نى ئۆز ئىچىگە ئالىدۇ. ئۇنىڭ سىرتىدا ، باشقا ھەر قانداق ھۆججەتلەر ئورالما ، ئىجازەت ئۇچۇرى ۋە تەرەققىياتنى قوللايدۇ.

CSS ۋە JavaScript تۈزۈش

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

Grunt نى ئورنىتىش

Grunt نى ئورنىتىش ئۈچۈن ئالدى بىلەن node.js نى چۈشۈرۈپ قاچىلاڭ (بۇنىڭ ئىچىدە npm نى ئۆز ئىچىگە ئالىدۇ). npm تۈگۈن ئورالغان مودۇلنى كۆرسىتىدۇ ، node.js ئارقىلىق تەرەققىياتقا بېقىنىشنى باشقۇرۇشنىڭ ئۇسۇلى.

1. grunt-cliپۈتۈن دۇنيا بىلەن قاچىلاڭ npm install -g grunt-cli.
2. يىلتىز /bootstrap/مۇندەرىجىسىگە يۆتكىڭ ، ئاندىن ئىجرا قىلىڭ npm install. npm package.jsonھۆججەتنى كۆرىدۇ ۋە شۇ يەردە كۆرسىتىلگەن زۆرۈر يەرلىك بېقىنىشلارنى ئاپتوماتىك ئورنىتىدۇ.

تاماملانغاندىن كېيىن ، بۇيرۇق قۇرىدا تەمىنلەنگەن ھەرخىل Grunt بۇيرۇقلىرىنى ئىجرا قىلالايسىز.

ئىشلەتكىلى بولىدىغان Grunt بۇيرۇقلىرى

grunt dist(پەقەت CSS ۋە JavaScript نى تۈزۈڭ)

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

grunt watch(Watch)

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

grunt test(سىناقلارنى ئىجرا قىلىش)

JSHint نى ئىجرا قىلىدۇ ۋە PhantomJS دا QUnit سىنىقىنى باشلايدۇ.

grunt docs(ھۆججەتلەرنىڭ مۈلۈكلىرىنى قۇرۇش ۋە سىناق قىلىش)

يەرلىك ئۇسۇلدا ھۆججەتلەرنى ئىجرا قىلغاندا ئىشلىتىلىدىغان CSS ، JavaScript ۋە باشقا مۈلۈكلەرنى قۇرۇپ سىناق قىلىدۇ bundle exec jekyll serve.

grunt(مۇتلەق ھەممىنى قۇرۇپ ، سىناقلارنى ئىجرا قىلىڭ)

CSS ۋە JavaScript نى تۈزۈپ ۋە كىچىكلىتىدۇ ، ھۆججەت تور بېكىتى قۇرىدۇ ، HTML5 دەلىللىگۈچىنى ھۆججەتلەرگە قارشى ئىجرا قىلىدۇ ، Customizer نىڭ مۈلكىنى ئەسلىگە كەلتۈرىدۇ ۋە باشقىلار. Jekyll نى تەلەپ قىلىدۇ . ئادەتتە پەقەت Bootstrap نىڭ ئۆزىدە خاككېرلىق قىلسىڭىزلا لازىم بولىدۇ.

كاشىلا

بېقىنىش ئورنىتىش ياكى Grunt بۇيرۇقلىرىنى ئىجرا قىلىش مەسىلىسىگە يولۇقسىڭىز ، ئالدى /node_modules/بىلەن npm ھاسىل قىلغان مۇندەرىجىنى ئۆچۈرۈڭ. ئاندىن قايتا قوزغىتىڭ npm install.

ئاساسىي قېلىپ

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

تۆۋەندىكى HTML نى كۆچۈرۈپ ، ئەڭ تۆۋەن Bootstrap ھۆججىتى بىلەن ئىشلەشنى باشلاڭ.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

مىساللار

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

Bootstrap ئامبىرىنى چۈشۈرۈش ئارقىلىق تۆۋەندىكى ھەر بىر مىسالنىڭ ئەسلى كودىنى ئېلىڭ . docs/examples/مۇندەرىجىدىن مىسال تاپقىلى بولىدۇ .

رامكىنى ئىشلىتىش

Starter template

ئاساستىن باشقا نەرسە يوق: قاچا بىلەن بىللە CSS ۋە JavaScript تۈزۈلگەن.

Bootstrap باشتېمىسى

كۆرۈنۈشلۈك كۈچەيتىلگەن تەجرىبە ئۈچۈن ئىختىيارى Bootstrap تېمىسىنى يۈكلەڭ.

Grids

تۆت قاتلامنىڭ ھەممىسى ، ئۇۋىسى قاتارلىقلار بار تور ئورۇنلاشتۇرۇشىنىڭ بىر قانچە مىسالى.

Jumbotron

Jumbotron نىڭ ئەتراپىدا يولباشچى ۋە بىر قىسىم ئاساسىي كاتەكچە تۈۋرۈكلەرنى ياساڭ.

Narrow jumbotron

سۈكۈتتىكى قاچا ۋە jumbotron نى كىچىكلىتىش ئارقىلىق تېخىمۇ خاس بەت قۇرۇڭ.

ھەرىكەتتىكى ناۋايلار

Navbar

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

تۇراقلىق ئۈستى بالداق

دەرىجىدىن تاشقىرى ئاساسىي قېلىپ بىر قىسىم قوشۇمچە مەزمۇنلار بىلەن بىللە.

مۇقىم يولباشچى

دەرىجىدىن تاشقىرى ئاساسىي قېلىپ بىلەن قوشۇمچە قوشۇمچە مەزمۇنلار بار.

خاس زاپچاسلار

Cover

ئاددىي ۋە چىرايلىق باش بەت قۇرۇش ئۈچۈن بىر بەتلىك قېلىپ.

Carousel

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

بىلوگ

ئىختىيارى يول باشلاش ، تېما ۋە تىپى بار ئاددىي ئىككى ئىستون بىلوگ ئورۇنلاشتۇرۇشى.

باش تاختا

مۇقىم يان بالداق ۋە يولباشچى بار باشقۇرۇش تاختىسىنىڭ ئاساسىي قۇرۇلمىسى.

كىرىش بېتى

جەدۋەلدىكى ئاددىي بەلگە ئۈچۈن لايىھىلەش ۋە لايىھىلەش.

يوللۇق nav

يوللۇق ئۇلىنىش بىلەن ئىختىيارى يولباشچى قۇر. Heads up! بەك سافارى دوستانە ئەمەس.

Sticky footer

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

يولباشچى بىلەن چاپلانغان ئاياغ

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

تەجرىبە

ئىنكاس قايتۇرمىغان Bootstrap

بىزنىڭ ھۆججەتلىرىمىزگە Bootstrap نىڭ ئىنكاسچانلىقىنى ئاسانلا چەكلەڭ .

Off-canvas

Bootstrap بىلەن ئىشلىتىشكە بولىدىغان يۆتكىلىشچان كانۋا يول باشلاش تىزىملىكى ياساڭ.

قوراللار

Bootlint

Bootlint بولسا رەسمىي Bootstrap HTML linter قورالى. ئۇ Bootstrap نى خېلى «ۋانىلا» شەكلىدە ئىشلىتىۋاتقان تور بەتلەردە كۆپ ئۇچرايدىغان HTML خاتالىقلىرىنى ئاپتوماتىك تەكشۈرىدۇ. Vanilla Bootstrap نىڭ زاپچاسلىرى / كىچىك قوراللىرى ئۇلارنىڭ DOM بۆلەكلىرىنىڭ مەلۇم قۇرۇلمىغا ماس كېلىشىنى تەلەپ قىلىدۇ. Bootlint Bootstrap زاپچاسلىرىنىڭ HTML نىڭ توغرا قۇرۇلمىلىق ئىكەنلىكىنى تەكشۈردى. Bootlint نى Bootstrap تور ئېچىش قوراللىرىڭىزغا قوشۇشنى ئويلاڭ ، بۇنداق بولغاندا كۆپ كۆرۈلىدىغان خاتالىقلارنىڭ ھېچقايسىسى تۈرىڭىزنىڭ تەرەققىياتىنى ئاستىلاتمايدۇ.

مەھەللە

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

• رەسمىي Bootstrap بىلوگىغا ئوقۇش ۋە مۇشتەرى بولۇش .
• irc.freenode.netمۇلازىمېتىردا ، ## قوزغىتىش قانىلىدا IRC نى ئىشلىتىپ تورداشلار بىلەن پاراڭلىشىڭ .
• Bootstrap نى ئىشلىتىش ئۈچۈن ، خەتكۈچنى ئىشلىتىپ StackOverflow دىنtwitter-bootstrap-3 سوراڭ .
• پروگراممېرلار ئەڭ يۇقىرى بايقاش ئۈچۈن npm ياكى شۇنىڭغا ئوخشاش يەتكۈزۈش مېخانىزىمى bootstrapئارقىلىق تارقاتقاندا Bootstrap نىڭ ئىقتىدارىنى ئۆزگەرتىدىغان ياكى قوشىدىغان ئورالمىلاردىكى ئاچقۇچلۇق سۆزنى ئىشلىتىشى كېرەك .
• Bootstrap كۆرگەزمىسىدە Bootstrap بىلەن قۇرغان كىشىلەرنىڭ كىشىنى تەسىرلەندۈرىدىغان مىساللىرىنى تېپىڭ .

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

ئىنكاسچانلىقىنى چەكلەش

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

بەتنىڭ ئىنكاسچانلىقىنى چەكلەيدىغان قەدەملەر

1. CSS ھۆججىتىدە<meta> تىلغا ئېلىنغان كۆرۈنۈشنى ئەمەلدىن قالدۇرۇڭ
2. ھەر بىر كاتەكچە دەرىجىسىنىڭ widthئۈستىنى .containerتاق كەڭلىك بىلەن قاپلاڭ ، مەسىلەن width: 970px !important;بۇنىڭ سۈكۈتتىكى Bootstrap CSS دىن كېيىن كەلگەنلىكىنى جەزملەشتۈرۈڭ. !importantمېدىيا سوئاللىرى ياكى بىر قىسىم تاللىغۇچ-فۇ بىلەن خالىغانچە ساقلىنالايسىز .
3. ناۋادا ناۋادا ئىشلىتىلسە ، بارلىق يولباشچى گۈمۈرۈلۈپ چۈشۈش ۋە كېڭەيتىش ھەرىكىتىنى چىقىرىۋېتىڭ.
4. كاتەكچە ئورۇنلاشتۇرۇش .col-xs-*ئۈچۈن ، ئوتتۇرا / چوڭ دەرسلەردىن باشقا ياكى ئۇنىڭ ئورنىغا دەرس ئىشلىتىڭ. ئەنسىرىمەڭ ، كىچىك تىپتىكى ئۈسكۈنىلەرنىڭ ئېلېكتر تورىنىڭ بارلىق ئېنىقلىق دەرىجىسى.

سىز يەنىلا IE8 ئۈچۈن Respond.js غا ئېھتىياجلىق بولىسىز (بىزنىڭ ئاخبارات سوئاللىرىمىز يەنىلا بار ، بىر تەرەپ قىلىشقا توغرا كېلىدۇ). بۇ Bootstrap نىڭ «كۆچمە تور بېكەت» تەرەپلىرىنى چەكلەيدۇ.

قوزغىتىشچانلىقى چەكلەنگەن Bootstrap ئەندىزىسى

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

ئىنكاس قايتۇرمايدىغان مىسالنى كۆرۈڭ

توركۆرگۈچ ۋە ئۈسكۈنىلەرنى قوللاش

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

قوللايدىغان توركۆرگۈچ

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

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

كۆچمە ئۈسكۈنىلەر

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

ئۈستەل يۈزى توركۆرگۈلىرى

ئوخشاشلا ، كۆپىنچە ئۈستەل يۈزى توركۆرگۈلىرىنىڭ ئەڭ يېڭى نەشرىنى قوللايدۇ.

Windows دا Internet Explorer 8-11 نى قوللايمىز .

Firefox غا نىسبەتەن ، ئەڭ يېڭى نورمال مۇقىم ئېلان قىلىنغاندىن باشقا ، بىز يەنە Firefox نىڭ ئەڭ يېڭى كېڭەيتىلگەن ياردەم ئېلان قىلىش (ESR) نۇسخىسىنى قوللايمىز.

غەيرىي رەسمىي ھالدا ، Bootstrap گەرچە Chromium ۋە Chrome ، Linux ئۈچۈن Firefox ۋە Linux Explorer 7 ، شۇنداقلا Microsoft Edge قاتارلىقلاردا يېتەرلىك دەرىجىدە ياخشى ھەرىكەت قىلىشى كېرەك.

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

Internet Explorer 8 ۋە 9

Internet Explorer 8 ۋە 9 نىمۇ قوللايدۇ ، ئەمما شۇنىڭغا دىققەت قىلىڭكى ، بەزى CSS3 خۇسۇسىيەتلىرى ۋە HTML5 ئېلېمېنتلىرى بۇ توركۆرگۈچلەر تەرىپىدىن تولۇق قوللىمايدۇ. ئۇنىڭدىن باشقا ، Internet Explorer 8 مېدىيا سوئاللىرىنى قوللاش ئۈچۈن Respond.js نى ئىشلىتىشنى تەلەپ قىلىدۇ.

زىيارەت قىلالامدىم ... CSS3 ۋە HTML5 ئىقتىدارلىرىنىڭ توركۆرگۈ قوللىشى توغرىسىدىكى تەپسىلاتلار.

Internet Explorer 8 ۋە Respond.js

Internet Explorer 8 ئۈچۈن ئېچىش ۋە ئىشلەپچىقىرىش مۇھىتىڭىزدا Respond.js نى ئىشلەتكەندە تۆۋەندىكى ئۆڭكۈرلەردىن ئېھتىيات قىلىڭ.

Respond.js ۋە تور ھالقىغان CSS

ئوخشىمىغان (تارماق) دائىرە (مەسىلەن CDN دا) CSS بىلەن Respond.js نى ئىشلىتىش بىر قىسىم قوشۇمچە تەڭشەشنى تەلەپ قىلىدۇ. تەپسىلاتىنى Respond.js ھۆججىتىدىن كۆرۈڭ.

Respond.js andfile://

توركۆرگۈ بىخەتەرلىك قائىدىسى سەۋەبىدىن ، Respond.js كېلىشىم ئارقىلىق كۆرۈنىدىغان بەتلەر بىلەن ئىشلىمەيدۇ file://(يەرلىك HTML ھۆججىتىنى ئاچقانغا ئوخشاش). IE8 دىكى ئىنكاسچان ئىقتىدارلارنى سىناش ئۈچۈن ، بەتلىرىڭىزنى HTTP (S) دىن كۆرۈڭ. تەپسىلاتىنى Respond.js ھۆججىتىدىن كۆرۈڭ.

Respond.js and@import

Respond.js پايدىلانغان CSS بىلەن ئىشلىمەيدۇ @import. بولۇپمۇ بەزى Drupal سەپلىمىسىنىڭ ئىشلىتىلىدىغانلىقى مەلۇم @import. تەپسىلاتىنى Respond.js ھۆججىتىدىن كۆرۈڭ.

Internet Explorer 8 ۋە ساندۇق چوڭلۇقى

IE8 ، ياكى ، ياكى box-sizing: border-box;بىرلەشتۈرۈلگەندە تولۇق قوللىمايدۇ . شۇ سەۋەبتىن ، v3.0.1 دىن باشلاپ ، بىز ئەمدى s نى ئىشلەتمەيمىز .min-widthmax-widthmin-heightmax-heightmax-width.container

Internet Explorer 8 ۋە @ font-face

@font-faceIE8 بىرلەشتۈرۈلگەندە بەزى مەسىلىلەر بار :before. Bootstrap ئۆزىنىڭ Glyphicons بىلەن بۇ بىرىكمىنى ئىشلىتىدۇ. ئەگەر بىر بەت غەملەك قىلىنغان بولسا ھەمدە مائۇسنى دېرىزىنىڭ ئۈستىگە يۈكلىمىگەن بولسا (يەنى يېڭىلاش كۇنۇپكىسىنى بېسىڭ ياكى iframe غا بىر نەرسە يۈكلەڭ) ، ئۇنداقتا بۇ خەت خەت يۈكلىنىشتىن بۇرۇن كۆرسىتىلىدۇ. بەت (گەۋدە) نى بېسىپ قويسىڭىز بىر قىسىم سىنبەلگىلەرنى كۆرسىتىدۇ ، قالغان سىنبەلگىلەرنىڭ ئۈستىدە لەيلەپ يۈرسىڭىزمۇ شۇلارنى كۆرسىتىدۇ. تەپسىلاتىنى 13863-نومۇرلۇق سوئالغا قاراڭ .

IE ماسلىشىش ھالىتى

كونا Internet Explorer ماسلىشىش ھالىتىدە Bootstrap نى قوللىمايدۇ. IE ئۈچۈن ئەڭ يېڭى رەسىم سىزىش ئۇسۇلىنى ئىشلىتىۋاتقانلىقىڭىزنى جەزملەشتۈرۈش ئۈچۈن ، مۇۋاپىق <meta>بەتكۈچنى بېتىڭىزگە كىرگۈزۈشنى ئويلاڭ:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

ھەل قىلىش قوراللىرىنى ئېچىش ئارقىلىق ھۆججەت ھالىتىنى جەزملەشتۈرۈڭ: F12«ھۆججەت ھالىتى» نى بېسىپ تەكشۈرۈپ بېقىڭ.

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

تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن بۇ StackOverflow سوئالىنى كۆرۈڭ .

Windows 8 ۋە Windows Phone 8 دىكى Internet Explorer 10

Internet Explorer 10 ئۈسكۈنىنىڭ كەڭلىكىنى كۆرۈنۈش كەڭلىكى بىلەن پەرقلەندۈرمەيدۇ ، شۇڭا Bootstrap نىڭ CSS دىكى مېدىيا سوئاللىرىنى مۇۋاپىق قوللانمايدۇ. ئادەتتە بۇنى ئوڭشاش ئۈچۈن CSS نىڭ تېز پارچىسىنى قوشسىڭىز بولىدۇ:

@-ms-viewport       { width: device-width; }

قانداقلا بولمىسۇن ، بۇ Windows Phone 8 نەشرىنى يېڭىلاش 3 (يەنى GDR3) دىن كونا نەشرىدىكى ئۈسكۈنىلەرگە ئىشلىمەيدۇ ، چۈنكى ئۇ بۇ ئۈسكۈنىلەرنىڭ تار «تېلېفون» كۆرۈنۈشىنىڭ ئورنىغا ئۈستەل يۈزى كۆرۈنۈشىنى كۆرسىتىشىنى كەلتۈرۈپ چىقىرىدۇ. بۇ مەسىلىنى ھەل قىلىش ئۈچۈن تۆۋەندىكى CSS ۋە JavaScript نى ئۆز ئىچىگە ئېلىشىڭىز كېرەك .

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

// Copyright 2014-2015 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

تېخىمۇ كۆپ ئۇچۇر ۋە ئىشلىتىش قوللانمىلىرىنى Windows Phone 8 ۋە Device-Width دىن ئوقۇڭ .

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

Safari پىرسەنت

OS X ئۈچۈن v7.1 دىن بۇرۇن Safari ۋە iOS v8.0 ئۈچۈن Safari نىڭ نەشىردىكى ماتورنى كۆرسىتىش ماتورى .col-*-1تور سىنىپىمىزدا ئىشلىتىلىدىغان ئونلۇق ئورۇننىڭ سانىدا مەسىلە كۆرۈلگەن. ئەگەر سىزدە 12 يەككە كاتەكچە ستون بولسا ، ئۇلارنىڭ باشقا قۇر ئىستونلارغا سېلىشتۇرغاندا قىسقا چىققانلىقىنى بايقايسىز. Safari / iOS نىڭ دەرىجىسىنى يۇقىرى كۆتۈرگەندىن باشقا ، خىزمەت ئورۇنلىرىنىڭ بەزى تاللاشلىرى بار:

• ئاخىرقى كاتەكچە ئىستونغا قوشۇپ .pull-rightقاتتىق ئوڭغا توغرىلاڭ
• پىرسەنتنى قولدا سىلاپ ، سافارى ئۈچۈن ئەڭ ياخشى يۇمىلاق ئۈستەلگە ئېرىشىش (بىرىنچى تاللاشتىنمۇ قىيىن)

مودېل ، ناۋايخانا ۋە مەۋھۇم كۇنۇپكا تاختىسى

تولۇپ-تاشقان

IOS ۋە ئاندروئىدتا ئېلېمېنتنى قوللاش overflow: hiddenبىر <body>قەدەر چەكلىك. بۇنىڭ ئۈچۈن ، سىز بۇ ئۈسكۈنىلەرنىڭ ھەر قانداق توركۆرگۈدە مودېلنىڭ ئۈستى ياكى ئاستىدىن ئۆتۈپ كەتسىڭىز ، <body>مەزمۇن ئۆرلەشكە باشلايدۇ. Chrome bug # 175502 ( Chrome v40 دا مۇقىملاشتۇرۇلغان) ۋە WebKit خاتالىقى # 153852 گە قاراڭ .

iOS تېكىست مەيدانى ۋە سىيرىلىش

IOS 9.3 دىن باشلاپ ، بىر مودېل ئوچۇق بولسىمۇ ، ئەگەر سىيرىلما قول ئىشارىسىنىڭ دەسلەپكى سېزىمچانلىقى تېكىست <input>ياكى a نىڭ دائىرىسىدە بولسا <textarea>، <body>مودېلنىڭ ئاستىدىكى مەزمۇن مودېلنىڭ ئورنىغا ئۆرۈلۈپ كېتىدۇ. WebKit خاتالىقى # 153856 گە قاراڭ .

مەۋھۇم كۇنۇپكا تاختىسى

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

Navbar Dropdowns

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

توركۆرگۈچ چوڭايتىش

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

يان تېلېفوندا :hover_:focus

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

بېسىش

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

بولۇپمۇ Chrome v32 غا ئوخشاش ، مەيلى ماركا تەڭشىكىنىڭ قانداق بولۇشىدىن قەتئىينەزەر ، Chrome تور بەتنى بېسىپ چىقارغاندا مېدىيا سوئاللىرىنى ھەل قىلغاندا ، كۆرۈنۈشنىڭ كەڭلىكى فىزىكىلىق قەغەزنىڭكىدىن كۆرۈنەرلىك تار بولىدۇ. بۇ Bootstrap نىڭ ئالاھىدە كىچىك تورىنى بېسىپ چىقارغاندا ئويلىمىغان يەردىن قوزغىتىلىشىنى كەلتۈرۈپ چىقىرىدۇ. بەزى تەپسىلاتلارنى # 12078 ۋە Chrome bug # 273306 دىن كۆرۈڭ. تەكلىپ قىلىنغان خىزمەت ئورۇنلىرى:

• ئارتۇقچە كىچىك تورنى قۇچاقلاپ ، بېتىڭىزنىڭ ئاستىدا قوبۇل قىلىنىدىغانلىقىغا كاپالەتلىك قىلىڭ.
• ئاز ئۆزگەرگۈچى مىقدارنىڭ قىممىتىنى خاسلاشتۇرۇڭ ، @screen-*بۇنداق بولغاندا پرىنتېر قەغىزىڭىز كىچىكرەك چوڭ دەپ قارىلىدۇ.
• پەقەت بېسىش مېدىياسىنىڭ كاتەكچە چوڭ بۆلەكلىرىنى ئۆزگەرتىش ئۈچۈن ئىختىيارى مېدىيا سوئاللىرىنى قوشۇڭ.

ئۇنىڭدىن باشقا ، Safari v8.0 دىن باشلاپ ، مۇقىم كەڭلىكتىكى .containerسافارى باسقاندا Safari نىڭ ئادەتتىن تاشقىرى كىچىك خەت نۇسخىسىنى ئىشلىتىشىنى كەلتۈرۈپ چىقىرىدۇ. تېخىمۇ كۆپ تەپسىلات ئۈچۈن # 14868 ۋە WebKit bug # 138192 دىن كۆرۈڭ. بۇنىڭ بىر يوشۇرۇن خىزمەت ئۇسۇلى تۆۋەندىكى CSS نى قوشۇش:

@media print {
  .container {
    width: auto;
  }
}

ئاندىرويىد پايچېكى

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

تىزىملىكلەرنى تاللاڭ

ئېلېمېنتلاردا ، ئاندىرويىد پاي چېكى تور <select>كۆرگۈسى ئەگەر border-radiusۋە ياكى borderقوللىنىلغان بولسا يان كونترولنى كۆرسەتمەيدۇ. (تەپسىلاتىنى بۇ StackOverflow سوئالىغا قاراڭ .) تۆۋەندىكى كود پارچىلىرىنى ئىشلىتىپ ، رەنجىگەن CSS نى ئۆچۈرۈۋېتىڭ ھەمدە <select>ئاندىرويىد پاي چېكى تور كۆرگۈسىدە ئۇسلۇبسىز ئېلېمېنت قىلىپ كۆرسىتىڭ. ئىشلەتكۈچى ۋاكالەتچى پۇراش Chrome ، Safari ۋە Mozilla توركۆرگۈلىرىگە ئارىلىشىشتىن ساقلىنىدۇ.

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

مىسال كۆرگۈڭىز بارمۇ؟ بۇ JS Bin كۆرسەتمىسىنى تەكشۈرۈپ بېقىڭ.

دەلىللىگۈچىلەر

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

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

بىزنىڭ HTML ھۆججىتىمىزدە ئوخشاشلا Firefox نىڭ مەلۇم بىر خاتالىق ئۈچۈن خىزمەت جەدۋىلىنى ئۆز ئىچىگە ئالغانلىقىمىز ئۈچۈن بەزى ئۇششاق ۋە ئەھمىيەتسىز HTML دەلىللەش ئاگاھلاندۇرۇشى بار .

ئۈچىنچى تەرەپنىڭ قوللىشى

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

Box-sizing

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

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

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

قولايلىق

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

يول باشلاش

ئەگەر يولباشچىڭىزدا نۇرغۇن ئۇلىنىشلار بار بولۇپ ، DOM دىكى ئاساسلىق مەزمۇنلارنىڭ ئالدىدا كەلسە ، Skip to main contentيول باشلاشتىن بۇرۇن ئۇلىنىش قوشۇڭ (ئاددىي چۈشەندۈرۈش ئۈچۈن ، يول باشلاش ئۇلىنىشىدىكى بۇ A11Y تۈر ماقالىسىنى كۆرۈڭ ). دەرسنى ئىشلىتىپ .sr-onlyئاتلاش ئۇلانمىسىنى كۆرۈنۈشتە يوشۇرىدۇ ، .sr-only-focusableدەرس فوكۇسلانغاندىن كېيىن (كۆرۈنۈشلۈك كۇنۇپكا تاختىسى ئىشلەتكۈچىلەر ئۈچۈن) ئۇلىنىشقا كاپالەتلىك قىلىدۇ.

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

Nested headings

ماۋزۇ ماۋزۇسى ( <h1>- <h6>) بولغاندا ، دەسلەپكى ھۆججەت ماۋزۇڭىز بولۇشى كېرەك <h1>. كېيىنكى ماۋزۇلار لوگىكىلىق پايدىلىنىشى كېرەك <h2>- <h6>بۇنداق بولغاندا ئېكران ئوقۇرمەنلىرى بېتىڭىزگە مەزمۇن جەدۋىلى قۇرالايدۇ.

HTML CodeSniffer ۋە Penn State نىڭ AccessAbility دىكى تەپسىلاتلار .

رەڭ سېلىشتۇرمىسى

نۆۋەتتە ، Bootstrap دا ئىشلەتكىلى بولىدىغان بىر قىسىم سۈكۈتتىكى رەڭ بىرىكمىلىرى (مەسىلەن ھەر خىل ئۇسلۇبتىكى كۇنۇپكا سىنىپى ، بىر قىسىم كودلار ئاساسىي كود بۆلەكلىرىگە ئىشلىتىلىدىغان رەڭلەرنى گەۋدىلەندۈرىدۇ ، .bg-primary ئارقا كۆرۈنۈش ياردەمچىسى سىنىپى ۋە ئاق تەگلىكتە ئىشلەتكەندە سۈكۈتتىكى ئۇلىنىش رەڭگى) سېلىشتۇرما نىسبىتى تۆۋەن ( تەۋسىيە قىلىنغان نىسبەت 4.5: 1 دىن تۆۋەن ). بۇ كۆرۈش قۇۋۋىتى تۆۋەن ياكى رەڭ قارىغۇ بولغان ئابونتلارغا مەسىلە ئېلىپ كېلىدۇ. بۇ سۈكۈتتىكى رەڭلەرنى سېلىشتۇرۇش ۋە قانۇنلۇقلىقىنى ئاشۇرۇش ئۈچۈن ئۆزگەرتىشكە توغرا كېلىشى مۇمكىن.

قوشۇمچە مەنبەلەر

• قولايلىق مەسىلىلەرنى بايقاش ئۈچۈن «HTML Codesniffer» خەتكۈچ
• Chrome نىڭ زىيارەت قىلىش قوراللىرىنى كېڭەيتىش
• رەڭ سېلىشتۇرما ئانالىزچىسى
• A11Y تۈرى
• MDN زىيارەت قىلىش ھۆججىتى

ئىجازەت سوئاللىرى

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

ئۇ سىزدىن:

• ئەسەرلىرىڭىزدە ئىشلەتكەندە Bootstrap نىڭ CSS ۋە JavaScript ھۆججىتىگە كىرگۈزۈلگەن ئىجازەتنامە ۋە نەشر ھوقۇقى ئۇقتۇرۇشىنى ساقلاڭ

ئۇ سىزگە رۇخسەت قىلىدۇ:

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

ئۇ سىزنى چەكلەيدۇ:

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

ئۇ سىزدىن تەلەپ قىلمايدۇ:

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

تولۇق Bootstrap ئىجازەتنامىسى تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن تۈر ئامبىرىغا جايلاشقان .

تەرجىمە

مەھەللە ئەزالىرى Bootstrap نىڭ ھۆججەتلىرىنى ھەر خىل تىللارغا تەرجىمە قىلدى. ھېچقايسىسى رەسمىي قوللىمايدۇ ، ئۇلار ھەمىشە يېڭىلانماسلىقى مۇمكىن.

• Bootstrap 中文 文档 (خەنزۇچە)
• Bootstrap 3 中文 手冊 (خەنزۇچە (ئەنئەنىۋى))
• Bootstrap på Dansk (دانىيەچە)
• Bootstrap en Français (فىرانسۇزچە)
• Bootstrap auf Deutsch (گېرمانچە)
• ئىتالىيە تىلىدىكى Bootstrap (ئىتالىيەچە)
• Bootstrap 한국어 (كورېيەچە)
• Bootstrap em Português do Brasil (بىرازىلىيەلىك پورتۇگالچە)
• Bootstrap по-русски (رۇسچە)
• Bootstrap en Español (ئىسپانچە)
• Türkçe Bootstrap (تۈركچە)
• Bootstrap ураїнською (ئۇكرائىناچە)
• Bootstrap bằng tiếng Việt (ۋېيتنامچە)

بىز تەرجىمىلەرنى تەشكىللەشكە ياكى ساھىبخانلىق قىلىشقا ياردەم قىلمايمىز ، پەقەت ئۇلارغا ئۇلىنىمىز.

يېڭى ياكى تېخىمۇ ياخشى تەرجىمە قىلدىڭىزمۇ؟ ئۇنى بىزنىڭ تىزىملىكىمىزگە قوشۇش ئۈچۈن تارتىش تەلىپىنى ئېچىڭ.