ئومۇمىي چۈشەنچە

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

HTML5 تەلىمات

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

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

ئالدى بىلەن كۆچمە

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

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

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

user-scalable=noكۆرۈش ئۈسكۈنىسىنىڭ مېتا بەلگىسىنى قوشۇش ئارقىلىق كۆچمە ئۈسكۈنىلەردە چوڭايتىش ئىقتىدارىنى چەكلىيەلەيسىز . بۇ چوڭايتىشنى چەكلەيدۇ ، يەنى ئابونتلار پەقەت سىيرىلالايدۇ ، تور بېتىڭىزدە يەرلىك پروگراممىغا سەل ئوخشايدۇ. ئومۇمەن ، بىز بۇنى ھەر بىر تور بېكەتتە تەۋسىيە قىلمايمىز ، شۇڭا ئېھتىيات قىلىڭ!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

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

  • تەڭشەك background-color: #fff;_body
  • @font-family-base، @font-size-baseۋە @line-height-baseخاسلىقلىرىنى بىزنىڭ باسما بازىمىز قىلىپ ئىشلىتىڭ
  • يەر شارى ئۇلىنىش رەڭگىنى بەلگىلەڭ @link-colorۋە ئۇلىنىش ئاستى سىزىقىنىلا ئىشلىتىڭ:hover

بۇ ئۇسلۇبلارنى ئىچىدىن تاپقىلى بولىدۇ scaffolding.less.

Normalize.css

تور كۆرگۈچنىڭ ياخشىلىنىشى ئۈچۈن ، بىز Normalize.css نى ئىشلىتىمىز ، بۇ تۈر نىكولاس گاللاگېر ۋە جوناتان نېلنىڭ تۈرى .

كونتېينېر

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

.containerئىنكاسچان مۇقىم كەڭلىك قاچىسىغا ئىشلىتىڭ .

<div class="container">
  ...
</div>

تولۇق كەڭلىكتىكى قاچىغا ئىشلىتىڭ .container-fluid، كۆرۈش ئېغىزىڭىزنىڭ پۈتۈن كەڭلىكىنى ئۆز ئىچىگە ئالىدۇ.

<div class="container-fluid">
  ...
</div>

تور سىستېمىسى

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

تونۇشتۇرۇش

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

  • قۇرلارنى مۇۋاپىق توغرىلاش ۋە چاپلاش ئۈچۈن چوقۇم .container(مۇقىم كەڭلىك) ياكى (تولۇق كەڭلىك) ئىچىگە قويۇش كېرەك..container-fluid
  • قۇرلارنى ئىشلىتىپ گورىزونتال تۈۋرۈك گۇرۇپپىسى ھاسىل قىلىڭ.
  • مەزمۇننى ستون ئىچىگە قويۇش كېرەك ، پەقەت ستونلارلا قۇرلارنىڭ بالىلىرى بولۇشى مۇمكىن.
  • ئالدىن بېكىتىلگەن كاتەكچە دەرسلىرى تور .rowسۈرئىتىنى .col-xs-4تېزلىتىدۇ. ئاز ئارىلاشمىلارنى تېخىمۇ كۆپ مەنىلىك ئورۇنلاشتۇرۇشقا ئىشلىتىشكە بولىدۇ.
  • ستونلار ئارقىلىق ئۆستەڭ ھاسىل قىلىدۇ (ستون مەزمۇنى ئوتتۇرىسىدىكى بوشلۇق) padding. .rowبۇ تاختاي بىرىنچى ۋە ئاخىرقى ئىستونغا s دىكى سەلبىي پەرقى ئارقىلىق رەتلىنىدۇ .
  • سەلبىي پەرقى نېمە ئۈچۈن تۆۋەندىكى مىساللارنىڭ ۋاقتى ئۆتۈپ كەتكەنلىكىنىڭ سەۋەبى. ئۇ كاتەكچە ئىستون ئىچىدىكى مەزمۇنلار تورسىز مەزمۇنلار بىلەن تىزىلىدۇ.
  • كاتەكچە ئىستون سىز ئىشلەتمەكچى بولغان ئون ئىككى ئىستوننىڭ سانىنى بەلگىلەش ئارقىلىق قۇرۇلدى. مەسىلەن ، ئۈچ باراۋەر ئىستون ئۈچنى ئىشلىتىدۇ .col-xs-4.
  • ئەگەر بىر قۇرغا 12 دىن ئارتۇق ئىستون قويۇلسا ، ھەر بىر گۇرۇپپا قوشۇمچە ئىستونلار بىر گەۋدە سۈپىتىدە يېڭى قۇرغا ئورۇلىدۇ.
  • كاتەكچە سىنىپى ئېكران كەڭلىكى بۆسۈش ئېغىزىدىن چوڭ ياكى تەڭ بولغان ئۈسكۈنىلەرگە ماس كېلىدۇ ، كىچىك ئۈسكۈنىلەرگە قارىتىلغان كاتەكچە دەرسلەرنى قاپلىۋېتىدۇ. شۇڭلاشقا ، مەسىلەن ھەر قانداق بىر .col-md-*سىنىپنى ئېلېمېنتقا ئىشلىتىش ئۇنىڭ ئوتتۇرا ئۈسكۈنىلەردىكى ئۇسلۇبىغا تەسىر كۆرسىتىپلا قالماي ، يەنە بىر .col-lg-*سىنىپ بولمىسا چوڭ ئۈسكۈنىلەرگىمۇ تەسىر كۆرسىتىدۇ.

بۇ پرىنسىپلارنى كودىڭىزغا قوللىنىشنىڭ مىساللىرىغا قاراڭ.

مېدىيا سوئاللىرى

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

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

بىز بۇ مېدىيا سوئاللىرىدا ئاندا-ساندا كېڭىيىپ ، max-widthCSS نى تار ئۈسكۈنىلەر بىلەنلا چەكلەيمىز.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

كاتەكچە تاللاش

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

قوشۇمچە كىچىك ئۈسكۈنىلەر تېلېفون (<768px) كىچىك ئۈسكۈنىلەر تاختا كومپيۇتېر (68768px) ئوتتۇرا ئۈسكۈنىلەر ئۈستەل يۈزى (≥992px) چوڭ ئۈسكۈنىلەر ئۈستەل يۈزى (≥1200px)
Grid ھەرىكىتى گورىزونتال ھەر ۋاقىت باشلاش ئۈچۈن يىمىرىلدى ، توغرىسىغا توغرىسىغا توغرىسىغا توغرىلىنىدۇ
كونتېينېر كەڭلىكى None (auto) 750px 970px 1170px
سىنىپ ئالدى قوشۇلغۇچىسى .col-xs- .col-sm- .col-md- .col-lg-
# ئىستون 12
ستون كەڭلىكى ئاپتوماتىك ~ 62px ~ 81px ~ 97px
كەڭلىك كەڭلىكى 30px (بىر ئىستوننىڭ ئىككى تەرىپىدە 15px)
Nestable ھەئە
Offsets ھەئە
ستون زاكاز قىلىش ھەئە

مىسال: توغرىسىغا توغرىلانغان

يەككە .col-md-*تور سىنىپىدىن پايدىلىنىپ ، ئۈستەل يۈزى (ئوتتۇرا) ئۈسكۈنىلەردە توغرىسىغا ئايلىنىشتىن ئىلگىرى كۆچمە ئۈسكۈنىلەر ۋە تاختا كومپيۇتېر ئۈسكۈنىلىرى (قوشۇمچە كىچىك ۋە كىچىك دائىرىدە) تىزىپ قويۇلغان ئاساسىي تور سىستېمىسى قۇرالايسىز. كاتەكچە ئىستونلارنى خالىغان ئورۇنغا قويۇڭ .row.

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6 
<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

مىسال: سۇيۇقلۇق قاچا

ھەر قانداق مۇقىم كەڭلىكتىكى تور ئورۇنلاشتۇرۇشىنى سىرتقى شەكلىڭىزنى ئۆزگەرتىش ئارقىلىق تولۇق كەڭلىكتىكى ئورۇنلاشتۇرۇشقا .containerئۆزگەرتىڭ .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

مىسال: كۆچمە ۋە ئۈستەل يۈزى

ستونلىرىڭىزنىڭ كىچىك ئۈسكۈنىلەرگە تىزىپ قويۇشىنى خالامسىز؟ .col-xs-* .col-md-*ئىستونغا قوشۇش ئارقىلىق قوشۇمچە كىچىك ۋە ئوتتۇرا ئۈسكۈنە دەرىسلىكىنى ئىشلىتىڭ . ئۇنىڭ قانداق ئىشلەيدىغانلىقىنى تېخىمۇ ياخشى چۈشىنىش ئۈچۈن تۆۋەندىكى مىسالغا قاراڭ.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6 
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

مىسال: كۆچمە ، تاختا كومپيۇتېر ، ئۈستەل يۈزى

.col-sm-*تاختا كومپيۇتېر سىنىپلىرى بىلەن تېخىمۇ ھەرىكەتچان ۋە كۈچلۈك ئورۇنلاشتۇرۇشلارنى قۇرۇش ئارقىلىق ئالدىنقى مىسالغا ئاساسلىنىڭ .

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4 
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

مىسال: ستون ئوراش

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

.col-xs-9
.col-xs-4
9 + 4 = 13> 12 دىن باشلاپ ، بۇ 4 ئىستون كەڭلىكتىكى div بىر تۇتاش ئورۇن سۈپىتىدە يېڭى قۇرغا ئورالغان.
.col-xs-6
كېيىنكى ئىستونلار يېڭى قۇرنى بويلاپ داۋام قىلىدۇ. 
<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

