Bootstrap, from Twitter

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

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

Hotlink the CSS

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

ئۇنى ئاز ئىشلىتىڭ

ئاز ئىشلىتىش ھەۋەسكارى؟ چاتاق يوق ، پەقەت repo نى كلونلاپ بۇ قۇرلارنى قوشۇڭ:

GitHub دىكى Fork

Github دىكى رەسمىي Bootstrap repo ئارقىلىق چۈشۈرۈش ، چاتاش ، تارتىش ، ھۆججەت مەسىلىسى ۋە باشقىلار.

GitHub دىكى Bootstrap »

تارىخ

Twitter نىڭ دەسلەپكى كۈنلىرىدە ، ئىن ers ېنېرلار ئۆزى بىلىدىغان ھەرقانداق كۇتۇپخانىنى ئىشلىتىپ ، ئالدىنقى قاتاردىكى تەلەپلەرنى قاندۇردى. Bootstrap Twitter دىكى تۇنجى Hackweek دەۋرىدە ئوتتۇرىغا قويۇلغان ۋە تەرەققىيات تېزلەشكەن خىرىسلارغا جاۋاب سۈپىتىدە باشلانغان.

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

Dev.twitter.com دا تېخىمۇ كۆپ ئوقۇڭ

توركۆرگۈنى قوللاش

Bootstrap Chrome ، Safari ، Internet Explorer ۋە Firefox قاتارلىق ئاساسلىق زامانىۋى توركۆرگۈچلەردە سىناق قىلىنغان ۋە قوللانغان.

ئەڭ يېڭى سافارى
ئەڭ يېڭى Google Chrome
Firefox 4+
Internet Explorer 7+

نېمىلەرنى ئۆز ئىچىگە ئالىدۇ

Bootstrap تۈزۈلگەن CSS ، تولۇقلانمىغان ۋە ئۈلگە قېلىپلىرى بىلەن تولۇق.

بارلىق ئەسلى .سىز ھۆججەتلەر
CSS نى تولۇق تۈزدى ۋە كىچىكلەتتى
مۇكەممەل ئۇسلۇبتىكى ھۆججەتلەر
مىسال بەت قېلىپى (پات يېقىندا كېلىدۇ)

كۆڭۈلدىكى تور

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

كاتەكچە بەلگە

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

<div class = "row">
  <div class = "span6 ستون" >   
    ...
  </div>
  <div class = "span10 ستون" >   
    ...
  </div>
</div>

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

8 offset 4

4 offset 4

5 offset 3

10 offset 6

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

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

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

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

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

<body>
  <div class = "قاچا-سۇيۇقلۇق" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "مەزمۇن" > 
      ...
    </div>
  </div>
</body>

ماۋزۇ ۋە كۆپەيتىلگەن

تور بەتلىرىڭىزنى تۈزۈشنىڭ ئۆلچەملىك تىپىك قاتلاملىرى.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6

مىسال ئابزاس

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur مەسخىرە مۇس. Nullam id dolor id nibh ئۇلترا ماشىنىلىرى ut id elit.

مىسال ماۋزۇسىنىڭ تارماق ماۋزۇسى بار…

Misc. ئېلېمېنتلار

تەكىتلەش ، ئادرېس ۋە قىسقارتىلمىلارنى ئىشلىتىش

<strong> <em> <address> <abbr>

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

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

بىر ئابزاسقا ئەھمىيەت بېرىش

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

ئەسكەرتىش:<b> HTML5 دا ئىشلىتىش ۋە بەلگە ئىشلىتىش يەنىلا ياخشى <i>، ئەمما ئۇلار ئەسلى ئۇسلۇب بىلەن كەلمەيدۇ. <b>قوشۇمچە ئەھمىيەت بەرمەي تۇرۇپ سۆز ياكى ئىبارىلەرنى گەۋدىلەندۈرۈشنى مەقسەت قىلىدۇ ، ھالبۇكى <i>كۆپىنچە ئاۋاز ، تېخنىكىلىق ئاتالغۇ قاتارلىقلار.

ئادرېس

بۇ <address>ئېلېمېنت ئەڭ يېقىن ئەجدادلىرى ياكى پۈتۈن خىزمەت گەۋدىسى ئۈچۈن ئالاقىلىشىش ئۇچۇرلىرىغا ئىشلىتىلىدۇ. ئۇنىڭ قانداق كۆرۈنۈشى:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

