Scaffolding

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

كۆڭۈلدىكى 940px كاتەكچىسى

Bootstrap نىڭ بىر قىسمى سۈپىتىدە تەمىنلەنگەن سۈكۈتتىكى تور سىستېمىسى 940px كەڭلىك ، 12 ئىستون تورى .

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

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

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

ستونلارنى ئۆچۈرۈش

4 offset 4

3 offset 3

8 offset 4

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</div>

ئۇۋا تۈۋرۈكى

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

مىسال

1-دەرىجە

2-دەرىجە

<div class = "row" > 
  <div class = "span12" > 
    1-دەرىجە
    <div class = "row" > 
      <div class = "span6" > 2-دەرىجە </div> 
      <div class = "span6" > 2-دەرىجە </div> 
    </div>
  </div>
</div>

كاتەكچە خاسلاشتۇرۇش

ئۆزگىرىشچان	كۆڭۈلدىكى قىممىتى	چۈشەندۈرۈش
`@gridColumns`	12	ستون سانى
`@gridColumnWidth`	60px	ھەر بىر ئىستوننىڭ كەڭلىكى
`@gridGutterWidth`	20px	ستونلار ئارىسىدىكى سەلبىي بوشلۇق
`@siteWidth`	بارلىق ئىستون ۋە ئۆستەڭلەرنىڭ يىغىندىسى	ئارىلاشما كەڭلىك بەلگىلەش ئۈچۈن تۈۋرۈك ۋە ئۆستەڭ سانىنى `.container-fixed()`سانايدۇ

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

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

قانداق تەڭشەش كېرەك

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

ئىنكاس قايتۇرۇش

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

مۇقىم ئورۇنلاشتۇرۇش

سۈكۈتتىكى ۋە ئاددىي 940px كەڭلىكتە ، پەقەت بىرلا تور بېكەت ياكى بەت تەمىنلىگەن مەركەزلىك ئورۇنلاشتۇرۇش <div class="container">.

<body>
  <div class = "قاچا" > 
    ...
  </div>
</body>

سۇيۇقلۇق ئورۇنلاشتۇرۇش

<div class="container-fluid">جانلىق بەت قۇرۇلمىسى ، min- ۋە max- كەڭلىكى ۋە سول تەرەپتىكى يان بالداقنى بېرىدۇ. ئەپ ۋە ھۆججەتلەر ئۈچۈن ناھايىتى ياخشى.

<div class = "قاچا-سۇيۇقلۇق" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <! - يانبالداق مەزمۇنى ->
    </div>
    <div class = "span10" > 
      <! - بەدەن مەزمۇنى ->
    </div>
  </div>
</div>

قوللايدىغان ئۈسكۈنىلەر

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

بەلگە	ئورۇنلاشتۇرۇش كەڭلىكى	ستون كەڭلىكى	كەڭلىك كەڭلىكى
ئەقلىي ئىقتىدارلىق تېلېفون	480px and below	سۇيۇق تۈۋرۈك ، مۇقىم كەڭلىك يوق
پورترېت تابلېتكىسى	480px دىن 768px غىچە	سۇيۇق تۈۋرۈك ، مۇقىم كەڭلىك يوق
مەنزىرە تاختا كومپيۇتېر	768px دىن 940px غىچە	44px	20px
سۈكۈتتىكى	940px and up	60px	20px
چوڭ ئېكران	1210px and up	70px	30px

ئۇلار نېمە قىلىدۇ

مېدىيا سوئاللىرى نىسبىتى ، كەڭلىكى ، كۆرسىتىش تىپى قاتارلىق بىر قاتار شەرتلەرگە ئاساسەن خاس CSS غا يول قويىدۇ ، ئەمما ئادەتتە ئەتراپى min-widthۋە max-width.

تورىمىزدا ئىستوننىڭ كەڭلىكىنى ئۆزگەرتىڭ
زۆرۈر تېپىلغاندا لەيلىمە ئورنىدا ئېلېمېنتلارنى تىزىڭ
ئۈسكۈنىلەرگە تېخىمۇ ماس كېلىدىغان ماۋزۇ ۋە تېكىستنىڭ چوڭ-كىچىكلىكىنى ئۆزگەرتىڭ

مېدىيا سوئاللىرىنى ئىشلىتىش

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

تۈزۈلگەن ئىنكاسچان نەشرىنى ئىشلىتىڭ ، bootstrap-responsive.css
@Import "responsive.less" نى قوشۇڭ ۋە Bootstrap نى قايتا يېزىڭ
جاۋاب قايتۇرۇڭ

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

  // مەنزىرە تېلېفونى ۋە ئاستى
  @media ( max - width : 480px ) { ... }     
 
  // مەنزىرىلىك تېلېفون تاختا كومپيۇتېر
  @media ( max - width : 768px ) { ... }     
 
  // مەنزىرە ۋە ئۈستەل يۈزىگە رەسىملىك تاختا كومپيۇتېر
  @media ( min - width : 768px ) and ( max - width : 940px ) { ... }        
 
  // چوڭ ئۈستەل
  @media ( min - width : 1200px ) { .. }