ئىنكاسچان ئىستون ئەسلىگە كېلىدۇ

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

.col-xs-6 .col-sm-3
كۆرۈنۈشنى چوڭايتىڭ ياكى تېلېفوندا تەكشۈرۈپ بېقىڭ.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3 
<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

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

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

تۈۋرۈكلەرنى ئۆچۈرۈش

.col-md-offset-*دەرسلەرنى ئىشلىتىپ ئىستوننى ئوڭغا يۆتكەڭ . بۇ دەرسلەر ئىستوننىڭ سول گىرۋىكىنى ئىستون ئارقىلىق ئۆستۈرىدۇ *. مەسىلەن ، تۆت ئىستوندىن .col-md-offset-4يۆتكىلىدۇ ..col-md-4

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3 
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

تۆۋەن دەرىجىدىكى تور قاتلىمىدىكى دەرسلەرنى دەرسلىك بىلەن قاپلىۋەتسىڭىز بولىدۇ .col-*-offset-0.

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

ئۇۋا تۈۋرۈكى

سۈكۈتتىكى تور بىلەن مەزمۇنلىرىڭىزنى ئۇۋىلاش ئۈچۈن ، بار بولغان ئىستونغا يېڭى .rowۋە بىر قاتار ستون قوشۇڭ . ئۇلانغان قۇرلار 12 ياكى ئۇنىڭدىن تۆۋەن بولغان بىر قاتار ئىستونلارنى ئۆز ئىچىگە ئېلىشى كېرەك (ئىشلەتكىلى بولىدىغان 12 ئىستوننىڭ ھەممىسىنى ئىشلىتىشىڭىز تەلەپ قىلىنمايدۇ)..col-sm-*.col-sm-*

1-دەرىجە: .col-sm-9
2-دەرىجە: .col-xs-8 .col-sm-6
2-دەرىجە: .col-xs-4 .col-sm-6 
<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

ستون زاكاز قىلىش

.col-md-push-*بىزنىڭ ئىچىگە ئورۇنلاشتۇرۇلغان كاتەكچە ئىستونلىرىمىزنىڭ ۋە .col-md-pull-*ئۆزگەرتكۈچ سىنىپلىرىمىزنىڭ تەرتىپىنى ئاسانلا ئۆزگەرتىڭ .

.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9 
<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

ئاز ئارىلاشما ۋە ئۆزگەرگۈچى مىقدار

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

ئۆزگەرگۈچى مىقدار

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

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

Mixins

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

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

مىسال ئىشلىتىش

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

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}
<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

مەتبەئە

ماۋزۇلار

بارلىق HTML ماۋزۇلىرىنى ئىشلەتكىلى <h1>بولىدۇ <h6>. .h1دەرسلەر ئارقىلىقمۇ .h6ئىشلەتكىلى بولىدۇ ، چۈنكى سىز ماۋزۇنىڭ خەت شەكلىگە ماسلاشماقچى بولسىڭىز ، ئەمما تېكىستىڭىزنىڭ سىزىقلىق ھالەتتە كۆرسىتىلىشىنى ئۈمىد قىلسىڭىز.

h1. Bootstrap ماۋزۇسى

 Semibold 36px

h2. Bootstrap ماۋزۇسى

 Semibold 30px

h3. Bootstrap ماۋزۇسى

 Semibold 24px

h4. Bootstrap ماۋزۇسى

 Semibold 18px
h5. Bootstrap ماۋزۇسى
 Semibold 14px
h6. Bootstrap ماۋزۇسى
 Semibold 12px 
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

<small>ئادەتتىكى خەتكۈچ ياكى .smallسىنىپ بىلەن ھەر قانداق ماۋزۇدا يېنىك ، ئىككىلەمچى تېكىست ھاسىل قىلىڭ.

h1. Bootstrap ماۋزۇسى ئىككىنچى تېكىست

h2. Bootstrap ماۋزۇسى ئىككىنچى تېكىست

h3. Bootstrap ماۋزۇسى ئىككىنچى تېكىست

h4. Bootstrap ماۋزۇسى ئىككىنچى تېكىست
h5. Bootstrap ماۋزۇسى ئىككىنچى تېكىست
h6. Bootstrap ماۋزۇسى ئىككىنچى تېكىست
 
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

بەدەن نۇسخىسى

Bootstrap نىڭ يەرشارىدىكى سۈكۈتتىكى font-sizeقىممىتى 14px ، line-height1.428 . بۇ بارلىق ئابزاسلارغا قوللىنىلىدۇ. بۇنىڭدىن باشقا ، (ئابزاسلار) ئۇلارنىڭ ھېسابلانغان سىزىق ئېگىزلىكىنىڭ يېرىمى (سۈكۈتتىكى 10px) گە ئېرىشىدۇ.<body><p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur مەسخىرە مۇس. Nullam id dolor id nibh ئۇلترا ماشىنا.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur مەسخىرە مۇس. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

بەدەننىڭ كۆپەيتىلگەن نۇسخىسى

قوشۇش ئارقىلىق ئابزاسنى ئالاھىدە گەۋدىلەندۈرۈڭ .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">...</p>

ئازراق ياسالغان

مەتبەئە ئۆلچىمى ئۆزگەرگۈچى مىقداردىكى ئىككى ئاز ئۆزگەرگۈچى مىقدارنى ئاساس قىلىدۇ . بىرىنچىسى ، ئىشلىتىلگەن ئاساسىي خەت چوڭلۇقى ، ئىككىنچىسى ئاساسى سىزىق ئېگىزلىكى. بىز بۇ ئۆزگەرگۈچى مىقدارلار ۋە بىر قىسىم ئاددىي ماتېماتىكىلارنى ئىشلىتىپ ، بارلىق تىپلىرىمىزنىڭ گىرۋەكلىرى ، تاختىلىرى ۋە سىزىق ئېگىزلىكىنى ھاسىل قىلىمىز. ئۇلارنى خاسلاشتۇرۇڭ ۋە Bootstrap ماسلاشتۇرۇڭ.@font-size-base@line-height-base

تېكىست ئېلمىنتلىرى

بەلگە قويۇلغان تېكىست

باشقا بىر مەزمۇندىكى باغلىنىشچانلىقى سەۋەبىدىن تېكىستنىڭ ئىجرا قىلىنىشىنى گەۋدىلەندۈرۈش ئۈچۈن ، <mark>خەتكۈچنى ئىشلىتىڭ.

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

You can use the mark tag to <mark>highlight</mark> text.

ئۆچۈرۈلگەن تېكىست

ئۆچۈرۈلگەن تېكىست بۆلەكلىرىنى كۆرسىتىش ئۈچۈن <del>خەتكۈچنى ئىشلىتىڭ.

بۇ قۇر تېكىست ئۆچۈرۈلگەن تېكىست دەپ قارىلىدۇ.

<del>This line of text is meant to be treated as deleted text.</del>

Strikethrough text

ئەمدى ماس كەلمەيدىغان تېكىست بۆلەكلىرىنى كۆرسىتىش ئۈچۈن<s> خەتكۈچنى ئىشلىتىڭ.

بۇ بىر قۇر تېكىست ئەمدى توغرا ئەمەس دەپ قارىلىدۇ.

<s>This line of text is meant to be treated as no longer accurate.</s>

قىستۇرما تېكىست

ھۆججەتكە قوشۇمچە ماتېرىياللارنى كۆرسىتىش ئۈچۈن<ins> خەتكۈچنى ئىشلىتىڭ.

بۇ بىر قۇر تېكىست ھۆججەتكە قوشۇمچە دەپ قارىلىدۇ.

<ins>This line of text is meant to be treated as an addition to the document.</ins>

ئاستى سىزىقلىق تېكىست

تېكىستنى ئاستىغا سىزىش ئۈچۈن خەتكۈچنى ئىشلىتىڭ <u>.

بۇ قۇر تېكىست ئاستى سىزىق بويىچە كۆرسىتىلىدۇ

<u>This line of text will render as underlined</u>

يېنىك ئۇسلۇبتىكى HTML نىڭ سۈكۈتتىكى تەكىتلەش بەلگىسىنى ئىشلىتىڭ.

كىچىك تېكىست

قۇر ياكى تېكىستنىڭ بۆلەكلىرىنى تەكىتلەش ئۈچۈن ، <small>خەتكۈچنى ئىشلىتىپ تېكىستنى ئاتا-ئانىلارنىڭ 85% چوڭلۇقىغا تەڭشەڭ. font-sizeماۋزۇ ئېلېمېنتلىرى ئۇۋىسى ئۈچۈن ئۆزىگە ئېرىشىدۇ<small> .

سىز .smallخالىغان ئورۇننىڭ ئىچىگە سىزىقلىق ئېلېمېنتنى ئىشلىتەلەيسىز <small>.

بۇ بىر قۇر تېكىست ئىنچىكە بېسىپ چىقىرىلغان دەپ قارىلىدۇ.

<small>This line of text is meant to be treated as fine print.</small>

Bold

ئېغىرراق خەت نۇسخىسى بىلەن بىر پارچە تېكىستنى تەكىتلەش ئۈچۈن.

تۆۋەندىكى تېكىست پارچىلىرى توم تېكىست سۈپىتىدە كۆرسىتىلدى .

<strong>rendered as bold text</strong>

Italics

يانتۇ خەت بىلەن بىر پارچە تېكىستنى تەكىتلىگەنلىكى ئۈچۈن.

تۆۋەندىكى تېكىست پارچىلىرى يانتۇ تېكىست سۈپىتىدە كۆرسىتىلدى .

