يول باشلاش ، ئاگاھلاندۇرۇش ، پوپايكا ۋە باشقىلار بىلەن تەمىنلەش ئۈچۈن ياسالغان قايتا ئىشلەتكىلى بولىدىغان زاپچاسلار.
ئۇلىنىش تىزىملىكىنى كۆرسىتىدىغان كۆزنەكلىك ، مەزمۇن تىزىملىكى. تارتما javascript قىستۇرمىسى بىلەن ئۆز-ئارا تەسىر كۆرسەتتى.
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >
- <li> <a tabindex = "-1" href = "#"> ھەرىكەت </a> </li >
- <li> <a tabindex = "-1" href = "#"> باشقا ھەرىكەت </a> </li >
- <li> <a tabindex = "-1" href = "#"> بۇ يەردە باشقا بىر نەرسە </a> </li >
- <li class = "divider" > </li>
- <li> <a tabindex = "-1" href = "#"> ئايرىم ئۇلىنىش </a> </li >
- </ul>
پەقەت چۈشۈش تىزىملىكىگە قارايدىغان بولساق ، بۇ يەردە لازىملىق HTML بار. تامچە قوزغىتىش ۋە قوزغىتىش تىزىملىكى .dropdown
ياكى باشقا مەلۇم ئېلېمېنتنى ئوراپ قويۇشىڭىز كېرەك position: relative;
. ئاندىن تىزىملىك قۇر.
- <div class = "dropdown" >
- <! - ئۇلىنىش ياكى كۇنۇپكىنى تۆۋەنلىتىش ->
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >
- <li> <a tabindex = "-1" href = "#"> ھەرىكەت </a> </li >
- <li> <a tabindex = "-1" href = "#"> باشقا ھەرىكەت </a> </li >
- <li> <a tabindex = "-1" href = "#"> بۇ يەردە باشقا بىر نەرسە </a> </li >
- <li class = "divider" > </li>
- <li> <a tabindex = "-1" href = "#"> ئايرىم ئۇلىنىش </a> </li >
- </ul>
- </div>
تىزىملىكلەرنى ئوڭغا توغرىلاڭ ۋە قوشۇش قوشۇمچە دەرىجىدىكى تۆۋەنلەشلەرنى ئۆز ئىچىگە ئالىدۇ.
.pull-right
ئوڭغا ئوڭغا قوشۇش .dropdown-menu
تىزىملىكى.
- <ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >
- ...
- </ul>
قوشۇمچە دەرىجىدىكى تىزىملىكلەرنى قوشۇڭ ، OS X غا ئوخشاش يۆتكىلىشچان ھالەتتە كۆرۈنىدۇ ، بەزى ئاددىي بەلگە قوشۇلغان. ئاپتوماتىك ئۇسلۇب ئۈچۈن بار بولغان تىزىملىك تىزىملىكىدىكى .dropdown-submenu
ھەر قانداقسىگە قوشۇڭ .li
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >
- ...
- <li class = "dropdown-submenu" >
- <a tabindex = "-1" href = "#"> تېخىمۇ كۆپ تاللاشلار </a>
- <ul class = "dropdown-menu" >
- ...
- </ul>
- </li>
- </ul>
Rdio دىن ئىلھام ئالغان ئاددىي تەسۋىر ، ئەپ ۋە ئىزدەش نەتىجىسى ئۈچۈن ناھايىتى ياخشى. چوڭ بۆلەكنى قولدىن بېرىپ قويۇش تەس ، ئاسان كېڭەيتىشكە بولىدۇ ھەمدە چوڭ چېكىش رايونى بىلەن تەمىنلەيدۇ.
- <div class = "pagination" >
- <ul>
- <li> <a href = "#"> ئالدىنقى </a> </li>
- <li> <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 = "#"> كېيىنكى </a> </li>
- </ul>
- </div>
ئۇلىنىش ئوخشىمىغان ئەھۋاللارغا ماسلاشتۇرۇلغان. .disabled
چەككىلى بولمايدىغان ئۇلىنىش ۋە .active
نۆۋەتتىكى بەتنى كۆرسىتىش ئۈچۈن ئىشلىتىڭ .
- <div class = "pagination" >
- <ul>
- <li class = "disabled" > <a href = "#"> ئالدىنقى </a> </li >
- <li class = "active" > <a href = "#"> 1 </a> </li >
- ...
- </ul>
- </div>
كۆزلىگەن ئۇسلۇبلارنى ساقلاپ قالغاندا چېكىش ئىقتىدارىنى ئۆچۈرۈۋەتمەكچى بولسىڭىز ، ئاكتىپ ياكى چەكلەنگەن لەڭگەرلەرنى خالىغانچە ئالماشتۇرالايسىز.
- <div class = "pagination" >
- <ul>
- <li class = "disabled" > <span> ئالدىنقى </span> </li>
- <li class = "active" > <span> 1 </span> </li>
- ...
- </ul>
- </div>
ئىككى خىل تاللاش سىنىپىدىن بىرنى قوشۇڭ ، ئۇلانمىلارنىڭ ئۇلىنىشىنى ئۆزگەرتىڭ: .pagination-centered
ۋە .pagination-right
.
- <div class = "pagination pagination-center" >
- ...
- </div>
- <div class = "pagination pagination-right" >
- ...
- </div>
يېنىك بەلگە ۋە ئۇسلۇب بىلەن ئاددىي كىچىكلىتىش ئەمەلگە ئاشۇرۇش ئۈچۈن تېز ۋە كېيىنكى ئۇلىنىشلار. بىلوگ ياكى ژۇرنال قاتارلىق ئاددىي تور بېكەتلەر ئۈچۈن ناھايىتى ياخشى.
سۈكۈتتىكى ھالەتتە ، قەغەز مەركىزى ئۇلىنىدۇ.
- <ul class = "pager" >
- <li> <a href = "#"> ئالدىنقى </a> </li>
- <li> <a href = "#"> كېيىنكى </a> </li>
- </ul>
ئۇنىڭدىن باشقا ، سىز ھەر بىر ئۇلىنىشنى يان تەرەپكە توغرىلىيالايسىز:
- <ul class = "pager" >
- <li class = "previous" >
- <a href = "#"> & larr ; كونا </a>
- </li>
- <li class = "next" >
- <a href = "#"> يېڭى & rarr ; </a>
- </li>
- </ul>
Pager ئۇلانمىلىرى يەنە ئادەتتىكى .disabled
ئىشلىتىش سىنىپىدىن پايدىلىنىدۇ.
- <ul class = "pager" >
- <li class = "ئالدىنقى چەكلەنگەن" >
- <a href = "#"> & larr ; كونا </a>
- </li>
- ...
- </ul>
Labels | Markup |
---|---|
سۈكۈتتىكى | <span class="label">Default</span> |
مۇۋەپپەقىيەت | <span class="label label-success">Success</span> |
ئاگاھلاندۇرۇش | <span class="label label-warning">Warning</span> |
مۇھىم | <span class="label label-important">Important</span> |
ئۇچۇر | <span class="label label-info">Info</span> |
ئەكسىچە | <span class="label label-inverse">Inverse</span> |
ئىسمى | مىسال | Markup |
---|---|---|
سۈكۈتتىكى | 1 | <span class="badge">1</span> |
مۇۋەپپەقىيەت | 2 | <span class="badge badge-success">2</span> |
ئاگاھلاندۇرۇش | 4 | <span class="badge badge-warning">4</span> |
مۇھىم | 6 | <span class="badge badge-important">6</span> |
ئۇچۇر | 8 | <span class="badge badge-info">8</span> |
ئەكسىچە | 10 | <span class="badge badge-inverse">10</span> |
تور بېتىڭىزدىكى ئاچقۇچلۇق مەزمۇنلارنى كۆرسىتىش ئۈچۈن يېنىك ، جانلىق تەركىب. ئۇ سېتىش ۋە مەزمۇن ئېغىر تور بېكەتلەردە ياخشى ئىشلەيدۇ.
بۇ ئاددىي قەھرىمان بىرلىكى ، ئالاھىدە jumbotron ئۇسلۇبىدىكى زاپچاس بولۇپ ، ئالاھىدە مەزمۇن ياكى ئۇچۇرغا ئالاھىدە ئەھمىيەت بېرىدۇ.
- <div class = "قەھرىمان-بىرلىك" >
- <h1> ماۋزۇ </ h1>
- <p> خەتكۈچ </ p>
- <p>
- <a class = "btn btn- دەسلەپكى btn-large">
- تەپسىلاتى
- </a>
- </p>
- </div>
h1
بىر بەتتىكى مۇۋاپىق بوشلۇق ۋە بۆلەك بۆلەكلىرىگە ماس كېلىدىغان ئاددىي قېپى . ئۇ h1
سۈكۈتتىكى small
، ئېلېمېنت ۋە باشقا نۇرغۇن زاپچاسلارنى ئىشلىتەلەيدۇ (قوشۇمچە ئۇسلۇب بىلەن).
- <div class = "page-header" >
- <h1> ئۈلگە بەت بېشى <small> ماۋزۇنىڭ تارماق تېكىستى </small> </h1>
- </div>
سۈكۈتتىكى ھالەتتە ، Bootstrap نىڭ كىچىك كۆرۈنۈشلىرى ئەڭ ئېھتىياجلىق بولغان بەلگە بىلەن ئۇلانغان رەسىملەرنى كۆرسىتىش ئۈچۈن لايىھەلەنگەن.
ئازراق قوشۇمچە بەلگە ئارقىلىق كىچىك رەسىمگە ماۋزۇ ، ئابزاس ياكى كۇنۇپكا قاتارلىق ھەر قانداق HTML مەزمۇنىنى قوشقىلى بولىدۇ.
كىچىك رەسىملەر (ئىلگىرى .media-grid
v1.4 غىچە) رەسىم ياكى سىن تورلىرى ، رەسىم ئىزدەش نەتىجىسى ، پارچە سېتىش مەھسۇلاتلىرى ، مەبلەغ يۈرۈشتۈرۈش ئۈسكۈنىلىرى ۋە باشقىلار ئۈچۈن ناھايىتى ياخشى. ئۇلار ئۇلىنىش ياكى تۇراقلىق مەزمۇن بولالايدۇ.
كىچىك كۆرۈنۈش بەلگىسى ئاددىي - ul
ھەر خىل li
ئېلېمېنتلار تەلەپ قىلىنغان نەرسە. ئۇ يەنە دەرىجىدىن تاشقىرى جانلىق بولۇپ ، ھەر قانداق مەزمۇندىكى مەزمۇنلارنى ئوراپ قويسىڭىز بولىدۇ.
ئاخىرىدا ، كىچىك كۆرۈنۈش زاپچاسلىرى كىچىك تورنىڭ چوڭ-كىچىكلىكىنى كونترول قىلىش ئۈچۈن بار بولغان تور سىستېمىسى سىنىپلىرىنى .span2
ئىشلىتىدۇ .span3
.
يۇقىرىدا دېيىلگەندەك ، كىچىك كۆرۈنۈشنىڭ لازىملىق بەلگىسى يېنىك ۋە بىۋاسىتە. تۆۋەندىكى رەسىملەرنىڭ سۈكۈتتىكى تەڭشىكىگە قاراڭ :
- <ul class = "كىچىك كۆرۈنۈش" >
- <li class = "span4" >
- <a href = "#" class = "thumbnail"> _
- <img src = "https://placehold.it/300x200" alt = "" >
- </a>
- </li>
- ...
- </ul>
كىچىك كۆرۈنۈشتىكى HTML مەزمۇنىغا نىسبەتەن ، بەلگە ئازراق ئۆزگىرىدۇ. ھەر قانداق جايدا چەكلەش دەرىجىسىنىڭ مەزمۇنىغا يول قويۇش ئۈچۈن ، بىز <a>
بۇنىڭغا <div>
ئوخشاش نەرسىلەرنى ئالماشتۇرىمىز:
- <ul class = "كىچىك كۆرۈنۈش" >
- <li class = "span4" >
- <div class = "كىچىك كۆرۈنۈش" >
- <img src = "https://placehold.it/300x200" alt = "" >
- <h3> كىچىك بەلگە </ h3>
- <p> كىچىك رەسىمنىڭ ئىزاھاتى ... </p>
- </div>
- </li>
- ...
- </ul>
بارلىق تاللانما تۈرلىرىڭىز بىلەن تەمىنلەڭ. ئوخشىمىغان چوڭلۇقتىكى ئارىلاشمىلارنى ماسلاشتۇرالايسىز.
.alert
ئاساسىي ئاگاھلاندۇرۇش ئۇچۇرى ئۈچۈن ھەر قانداق تېكىست ۋە ئىختىيارىي ئىشتىن بوشىتىش كۇنۇپكىسىنى ئوراپ بېرىڭ .
- <div class = "ئاگاھلاندۇرۇش" >
- <button type = "button" class = "close" data-dismiss = "ئاگاھلاندۇرۇش" > × </button>
- <strong> ئاگاھلاندۇرۇش! </ strong> ئەڭ ياخشى تەكشۈرۈڭ ، سىز بەك ياخشى كۆرۈنمەيسىز.
- </div>
كۆچمە Safari ۋە Mobile Opera توركۆرگۈلىرى خاسلىقتىن باشقا ، بەلگە ئىشلەتكەندە ئاگاھلاندۇرۇشنى ئەمەلدىن قالدۇرۇشنى data-dismiss="alert"
تەلەپ قىلىدۇ .href="#"
<a>
- <a href = "#" class = "close" data-dismiss = "alert"> × </a> _
ئۇنىڭدىن باشقا ، سىز <button>
سانلىق مەلۇمات خاسلىقى بار ئېلېمېنتنى ئىشلىتىشىڭىز مۇمكىن ، بىز ھۆججەتلىرىمىز ئۈچۈن قىلىشنى تاللىدۇق. ئىشلەتكەندە <button>
چوقۇم قوشۇشىڭىز كېرەك type="button"
ياكى جەدۋەللىرىڭىز تاپشۇرماسلىقى مۇمكىن.
- <button type = "button" class = "close" data-dismiss = "ئاگاھلاندۇرۇش" > × </button>
ئاگاھلاندۇرۇشنى تېز ۋە ئاسان ئەمەلدىن قالدۇرۇش ئۈچۈن jQuery قىستۇرمىسىنى ئىشلىتىڭ .
ئۇزۇنراق ئۇچۇرغا ئېرىشىش ئۈچۈن ئاگاھلاندۇرۇش ئورالمىسىنىڭ ئۈستى ۋە ئاستىدىكى تاختاينى كۆپەيتىڭ .alert-block
.
ئەڭ ياخشىسى ئۆزىڭىزنى تەكشۈرۈڭ ، بەك ياخشى كۆرۈنمەيسىز. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- <div class = "ئاگاھلاندۇرۇش ئاگاھلاندۇرۇش-توسۇش" >
- <button type = "button" class = "close" data-dismiss = "ئاگاھلاندۇرۇش" > × </button>
- <h4> ئاگاھلاندۇرۇش! </h4>
- ئەڭ ياخشىسى yo ئۆزىڭىزنى تەكشۈرۈڭ ، سىز ئەمەس ...
- </div>
ئاگاھلاندۇرۇشنىڭ مەزمۇنىنى ئۆزگەرتىش ئۈچۈن ئىختىيارى دەرسلەرنى قوشۇڭ.
- <div class = "ئاگاھلاندۇرۇش ئاگاھلاندۇرۇش-خاتالىق" >
- ...
- </div>
- <div class = "ئاگاھلاندۇرۇش ئاگاھلاندۇرۇشى-مۇۋەپپەقىيەت" >
- ...
- </div>
- <div class = "ئاگاھلاندۇرۇش ئاگاھلاندۇرۇشى" >
- ...
- </div>
تىك گىرادۇس بىلەن سۈكۈتتىكى ئىلگىرىلەش بالدىقى.
- <div class = "ئىلگىرىلەش" >
- <div class = "bar" style = " width : 60 %; " > </div>
- </div>
گىرافىك ئىشلىتىپ سىزىقلىق ئۈنۈم ھاسىل قىلىدۇ. IE7-8 دا ئىشلەتكىلى بولمايدۇ.
- <div class = "ئىلگىرىلەش-ئىلگىرىلەش" >
- <div class = "bar" style = " width : 20 %; " > </div>
- </div>
ئوڭدىن سولغا سىزىقلارنى جانلاندۇرۇش ئۈچۈن .active
قوشۇڭ . .progress-striped
IE نىڭ بارلىق نەشرىدە يوق.
- <div class = "ئالغا ئىلگىرىلەش-سىزىقلىق ئاكتىپ" >
- <div class = "bar" style = " width : 40 %; " > </div>
- </div>
ئوخشاش بىر قانچە بالداقنى ئوخشاش .progress
ئورۇنغا قويۇڭ.
- <div class = "ئىلگىرىلەش" >
- <div class = "bar bar-success" style = " width : 35 %; " > </div>
- <div class = "bar bar-warning" style = " width : 20 %; " > </div>
- <div class = "bar bar-danger" style = " width : 10 %; " > </div>
- </div>
ئىلگىرىلەش بالدىقى ئوخشاش ئۇسلۇبتىكى بەزى كۇنۇپكىلار ۋە ئاگاھلاندۇرۇش سىنىپلىرىنى ئىشلىتىدۇ.
- <div class = "ئىلگىرىلەش-ئۇچۇر" >
- <div class = "bar" style = " width : 20 % " > </div>
- </div>
- <div class = "ئىلگىرىلەش-مۇۋەپپەقىيەت" >
- <div class = "bar" style = " width : 40 % " > </div>
- </div>
- <div class = "ئىلگىرىلەش-ئاگاھلاندۇرۇش" >
- <div class = "bar" style = " width : 60 % " > </div>
- </div>
- <div class = "ئىلگىرىلەش-خەتەر" >
- <div class = "bar" style = " width : 80 % " > </div>
- </div>
قاتتىق رەڭلەرگە ئوخشاش ، بىزدە ئوخشىمىغان سىزىقلىق ئىلگىرىلەش بالدىقى بار.
- <div class = "ئىلگىرىلەش-ئۇچۇر ئىلگىرىلەش-سىزىق" >
- <div class = "bar" style = " width : 20 % " > </div>
- </div>
- <div class = "ئىلگىرىلەش-مۇۋەپپەقىيەت ئىلگىرىلەش-سىزىق" >
- <div class = "bar" style = " width : 40 % " > </div>
- </div>
- <div class = "ئىلگىرىلەش-ئاگاھلاندۇرۇش ئىلگىرىلەش-سىزىق" >
- <div class = "bar" style = " width : 60 % " > </div>
- </div>
- <div class = "ئىلگىرىلەش-خەتەر ئىلگىرىلەش-سىزىق" >
- <div class = "bar" style = " width : 80 % " > </div>
- </div>
ئىلگىرىلەش بالدىقى CSS3 رېشاتكىسى ، ئۆتكۈنچى ۋە كارتون ئارقىلىق بارلىق ئۈنۈملىرىنى قولغا كەلتۈرىدۇ. بۇ ئىقتىدارلار IE7-9 ياكى Firefox نىڭ كونا نەشرىدە قوللىمايدۇ.
Internet Explorer 10 ۋە Opera 12 دىن بۇرۇنقى نەشىرلەر كارتوننى قوللىمايدۇ.
قۇدۇققا ئاددىي تەسىر قىلىپ ، ئېلېمېنتقا ئاددىي ئۈنۈم بېرىدۇ.
- <div class = "well" >
- ...
- </div>
ئىككى تاللاشچان ئۆزگەرتىش سىنىپى بار تاختا ۋە يۇمىلاق بۇلۇڭنى كونترول قىلىڭ.
- <div class = "well-large" >
- ...
- </div>
- <div class = "well-small" >
- ...
- </div>
مودېل ۋە ئاگاھلاندۇرۇش قاتارلىق مەزمۇنلارنى ئەمەلدىن قالدۇرۇش ئۈچۈن ئادەتتىكى تاق سىنبەلگىسىنى ئىشلىتىڭ.
- <button class = "close" > & times; </button>
ئەگەر لەڭگەر ئىشلەتسىڭىز ، iOS ئۈسكۈنىلىرى چېكىش پائالىيىتى ئۈچۈن href = "#" تەلەپ قىلىدۇ.
- <a class = "close" href = "#"> & times ; </a>
كىچىك كۆرسىتىش ياكى ھەرىكەت ئۆزگەرتىش ئۈچۈن ئاددىي ، قاراتمىلىقى بولغان دەرسلەر.
بىر ئېلېمېنت قالدى
- class = "pull-left"
- . تارتىش - سول {
- float : left ;
- }
بىر ئېلېمېنتنى توغرىلاڭ
- class = "pull-right"
- . تارتىش - ئوڭ {
- float : right ;
- }
ئېلېمېنتنىڭ رەڭگىنى ئۆزگەرتىڭ#999
- class = "ئاۋازسىز"
- . muted {
- color : # 999;
- }
float
ھەر قانداق ئېلېمېنتنى تازىلاڭ
- class = "clearfix"
- . clearfix {
- * zoom : 1 ;
- &: before ,
- &: after {
- كۆرسىتىش : جەدۋەل ;
- مەزمۇن : "" ;
- }
- &: after {
- ئېنىق : ھەر ئىككىسى
- }
- }