ئەسكەرتىش: مەزمۇندىكى ھەر بىر قۇر <address>چوقۇم بىر قۇر ئۈزۈش ( <br />) بىلەن ئاخىرلىشىشى ياكى بۆلەك دەرىجىلىك بەلگە (مەسىلەن ، <p>) بىلەن ئورالغان بولۇپ ، مەزمۇننى مۇۋاپىق تەشكىللىشى كېرەك.

قىسقارتىلما

قىسقارتىلمىسى ۋە قىسقارتىلمىسى ئۈچۈن خەتكۈچنى ئىشلىتىڭ ( <abbr>HTML5 دە ۋاقتى ئۆتكەن ). خەتكۈچ جەدۋىلىنى خەتكۈچنىڭ ئىچىگە قويۇپ ، تولۇق ئىسىمغا ماۋزۇ قويۇڭ.<acronym>

Blockquotes

<blockquote> <p> <small>

نەقىل كەلتۈرۈش

بىر بۆلەكنى ئۆز ئىچىگە ئېلىش ، ئوراش ۋە خەتكۈچلەرنى ئوراش <blockquote>. ئېلېمېنتنى ئىشلىتىپ مەنبەڭىزنى نەقىل كەلتۈرۈڭ ، ئۇنىڭدىن بۇرۇن em dash غا ئېرىشىسىز .<p><small><small>—

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

تىزىملىك

تەرتىپسىز`<ul>`

Lorem ipsum dolor amet
Consectetur adipiscing elit
ماسسادىكى پۈتۈن مۇتلەق لورېم
پرەزيدەنت isسوزدەرى
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
پورتېرنىڭ لورېمىنى ئېلىڭ

Unstyled`<ul.unstyled>`

Lorem ipsum dolor amet
Consectetur adipiscing elit
ماسسادىكى پۈتۈن مۇتلەق لورېم
پرەزيدەنت isسوزدەرى
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
پورتېرنىڭ لورېمىنى ئېلىڭ

زاكاز قىلىندى`<ol>`

Lorem ipsum dolor amet
Consectetur adipiscing elit
ماسسادىكى پۈتۈن مۇتلەق لورېم
پرەزيدەنت isسوزدەرى
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
پورتېرنىڭ لورېمىنى ئېلىڭ

چۈشەندۈرۈش`dl`

چۈشەندۈرۈش تىزىملىكى: چۈشەندۈرۈش تىزىملىكى ئاتالغۇلارنى ئېنىقلاشقا ناھايىتى ماس كېلىدۇ.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida eget metus.
Malesuada porta: Etiam porta sem maleuada magna mollis euismod.

جەدۋەل قۇرۇش

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

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

ئىستون بېشىنى ھەمىشە قاتلاملىق <thead>>> دەپ <thead>ئوراپ قويۇڭ .<tr><th>

ستون ماۋزۇسىغا ئوخشاش ، ئۈستەل يۈزىڭىزنىڭ بارلىق مەزمۇنلىرى ئورالغان بولۇشى كېرەك ، <tbody>شۇڭا قاتلاملىرىڭىز <tbody>>> .<tr><td>

مىسال: كۆڭۈلدىكى جەدۋەل ئۇسلۇبى

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

#	بىرىنچى ئىسمى	فامىلىسى	تىل
1	بەزىلىرى	بىرى	ئىنگىلىزچە
2	جو	Sixpack	ئىنگىلىزچە
3	Stu	Dent	كود

<table class = "common-table"> class = "common-table" >
  ...
</table>

مىسال: زەبرا سىزىقلىق

جەدۋەللىرىڭىزنى قوشۇش ئارقىلىق ئۈستەللىرىڭىز بىلەن ئازراق ھۇزۇرلىنىڭ - .zebra-stripedدەرسنى قوشۇڭ.

#	بىرىنچى ئىسمى	فامىلىسى	تىل
1	بەزىلىرى	بىرى	ئىنگىلىزچە
2	جو	Sixpack	ئىنگىلىزچە
3	Stu	Dent	كود

ئەسكەرتىش: Zebra-striping بولسا IE8 ۋە ئۇنىڭدىن تۆۋەن كونا توركۆرگۈچلەردە ئىشلەتكىلى بولمايدىغان ئىلغار ئىلگىرىلەش.

<table class = "common-table zebra-striped"> class = "common-table zebra-striped" >
...
</table>