<em>rendered as italicized text</em>

باشقا ئېلېمېنتلار

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

توغرىلاش دەرسلىرى

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

سولغا توغرىلانغان تېكىست.

مەركەز تېكىستنى توغرىلىدى.

توغرا توغرىلانغان تېكىست.

يوللۇق تېكىست.

ئورالغان تېكىست يوق.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

ئۆزگەرتىش سىنىپى

تېكىستنى چوڭ يېزىلغان دەرسلەر بىلەن زاپچاسلارغا ئۆزگەرتىڭ.

كىچىك يېزىلغان تېكىست.

چوڭ يېزىلغان تېكىست.

چوڭ يېزىلغان تېكىست.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

قىسقارتىلما

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

ئاساسىي قىسقارتىلمىسى

خاسلىق سۆزىنىڭ قىسقارتىلمىسى attr .

<abbr title="attribute">attr</abbr>

Initialism

.initialismسەل كىچىكرەك خەت چوڭلۇقىغا قىسقارتىشقا قوشۇڭ .

HTML بولكا كېسىلگەندىن بۇيانقى ئەڭ ياخشى نەرسە.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

ئادرېس

ئەڭ يېقىن ئەجداد ياكى خىزمەتنىڭ پۈتۈن گەۋدىسى ئۈچۈن ئالاقىلىشىش ئۇچۇرلىرىنى سۇنۇڭ. بارلىق قۇرلارنى ئاخىرلاشتۇرۇش ئارقىلىق فورماتنى ساقلاڭ <br>.

Twitter ، Inc.
1355 بازار كوچىسى ، يۈرۈشلۈك
سان سان فىرانسىسكو ، CA 94103
P: (123) 456-7890
تولۇق ئىسمى
[email protected] 
<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

Blockquotes

ھۆججەتتىكى باشقا مەنبەدىن مەزمۇن بۆلەكلىرىنى نەقىل كەلتۈرۈش ئۈچۈن.

كۆڭۈلدىكى توسۇق

<blockquote>ھەر قانداق HTML نى نەقىل قىلىپ ئوراپ قويۇڭ. تۈز نەقىل ئۈچۈن ، بىز a نى تەۋسىيە قىلىمىز <p>.

Lorem ipsum dolor amet ، كونسېرۋاتىپلىق ماسلاشتۇرغۇچى سەرخىل. پۈتۈن سان پوستلاق چۈمۈلە.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Blockquote تاللانمىلىرى

ئۆلچەمدىكى ئاددىي ئۆزگىرىشلەرنىڭ ئۇسلۇبى ۋە مەزمۇنى ئۆزگىرىدۇ <blockquote>.

مەنبەگە ئىسىم قويۇش

<footer>مەنبەنى ئېنىقلاش ئۈچۈن قوشۇڭ . مەنبە ئەسەرنىڭ نامىنى ئوراپ قويۇڭ <cite>.

Lorem ipsum dolor amet ، كونسېرۋاتىپلىق ماسلاشتۇرغۇچى سەرخىل. پۈتۈن سان پوستلاق چۈمۈلە.

مەنبە ماۋزۇسىدا داڭلىق كىشى 
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

باشقا كۆرسىتىش

.blockquote-reverseئوڭ تەرەپتىكى مەزمۇنلار بىلەن توساق قوشۇڭ .

Lorem ipsum dolor amet ، كونسېرۋاتىپلىق ماسلاشتۇرغۇچى سەرخىل. پۈتۈن سان پوستلاق چۈمۈلە.

مەنبە ماۋزۇسىدا داڭلىق كىشى 
<blockquote class="blockquote-reverse">
  ...
</blockquote>

تىزىملىك

تەرتىپسىز

زاكاز ئېنىق بولمىغان تۈرلەرنىڭ تىزىملىكى .

  • Lorem ipsum dolor amet
  • Consectetur adipiscing elit
  • ماسسادىكى پۈتۈن گەۋدە لورېمى
  • پرەزيدەنت isسوزدەرى
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • پورتېر لورېمنى ئېلىڭ
<ul>
  <li>...</li>
</ul>

زاكاز قىلىندى

تەرتىپ ئېنىق بولغان تۈرلەرنىڭ تىزىملىكى .

  1. Lorem ipsum dolor amet
  2. Consectetur adipiscing elit
  3. ماسسادىكى پۈتۈن گەۋدە لورېمى
  4. پرەزيدەنت isسوزدەرى
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. پورتېر لورېمنى ئېلىڭ
<ol>
  <li>...</li>
</ol>

Unstyled

تىزىملىك ​​تۈرلىرىدىكى سۈكۈتتىكى list-styleۋە سول گىرۋەكنى ئېلىڭ (پەقەت بالىلارلا). بۇ پەقەت بالىلار تىزىملىكىدىكى تۈرلەرگىلا ماس كېلىدۇ ، يەنى سىز ئۇۋىغان تىزىملىكلەرگىمۇ دەرس قوشۇشىڭىز كېرەك.

  • Lorem ipsum dolor amet
  • Consectetur adipiscing elit
  • ماسسادىكى پۈتۈن گەۋدە لورېمى
  • پرەزيدەنت isسوزدەرى
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • پورتېر لورېمنى ئېلىڭ
<ul class="list-unstyled">
  <li>...</li>
</ul>

Inline

بارلىق تىزىملىك ​​تۈرلىرىنى بىر قۇر display: inline-block;ۋە بىر ئاز يېنىك تاختا بىلەن قويۇڭ.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="list-inline">
  <li>...</li>
</ul>

چۈشەندۈرۈش

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

چۈشەندۈرۈش تىزىملىكى
چۈشەندۈرۈش تىزىملىكى ئاتالغۇلارنى ئېنىقلاشقا ناھايىتى ماس كېلىدۇ.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida eget metus.
Malesuada porta
Etiam porta sem maleuada magna mollis euismod. 
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

توغرىسىغا چۈشەندۈرۈش

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

چۈشەندۈرۈش تىزىملىكى
چۈشەندۈرۈش تىزىملىكى ئاتالغۇلارنى ئېنىقلاشقا ناھايىتى ماس كېلىدۇ.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida eget metus.
Malesuada porta
Etiam porta sem maleuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

ئاپتوماتىك كېسىش

گورىزونتال تەسۋىر تىزىملىكى سول ئىستونغا ماس كېلىدىغان بەك ئۇزۇن ئاتالغۇلارنى قىسقارتىدۇ text-overflow. تار كۆرۈنۈشلەردە ، ئۇلار سۈكۈتتىكى رەتلەنگەن ئورۇنلاشتۇرۇشقا ئۆزگىرىدۇ.

كود

Inline

كود پارچىلىرىنى ئۆز ئىچىگە <code>ئالىدۇ.

مەسىلەن ، <section>ئىچكى قۇر سۈپىتىدە ئوراش كېرەك. 
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

ئىشلەتكۈچى كىرگۈزۈش

ئادەتتە كۇنۇپكا تاختىسى <kbd>ئارقىلىق كىرگۈزۈلگەن كىرگۈزۈشنى كۆرسىتىدۇ.

مۇندەرىجىنى ئالماشتۇرۇش ئۈچۈن مۇندەرىجىنىڭ cdئىسمى بىلەن كىرگۈزۈڭ.
تەڭشەكلەرنى تەھرىرلەش ئۈچۈن بېسىڭ ctrl + , 
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Basic block

<pre>بىر نەچچە قۇر كودنى ئىشلىتىڭ . مۇۋاپىق رەسىم ئۈچۈن كودتىكى ھەر قانداق بۇلۇڭ تىرناقتىن قېچىشقا كاپالەتلىك قىلىڭ.

<p> بۇ يەردىكى ئۈلگە تېكىست ... </p>
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

سىز ئىختىيارىي ھالدا .pre-scrollableسىنىپنى قوشسىڭىز بولىدۇ ، بۇ ئەڭ چوڭ ئېگىزلىكى 350px قىلىپ ، y ئوقلۇق ئايلانما بالداق بىلەن تەمىنلەيدۇ.

ئۆزگەرگۈچى مىقدار

ئۆزگەرگۈچى مىقدارنى كۆرسىتىش ئۈچۈن <var>بەلگە ئىشلىتىڭ.

y = m x + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

ئۈلگە چىقىرىش

پروگراممىدىن ئەۋرىشكە چىقىرىشنى چەكلەش ئۈچۈن <samp>بەلگە ئىشلىتىڭ.

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

<samp>This text is meant to be treated as sample output from a computer program.</samp>

جەدۋەل

ئاساسلىق مىسال

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

ئىختىيارى جەدۋەل ئىزاھاتى.
# بىرىنچى ئىسمى فامىلىسى ئىشلەتكۈچى ئىسمى
1 Mark Otto @mdo
2 ياقۇپ Thornton @fat
3 Larry قۇش @twitter 
<table class="table">
  ...
</table>

قۇر قۇر

.table-stripedئىچىدىكى ھەر قانداق جەدۋەل قۇرىغا zebra- سىزىق قوشۇشقا ئىشلىتىڭ <tbody>.

تور كۆرگۈچنىڭ ماسلىشىشچانلىقى

سىزىقلىق جەدۋەللەر :nth-childCSS تاللىغۇچ ئارقىلىق لايىھەلەنگەن بولۇپ ، Internet Explorer 8 دا يوق.

# بىرىنچى ئىسمى فامىلىسى ئىشلەتكۈچى ئىسمى
1 Mark Otto @mdo
2 ياقۇپ Thornton @fat
3 Larry قۇش @twitter 
<table class="table table-striped">
  ...
</table>

