Scaffolding

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

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

<! DOCTYPE html>
<html lang = "en" > 
  ...
</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 كۆرۈنۈشنىڭ ئاستىدا ، تۈۋرۈكلەر سۇيۇقلۇق بولۇپ تىك ھالەتتە تىزىلىدۇ.

ئاساسىي تور HTML

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

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

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

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

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

3 offset 2

3 offset 1

3 offset 2

6 offset 3

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</div>

ئۇۋا تۈۋرۈكى

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

1-دەرىجە

2-دەرىجە

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

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

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

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

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

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

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

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

4 offset 4

3 offset 3

6 offset 6

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</div>

سۇيۇق ئۇۋا

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

Fluid 12

Fluid 6

<div class = "row-fluid" > 
  <div class = "span12" > 
    Fluid 12
    <div class = "row-fluid" > 
      <div class = "span6" > 
        Fluid 6
        <div class = "row-fluid" > 
          <div class = "span6" > سۇيۇقلۇق 6 </div> 
          <div class = "span6" > سۇيۇقلۇق 6 </div> 
        </div>
      </div>
      <div class = "span6" > سۇيۇقلۇق 6 </div> 
    </div>
  </div>
</div>

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

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

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

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

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

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

ئىنكاسچان ئىقتىدارلارنى قوزغىتىش

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

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0" >  
<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	سۇيۇق تۈۋرۈك ، مۇقىم كەڭلىك يوق

/ * چوڭ ئۈستەل *
@media ( min - width : 1200px ) { ... }     
 
/ * مەنزىرە ۋە ئۈستەل يۈزىدىكى تاختا كومپيۇتېر * /
@media ( min - width : 768px ) and ( max - width : 979px ) { ... }        
 
/ * مەنزىرە تېلېفونى تاختا كومپيۇتېرنىڭ سۈرىتى * /
@media ( max - width : 767px ) { ... }     
 
/ * مەنزىرە تېلېفونلىرى ۋە ئاستى * /
@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
ئۈستەل يۈزى✔ ئۈستەلئۈستى

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