Etiam porta sem maleuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, eros at vestibulum.
Bootstrap بولسا Twitter دىكى توربېكەت ۋە تور بېكەتلەرنىڭ تەرەققىياتىغا باشلاش ئۈچۈن لايىھەلەنگەن قورال ئامبىرى.
ئۇ باسما ، شەكىل ، كۇنۇپكا ، جەدۋەل ، كاتەكچە ، يول باشلاش ۋە باشقا CSS ۋە HTML نى ئۆز ئىچىگە ئالىدۇ.
نېرۋا ئاگاھلاندۇرۇشى: Bootstrap Less بىلەن ياسالغان بولۇپ ، زامانىۋى توركۆرگۈچلەرنى كۆزدە تۇتۇپ دەرۋازىدىن چىقىپ ئىشلەش ئۈچۈن لايىھەلەنگەن.
ئەڭ تېز ۋە ئەڭ ئاسان باشلاش ئۈچۈن ، بۇ پارچىنى تور بېتىڭىزگە كۆچۈرۈڭ.
ئاز ئىشلىتىش ھەۋەسكارى؟ چاتاق يوق ، پەقەت repo نى كلونلاپ بۇ قۇرلارنى قوشۇڭ:
Github دىكى رەسمىي Bootstrap repo ئارقىلىق چۈشۈرۈش ، چاتاش ، تارتىش ، ھۆججەت مەسىلىسى ۋە باشقىلار.
نۆۋەتتە v1.3.0
تۋىتتېردىكى ئىنژېنېرلار تارىختىن بۇيان ئۆزىگە تونۇشلۇق بولغان بارلىق كۈتۈپخانىلارنى ئىشلىتىپ ، ئالدىنقى قاتاردىكى تەلەپلەرنى قاندۇردى. Bootstrap ئوتتۇرىغا قويۇلغان رىقابەتلەرگە جاۋاب سۈپىتىدە باشلىدى. نۇرغۇن قالتىس كىشىلەرنىڭ ياردىمىدە Bootstrap كۆرۈنەرلىك ئۆستى.
Dev.twitter.com دا تېخىمۇ كۆپ ئوقۇڭ
Bootstrap Chrome ، Safari ، Internet Explorer ۋە Firefox قاتارلىق ئاساسلىق زامانىۋى توركۆرگۈچلەردە سىناق قىلىنغان ۋە قوللانغان.
Bootstrap تۈزۈلگەن CSS ، تولۇقلانمىغان ۋە ئۈلگە قېلىپلىرى بىلەن تولۇق.
Bootstrap نىڭ بىر قىسمى سۈپىتىدە تەمىنلەنگەن سۈكۈتتىكى تور سىستېمىسى 940px كەڭلىكتىكى 16 ئىستون تورى. ئۇ مودا بولغان 960 تور سىستېمىسىنىڭ تەمى ، ئەمما سول ۋە ئوڭ تەرىپىگە قوشۇمچە پەرقى يوق.
بۇ يەردە كۆرسىتىلگەندەك ، ئىككى خىل «ستون» ئارقىلىق ئاساسىي ئورۇنلاشتۇرۇش ھاسىل قىلغىلى بولىدۇ ، ھەر بىرى تور تورىمىزنىڭ بىر قىسمى دەپ ئېنىقلىغان 16 ئاساسى ئىستوننىڭ بىر قانچەسىنى ئۆز ئىچىگە ئالىدۇ. تېخىمۇ كۆپ ئۆزگىرىشلەر ئۈچۈن تۆۋەندىكى مىساللارنى كۆرۈڭ.
- <div class = "row" >
- <div class = "span6" >
- ...
- </div>
- <div class = "span10" >
- ...
- </div>
- </div>
.row
ئەگەر بار بولغان ئىستون ئىچىدە قۇرۇش ئارقىلىق مەزمۇنلىرىڭىزنى ئۇۋا قىلىڭ .
- <div class = "row" >
- <div class = "span12" >
- 1-دەرىجە
- <div class = "row" >
- <div class = "span6" >
- 2-دەرىجە
- </div>
- <div class = "span6" >
- 2-دەرىجە
- </div>
- </div>
- </div>
- </div>
Bootstrap غا قاچىلانغان سۈكۈتتىكى 940px تور سىستېمىسىنى تەڭشەش ئۈچۈن بىر قانچە ئۆزگەرگۈچى مىقدار. ئازراق خاسلاشتۇرسىڭىز ، ستوننىڭ چوڭ-كىچىكلىكى ، ئۆستەڭلىرى ۋە ئۇلار تۇرۇۋاتقان قاچا-قۇچىلارنى ئۆزگەرتەلەيسىز.
تور سىستېمىسىنى ئۆزگەرتىشكە ئېھتىياجلىق ئۆزگەرگۈچى مىقدارلار ھازىر بار variables.less
.
ئۆزگىرىشچان | كۆڭۈلدىكى قىممىتى | چۈشەندۈرۈش |
---|---|---|
@gridColumns |
16 | تور ئىچىدىكى ئىستون سانى |
@gridColumnWidth |
40px | تور ئىچىدىكى ھەر بىر ئىستوننىڭ كەڭلىكى |
@gridGutterWidth |
20px | ھەر بىر ئىستون ئارىسىدىكى مەنپىي بوشلۇق |
@siteWidth |
بارلىق ئىستون ۋە ئۆستەڭلەرنىڭ يىغىندىسى | بىز بىر قىسىم ئاساسىي ماس ھالقىلارنى ئىشلىتىپ تۈۋرۈك ۋە ئۆستەڭ سانىنى ساناپ ، ئارىلاشما كەڭلىكنى بەلگىلەيمىز .fixed-container() . |
كاتەكچىنى ئۆزگەرتىش ئۈچ @grid-*
ئۆزگەرگۈچى مىقدارنى ئۆزگەرتىش ۋە ئاز ھۆججەتلەرنى قايتا ھاسىل قىلىشنى كۆرسىتىدۇ.
Bootstrap غا 24 ئىستونغىچە بولغان تور سىستېمىسى بىر تەرەپ قىلىنىدۇ. سۈكۈتتىكىسى ئاران 16.
- @gridColumns : 24 ;
- @gridColumnWidth : 20px ;
- @gridGutterWidth : 20px ;
قايتا ئويلانغاندىن كېيىن ، تەڭشەلدىڭىز!
سۈكۈتتىكى ۋە ئاددىي 940px كەڭلىكتە ، پەقەت بىرلا تور بېكەت ياكى بەت تەمىنلىگەن مەركەزلىك ئورۇنلاشتۇرۇش <div.container>
.
- <body>
- <div class = "قاچا" >
- ...
- </div>
- </body>
كىچىك ، ئەڭ چوڭ كەڭلىك ۋە سول تەرەپ يان بالداق بىلەن جانلىق ، ئەۋرىشىم سۇيۇقلۇق بەت قۇرۇلمىسى. ئەپ ۋە ھۆججەتلەر ئۈچۈن ناھايىتى ياخشى.
- <body>
- <div class = "قاچا-سۇيۇقلۇق" >
- <div class = "sidebar" >
- ...
- </div>
- <div class = "مەزمۇن" >
- ...
- </div>
- </div>
- </body>
تور بەتلىرىڭىزنى تۈزۈشنىڭ ئۆلچەملىك تىپىك قاتلاملىرى.
پۈتكۈل مەتبەئە تورى بىزنىڭ ئۆزگەرگۈچى مىقدارلىرىمىزدىكى ئىككى ئاز ئۆزگەرگۈچى مىقدارنى ئاساس @basefont
قىلىدۇ @baseline
. بىرىنچىسى ، ئىشلىتىلگەن ئاساسىي خەت چوڭلۇقى ، ئىككىنچىسى ئاساسى سىزىق ئېگىزلىكى.
بىز بۇ ئۆزگەرگۈچى مىقدارلارنى ۋە بىر قىسىم ماتېماتىكىنى ئىشلىتىپ ، بارلىق تىپلىرىمىزنىڭ گىرۋەكلىرى ، تاختىلىرى ۋە سىزىق ئېگىزلىكىنى ھاسىل قىلىمىز.
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.
تەكىتلەش ، ئادرېس ۋە قىسقارتىلمىلارنى ئىشلىتىش
<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>
ئېلېمېنت ئەڭ يېقىن ئەجدادلىرى ياكى پۈتۈن خىزمەت گەۋدىسى ئۈچۈن ئالاقىلىشىش ئۇچۇرلىرىغا ئىشلىتىلىدۇ. ئۇنى قانداق ئىشلىتىشنىڭ ئىككى مىسالى بار:
ئەسكەرتىش: مەزمۇندىكى ھەر بىر قۇر <address>
چوقۇم بىر قۇر ئۈزۈش ( <br />
) بىلەن ئاخىرلىشىشى ياكى بۆلەك دەرىجىلىك بەلگە (مەسىلەن ، <p>
) بىلەن ئورالغان بولۇپ ، مەزمۇننى مۇۋاپىق تەشكىللىشى كېرەك.
قىسقارتىلمىسى ۋە قىسقارتىلمىسى ئۈچۈن خەتكۈچنى ئىشلىتىڭ ( <abbr>
HTML5 دە ۋاقتى ئۆتكەن ). خەتكۈچ جەدۋىلىنى خەتكۈچنىڭ ئىچىگە قويۇپ ، تولۇق ئىسىمغا ماۋزۇ قويۇڭ.<acronym>
<blockquote>
<p>
<small>
بىر بۆلەكنى ئۆز ئىچىگە ئېلىش ، ئوراش ۋە خەتكۈچلەرنى ئوراش <blockquote>
. ئېلېمېنتنى ئىشلىتىپ مەنبەڭىزنى نەقىل كەلتۈرۈڭ ، ئۇنىڭدىن بۇرۇن em dash غا ئېرىشىسىز .<p>
<small>
<small>
—
Lorem ipsum dolor amet ، كونسېرۋاتىپلىق ماسلاشتۇرغۇچى سەرخىل. پۈتۈن سان پوسېرې ئانتېن ۋېنېناتىس داپىبۇس پوسېرې مەخمەل ئالكېتىنى يوقىتىدۇ.
دوكتور جۇلىئۇس ھىببېرت
- <blockquote>
- <p> لورېم ئىپس دولور ئولتۇرۇش ئامېتى ، كونسېرۋاتىپلىق ماسلاشتۇرغۇچى سەرخىل. پۈتۈن سان پوسېرې ئانتېن ۋېنېناتىس داپىبۇس پوسېرې مەخمەل ئالكېتىنى يوقىتىدۇ. </p>
- <small> دوكتور جۇلىئۇس ھىببېرت </small>
- </blockquote>
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
ئىككى ئاددىي خەتكۈچ بىلەن كودىڭىزنى ئۇسلۇبتا بېسىڭ. Javascript ئارقىلىق تېخىمۇ قالتىس بولۇش ئۈچۈن ، گۇگۇلنىڭ كودىنى چىرايلىق كۈتۈپخانىغا تاشلاڭ.
كود ، بۆلەكلەر ياكى پەقەت ئۈزۈندىلەرلا بولۇپ ، ئوڭ خەتكۈچكە ئوراپلا ئۇسلۇب بىلەن كۆرسەتكىلى بولىدۇ. كۆپ قۇرنى ئۆز ئىچىگە ئالغان كود بۆلەكلىرى ئۈچۈن <pre>
ئېلېمېنتنى ئىشلىتىڭ. ئىچكى كود ئۈچۈن <code>
ئېلېمېنتنى ئىشلىتىڭ.
ئېلېمېنت | نەتىجىدە |
---|---|
<code> |
مۇشۇنىڭغا ئوخشاش بىر قۇر تېكىستتە ، ئورالغان كودىڭىز بۇ <html> ئېلېمېنتقا ئوخشايدۇ. |
<pre> |
<div> <h1> ماۋزۇ </ h1> <p> بۇ يەردە بىر نەرسە ... </p> </div> ئەسكەرتىش: بەلگە ئىچىدىكى كودلارنى |
<pre class="prettyprint"> |
Google-code-prettify كۈتۈپخانىسىنى ئىشلىتىپ ، كود بۆلەكلىرىڭىز سەل ئوخشىمايدىغان كۆرۈنۈش ئۇسلۇبى ۋە ئاپتوماتىك گرامماتىكىلىق يورۇتۇشقا ئېرىشىدۇ. <div> <h1> ماۋزۇ </ h1> <p> بۇ يەردە بىر نەرسە ... </p> </div> Google-code-prettify نى چۈشۈرۈپ ، ئىشلىتىش ئۇسۇلىنى ئوقۇڭ. |
<span class="label">
بەدىنىڭىزدىكى ھەر قانداق جۈملىلەرگە دىققەت قىلىڭ ياكى بايراق قىلىڭ.
ئەزەلدىن ئاشۇ ئېسىل يېڭىدىن بىرىگە ئېھتىياجلىق! ياكى كود يازغاندا مۇھىم بايراقلارمۇ؟ ياخشى ، ھازىر سىزدە بار. بۇ سۈكۈتتىكى مەزمۇننى ئۆز ئىچىگە ئالىدۇ:
بەلگە | نەتىجىدە |
---|---|
<span class="label">Default</span> |
سۈكۈتتىكى |
<span class="label success">New</span> |
يېڭى |
<span class="label warning">Warning</span> |
ئاگاھلاندۇرۇش |
<span class="label important">Important</span> |
مۇھىم |
<span class="label notice">Notice</span> |
دىققەت |
تۆۋەن دەرىجىدىكى HTML ئىزى ۋە ئەڭ كىچىك ئۇسلۇبتىكى بەتلەردە ئوخشىمىغان چوڭلۇقتىكى كىچىك كۆرۈنۈشلەرنى كۆرسىتىڭ.
كىچىك كۆرۈنۈشتىكى كىچىك كۆرۈنۈشلەر .media-grid
ھەر قانداق چوڭلۇقتا بولىدۇ ، ئەمما ئۇلار بىۋاسىتە قاچىلانغان Bootstrap تور سىستېمىسىغا بىۋاسىتە سىزىلغان ۋاقىتتا ئەڭ ياخشى ئىشلەيدۇ. رەسىمنىڭ كەڭلىكى 90 ، 210 ۋە 330 غا ئوخشاش بىر قانچە پېكسىل تاختا بىلەن بىرلەشتۈرۈلۈپ .span2
، .span4
ۋە .span6
ستون چوڭلۇقىغا تەڭ كېلىدۇ.
مېدىيا تورىنى ئىشلىتىش ئاسان ، بەلگە تەرىپىدە ئاددىي. ئۇلارنىڭ ئۆلچىمى پەقەت ئۆز ئىچىگە ئالغان رەسىملەرنىڭ چوڭ-كىچىكلىكىنى ئاساس قىلىدۇ.
- <ul class = "media-grid" >
- <li>
- <a href = "#"> _
- <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- <li>
- <a href = "#"> _
- <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- </ul>
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
جەدۋەل ناھايىتى ياخشى - نۇرغۇن ئىشلار ئۈچۈن. ئېسىل جەدۋەللەر پايدىلىق ، كېڭەيتىشچان ۋە ئوقۇشقا بولىدىغان (كود سەۋىيىسىدە) بىر ئاز بەلگە سۆيگۈسىگە موھتاج. بۇ يەردە ياردەم قىلىدىغان بىر قانچە ئۇسۇل بار.
ئىستون بېشىنى ھەمىشە قاتلاملىق <thead>
>> دەپ <thead>
ئوراپ قويۇڭ .<tr>
<th>
ستون ماۋزۇسىغا ئوخشاش ، ئۈستەل يۈزىڭىزنىڭ بارلىق مەزمۇنلىرى ئورالغان بولۇشى كېرەك ، <tbody>
شۇڭا قاتلاملىرىڭىز <tbody>
>> .<tr>
<td>
بارلىق جەدۋەللەر ئوقۇشقا كاپالەتلىك قىلىش ۋە قۇرۇلمىنى ساقلاشقا كاپالەتلىك قىلىش ئۈچۈن پەقەت مۇھىم چېگرالار بىلەنلا ئاپتوماتىك ئۇسلۇب قىلىنىدۇ. قوشۇمچە دەرس ياكى خاسلىق قوشۇشنىڭ ھاجىتى يوق.
# | بىرىنچى ئىسمى | فامىلىسى | تىل |
---|---|---|---|
1 | بەزىلىرى | بىرى | ئىنگىلىزچە |
2 | جو | Sixpack | ئىنگىلىزچە |
3 | Stu | Dent | كود |
- <table>
- ...
- </table>
تېخىمۇ قاتتىق بوشلۇقتا تېخىمۇ كۆپ سانلىق مەلۇمات تەلەپ قىلىدىغان جەدۋەللەرگە قويۇق تەمنى يېرىم كېسىدىغان قويۇق تەمنى ئىشلىتىڭ. ئۇنى سۈكۈتتىكى جەدۋەل ئۇسلۇبىغا ئوخشاش چېگرا ۋە زەبرا سىزىقلىرى بىلەن بىرلەشتۈرۈپ ئىشلىتىشكە بولىدۇ.
# | بىرىنچى ئىسمى | فامىلىسى | تىل |
---|---|---|---|
1 | بەزىلىرى | بىرى | ئىنگىلىزچە |
2 | جو | Sixpack | ئىنگىلىزچە |
3 | Stu | Dent | كود |
ئۈستەللىرىڭىزنى بۇلۇڭ-پۇچقاقلىرىغا توغرىلاپ ، ھەر تەرەپكە چېگرا قوشۇش ئارقىلىق سەل يۇمىلاق كۆرۈنۈڭ.
# | بىرىنچى ئىسمى | فامىلىسى | تىل |
---|---|---|---|
1 | بەزىلىرى | بىرى | ئىنگىلىزچە |
2 | جو | Sixpack | ئىنگىلىزچە |
3 | Stu | Dent | كود |
- <table class = "bordered-table" >
- ...
- </table>
جەدۋەللىرىڭىزنى قوشۇش ئارقىلىق ئۈستەللىرىڭىز بىلەن ئازراق ھۇزۇرلىنىڭ - .zebra-striped
دەرسنى قوشۇڭ.
# | بىرىنچى ئىسمى | فامىلىسى | تىل |
---|---|---|---|
1 | بەزىلىرى | بىرى | ئىنگىلىزچە |
2 | جو | Sixpack | ئىنگىلىزچە |
3 | Stu | Dent | كود |
span 4 ئىستون | |||
span 2 ئىستون | span 2 ئىستون |
ئەسكەرتىش: Zebra-striping بولسا IE8 ۋە ئۇنىڭدىن تۆۋەن كونا توركۆرگۈچلەردە ئىشلەتكىلى بولمايدىغان ئىلغار ئىلگىرىلەش.
- <table class = "zebra-striped" >
- ...
- </table>
ئالدىنقى مىسالنى ئالساق ، jQuery ۋە Tablesorter قىستۇرمىسى ئارقىلىق رەتلەش ئىقتىدارىنى تەمىنلەش ئارقىلىق جەدۋەللىرىمىزنىڭ ئىشلىتىلىشچانلىقىنى ئۆستۈرىمىز. تۈرنى ئۆزگەرتىش ئۈچۈن ھەر قانداق ئىستوننىڭ بېشىنى چېكىڭ.
# | بىرىنچى ئىسمى | فامىلىسى | تىل |
---|---|---|---|
2 | جو | Sixpack | ئىنگىلىزچە |
3 | Stu | Dent | كود |
1 | سىزنىڭ | بىرى | ئىنگىلىزچە |
- <script src = "js / jquery / jquery.tablesorter.min.js" > </script>
- <script >
- $ ( function () {
- $ ( "جەدۋەل # sortTableExample" ). جەدۋەل ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "zebra-striped" >
- ...
- </table>
بارلىق جەدۋەللەرنى ئوقۇشچان ۋە كېڭەيتىش شەكلىدە كۆرسىتىش ئۈچۈن سۈكۈتتىكى ئۇسلۇبلار بېرىلگەن. ئۇسلۇب تېكىست كىرگۈزۈش ، تاللاش تىزىملىكى ، تېكىست ، رادىئو كۇنۇپكىسى ۋە تەكشۈرۈش رامكىسى ۋە كۇنۇپكىلار ئۈچۈن تەمىنلەنگەن.
.form-stacked
جەدۋىلىڭىزنىڭ HTML غا قوشۇڭ ، ئۇلارنىڭ سول تەرىپىگە ئەمەس ، بەلكى ئۇلارنىڭ ئۈستى تەرىپىدە بەلگە بولىدۇ. ئەگەر شەكلىڭىز قىسقا بولسا ياكى ئېغىرراق جەدۋەللەرگە ئىككى ئىستون كىرگۈزسىڭىز ، بۇ ناھايىتى ياخشى ئىشلەيدۇ.
ماركىڭىزغا بىر قانچە دەرس قوشۇش ئارقىلىق ھەر قانداق input
شەكىل select
ياكى كەڭلىكنى خاسلاشتۇرۇڭ .textarea
V1.3.0 دىن باشلاپ ، شەكىل ئېلېمېنتلىرى ئۈچۈن تورنى ئاساس قىلغان چوڭ-كىچىكلىك سىنىپلىرىنى قوشتۇق. بۇلارنى ھازىرقى ۋە باشقا .mini
دەرسلەردىن .small
پايدىلىنىڭ.
ئەھدىنامە سۈپىتىدە كۇنۇپكىلار ھەرىكەتكە ئىشلىتىلىدۇ ، ھالبۇكى ئوبيېكتلارغا ئۇلىنىش ئىشلىتىلىدۇ. مەسىلەن ، «چۈشۈرۈش» بىر كۇنۇپكا ، «يېقىنقى پائالىيەت» ئۇلىنىش بولالايدۇ.
بارلىق كۇنۇپكىلار سۇس كۈلرەڭ ئۇسلۇبقا سۈكۈت قىلىدۇ ، ئەمما ئوخشىمىغان رەڭ ئۇسلۇبىغا بىر قاتار ئىقتىدارلىق دەرسلەرنى ئىشلىتىشكە بولىدۇ. بۇ دەرسلەر كۆك .primary
سىنىپ ، سۇس كۆك رەڭلىك .info
سىنىپ ، يېشىل .success
سىنىپ ۋە قىزىل .danger
سىنىپنى ئۆز ئىچىگە ئالىدۇ.
قوللانغان ھەر قانداق نەرسىگە كۇنۇپكا ئۇسلۇبىنى ئىشلىتىشكە بولىدۇ .btn
. ئادەتتە سىز بۇلارنىلا ئىشلىتىپ <a>
، ئېلېمېنتلارنى <button>
تاللىسىڭىز بولىدۇ. <input>
ئۇنىڭ قانداق كۆرۈنۈشى:
چوڭ ياكى كىچىك كۇنۇپكىلارمۇ؟ ئۇنىڭغا ئېرىشىڭ!
مەلۇم سەۋەبلەر تۈپەيلىدىن ئاكتىپلانمىغان ياكى ئەپ تەرىپىدىن چەكلەنگەن كۇنۇپكىلارغا چەكلەنگەن ھالەتنى ئىشلىتىڭ. ئۇ .disabled
ئۇلىنىش ۋە ئېلېمېنتلار ئۈچۈندۇر :disabled
.<button>
.alert-message
بىر ھەرىكەتنىڭ مەغلۇبىيىتى ، مۇمكىن بولغان مەغلۇبىيىتى ياكى مۇۋەپپەقىيىتىنى گەۋدىلەندۈرۈش ئۈچۈن بىر قۇر ئۇچۇرلار. بولۇپمۇ شەكىللەر ئۈچۈن پايدىلىق.
- <div class = "ئاگاھلاندۇرۇش-ئاگاھلاندۇرۇش" >
- <a class = "close" href = "#"> × </a> _
- <p> <strong> مۇقەددەس گاكامول! </ strong> ئەڭ ياخشى تەكشۈرۈڭ ، سىز بەك ياخشى كۆرۈنمەيسىز. </p>
- </div>
.alert-message.block-message
ئازراق چۈشەندۈرۈشنى تەلەپ قىلىدىغان ئۇچۇرلار ئۈچۈن بىزدە ئابزاس ئۇسلۇبى ئاگاھلاندۇرۇشى بار. بۇلار تېخىمۇ ئۇزۇن خاتالىق ئۇچۇرىنى كۆپۈككە ئايلاندۇرۇش ، ئىشلەتكۈچىنى ساقلىنىۋاتقان ھەرىكەتتىن ئاگاھلاندۇرۇش ياكى بۇ بەتكە تېخىمۇ ئەھمىيەت بېرىش ئۈچۈن ئۇچۇرلارنى كۆرسىتىشكە تولىمۇ ماس كېلىدۇ.
- <div class = "ئاگاھلاندۇرۇش-ئۇچۇر توسۇش-ئۇچۇر ئاگاھلاندۇرۇشى" >
- <a class = "close" href = "#"> × </a> _
- <p> <strong> مۇقەددەس گاكامول! بۇ بىر ئاگاھلاندۇرۇش! </ strong> ئەڭ ياخشى تەكشۈرۈڭ ، سىز بەك ياخشى كۆرۈنمەيسىز. Nulla vitae elit libero, a pharetra augue. مەدھىيە تاۋار كۇرسى ماگنا ، vel scelerisque nisl consectetur قاتارلىقلار. </p>
- <div class = "ئاگاھلاندۇرۇش-ھەرىكەت" >
- <a class = "btn small" href = "#"> بۇ ھەرىكەتنى قىلىڭ </a> <a class = "btn small" href = "#"> ياكى بۇنى قىلىڭ </a>
- </div>
- </div>
مودېللار - دىئالوگ ياكى چىراغ ساندۇقى ئارقا كۆرۈنۈشنى ساقلاپ قېلىش ئىنتايىن مۇھىم بولغان ئەھۋال ئاستىدا كونتېكىست ھەرىكەت ئۈچۈن ناھايىتى ياخشى.
بىر ئېسىل بەدەن…
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.
Etiam porta sem maleuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, eros at vestibulum.
Javascript نى Bootstrap كۈتۈپخانىسى بىلەن بىرلەشتۈرۈش تولىمۇ ئاسان. تۆۋەندە بىز ئاساسىي مەزمۇنلارنى كۆرۈپ ئۆتىمىز ۋە سىزنى باشلاش ئۈچۈن سىزگە قالتىس قىستۇرمىلار بىلەن تەمىنلەيمىز!
Bootstrap نىڭ بىر قىسىم ئاساسلىق زاپچاسلىرىنى jQuery ۋە Ender بىلەن ئىشلەيدىغان يېڭى ئىختىيارى قىستۇرمىلار بىلەن ھاياتقا ئېلىپ كىرىڭ . سىزنىڭ كونكرېت تەرەققىيات ئېھتىياجىڭىزغا ماس ھالدا ئۇلارنى كېڭەيتىشىڭىز ۋە ئۆزگەرتىشىڭىزنى تەۋسىيە قىلىمىز.
ھۆججەت | چۈشەندۈرۈش |
---|---|
bootstrap-modal.js | بىزنىڭ Modal قىستۇرمىسىمىز ئەنئەنىۋى مودېل js قىستۇرمىسىدىكى دەرىجىدىن تاشقىرى نېپىز! بىز پەقەت twitter دا تەلەپ قىلىدىغان يالىڭاچ ئىقتىدارلارنىلا ئۆز ئىچىگە ئېلىشقا ئالاھىدە كۆڭۈل بۆلدۇق. |
bootstrap-alerts.js | ئاگاھلاندۇرۇش قىستۇرمىسى ئاگاھلاندۇرۇشلارغا يېقىن ئىقتىدار قوشۇش ئۈچۈن دەرىجىدىن تاشقىرى كىچىك دەرس. |
bootstrap-dropdown.js | بۇ قىستۇرما bootstrap ئۈستى بالداق ياكى بەتكۈچ يولباشچىغا چۈشۈش ئۆز-ئارا تەسىر كۆرسىتىش ئۈچۈن. |
bootstrap-scrollspy.js | ScrollSpy قىستۇرمىسى bootstrap ئۈستى بالداققا سىيرىلما ئورۇنغا ئاساسەن ئاپتوماتىك يېڭىلاش nav نى قوشۇش ئۈچۈندۇر. |
bootstrap-buttons.js | ScrollSpy قىستۇرمىسى bootstrap ئۈستى بالداققا سىيرىلما ئورۇنغا ئاساسەن ئاپتوماتىك يېڭىلاش nav نى قوشۇش ئۈچۈندۇر. |
bootstrap-tabs.js | بۇ قىستۇرما يەرلىك مەزمۇنلار ئارقىلىق ۋېلىسىپىت مىنىش ئۈچۈن تېز ، ھەرىكەتچان بەتكۈچ ۋە دورا ئىقتىدارىنى قوشىدۇ. |
bootstrap-twipsy.js | Jason Frame يازغان ئېسىل jQuery.tipsy قىستۇرمىسىغا ئاساسەن; twipsy يېڭىلانغان نەشرى بولۇپ ، ئۇ رەسىمگە تايانمايدۇ ، كارتون ئۈچۈن css3 ئىشلىتىدۇ ، يەرلىك ماۋزۇ ساقلاشقا سانلىق مەلۇمات خاسلىقى! |
bootstrap-popover.js | قاڭقىش قىستۇرمىسى قوللىنىشچان پروگراممىڭىزغا قىستۇرما دېتال قوشۇش ئۈچۈن ئاددىي كۆرۈنمە يۈزى بىلەن تەمىنلەيدۇ. ئۇ boostrap-twipsy.js قىستۇرمىسىنى كېڭەيتىدۇ ، شۇڭا تۈرىڭىزگە پوپايكىلارنى قوشقاندا بۇ ھۆججەتنىمۇ تۇتۇڭ. |
ياق! Bootstrap ئالدى بىلەن CSS كۈتۈپخانىسى قىلىپ لايىھەلەنگەن. بۇ javascript ئۆز ئىچىگە ئالغان ئۇسلۇبلارنىڭ ئۈستىگە ئاساسىي ئۆز-ئارا تەسىر كۆرسىتىش قەۋىتى بىلەن تەمىنلەيدۇ.
قانداقلا بولمىسۇن ، javascript غا ئېھتىياجلىق كىشىلەر ئۈچۈن ، بىز Bootstrap نى javascript بىلەن قانداق بىرلەشتۈرۈشنى چۈشىنىشىڭىز ۋە ئاساسىي ئىقتىدار ئۈچۈن دەرھال تېز ، يېنىك تاللاش بىلەن تەمىنلىشىڭىز ئۈچۈن ، ئۈستىدىكى قىستۇرمىلارنى تەمىنلىدۇق.
تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ۋە بىر قىسىم جانلىق كۆرۈنۈشلەرنى كۆرۈش ئۈچۈن قىستۇرما ھۆججەت بېتىمىزنى كۆرۈڭ .
Bootstrap بولسا Preboot دىن ياسالغان بولۇپ ، ئوچۇق كودلۇق ئارىلاشما ۋە ئۆزگەرگۈچى مىقدار بوغچىسى بولۇپ ، تورنى تېز ۋە ئاسان تەرەققىي قىلدۇرۇش ئۈچۈن CSS بىر تەرەپ قىلغۇچ Less بىلەن بىرلەشتۈرۈپ ئىشلىتىلىدۇ.
Bootstrap دا Preboot نى قانداق ئىشلەتكەنلىكىمىزنى ۋە كېيىنكى تۈردە ئازراق ئىجرا قىلىشنى تاللىسىڭىز ، ئۇنى قانداق ئىشلىتەلەيدىغانلىقىڭىزنى تەكشۈرۈپ بېقىڭ.
بۇ تاللانما ئارقىلىق توركۆرگۈڭىزدىكى javascript ئارقىلىق Bootstrap نىڭ ئاز ئۆزگەرگۈچى مىقدار ، ئارىلاشما ۋە CSS دىكى ئۇۋىسىنى تولۇق ئىشلىتىڭ.
- <link rel = "stylesheet / less" href = "less / bootstrap.less" media = "all" />
- <script src = "js / less-1.1.3.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;
- // ئاساسىي تور
- @basefont : 13px ;
- @baseline : 18px ;
Less يەنە CSS نىڭ نورمال گرامماتىكىسىدىن باشقا يەنە بىر خىل باھا بېرىش ئۇسلۇبى بىلەن تەمىنلەيدۇ /* ... */
.
- // بۇ بىر باھا
- / * بۇمۇ بىر باھا * /
ئارىلاشما ماددىلار 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 ;
- }
- ...
- }
- #gradient {
- ...
- . 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
- تەگلىك - رەسىم : سىزىقلىق - تەدرىجىي ( @startColor , @endColor ); // ئۆلچەم
- }
- ...
- }
ھەشەمەتكە ئېرىشىپ ، ماتېماتىكىنى ئىجرا قىلىپ ، تۆۋەندىكىدەك جانلىق ۋە كۈچلۈك ئارىلاشمىلارنى ھاسىل قىلىڭ.
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // بەزى ئىستونلارنى ياساڭ
- . ستونلار ( @columnSpan : 1 ) {
- كەڭلىكى : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
/ Lib / دىكى ھۆججەتلەرنى ئۆزگەرتكەندىن كېيىن .less
، bootstrap - *. *. *. Css ۋە bootstrap - *. *. *. Min.css ھۆججىتىنى قايتا ھاسىل قىلىش ئۈچۈن ئۇلارنى قايتا ياساپ چىقىشىڭىز لازىم. ئەگەر سىز GitHub غا تارتىش تەلىپىنى يوللىسىڭىز ، چوقۇم قايتا ئويلىشىڭىز كېرەك.
ئۇسۇل | قەدەملەر |
---|---|
گىرىم بويۇملىرى | تۆۋەندىكى بۇيرۇقنى ئىجرا قىلىش ئارقىلىق npm بىلەن ئازراق بۇيرۇق قۇرى تۈزگۈچىنى قاچىلاڭ: $ npm lessc نى قاچىلاڭ قاچىلاپ بولغاندىن كېيىن بۇنىڭدىن باشقا ، ئەگەر سىزدە قول سائىتى ئورنىتىلغان بولسا ، |
Javascript | ئەڭ يېڭى Less.js نى چۈشۈرۈڭ ۋە ئۇنىڭغا (ۋە Bootstrap) يولىنى قوشۇڭ
.سىز ھۆججەتلەرنى قايتا رەتلەش ئۈچۈن ، ئۇلارنى ساقلاڭ ۋە بېتىڭىزنى قايتا يۈكلەڭ. Less.js ئۇلارنى رەتلەپ يەرلىك ساقلاشقا ساقلايدۇ. |
بۇيرۇق قۇرى | ئەگەر سىزدە ئازراق بۇيرۇق قۇر قورالى قاچىلانغان بولسا ، تۆۋەندىكى بۇيرۇقنى ئىجرا قىلىڭ: $ lessc ./lib/bootstrap.less> bootstrap.css ئەگەر بەزى بايتلارنى |
Mac ئەپ دېتالى | غەيرىي رەسمىي Mac دېتالى .less ھۆججىتىنىڭ مۇندەرىجىسىنى كۆرىدۇ ۋە كۆرگەن .سىز ھۆججەتنى ساقلىغاندىن كېيىن كودنى يەرلىك ھۆججەتلەرگە توپلايدۇ. ئەگەر ياقتۇرسىڭىز ، ئاپتوماتىك كىچىكلىتىش ۋە تۈزۈلگەن ھۆججەتلەرنىڭ قايسى مۇندەرىجىگە ئايلىنىدىغانلىقى توغرىسىدىكى ئەپتىكى مايىللىقنى ئالماشتۇرالايسىز. |