چېگرا جەدۋىلى

.table-borderedجەدۋەل ۋە كاتەكچىلەرنىڭ ھەممە تەرىپىگە چېگرا قوشۇڭ .

# بىرىنچى ئىسمى فامىلىسى ئىشلەتكۈچى ئىسمى
1 Mark Otto @mdo
2 ياقۇپ Thornton @fat
3 Larry قۇش @twitter 
<table class="table table-bordered">
  ...
</table>

قۇر قۇر

.table-hoverA دىكى جەدۋەل قۇرلىرىغا يۆتكىلىش ھالىتىنى قوزغىتىش ئۈچۈن قوشۇڭ <tbody>.

# بىرىنچى ئىسمى فامىلىسى ئىشلەتكۈچى ئىسمى
1 Mark Otto @mdo
2 ياقۇپ Thornton @fat
3 Larry قۇش @twitter 
<table class="table table-hover">
  ...
</table>

قويۇق جەدۋەل

.table-condensedجەدۋەلنى يېرىم قىلىپ كېسىش ئارقىلىق جەدۋەلنى تېخىمۇ ئىخچاملاش ئۈچۈن قوشۇڭ .

# بىرىنچى ئىسمى فامىلىسى ئىشلەتكۈچى ئىسمى
1 Mark Otto @mdo
2 ياقۇپ Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-condensed">
  ...
</table>

مەزمۇن دەرسلىرى

مەزمۇن جەدۋىلىنى ئىشلىتىپ جەدۋەل قۇر ياكى يەككە كاتەكچىلەرگە ئىشلىتىڭ.

سىنىپ چۈشەندۈرۈش
.active ئايلانما رەڭنى مەلۇم قۇر ياكى كاتەكچىگە ئىشلىتىدۇ
.success مۇۋەپپەقىيەتلىك ياكى ئاكتىپ ھەرىكەتنى كۆرسىتىدۇ
.info بىتەرەپ ئۇچۇر ئۆزگەرتىش ياكى ھەرىكەتنى كۆرسىتىدۇ
.warning دىققەت قىلىشقا تېگىشلىك ئاگاھلاندۇرۇشنى كۆرسىتىدۇ
.danger خەتەرلىك ياكى يوشۇرۇن سەلبىي ھەرىكەتنى كۆرسىتىدۇ
# ستون ماۋزۇسى ستون ماۋزۇسى ستون ماۋزۇسى
1 ستون مەزمۇنى ستون مەزمۇنى ستون مەزمۇنى
2 ستون مەزمۇنى ستون مەزمۇنى ستون مەزمۇنى
3 ستون مەزمۇنى ستون مەزمۇنى ستون مەزمۇنى
4 ستون مەزمۇنى ستون مەزمۇنى ستون مەزمۇنى
5 ستون مەزمۇنى ستون مەزمۇنى ستون مەزمۇنى
6 ستون مەزمۇنى ستون مەزمۇنى ستون مەزمۇنى
7 ستون مەزمۇنى ستون مەزمۇنى ستون مەزمۇنى
8 ستون مەزمۇنى ستون مەزمۇنى ستون مەزمۇنى
9 ستون مەزمۇنى ستون مەزمۇنى ستون مەزمۇنى 
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

ياردەمچى تېخنىكىلارغا مەنە يەتكۈزۈش

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

جاۋاب جەدۋىلى

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

تىك كېسىش / كېسىش

مەسئۇلىيەتچان جەدۋەللەردىن پايدىلىنىدۇ overflow-y: hidden، بۇ جەدۋەلنىڭ ئاستى ياكى ئۈستى گىرۋىكىدىن ھالقىغان مەزمۇنلارنى قىسقارتىدۇ. بولۇپمۇ بۇ تىزىملىك ​​تىزىملىكى ۋە باشقا ئۈچىنچى تەرەپ كىچىك قوراللىرىنى ئۆچۈرۈۋېتەلەيدۇ.

Firefox ۋە مەيدان

widthFirefox نىڭ ئىنكاس جەدۋىلىگە دەخلى قىلىدىغان بىر قىسىم ئوڭايسىز مەيدان ئۇسلۇبى بار. بىز Bootstrap دا تەمىنلىمىگەن Firefox بەلگىلىك خاككېر بولمىسا بۇنى قاپلىغىلى بولمايدۇ :

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن بۇ Stack Overflow جاۋابىنى ئوقۇڭ .

# جەدۋەل ماۋزۇسى جەدۋەل ماۋزۇسى جەدۋەل ماۋزۇسى جەدۋەل ماۋزۇسى جەدۋەل ماۋزۇسى جەدۋەل ماۋزۇسى
1 جەدۋەل كاتەكچىسى جەدۋەل كاتەكچىسى جەدۋەل كاتەكچىسى جەدۋەل كاتەكچىسى جەدۋەل كاتەكچىسى جەدۋەل كاتەكچىسى
2 جەدۋەل كاتەكچىسى جەدۋەل كاتەكچىسى جەدۋەل كاتەكچىسى جەدۋەل كاتەكچىسى جەدۋەل كاتەكچىسى جەدۋەل كاتەكچىسى
3 جەدۋەل كاتەكچىسى جەدۋەل كاتەكچىسى جەدۋەل كاتەكچىسى جەدۋەل كاتەكچىسى جەدۋەل كاتەكچىسى جەدۋەل كاتەكچىسى
# جەدۋەل ماۋزۇسى جەدۋەل ماۋزۇسى جەدۋەل ماۋزۇسى جەدۋەل ماۋزۇسى جەدۋەل ماۋزۇسى جەدۋەل ماۋزۇسى
1 جەدۋەل كاتەكچىسى جەدۋەل كاتەكچىسى جەدۋەل كاتەكچىسى جەدۋەل كاتەكچىسى جەدۋەل كاتەكچىسى جەدۋەل كاتەكچىسى
2 جەدۋەل كاتەكچىسى جەدۋەل كاتەكچىسى جەدۋەل كاتەكچىسى جەدۋەل كاتەكچىسى جەدۋەل كاتەكچىسى جەدۋەل كاتەكچىسى
3 جەدۋەل كاتەكچىسى جەدۋەل كاتەكچىسى جەدۋەل كاتەكچىسى جەدۋەل كاتەكچىسى جەدۋەل كاتەكچىسى جەدۋەل كاتەكچىسى 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

جەدۋەل

ئاساسلىق مىسال

يەككە جەدۋەل كونتروللىرى ئاپتوماتىك ھالدا يەر شارى ئۇسلۇبىنى قوبۇل قىلىدۇ. بارلىق تېكىست <input>ۋە ئېلېمېنتلار سۈكۈتتىكى ھالەتتە <textarea>تەڭشەلدى . بەلگە ۋە كونتروللارنى ئەڭ ياخشى بوشلۇققا ئوراش.<select>.form-controlwidth: 100%;.form-group

بۇ يەردىكى بۆلەك دەرىجىلىك ياردەم تېكىستى.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

شەكىل گۇرۇپپىلىرىنى كىرگۈزۈش گۇرۇپپىسى بىلەن ئارىلاشتۇرماڭ

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

Inline form

جەدۋەلنى قوشۇڭ .form-inline(بۇنىڭ بولۇشى ناتايىن <form>) سولغا توغرىلانغان ۋە سىزىقلىق كونترول كونتروللىرى ئۈچۈن. بۇ پەقەت كەم دېگەندە 768px كەڭلىكتىكى كۆرۈنۈش شەكلىدىكى جەدۋەللەرگە ماس كېلىدۇ.

ئىختىيارى كەڭلىك تەلەپ قىلىشى مۇمكىن

كىرگۈزۈش ۋە تاللاش width: 100%;Bootstrap دا سۈكۈتتىكى ھالەتتە قوللىنىلدى. width: auto;ئىچكى قۇر شەكلىدە ، بىز بىر قانچە كونترولنىڭ ئوخشاش بىر قۇردا تۇرالايدىغانلىقىنى ئەسلىگە كەلتۈرىمىز . ئورۇنلاشتۇرۇشىڭىزغا ئاساسەن ، قوشۇمچە ئىختىيارى كەڭلىك تەلەپ قىلىنىشى مۇمكىن.

ھەمىشە بەلگە قوشۇڭ

ئەگەر ھەر بىر كىرگۈزۈش بەلگىسىنى ئۆز ئىچىگە ئالمىسىڭىز ، ئېكران ئوقۇرمەنلىرى جەدۋەللىرىڭىزدە ئاۋارىچىلىققا ئۇچرايدۇ. .sr-onlyبۇ سىزىقلىق جەدۋەللەر ئۈچۈن ، سىنىپنى ئىشلىتىپ بەلگىنى يوشۇرۇپ قويالايسىز . ياردەمچى تېخنىكىلارغا بەلگە بىلەن تەمىنلەشنىڭ باشقا تاللاش ئۇسۇللىرى بار ، مەسىلەن aria-label، aria-labelledbyياكى titleخاسلىق. ئەگەر بۇلارنىڭ ھېچقايسىسى بولمىسا ، ئېكران ئوقۇرمەنلىرى بۇ placeholderخاسلىقنى ئىشلىتىشنى مۇراجىئەت قىلسا بولىدۇ ، ئەمما دىققەت قىلىڭ ، placeholderباشقا بەلگە قويۇش ئۇسۇللىرىنىڭ ئورنىدا ئىشلىتىش تەۋسىيە قىلىنمايدۇ.

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>
$
.00 
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

گورىزونتال شەكلى