مىسال: Zebra- سىزىقلىق w / TableSorter.js

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

#	بىرىنچى ئىسمى	فامىلىسى	تىل
1	سىزنىڭ	بىرى	ئىنگىلىزچە
2	جو	Sixpack	ئىنگىلىزچە
3	Stu	Dent	كود

<script src = "js / jquery / jquery.tablesorter.min.js"> </script> src = "js / jquery / jquery.tablesorter.min.js" > </script>
<script > 
  $ ( function () { 
    $ ( "جەدۋەل # sortTableExample" ). جەدۋەل ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "common-table zebra-striped" > 
  ...
</table>

مۇقىم بالداق

ئۇ نېمە؟

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

خاسلاشتۇرغىلى بولىدۇ

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

تامچە ئۆز ئىچىگە ئالىدۇ

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

بەتكۈچ ۋە دورىلار

ئا بىلەن ئاددىي ئىككىلەمچى يول باشلاڭ <ul>. مۇناسىپ دەرس قوشۇش ئارقىلىق بەتكۈچ ياكى دورىلار ئارىسىدا ئالماشتۇرۇڭ.

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

<ul class = "بەتكۈچ"> class = "tabs" >
  <li class = "active" > <a href = "#"> باش بەت </a> </li >  
  <li> <a href = "#"> ئارخىپ </a> </li> 
  <li> <a href = "#"> ئۇچۇرلار </a> </li> 
  <li> <a href = "#"> تەڭشەكلەر </a> </li > 
  <li> <a href = "#"> ئالاقىلىشىش </a> </li> 
</ul>

<ul class = "دورىلار"> class = "دورىلار" >
  <li class = "active" > <a href = "#"> باش بەت </a> </li >  
  <li> <a href = "#"> ئارخىپ </a> </li> 
  <li> <a href = "#"> ئۇچۇرلار </a> </li> 
  <li> <a href = "#"> تەڭشەكلەر </a> </li > 
  <li> <a href = "#"> ئالاقىلىشىش </a> </li> 
</ul>

Pagination

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

<div class = "pagination"> class = "pagination" >
  <ul>
    <li class = "prev disabled" > <a href = "#"> & larr ; ئالدىنقى </a> </li>  
    <li class = "active" > <a href = "#"> 1 </a> </li >  
    <li> <a href = "#"> 2 </a> </li> 
    <li> <a href = "#"> 3 </a> </li> 
    <li> <a href = "#"> 4 </a> </li> 
    <li> <a href = "#"> 5 </a> </li> 
    <li class = "next" > <a href = "#"> كېيىنكى & rarr; </a> </li>  
  </ul>
</div>

ئاساسىي ئاگاھلاندۇرۇش

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

ئاھ! بۇنى ۋە بۇنى ئۆزگەرتىپ قايتا سىناڭ.

Holy gaucamole! ئەڭ ياخشىسى ئۆزىڭىزنى تەكشۈرۈڭ ، بەك ياخشى كۆرۈنمەيسىز.

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

Heads up! بۇ سىزنىڭ دىققىتىڭىزگە موھتاج ئاگاھلاندۇرۇش ، ئەمما ئۇ تېخى چوڭ ئىش ئەمەس.

ئۇچۇرلارنى توسۇش

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

ئاھ! خاتالىق تاپتىڭىز!بۇنى ۋە بۇنى ئۆزگەرتىپ قايتا سىناڭ. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus amet fermentum.

بۇ ھەرىكەتنى قىلىڭ ياكى بۇنى قىلىڭ

Holy gaucamole! بۇ بىر ئاگاھلاندۇرۇش!ئەڭ ياخشىسى ئۆزىڭىزنى تەكشۈرۈڭ ، بەك ياخشى كۆرۈنمەيسىز. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

بۇ ھەرىكەتنى قىلىڭ ياكى بۇنى قىلىڭ

ياخشى!سىز بۇ ئاگاھلاندۇرۇش ئۇچۇرىنى مۇۋەپپەقىيەتلىك ئوقۇدىڭىز. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur مەسخىرە مۇس. Maecenas faucibus mollis interdum.

بۇ ھەرىكەتنى قىلىڭ ياكى بۇنى قىلىڭ

Heads up!بۇ سىزنىڭ دىققىتىڭىزگە موھتاج ئاگاھلاندۇرۇش ، ئەمما ئۇ تېخى چوڭ ئىش ئەمەس.

بۇ ھەرىكەتنى قىلىڭ ياكى بۇنى قىلىڭ

Modals

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

قورال كۆرسەتمىلىرى

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

Lorem ipsum dolar sit amet illo خاتالىق ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus ئاقىۋەت ئاقىۋىتى ، ئاپتوماتىك تەبىئىي ئىلو ۋولۇپتام odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam Architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo volu.

تۆۋەندە!

توغرا!

left!

يۇقىرىدا!

Popovers

پوپايكىلارنى ئىشلىتىپ بەت يۈزىگە قوشۇمچە ئۇچۇرلارنى تەمىنلەڭ.

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

Bootstrap دا Preboot نى قانداق ئىشلەتكەنلىكىمىزنى ۋە كېيىنكى تۈردە ئازراق ئىجرا قىلىشنى تاللىسىڭىز ، ئۇنى قانداق ئىشلىتەلەيدىغانلىقىڭىزنى تەكشۈرۈپ بېقىڭ.

ئۇنى قانداق ئىشلىتىش

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

<link rel = "stylesheet / less" href = "less / bootstrap.less" media = "all" /> rel = "stylesheet / less" href = "less / bootstrap.less" media = "all" />   
<script src = "js / less-1.0.41.min.js" > </script>

.Js ھەل قىلىش چارىسىنى ھېس قىلمامسىز؟ كودىڭىزنى ئورۇنلاشتۇرغاندا ئازراق Mac دېتالىنى ئىشلىتىپ بېقىڭ ياكى Node.js نى ئىشلىتىڭ .

نېمىلەرنى ئۆز ئىچىگە ئالىدۇ

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

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

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

// ئۇلىنىش
@linkColor : # 8b59c2;         
@linkColorHover :     قاراڭغۇ ( @linkColor , 10 ); 
// كۈلرەڭ
@black : # 000;             
@grayDark :           يەڭگىل ( @black , 25 %); 
@gray :               يەڭگىل ( @black , 50 %); 
@grayLight :          يەڭگىل ( @black , 70 %); 
@grayLighter :        يەڭگىل ( @black , 90 %); 
@ ئاق : #fff;             
// Accent Colors
@blue : # 08b5fb;              
@ يېشىل : # 46a546 ;             
@red : # 9d261d;               
@yellow : # ffc40d;            
@orange : # f89406;            
@pink : # c3325f;              
@purple : # 7a43b6;            
// Baseline
@baseline : 20px ;

باھا بېرىش

Less يەنە CSS نىڭ نورمال گرامماتىكىسىدىن باشقا يەنە بىر خىل باھا بېرىش ئۇسلۇبى بىلەن تەمىنلەيدۇ /* ... */.

// بۇ بىر باھا
/ * بۇمۇ بىر باھا * /

Wazoo نى ئارىلاشتۇرۇڭ

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

خەت نۇسخىسى

#font {
  . shorthand ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - size : @size ; 
    خەت نۇسخىسى - ئېغىرلىقى : @weight ; 
    قۇر - ئېگىزلىكى : @lineHeight ; 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    خەت نۇسخىسى - ئائىلە : «Helvetica Neue» ، Helvetica ، Arial ، sans - serif ;   
    font - size : @size ; 
    خەت نۇسخىسى - ئېغىرلىقى : @weight ; 
    قۇر - ئېگىزلىكى : @lineHeight ; 
  }
  . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    خەت نۇسخىسى - ئائىلە : «گرۇزىيە» ، دەۋر يېڭى رومان ، ۋاقىت ، سان - serif ;     
    font - size : @size ; 
    خەت نۇسخىسى - ئېغىرلىقى : @weight ; 
    قۇر - ئېگىزلىكى : @lineHeight ; 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    خەت نۇسخىسى - ئائىلە : «موناكو» ، تېز يوللانما يېڭى ، مونوپول   
    font - size : @size ; 
    خەت نۇسخىسى - ئېغىرلىقى : @weight ; 
    قۇر - ئېگىزلىكى : @lineHeight ; 
  }
}

