Bootstrap

Scaffolding

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

CSS نى ئەسلىگە كەلتۈرۈش ، مەتبەئە ۋە ئۇلىنىشلارنىڭ يەرشارى ئۇسلۇبى

HTML5 تەلىپىنى تەلەپ قىلىدۇ

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

  1. <! DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

مەتبەئە ۋە ئۇلىنىش

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

  • بەدەندىكى گىرۋەكنى ئېلىڭ
  • تەڭشەك background-color: white;_body
  • @baseFontFamily، @baseFontSizeۋە @baseLineHeightخاسلىقلارنى بىزنىڭ باسما ئاساسىمىز قىلىپ ئىشلىتىڭ
  • يەر شارى ئۇلىنىش رەڭگىنى بەلگىلەڭ @linkColorۋە ئۇلىنىش ئاستى سىزىقىنىلا ئىشلىتىڭ:hover

نورماللاشتۇرۇش ئارقىلىق ئەسلىگە كەلتۈرۈش

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

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

سۈكۈتتىكى تور سىستېمىسى 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 ستونلار ئارىسىدىكى سەلبىي بوشلۇق

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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ئۇلار نېمە؟

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

قاچان ئىشلىتىش

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

مەسىلەن ، سىز <select>كۆچمە ئورۇنلاشتۇرۇشلاردا nav ئۈچۈن ئېلېمېنت كۆرسىتىشىڭىز مۇمكىن ، ئەمما تاختا كومپيۇتېر ياكى ئۈستەل يۈزىدە ئەمەس.

قوللاش دەرسلىرى

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

سىنىپ تېلېفون480px and below تاختا كومپيۇتېر767px and below ئۈستەل يۈزى768px ۋە ئۇنىڭدىن يۇقىرى
.visible-phone كۆرگىلى بولىدۇ
.visible-tablet كۆرگىلى بولىدۇ
.visible-desktop كۆرگىلى بولىدۇ
.hidden-phone كۆرگىلى بولىدۇ كۆرگىلى بولىدۇ
.hidden-tablet كۆرگىلى بولىدۇ كۆرگىلى بولىدۇ
.hidden-desktop كۆرگىلى بولىدۇ كۆرگىلى بولىدۇ

سىناق دېلو

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

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

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

  • تېلېفون✔ تېلېفون
  • تاختا كومپيۇتېر✔ Tablet
  • ئۈستەل يۈزى✔ ئۈستەلئۈستى

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

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

  • تېلېفون✔ تېلېفون
  • تاختا كومپيۇتېر✔ Tablet
  • ئۈستەل يۈزى✔ ئۈستەلئۈستى