.form-horizontalBootstrap نىڭ ئالدىن بېكىتىلگەن كاتەكچە سىنىپىدىن پايدىلىنىپ جەدۋەلنى قوشۇش ئارقىلىق بەلگە ۋە شەكىل كونترول گۇرۇپپىلىرىنى توغرىسىغا ئورۇنلاشتۇرۇڭ <form>. بۇنداق قىلىش .form-groups نى تور كاتەكچىسىدەك ھەرىكەت قىلىدۇ ، شۇڭا ھاجىتى يوق .row.

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

قوللايدىغان كونتروللار

ئۈلگە جەدۋەل ئورۇنلاشتۇرۇشىدا قوللانغان ئۆلچەملىك جەدۋەل كونتروللىرىنىڭ مىسالى.

كىرگۈزگۈچ

كۆپ ئۇچرايدىغان شەكىل كونترول قىلىش ، تېكىستنى ئاساس قىلغان كىرگۈزۈش ساھەسى. بارلىق HTML5 تىپلىرىنى قوللاشنى ئۆز ئىچىگە ئالىدۇ: text، password، datetime، datetime-local، date، month، time، week، ، number، email، url، search، tel، ۋە color.

تىپ باياناتى تەلەپ قىلىنىدۇ

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

<input type="text" class="form-control" placeholder="Text input">

گۇرۇپپىلارنى كىرگۈزۈڭ

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

Textarea

كۆپ خىل تېكىستنى قوللايدىغان جەدۋەل كونترول. rowsزۆرۈر تېپىلغاندا خاسلىقنى ئۆزگەرتىڭ .

<textarea class="form-control" rows="3"></textarea>

تەكشۈرۈش رامكىسى ۋە رادىئو

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

چەكلەنگەن تەكشۈرۈش رامكىسى ۋە رادىئو قوللايدۇ ، ئەمما ئاتا-ئانىنىڭ ئېغىزىدا «رۇخسەت قىلىنمىغان» نۇر بەلگىسى بىلەن تەمىنلەش ئۈچۈن ، دەرسنى ئاتا - ئانىغا <label>قوشۇشىڭىز كېرەك ، ياكى ..disabled.radio.radio-inline.checkbox.checkbox-inline

كۆڭۈلدىكى (رەتلەنگەن)


<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

تەكشۈرۈش رامكىسى ۋە رادىئو

.checkbox-inlineئوخشاش بىر قۇردا كۆرۈلىدىغان كونتروللار ئۈچۈن بىر قاتار تەكشۈرۈش رامكىسى ياكى .radio-inlineرادىئودىكى دەرسلەرنى ئىشلىتىڭ .


<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

بەلگە تېكىستلىرى بولمىغان تەكشۈرۈش رامكىسى ۋە رادىئو

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

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

تاللايدۇ

شۇنىڭغا دىققەت قىلىڭكى ، نۇرغۇنلىغان يەرلىك تاللانغان تىزىملىكلەر - يەنى سافارى ۋە Chrome دا يۇمىلاق ئۈستەل بولۇپ ، border-radiusخاسلىقى ئارقىلىق ئۆزگەرتكىلى بولمايدۇ.

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<select>خاسلىق بىلەن كونترول قىلىش ئۈچۈن multiple، كۆڭۈلدىكى ئەھۋالدا كۆپ تاللاش كۆرسىتىلىدۇ.

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

تۇراقلىق كونترول

جەدۋەلنى جەدۋەلنىڭ يېنىغا جەدۋەل بەلگىسىنىڭ يېنىغا قويۇشقا توغرا كەلگەندە ، .form-control-staticدەرسنى a غا ئىشلىتىڭ <p>.

[email protected]

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

[email protected]

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

فوكۇس ھالىتى

outlineبىز بەزى شەكىل كونتروللىرىدىكى سۈكۈتتىكى ئۇسلۇبلارنى چىقىرىپ تاشلاپ ، box-shadowئۇنىڭ ئورنىغا بىر ئورۇنغا ئىشلىتىمىز :focus.

Demo :focusstate

يۇقارقى مىسال كىرگۈزۈش ھۆججىتىمىزدىكى ئىختىيارى ئۇسلۇبلارنى ئىشلىتىپ a دىكى :focusھالەتنى كۆرسىتىدۇ .form-control.

چەكلەنگەن ھالەت

disabledئىشلەتكۈچىنىڭ ئۆز-ئارا تەسىر قىلىشىنىڭ ئالدىنى ئېلىش ئۈچۈن كىرگۈزگۈچكە boolean خاسلىقىنى قوشۇڭ . چەكلەنگەن كىرگۈزۈش تېخىمۇ يېنىك كۆرۈنىدۇ ۋە not-allowedنۇر بەلگە قوشۇلىدۇ.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

چەكلەنگەن ئېتىز

disabledخاسلىقنى a غا قوشۇڭ ، بىرلا ۋاقىتتا <fieldset>بارلىق كونتروللارنى چەكلەڭ .<fieldset>

ئۇلىنىش ئىقتىدارىغا دىققەت قىلىڭ<a>

سۈكۈتتىكى ھالەتتە ، توركۆرگۈچلەر ئىچىدىكى بارلىق يەرلىك شەكىل كونتروللىرى ( <input>ۋە ئېلېمېنتلار) نى مېيىپ دەپ قارايدۇ <select>، ئۇلاردا ھەرپتاختا ۋە مائۇسنىڭ ئۆز-ئارا تەسىر كۆرسىتىشىنىڭ ئالدىنى ئالىدۇ. قانداقلا بولمىسۇن ، سىزنىڭ شەكلىڭىزمۇ ئېلېمېنتلارنى ئۆز ئىچىگە ئالسا ، بۇلارغا پەقەت بىر ئۇسلۇب بېرىلىدۇ . كونۇپكىلارنىڭ مېيىپ ھالىتى توغرىسىدىكى بۆلەكتە كۆرسىتىلگەندەك (بولۇپمۇ لەڭگەر ئېلېمېنتلىرىنىڭ تارماق بۆلىكىدە) ، بۇ CSS خاسلىقى تېخى قېلىپلاشمىغان بولۇپ ، Opera 18 ۋە ئۇنىڭدىن تۆۋەن نەشرىدە ياكى Internet Explorer 11 دە تولۇق قوللىمايدۇ. كۇنۇپكا تاختىسى ئىشلەتكۈچىلەرنىڭ بۇ ئۇلىنىشلارنى فوكۇس توغرىلاش ياكى قوزغىتىشىنىڭ ئالدىنى ئالىدۇ. شۇڭا بىخەتەر بولۇش ئۈچۈن ، JavaScript نى ئىشلىتىپ بۇ ئۇلىنىشلارنى چەكلەڭ.<button><fieldset disabled><a ... class="btn btn-*">pointer-events: none

تور كۆرگۈچنىڭ ماسلىشىشچانلىقى

disabledBootstrap بۇ خىل ئۇسلۇبلارنى بارلىق توركۆرگۈچلەردە قوللىنىدىغان بولسىمۇ ، Internet Explorer 11 ۋە ئۇنىڭدىن تۆۋەنلەر a دىكى خاسلىقنى تولۇق قوللىمايدۇ <fieldset>. ئىختىيارى JavaScript نى ئىشلىتىپ بۇ توركۆرگۈچتىكى مەيداننى چەكلەڭ.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Readonly state

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

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

ياردەم تېكىستى

جەدۋەلنى كونترول قىلىش ئۈچۈن ياردەم سەۋىيىسىنى توسۇش.

ياردەم تېكىستىنى جەدۋەل كونتروللىرى بىلەن باغلاش

aria-describedbyياردەم تېكىستى ئۇنىڭ خاسلىقنى ئىشلىتىشكە مۇناسىۋەتلىك جەدۋەل كونتروللۇقى بىلەن ئېنىق باغلىنىشى كېرەك . بۇ ئېكران تېخنىكىلىرىغا ئوخشاش ياردەمچى تېخنىكىلارنىڭ ئىشلەتكۈچى دىققەتنى كونترول قىلغاندا ياكى كونترولغا كىرگەندە بۇ ياردەم تېكىستىنى ئېلان قىلىشىغا كاپالەتلىك قىلىدۇ.

يېڭى قۇرغا بۆلىنىدىغان ۋە بىر قۇردىن ئېشىپ كېتىشى مۇمكىن بولغان ياردەم تېكىستى. 
<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

دەلىللەش ھالىتى

Bootstrap جەدۋەل كونتروللۇقىدىكى خاتالىق ، ئاگاھلاندۇرۇش ۋە مۇۋەپپەقىيەت ھالىتىنىڭ دەلىللەش ئۇسلۇبىنى ئۆز ئىچىگە ئالىدۇ. .has-warningئىشلىتىش ، قوشۇش .has-errorياكى .has-successئانا ئېلېمېنتقا ئىشلىتىش. ھەر قانداق .control-label، .form-controlۋە .help-blockبۇ ئېلېمېنتنىڭ ئىچىدە دەلىللەش ئۇسلۇبى تاپشۇرۇلىدۇ.

ياردەمچى تېخنىكا ۋە رەڭدار ئىشلەتكۈچىلەرگە دەلىللەش ھالىتىنى يەتكۈزۈش

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