Gradients

#gradient {
  . توغرىسىغا ( @startColor : # 555, @endColor: # 333) { 
    تەگلىك - رەڭ : @endColor ; 
    تەگلىك - تەكرارلاش : تەكرارلاش - x ;
    تەگلىك - رەسىم : - khtml - تەدرىجىي ( سىزىقلىق ، سول ئۈستى ، ئوڭ ئۈستى ، ( @startColor ) دىن ، ( @endColor ) ) ; // Konqueror   
    تەگلىك - رەسىم : - moz - سىزىقلىق - تەدرىجىي ( سول ، @startColor , @endColor ); // FF 3.6+    
    تەگلىك - رەسىم : - ms - سىزىقلىق - تەدرىجىي ( سول ، @startColor , @endColor ); // IE10    
    تەگلىك - رەسىم : - webkit - تەدرىجىي ( سىزىقلىق ، سول ئۈستى ، ئوڭ ئۈستى ، رەڭ - توختاش ( 0 % ، @startColor ) ، رەڭ - توختىتىش ( 100 % ، @endColor )); // Safari 4+ ، Chrome 2+    
    تەگلىك - رەسىم : - webkit - سىزىقلىق - تەدرىجىي ( سول ، @startColor , @endColor ); // Safari 5.1+ ، Chrome 10+    
    تەگلىك - رەسىم : - o - سىزىقلىق - تەدرىجىي ( سول ، @startColor , @endColor ); // Opera 11.10    
    - ms - سۈزگۈچ : % ( "progid: DXImageTransform.Microsoft.gradient (startColorstr = '% d', endColorstr = '% d', GradientType = 1)" , @startColor , @endColor ); // IE8 +  
    سۈزگۈچ : e (% ( "progid: DXImageTransform.Microsoft.gradient (startColorstr = '% d', endColorstr = '% d', GradientType = 1)" , @startColor , @endColor )); // IE6 & IE7 
    تەگلىك - رەسىم : سىزىقلىق - تەدرىجىي ( سول ، @startColor , @endColor ); // Le standard   
  }
  . vertical ( @startColor : # 555, @endColor: # 333) { 
    تەگلىك - رەڭ : @endColor ; 
    تەگلىك - تەكرارلاش : تەكرارلاش - x ;
    تەگلىك - رەسىم : - khtml - تەدرىجىي ( سىزىقلىق ، سول ئۈستى ، سول ئاستى ، ( @startColor ) دىن ، ( @endColor ) ) ; // Konqueror   
    تەگلىك - رەسىم : - moz - سىزىقلىق - تەدرىجىي ( @startColor , @endColor ); // FF 3.6+   
    تەگلىك - رەسىم : - ms - سىزىقلىق - تەدرىجىي ( @startColor , @endColor ); // IE10   
    تەگلىك - رەسىم : - webkit - تەدرىجىي ( سىزىقلىق ، سول ئۈستى ، سول ئاستى ، رەڭ - توختاش ( 0 % ، @startColor ) ، رەڭ - توختىتىش ( 100 % ، @endColor )); // Safari 4+ ، Chrome 2+    
    تەگلىك - رەسىم : - webkit - سىزىقلىق - تەدرىجىي ( @startColor , @endColor ); // Safari 5.1+ ، Chrome 10+   
    تەگلىك - رەسىم : - o - سىزىقلىق - تەدرىجىي ( @startColor , @endColor ); // Opera 11.10   
    - ms - سۈزگۈچ : % ( "progid: DXImageTransform.Microsoft.gradient (startColorstr = '% d', endColorstr = '% d', GradientType = 0)" , @startColor , @endColor ); // IE8 +  
    سۈزگۈچ : e (% ( "progid: DXImageTransform.Microsoft.gradient (startColorstr = '% d', endColorstr = '% d', GradientType = 0)" , @startColor , @endColor )); // IE6 & IE7 
    تەگلىك - رەسىم : سىزىقلىق - تەدرىجىي ( @startColor , @endColor ); // ئۆلچەم  
  }
  . يۆنىلىشلىك ( @startColor : # 555, @endColor: # 333, @deg: 45deg) { 
    ...
  }
  . تىك - ئۈچ خىل رەڭ ( @startColor : # 00b3ee, @midColor : # 7a43b6, 
    ...
  }
}

