Bootstrap

Scaffolding

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

سۈكۈتتىكى تور سىستېمىسى 12 تۈۋرۈك ئىنكاس قايرىلىدۇ

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

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

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

  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

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


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

4
4 offset 4
3 offset 3
3 offset 3
8 offset 4 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

ئۇۋا تۈۋرۈكى

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

مىسال

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

1-دەرىجە
2-دەرىجە
2-دەرىجە 
  1. <div class = "row" > 
  2.   <div class = "span12" > 
  3.     1-دەرىجە
  4.     <div class = "row" > 
  5.       <div class = "span6" > 2-دەرىجە </div> 
  6.       <div class = "span6" > 2-دەرىجە </div> 
  7.     </div>
  8.   </div>
  9. </div>

سۇيۇق تور سىستېمىسى 12 ئىنكاسچان ، پىرسەنتلىك تۈۋرۈك

سۇيۇق تۈۋرۈك

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

پېكسىل ئەمەس

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

سۇيۇق قۇر

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

Markup

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

سۇيۇق ئۇۋا

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

Fluid 12
Fluid 6
Fluid 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     1-دەرىجە
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > 2-دەرىجە </div> 
  6.       <div class = "span6" > 2-دەرىجە </div> 
  7.     </div>
  8.   </div>
  9. </div>

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

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

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

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

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

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

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

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

تور بەت قۇرۇشتىكى ئاساسىي قېلىپلار

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

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

  1. <body>
  2.   <div class = "قاچا" > 
  3.     ...
  4.   </div>
  5. </body>

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

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

  1. <div class = "قاچا-سۇيۇقلۇق" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <! - يانبالداق مەزمۇنى ->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <! - بەدەن مەزمۇنى ->
  8.     </div>
  9.   </div>
  10. </div>

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

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

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

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

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

مېتا بەلگىسىنى تەلەپ قىلىدۇ

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

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

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

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

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

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

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

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

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

  1.   // مەنزىرە تېلېفونى ۋە ئاستى
  2.   @media ( max - width : 480px ) { ... }     
  3.  
  4.   // مەنزىرىلىك تېلېفون تاختا كومپيۇتېر
  5.   @media ( max - width : 768px ) { ... }     
  6.  
  7.   // مەنزىرە ۋە ئۈستەل يۈزىگە رەسىملىك ​​تاختا كومپيۇتېر
  8.   @media ( min - width : 768px ) and ( max - width : 980px ) { ... }        
  9.  
  10.   // چوڭ ئۈستەل
  11.   @media ( min - width : 1200px ) { .. }