دۆلەتنىڭ باشقا كۆرسەتكۈچلىرىنىڭمۇ تەمىنلىنىشىگە كاپالەتلىك قىلىڭ. مەسىلەن ، سىز جەدۋەل كونترول <label>تېكىستىنىڭ ھالىتىگە مۇناسىۋەتلىك بىر بېشارەتنى ئۆز ئىچىگە ئالالايسىز (تۆۋەندىكى كود مىسالىدىكىگە ئوخشاش) ، Glyphicon.sr-only نى ئۆز ئىچىگە ئالىدۇ ( دەرسنى ئىشلىتىپ مۇۋاپىق بولغان باشقا تېكىستلەر - Glyphicon مىساللىرىنى كۆرۈڭ ) ياكى قوشۇمچە ياردەم تېكىستلىرى . كونكرېت ياردەمچى تېخنىكىلار ئۈچۈن ئىناۋەتسىز جەدۋەل كونتروللىرىغىمۇ خاسلىق تەقسىم قىلىنسا بولىدۇ aria-invalid="true".

يېڭى قۇرغا بۆلىنىدىغان ۋە بىر قۇردىن ئېشىپ كېتىشى مۇمكىن بولغان ياردەم تېكىستى. 
<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

ئىختىيارى سىنبەلگىلەر بىلەن

سىز يەنە توغرا سىنبەلگە قوشۇش ئارقىلىق ئىختىيارى ئىنكاس سىنبەلگىسىنى قوشالايسىز .has-feedback.

ئىنكاس سىنبەلگىسى پەقەت تېكىست <input class="form-control">ئېلېمېنتلىرى بىلەنلا ئىشلەيدۇ.

سىنبەلگە ، بەلگە ۋە كىرگۈزۈش گۇرۇپپىلىرى

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

سىنبەلگىنىڭ مەنىسىنى ياردەمچى تېخنىكىلارغا يەتكۈزۈش

ئېكران ئوقۇغۇچىلىرىغا ئوخشاش ياردەمچى تېخنىكىلارنىڭ سىنبەلگىنىڭ مەنىسىنى توغرا يەتكۈزۈشىگە كاپالەتلىك قىلىش ئۈچۈن ، قوشۇمچە يوشۇرۇن تېكىستنى .sr-onlyدەرسكە كىرگۈزۈش ھەمدە ئۇ ئىشلىتىشكە مۇناسىۋەتلىك جەدۋەل كونتروللۇقى بىلەن ئېنىق باغلىنىشى كېرەك aria-describedby. ئۇنىڭدىن باشقا ، مەنە (مەسىلەن ، مەلۇم بىر تېكىست كىرگۈزۈش ساھەسىدە ئاگاھلاندۇرۇش بارلىقى) نىڭ باشقا بىر شەكىلدە يەتكۈزۈلۈشىگە كاپالەتلىك قىلىڭ ، مەسىلەن <label>جەدۋەلنى كونترول قىلىش بىلەن مۇناسىۋەتلىك ئەمەلىي تېكىستنى ئۆزگەرتىش دېگەندەك.

تۆۋەندىكى مىساللار ئاللىقاچان تېكىستنىڭ ئۆزىدە ئۆزلىرىنىڭ جەدۋەل كونتروللۇقىنىڭ دەلىللەش ھالىتىنى تىلغا ئالغان بولسىمۇ ، <label>ئەمما يۇقىرىدىكى تېخنىكا ( .sr-onlyتېكىست ۋە aria-describedby) ئىشلىتىپ رەسىملىك ​​مەقسەتكە كىرگۈزۈلدى.

(مۇۋەپپەقىيەت)
(ئاگاھلاندۇرۇش)
(خاتالىق)
@
(مۇۋەپپەقىيەت) 
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

توغرىسىغا ۋە سىزىقلىق شەكىلدىكى ئىختىيارى سىنبەلگىلەر

(مۇۋەپپەقىيەت)
@
(مۇۋەپپەقىيەت) 
<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>
(مۇۋەپپەقىيەت)

@
(مۇۋەپپەقىيەت) 
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

يوشۇرۇن .sr-onlyبەلگە بار ئىختىيارى سىنبەلگىلەر

ئەگەر سىز .sr-onlyسىنىپنى ئىشلىتىپ جەدۋەل كونتروللىغۇچنى يوشۇرسىڭىز <label>(خاسلىق قاتارلىق باشقا بەلگە تاللاشلىرىنى ئىشلەتمەي aria-label) ، Bootstrap قوشۇلغاندىن كېيىن سىنبەلگىنىڭ ئورنىنى ئاپتوماتىك تەڭشەيدۇ.

(مۇۋەپپەقىيەت)
@
(مۇۋەپپەقىيەت) 
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

چوڭ-كىچىكلىكىنى كونترول قىلىش

دېگەندەك دەرسلەرنى ئىشلىتىپ ئېگىزلىك بەلگىلەڭ .input-lg، دېگەندەك كاتەكچە ئىستون سىنىپلىرىنى ئىشلىتىپ كەڭلىك بەلگىلەڭ .col-lg-*.

بوي ئېگىزلىكى

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

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

گورىزونتال شەكىل گۇرۇپپىسىنىڭ چوڭلۇقى

.form-horizontalقوشۇش .form-group-lgياكى ئىچىگە تېزلىكتە بەلگە ۋە شەكىل كونترول قىلىش .form-group-sm.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

ستون چوڭلۇقى

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

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

كۇنۇپكىلار

كۇنۇپكا بەلگىسى

كۇنۇپكا سىنىپىنى an <a>، <button>ياكى <input>ئېلېمېنتقا ئىشلىتىڭ.

ئۇلىنىش 
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

مەزمۇنغا ماس ئىشلىتىش

<a>كۇنۇپكا سىنىپى ۋە ئېلېمېنتلارنى ئىشلىتىشكە بولىدىغان بولسىمۇ <button>، پەقەت <button>بىزنىڭ nav ۋە navbar زاپچاسلىرى ئىچىدە ئېلېمېنتلارلا قوللىنىدۇ.

كۇنۇپكا رولىنى ئوينايدىغان ئۇلىنىشلار

ئەگەر <a>ئېلېمېنتلار نۆۋەتتىكى بەت ئىچىدىكى باشقا ھۆججەت ياكى بۆلەككە يۆتكىلىشتىن كۆرە ، كۇنۇپكا - بەتتىكى ئىقتىدارنى قوزغىتىش رولىنى ئوينايدىغان بولسا ، ئۇلارغا مۇۋاپىق بېرىلىشى كېرەك role="button".

توركۆرگۈ ھالقىسى

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

باشقا ئىشلار ئىچىدە ، Firefox <30 دە خاتالىق بارline-height ، ئۇ بىزنىڭ ئاساسى كۇنۇپكىلارنى تەڭشىشىمىزنى توسىدۇ <input>، بۇ ئۇلارنىڭ Firefox دىكى باشقا كۇنۇپكىلارنىڭ ئېگىزلىكىگە ماس كەلمەيدۇ.

تاللانما

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

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

ياردەمچى تېخنىكىلارغا مەنە يەتكۈزۈش

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

Size

چوڭ ياكى كىچىك كۇنۇپكىلارمۇ؟ قوشۇڭ ياكى .btn-lgقوشۇمچە چوڭلۇقتا..btn-sm.btn-xs

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

قوشۇش ئارقىلىق توسۇش دەرىجىسىدىكى كۇنۇپكىلارنى قۇرۇپ چىقىڭ .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

ئاكتىپ ھالەت

كۇنۇپكىلار ئاكتىپلانغان ۋاقىتتا بېسىلغان (تەگلىكى قېنىق ، چېگراسى قاراڭغۇ ۋە سايە سايە بىلەن) كۆرۈنىدۇ. ئېلېمېنتلارغا نىسبەتەن <button>بۇ ئارقىلىق ئەمەلگە ئاشىدۇ :active. <a>ئېلېمېنتلارغا نىسبەتەن ئېلىپ ئېيتقاندا .active. قانداقلا بولمىسۇن ، ئاكتىپ ھالەتنى پروگرامما خاراكتېرلىك كۆپەيتىشكە ئېھتىياجلىق بولسىڭىز ، s (ۋە خاسلىقنى ئۆز ئىچىگە ئالىدۇ) نى .activeئىشلىتەلەيسىز <button>.aria-pressed="true"

كۇنۇپكا ئېلېمېنتى

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

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

لەڭگەر ئېلېمېنتى

كۇنۇپكىلارغا .activeدەرس قوشۇڭ .<a>

دەسلەپكى ئۇلىنىش ئۇلىنىش 

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

چەكلەنگەن ھالەت

كۇنۇپكىلارنى قايتا سۇسلاش ئارقىلىق يېپىق ھالەتكە كەلتۈرۈڭ opacity.

كۇنۇپكا ئېلېمېنتى

disabledخاسلىقنى <button>كۇنۇپكىلارغا قوشۇڭ .

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

تور كۆرگۈچنىڭ ماسلىشىشچانلىقى

disabledئەگەر بۇ خاسلىقنى a غا قوشسىڭىز <button>، Internet Explorer 9 ۋە ئۇنىڭدىن تۆۋەندە بىز ئوڭشالمايدىغان ناچار تېكىست سايىسى بىلەن تېكىست كۈلرەڭ بولىدۇ.

لەڭگەر ئېلېمېنتى

كۇنۇپكىلارغا .disabledدەرس قوشۇڭ .<a>

دەسلەپكى ئۇلىنىش ئۇلىنىش 

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

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

ئۇلىنىش ئىقتىدار ئۆڭكۈرى