مەشغۇلات ۋە تور سىستېمىسى

ھەشەمەتكە ئېرىشىپ ، ماتېماتىكىنى ئىجرا قىلىپ ، تۆۋەندىكىدەك جانلىق ۋە كۈچلۈك ئارىلاشمىلارنى ھاسىل قىلىڭ.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
// كاتەكچە سىستېمىسى
. قاچا {
  width : @siteWidth ; 
  margin : 0 auto ;  
  . clearfix ();
}
. ستونلار ( @columnSpan : 1 ) {  
  display : inline ; 
  float : left ;
  كەڭلىكى : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  margin - left : @gridGutterWidth ; 
  &: بىرىنچى - بالا {
    margin - left : 0 ; 
  }
}
. offset ( @columnOffset : 1 ) {  
  margin - left : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! مۇھىم _          
}

Bootstrap

Bootstrap, from Twitter

Hotlink the CSS

ئۇنى ئاز ئىشلىتىڭ

GitHub دىكى Fork

Bootstrap قىسقىچە تارىخى ، توركۆرگۈچنى قوللاش ۋە باشقىلار

تارىخ

توركۆرگۈنى قوللاش

نېمىلەرنى ئۆز ئىچىگە ئالىدۇ

كاتەكچە سىستېمىسى ئۆلچەملىك 940px نى تاشلاڭ ياكى ئۆزىڭىزنىڭ دومىلىتىڭ

