Bootstrap

Scaffolding

Bootstrap ئىنكاسچان 12 تۈۋرۈكلۈك تور ، ئورۇنلاشتۇرۇش ۋە زاپچاسلارغا قۇرۇلدى.

يەرشارى تەڭشەكلىرى

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

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

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

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

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

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

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

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

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

كۆڭۈلدىكى تور سىستېمىسى

نەق مەيدان كاتەكچە مىسالى

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

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

ئاساسىي تور HTML

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

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

.span4بۇ مىسالنى نەزەردە تۇتقاندا ، بىزدە .span812 ئومۇمىي ئىستون ۋە بىر قۇر قۇر بار.

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

.offset*دەرسلەرنى ئىشلىتىپ ئىستوننى ئوڭغا يۆتكەڭ . ھەر بىر سىنىپ بىر ئىستوننىڭ سول گىرۋىكىنى بىر ئىستونغا ئۆستۈرىدۇ. مەسىلەن ، تۆت ئىستوندىن .offset4يۆتكىلىدۇ ..span4

4
3 offset 2
3 offset 1
3 offset 2
6 offset 3 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

ئۇۋا تۈۋرۈكى

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

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

سۇيۇق تور سىستېمىسى

جانلىق سۇيۇقلۇق تورى مىسالى

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

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

ئاساسىي سۇيۇقلۇق تورى HTML

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

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

سۇيۇقلۇقنى تولۇقلاش

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

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

سۇيۇق ئۇۋا

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

Fluid 12
Fluid 6
Fluid 6
Fluid 6
Fluid 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Fluid 12
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > 
  6.         Fluid 6
  7.         <div class = "row-fluid" > 
  8.           <div class = "span6" > سۇيۇقلۇق 6 </div> 
  9.           <div class = "span6" > سۇيۇقلۇق 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > سۇيۇقلۇق 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

ئورۇنلاشتۇرۇش

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

پەقەت تەلەپ قىلىنغان ئورتاق مۇقىم كەڭلىك (ۋە ئىختىيارى ئىنكاسچان) ئورۇنلاشتۇرۇش بىلەن تەمىنلەيدۇ <div class="container">.

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

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

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

  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 نى ئېچىڭ <head>. ئەگەر سىز خاسلاشتۇرۇش بېتىدىن Bootstrap نى تۈزگەن بولسىڭىز ، پەقەت مېتا بەلگىسىنىلا ئۆز ئىچىگە ئېلىشىڭىز كېرەك.

  1. <meta name = "viewport" content = "width = device-width, initial-scale = 1.0" >  
  2. <link href = "مۈلۈك / css / bootstrap-responsive.css" rel = "ئۇسلۇب جەدۋىلى" >

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

ئىنكاسچان Bootstrap ھەققىدە

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

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

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

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

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

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

بەلگە ئورۇنلاشتۇرۇش كەڭلىكى ستون كەڭلىكى كەڭلىك كەڭلىكى
چوڭ ئېكران 1200px and up 70px 30px
سۈكۈتتىكى 980px and up 60px 20px
پورترېت تابلېتكىسى 768px ۋە ئۇنىڭدىن يۇقىرى 42px 20px
تاختا كومپيۇتېرغا تېلېفون 767px and below سۇيۇق تۈۋرۈك ، مۇقىم كەڭلىك يوق
تېلېفون 480px and below سۇيۇق تۈۋرۈك ، مۇقىم كەڭلىك يوق 
  1. / * چوڭ ئۈستەل *
  2. @media ( min - width : 1200px ) { ... }     
  3.  
  4. / * مەنزىرە ۋە ئۈستەل يۈزىدىكى تاختا كومپيۇتېر * /
  5. @media ( min - width : 768px ) and ( max - width : 979px ) { ... }        
  6.  
  7. / * مەنزىرە تېلېفونى تاختا كومپيۇتېرنىڭ سۈرىتى * /
  8. @media ( max - width : 767px ) { ... }     
  9.  
  10. / * مەنزىرە تېلېفونلىرى ۋە ئاستى * /
  11. @media ( max - width : 480px ) { ... }

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

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

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

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

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

مەسئۇلىيەتچان مۇلازىمەت سىناق دېلوسى

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

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

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

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

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

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

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