بۇ دەرسلىك s نىڭ pointer-events: noneئۇلىنىش ئىقتىدارىنى چەكلەشكە ئىشلىتىلىدۇ <a>، ئەمما CSS خاسلىقى تېخى ئۆلچەملەشتۈرۈلمىگەن بولۇپ ، Opera 18 ۋە ئۇنىڭدىن تۆۋەن نەشرىدە ياكى Internet Explorer 11 دە تولۇق قوللىمايدۇ. ئۇنىڭدىن باشقا ، ھەتتا توركۆرگۈچ pointer-events: none، كۇنۇپكا تاختىسى بار. يول باشلاش يەنىلا تەسىرگە ئۇچرىمايدۇ ، يەنى كۆرۈش كۇنۇپكا تاختىسى ئىشلەتكۈچىلەر ۋە ياردەمچى تېخنىكىلارنى ئىشلەتكۈچىلەر يەنىلا بۇ ئۇلىنىشلارنى قوزغىتالايدۇ. شۇڭا بىخەتەر بولۇش ئۈچۈن ، JavaScript نى ئىشلىتىپ بۇ ئۇلىنىشلارنى چەكلەڭ.

سۈرەتلەر

ئىنكاسچان رەسىملەر

.img-responsiveBootstrap 3 دىكى رەسىملەرنى دەرس قوشۇش ئارقىلىق ئىنكاس قايتۇرۇشقا بولىدۇ . بۇ ماس كېلىدۇ max-width: 100%;، height: auto;ھەمدە display: block;رەسىمگە ئانا ئېلېمېنتقا چىرايلىق تارازا بولىدۇ.

.img-responsiveسىنىپنى ئىشلىتىدىغان رەسىملەرنى مەركەز قىلىش ئۈچۈن ، .center-blockئۇنىڭ ئورنىغا ئىشلىتىڭ .text-center. ئىشلىتىش ھەققىدىكى تەپسىلاتلارنى ياردەمچى دەرسلەر بۆلىكىدىن كۆرۈڭ.center-block .

SVG رەسىملىرى ۋە IE 8-10

Internet Explorer 8-10 دە ، SVG رەسىملىرى .img-responsiveتەڭسىز چوڭلۇقتا. بۇنى ئوڭشاش ئۈچۈن ، width: 100% \9;زۆرۈر تېپىلغاندا قوشۇڭ. Bootstrap باشقا رەسىم فورماتىدا ئەگەشمە كېسەللىكلەرنى كەلتۈرۈپ چىقىرىدىغان بولغاچقا ، بۇنى ئاپتوماتىك قوللانمايدۇ.

<img src="..." class="img-responsive" alt="Responsive image">

رەسىم شەكلى

<img>ھەر قانداق تۈردىكى رەسىملەرنى ئاسانلا ئۇسلۇبقا ئېلېمېنتقا دەرس قوشۇڭ .

تور كۆرگۈچنىڭ ماسلىشىشچانلىقى

ئېسىڭىزدە تۇتۇڭ ، Internet Explorer 8 يۇمىلاق بۇلۇڭنى قوللىمايدۇ.

140x140 140x140 140x140 
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

ياردەمچى دەرسلەر

مەزمۇن رەڭلىرى

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

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ئۇلترا ماشىنىلىرى ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem maleuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

كونكرېتلىق بىلەن مۇئامىلە قىلىش

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

ياردەمچى تېخنىكىلارغا مەنە يەتكۈزۈش

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

مەزمۇن ئارقا كۆرۈنۈشى

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

Nullam id dolor id nibh ئۇلترا ماشىنىلىرى ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem maleuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

كونكرېتلىق بىلەن مۇئامىلە قىلىش

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

ياردەمچى تېخنىكىلارغا مەنە يەتكۈزۈش

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

سىنبەلگە تاقاش

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

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

Carets

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

<span class="caret"></span>

تېز لەيلىمە

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

<div class="pull-left">...</div>
<div class="pull-right">...</div>
// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

ناۋايخانىلاردا ئىشلىتىشكە بولمايدۇ

دېڭىز ياقىسىدىكى زاپچاسلارنى پايدىلىق دەرسلەر بىلەن ماسلاشتۇرۇش ئۈچۈن ئىشلىتىڭ .navbar-leftياكى .navbar-rightئۇنىڭ ئورنىغا ئىشلىتىڭ. تەپسىلاتىنى navbar docs دىن كۆرۈڭ.

مەركىزى مەزمۇن بۆلەكلىرى

display: blockئارقىلىق بىر ئېلېمېنتنى بەلگىلەڭ margin. ئارىلاشما ۋە سىنىپ سۈپىتىدە ئىشلەتكىلى بولىدۇ.

<div class="center-block">...</div>
// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

Clearfix

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

<!-- Usage as a class -->
<div class="clearfix">...</div>
// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

مەزمۇننى كۆرسىتىش ۋە يوشۇرۇش

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

.hideئىشلەتكىلى بولىدۇ ، ئەمما ئۇ ئېكران ئوقۇرمەنلىرىگە ھەمىشە تەسىر كۆرسەتمەيدۇ ۋە v3.0.1 دىن باشلاپ ۋاقتى ئۆتكەن. ئىشلىتىڭ .hiddenياكى .sr-onlyئۇنىڭ ئورنىغا.

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

<div class="show">...</div>
<div class="hidden">...</div>
// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

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

ئېكران ئوقۇغۇچىلىرىدىن باشقا بارلىق ئۈسكۈنىلەرگە بىر ئېلېمېنتنى يوشۇرۇڭ .sr-only. .sr-onlyفوكۇسلانغان ۋاقىتتا ئېلېمېنتنى قايتا كۆرسىتىش بىلەن بىرلەشتۈرۈڭ .sr-only-focusable(مەسىلەن پەقەت كۇنۇپكا تاختىسى ئىشلەتكۈچىلەرلا). قولايلىق ئەڭ ياخشى ئادەتلەرگە ئەگىشىش كېرەك . ئارىلاشما قىلىپ ئىشلىتىشكە بولىدۇ.

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

رەسىم ئالماشتۇرۇش

سىنىپ ياكى ئارىلاشتۇرۇشتىن پايدىلىنىپ .text-hideئېلېمېنتنىڭ تېكىست مەزمۇنىنى تەگلىك رەسىمگە ئالماشتۇرۇشقا ياردەم قىلىڭ.

<h1 class="text-hide">Custom heading</h1>
// Usage as a mixin
.heading {
  .text-hide();
}

مەسئۇلىيەتچان مۇلازىمەتلەر

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

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

ئىشلەتكىلى بولىدىغان دەرسلەر

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

قوشۇمچە كىچىك ئۈسكۈنىلەرتېلېفونلار (<768px) كىچىك ئۈسكۈنىلەرتاختا كومپيۇتېر (68768px) ئوتتۇراھال ئۈسكۈنىلەرئۈستەل يۈزى (≥992px) چوڭ ئۈسكۈنىلەرئۈستەل يۈزى (≥1200px)
.visible-xs-* كۆرگىلى بولىدۇ
.visible-sm-* كۆرگىلى بولىدۇ
.visible-md-* كۆرگىلى بولىدۇ
.visible-lg-* كۆرگىلى بولىدۇ
.hidden-xs كۆرگىلى بولىدۇ كۆرگىلى بولىدۇ كۆرگىلى بولىدۇ
.hidden-sm كۆرگىلى بولىدۇ كۆرگىلى بولىدۇ كۆرگىلى بولىدۇ
.hidden-md كۆرگىلى بولىدۇ كۆرگىلى بولىدۇ كۆرگىلى بولىدۇ
.hidden-lg كۆرگىلى بولىدۇ كۆرگىلى بولىدۇ كۆرگىلى بولىدۇ

V3.2.0 گە قەدەر ، .visible-*-*ھەر بىر بۆسۈشنىڭ دەرسلىرى ئۈچ خىل بولىدۇ ، displayتۆۋەندە كۆرسىتىلگەن ھەر بىر CSS مۈلۈك قىممىتى ئۈچۈن.

دەرسلەر گۇرۇپپىسى CSSdisplay
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

شۇڭا ، قوشۇمچە كىچىك ( xs) ئېكرانلارغا نىسبەتەن ، ئىشلەتكىلى بولىدىغان .visible-*-*دەرسلەر: .visible-xs-block، .visible-xs-inlineۋە .visible-xs-inline-block.

دەرسلەر .visible-xs، .visible-sm، .visible-mdۋە .visible-lgبار ، ئەمما v3.2.0 دىن باشلاپ ۋاقتى ئۆتكەن . ئۇلار مۇناسىۋەتلىك ئېلېمېنتلارنى .visible-*-blockئالماشتۇرۇش ئۈچۈن قوشۇمچە ئالاھىدە ئەھۋاللارنى ھېسابقا ئالمىغاندا ، ئۇلار تەخمىنەن باراۋەر .<table>

دەرسلەرنى بېسىش

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

دەرسلەر توركۆرگۈ بېسىش
.visible-print-block
.visible-print-inline
.visible-print-inline-block 		كۆرگىلى بولىدۇ
.hidden-print كۆرگىلى بولىدۇ

بۇ سىنىپمۇ .visible-printمەۋجۇت ، ئەمما v3.2.0 دىن باشلاپ ۋاقتى ئۆتكەن. مۇناسىۋەتلىك ئېلېمېنتلار .visible-print-blockئۈچۈن قوشۇمچە ئالاھىدە ئەھۋاللارنى ھېسابقا ئالمىغاندا ، ئۇ تەخمىنەن باراۋەر .<table>

سىناق دېلولىرى

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

كۆرگىلى بولىدىغان ...

يېشىل تەكشۈرۈش بەلگىسى ئېلېمېنتنىڭ نۆۋەتتىكى كۆرۈنۈشىڭىزدە كۆرۈنگەنلىكىنى كۆرسىتىدۇ.