كۆڭۈلدىكى تور

كاتەكچە بەلگە

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

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

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

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

مەتبەئە ماۋزۇلىرى ، ئابزاسلار ، تىزىملىكلەر ۋە باشقا سىزىق تىپىدىكى ئېلېمېنتلار

ماۋزۇ ۋە كۆپەيتىلگەن

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6

مىسال ئابزاس

مىسال ماۋزۇسىنىڭ تارماق ماۋزۇسى بار…

Misc. ئېلېمېنتلار

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

بىر ئابزاسقا ئەھمىيەت بېرىش

ئادرېس

قىسقارتىلما

Blockquotes

نەقىل كەلتۈرۈش

تىزىملىك

تەرتىپسىز<ul>

Unstyled<ul.unstyled>

زاكاز قىلىندى<ol>

چۈشەندۈرۈشdl

جەدۋەل ئۈچۈن ، ئۇنى پەرەز قىلدىڭىز ، جەدۋەل سانلىق مەلۇمات

جەدۋەل قۇرۇش

مىسال: كۆڭۈلدىكى جەدۋەل ئۇسلۇبى

مىسال: زەبرا سىزىقلىق

مىسال: Zebra- سىزىقلىق w / TableSorter.js

جەدۋەل

كۆڭۈلدىكى ئۇسلۇب

رەتلەنگەن جەدۋەللەر

كۇنۇپكىلار

مىسال كۇنۇپكىلىرى

باشقا چوڭلۇقى

چەكلەنگەن ھالەت

ئۇلىنىشلار

كۇنۇپكىلار

يول باشلاش

مۇقىم بالداق

تۈر ئىسمى

ئۇ نېمە؟

خاسلاشتۇرغىلى بولىدۇ

تامچە ئۆز ئىچىگە ئالىدۇ

بەتكۈچ ۋە دورىلار

Pagination

مۇۋەپپەقىيەت ، ئاگاھلاندۇرۇش ۋە خاتالىق ئۇچۇرى ياكى ئاگاھلاندۇرۇش ئۈچۈن ئاگاھلاندۇرۇش ۋە خاتالىق ئۇسلۇبى

ئاساسىي ئاگاھلاندۇرۇش

ئۇچۇرلارنى توسۇش

مودا ، قورال كۆرسەتمىسى ۋە پوپايكىلاردا مەزمۇننى كۆرسىتىدىغان زاپچاسلار

Modals

Modal Heading

قورال كۆرسەتمىلىرى

Popovers

Popover Title

ئۆزگەرگۈچى مىقدار ، ئارىلاشما ئىقتىدار ۋە ئىقتىدارلار بىلەن CSS قا ئازراق دەرىجىدىن تاشقىرى توك قاچىلاش ئارقىلىق Bootstrap نى ئىشلىتىڭ

ئۇنى قانداق ئىشلىتىش

نېمىلەرنى ئۆز ئىچىگە ئالىدۇ

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

باھا بېرىش

Wazoo نى ئارىلاشتۇرۇڭ

خەت نۇسخىسى

Gradients

مەشغۇلات ۋە تور سىستېمىسى

تەرتىپسىز`<ul>`

Unstyled`<ul.unstyled>`

زاكاز قىلىندى`<ol>`

چۈشەندۈرۈش`dl`