X x-small دا كۆرگىلى بولىدۇ
Small small on small
ئوتتۇراھال Med Medible on medium
✔ Visible on large
X كىچىك ۋە كىچىكلەردە كۆرۈنىدۇ
Med ئوتتۇرا ۋە چوڭلاردا كۆرگىلى بولىدۇ
X كىچىك ۋە ئوتتۇراھال كۆرۈنىدۇ
Small كىچىك ۋە چوڭلاردا كۆرۈنىدۇ
X كىچىك ۋە چوڭلاردا كۆرۈنىدۇ
Small ئوتتۇرا ۋە كىچىك

يوشۇرۇنغان ...

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

X-small غا يوشۇرۇنغان
Small يوشۇرۇنغان
ئوتتۇراھال Med يوشۇرۇنغان
Large يوشۇرۇنغان
X كىچىك ۋە كىچىكلەرگە يوشۇرۇنغان
Med ئوتتۇرا ۋە چوڭلارغا يوشۇرۇنغان
X x كىچىك ۋە ئوتتۇراھال
Small كىچىك ۋە چوڭلارغا يوشۇرۇنغان
X x كىچىك ۋە چوڭلارغا يوشۇرۇنغان
Small كىچىك ۋە ئوتتۇراغا يوشۇرۇنغان

ئاز ئىشلىتىش

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

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

Bootstrap نى تۈزۈش

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

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

ئۆزگەرگۈچى مىقدار

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

رەڭلەر

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

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee
@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

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

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

Scaffolding

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

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

ئۇلىنىشىڭىزنى پەقەت بىرلا قىممەت بىلەن توغرا رەڭ بىلەن ئۇلاڭ.

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

شۇنىڭغا دىققەت قىلىڭكى ، @link-hover-colorئاپتوماتىك ھالدا توغرا ئايلانما رەڭ ھاسىل قىلىش ئۈچۈن «Less» دىن كەلگەن يەنە بىر قالتىس قورال. ئىشلەتسىڭىز بولىدۇ darken، lightenۋە .saturatedesaturate

مەتبەئە

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

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

سىنبەلگە

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

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

زاپچاسلار

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

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

ساتقۇچىلار ئارىلاش

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

Box-sizing

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

Autoprefixer نىڭ تونۇشتۇرۇلۇشى بىلەن ئارىلاشما v3.2.0 دىن تۆۋەن . ئارقىغا ماسلىشىشچانلىقىنى ساقلاش ئۈچۈن ، Bootstrap تاكى Bootstrap v4 غىچە بولغان ئارىلىقتا ئارىلاشمىلارنى داۋاملىق ئىشلىتىدۇ.

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

يۇمىلاق بۇلۇڭ

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

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

ساندۇق (تامچە) سايە

ئەگەر نىشانلىق ئاڭلىغۇچىلىرىڭىز ئەڭ يېڭى ۋە ئەڭ چوڭ توركۆرگۈچ ۋە ئۈسكۈنىلەرنى ئىشلىتىۋاتقان بولسا ، بۇ box-shadowمۈلۈكنى پەقەت ئۆزىڭىز ئىشلىتىڭ. ئەگەر كونا ئاندىرويىد (v4 دىن بۇرۇنقى) ۋە iOS ئۈسكۈنىلىرى (iOS دىن بۇرۇنقى 5) نى قوللاشقا ئېھتىياجلىق بولسىڭىز ، ۋاقتى ئۆتكەن ئارىلاشمىلارنى ئىشلىتىپ تەلەپنى ئېلىڭ.-webkit ئېلىڭ .

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

قۇتىڭىزنىڭ سايىسىدا رەڭ ئىشلىتىشنى جەزملەشتۈرۈڭ ، rgba()بۇنداق بولغاندا ئۇلار ئارقا كۆرۈنۈش بىلەن ئىمكانقەدەر ماسلىشىدۇ.

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

ئۆتكۈنچى

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

بۇ ئارىلاشمىلار Autoprefixer نىڭ تونۇشتۇرۇلۇشى بىلەن v3.2.0 دىن تۆۋەن. ئارقىغا ماسلىشىشچانلىقىنى ساقلاش ئۈچۈن ، Bootstrap داۋاملىق Bootstrap v4 گىچە ئارىلاشمىلارنى ئىشلىتىدۇ.

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

ئۆزگەرتىش

ھەر قانداق ئوبيېكتنى ئايلاندۇرۇش ، كۆلەملەشتۈرۈش ، تەرجىمە قىلىش (يۆتكەش) ياكى ئېغىش.

بۇ ئارىلاشمىلار Autoprefixer نىڭ تونۇشتۇرۇلۇشى بىلەن v3.2.0 دىن تۆۋەن. ئارقىغا ماسلىشىشچانلىقىنى ساقلاش ئۈچۈن ، Bootstrap داۋاملىق Bootstrap v4 گىچە ئارىلاشمىلارنى ئىشلىتىدۇ.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

Animations

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

بۇ ئارىلاشمىلار Autoprefixer نىڭ تونۇشتۇرۇلۇشى بىلەن v3.2.0 دىن تۆۋەن. ئارقىغا ماسلىشىشچانلىقىنى ساقلاش ئۈچۈن ، Bootstrap داۋاملىق Bootstrap v4 گىچە ئارىلاشمىلارنى ئىشلىتىدۇ.

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

Opacity

بارلىق توركۆرگۈچلەرنىڭ سۈزۈكلۈكىنى بەلگىلەڭ ۋە filterIE8 ئۈچۈن كەمتۈكلۈك بىلەن تەمىنلەڭ.

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

ئورۇن ئىگىسى تېكىستى

ھەر بىر ساھەدە جەدۋەل كونتروللۇقى ئۈچۈن مەزمۇن بىلەن تەمىنلەڭ.

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

ستونلار

بىرلا ئېلېمېنت ئىچىدە CSS ئارقىلىق ستون ھاسىل قىلىڭ.

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

Gradients

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

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

سىز يەنە ئۆلچەملىك ئىككى رەڭلىك ، تۈز سىزىقلىق بۇلۇڭنىڭ بۇلۇڭىنى بەلگىلىيەلەيسىز:

#gradient > .directional(#333; #000; 45deg);

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

#gradient > .striped(#333; 45deg);

چۈمۈلەنى ئۆستۈرۈپ ، ئۇنىڭ ئورنىغا ئۈچ خىل رەڭ ئىشلىتىڭ. بىرىنچى رەڭنى ، ئىككىنچى رەڭنى ، ئىككىنچى رەڭنىڭ رەڭگىنى توختىتىڭ (پىرسەنت قىممىتى% 25 كە ئوخشاش) ، ئۈچىنچى خىل رەڭنى بۇ ئارىلاشمىلار بىلەن تەڭشەڭ:

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

Heads up! ئەگەر سىز بىر گىرادۇسنى چىقىرىۋېتىشكە توغرا كەلسە ، filterسىز قوشقان IE بەلگىلىك تۈرلەرنى ئۆچۈرۈۋېتىڭ. .reset-filter()ئارىلاشتۇرغۇچنى بىللە ئىشلىتىش ئارقىلىق قىلالايسىز background-image: none;.

Utility mixins

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

Clearfix

class="clearfix"ھەر قانداق ئېلېمېنتقا قوشۇشنى ئۇنتۇپ ، ئۇنىڭ ئورنىغا .clearfix()مۇۋاپىق ۋاقىتتا ئارىلاشتۇرۇڭ. نىكولاس گاللاگېرنىڭ مىكرو ئېنىقلىمىسىنى ئىشلىتىدۇ .

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

توغرىسىغا توغرىلاش

ئاتا-ئانىسىنىڭ ئىچىدىكى ھەر قانداق ئېلېمېنتنى تېزرەك مەركەزلەشتۈرۈڭ. تەلەپ قىلىدۇ widthياكى max-widthتەڭشىلىدۇ.

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

ياردەمچى ياردەمچى

جىسىمنىڭ چوڭ-كىچىكلىكىنى تېخىمۇ ئاسان بەلگىلەڭ.

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

ئېنىقلىغىلى بولىدىغان تېكىستلەر

ھەر قانداق تېكىست ياكى باشقا ئېلېمېنتلارنىڭ چوڭ-كىچىكلىكىنى تاللاشنى ئاسان تەڭشەڭ. نورمال توركۆرگۈچ ھەرىكىتىنىڭ كۆڭۈلدىكى قىممىتى ( both).

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

تېكىستنى قىسقارتىش

يەككە ئارىلاشما ئېللىپس بىلەن تېكىستنى ئاسانلا قىسقارتىڭ. ئېلېمېنتنىڭ بولۇشى blockياكى inline-blockسەۋىيىسىنى تەلەپ قىلىدۇ.

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

كۆرۈش تور پەردىسى رەسىملىرى

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

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

Sass نى ئىشلىتىش

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

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

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

Path چۈشەندۈرۈش
lib/ Ruby مەرۋايىت كودى (Sass سەپلىمىسى ، رېلىس ۋە كومپاس بىرلەشتۈرۈش)
tasks/ ئايلاندۇرغۇچ قوليازمىلىرى (يۇقىرى ئېقىنغا Sass غا بۇرۇلۇش)
test/ تۈزۈش سىنىقى
templates/ Compass pack manifest
vendor/assets/ Sass ، JavaScript ۋە خەت ھۆججىتى
Rakefile ئىچكى ۋەزىپە ، مەسىلەن تىرناق ۋە ئايلاندۇرۇش

بۇ ھۆججەتلەرنىڭ ھەرىكەتلىنىۋاتقانلىقىنى كۆرۈش ئۈچۈن Sass ئېغىزىنىڭ GitHub ئامبىرىنى زىيارەت قىلىڭ .

قاچىلاش

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

Sass for Bootstrap