ئىشلەتكىلى بولىدىغان گىلفلار
Glyphicon Halflings يۈرۈشلۈكىدىن خەت شەكلىدىكى 250 دىن ئارتۇق گلىفنى ئۆز ئىچىگە ئالىدۇ. Glyphicons Halflings ئادەتتە ھەقسىز ئىشلەتكىلى بولمايدۇ ، ئەمما ئۇلارنىڭ ئىجادچىسى ئۇلارنى Bootstrap ئۈچۈن ھەقسىز تەمىنلىدى. رەھمەت سىزگە ، بىز ئىمكانقەدەر Glyphicons غا ئۇلىنىشنى قوشۇشىڭىزنى سورايمىز .
قانداق ئىشلىتىش
ئىقتىدار سەۋەبىدىن ، بارلىق سىنبەلگىلەر ئاساسىي سىنىپ ۋە يەككە سىنبەلگە سىنىپىنى تەلەپ قىلىدۇ. ئىشلىتىش ئۈچۈن تۆۋەندىكى كودنى خالىغان يەرگە قويۇڭ. مۇۋاپىق تاختا ئۈچۈن سىنبەلگە بىلەن تېكىست ئوتتۇرىسىدا بوشلۇق قالدۇرۇڭ.
باشقا زاپچاسلار بىلەن ئارىلاشماڭ
سىنبەلگە دەرسلىرىنى باشقا زاپچاسلار بىلەن بىۋاسىتە بىرلەشتۈرگىلى بولمايدۇ. ئۇلارنى ئوخشاش ئېلېمېنتتىكى باشقا دەرسلەر بىلەن بىللە ئىشلىتىشكە بولمايدۇ. ئۇنىڭ ئورنىغا ، ئۇۋىسى قوشۇڭ <span>
ۋە سىنبەلگە دەرسلىرىنى ئىشلىتىڭ <span>
.
پەقەت قۇرۇق ئېلېمېنتلارغا ئىشلىتىلىدۇ
سىنبەلگە دەرسلىرى پەقەت تېكىست مەزمۇنى بولمىغان ۋە بالا ئېلېمېنتى بولمىغان ئېلېمېنتلاردىلا ئىشلىتىلىشى كېرەك.
سىنبەلگە خەت ئورنىنى ئۆزگەرتىش
../fonts/
Bootstrap توپلانغان CSS ھۆججىتىگە سېلىشتۇرغاندا ، سىنبەلگە خەت نۇسخىسىنىڭ مۇندەرىجىگە جايلاشقانلىقىنى پەرەز قىلىدۇ . بۇ خەت ھۆججەتلىرىنى يۆتكەش ياكى ئىسىم ئۆزگەرتىش CSS نى ئۈچ خىل ئۇسۇلدا يېڭىلاشنى كۆرسىتىدۇ:
مەنبەدىكى @icon-font-path
ۋە ياكى ئۆزگەرگۈچى مىقدارنى ئۆزگەرتىڭ .@icon-font-name
Less compiler تەمىنلىگەن نىسپىي URL تاللانمىسىنى ئىشلىتىڭ .
url()
تۈزۈلگەن CSS دىكى يوللارنى ئۆزگەرتىڭ .
كونكرېت تەرەققىيات تەڭشىكىڭىزگە ماس كېلىدىغان تاللاشلارنى ئىشلىتىڭ.
ئىشلەتكىلى بولىدىغان سىنبەلگىلەر
ھازىرقى زامان ياردەمچى تېخنىكىلىرى CSS ھاسىل قىلغان مەزمۇنلارنى ، شۇنداقلا ئالاھىدە يۇنىكود ھەرپلىرىنى ئېلان قىلىدۇ. ئېكران ئوقۇرمەنلىرىدىكى ئويلىمىغان ۋە قالايمىقان چىقىرىشتىن ساقلىنىش ئۈچۈن (بولۇپمۇ سىنبەلگىلەر پەقەت زىننەتلەش ئۈچۈن ئىشلىتىلگەندە) ، بىز ئۇلارنى aria-hidden="true"
خاسلىق بىلەن يوشۇرىمىز.
ئەگەر سىز سىنبەلگە ئىشلىتىپ مەنە يەتكۈزمەكچى بولسىڭىز (پەقەت زىننەتلەش ئېلېمېنتىلا ئەمەس) ، بۇ مەنىنىڭ ياردەمچى تېخنىكىلارغىمۇ يەتكۈزۈلۈشىگە كاپالەتلىك قىلىڭ - مەسىلەن ، قوشۇمچە مەزمۇننى ئۆز ئىچىگە ئالىدۇ ، كۆرۈنۈش بىلەن .sr-only
دەرسكە يوشۇرۇنغان.
ئەگەر سىز باشقا تېكىست بولمىغان كونتروللارنى قۇرسىڭىز (مەسىلەن <button>
پەقەت سىنبەلگىسىنى ئۆز ئىچىگە ئالىدۇ) ، كونترولنىڭ مەقسىتىنى ئېنىقلاش ئۈچۈن ھەمىشە باشقا مەزمۇنلارنى تەمىنلىشىڭىز كېرەك ، بۇنداق بولغاندا ياردەمچى تېخنىكىلارنى ئىشلەتكۈچىلەرگە ئەھمىيەت بېرىدۇ. بۇ خىل ئەھۋالدا سىز aria-label
كونترولنىڭ ئۆزىگە خاسلىق قوشالايسىز.
<span class= "glyphicon glyphicon-search" aria-hidden= "true" ></span>
مىساللار
قورالبالدىقى ، يول باشلاش ياكى ئالدىن تەييارلانغان جەدۋەل كىرگۈزۈش ئۈچۈن كۇنۇپكا ، كۇنۇپكا گۇرۇپپىسىدا ئىشلىتىڭ.
<button type= "button" class= "btn btn-default" aria-label= "Left Align" >
<span class= "glyphicon glyphicon-align-left" aria-hidden= "true" ></span>
</button>
<button type= "button" class= "btn btn-default btn-lg" >
<span class= "glyphicon glyphicon-star" aria-hidden= "true" ></span> Star
</button>
ئاگاھلاندۇرۇشتا ئىشلىتىلىدىغان سىنبەلگە ئۇنىڭ خاتالىق ئۇچۇرى ئىكەنلىكىنى بىلدۈرىدىغان سىنبەلگە ، قوشۇمچە .sr-only
تېكىست ئارقىلىق ياردەمچى تېخنىكىلارنى ئىشلەتكۈچىلەرگە يەتكۈزىدۇ.
خاتالىق: ئىناۋەتلىك ئېلېكترونلۇق خەت ئادرېسىنى كىرگۈزۈڭ
<div class= "alert alert-danger" role= "alert" >
<span class= "glyphicon glyphicon-exclamation-sign" aria-hidden= "true" ></span>
<span class= "sr-only" > Error:</span>
Enter a valid email address
</div>
ئۇلىنىش تىزىملىكىنى كۆرسىتىدىغان كۆزنەكلىك ، مەزمۇن تىزىملىكى. چۈشۈرۈلگەن JavaScript قىستۇرمىسى بىلەن ئۆز-ئارا تەسىر كۆرسەتتى.
مىسال
تامچە قوزغىتىش ۋە قوزغىتىش تىزىملىكى .dropdown
ياكى باشقا مەلۇم ئېلېمېنتنى ئوراپ قويۇڭ position: relative;
. ئاندىن تىزىملىكنىڭ HTML نى قوشۇڭ.
<div class= "dropdown" >
<button class= "btn btn-default dropdown-toggle" type= "button" id= "dropdownMenu1" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "true" >
Dropdown
<span class= "caret" ></span>
</button>
<ul class= "dropdown-menu" aria-labelledby= "dropdownMenu1" >
<li><a href= "#" > Action</a></li>
<li><a href= "#" > Another action</a></li>
<li><a href= "#" > Something else here</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > Separated link</a></li>
</ul>
</div>
.dropup
چۈشۈش تىزىملىكىنى ئاتا-ئانىغا قوشۇش ئارقىلىق يۇقىرىغا (تۆۋەنگە ئەمەس) كېڭەيتىشكە ئۆزگەرتىشكە بولىدۇ .
<div class= "dropup" >
<button class= "btn btn-default dropdown-toggle" type= "button" id= "dropdownMenu2" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Dropup
<span class= "caret" ></span>
</button>
<ul class= "dropdown-menu" aria-labelledby= "dropdownMenu2" >
<li><a href= "#" > Action</a></li>
<li><a href= "#" > Another action</a></li>
<li><a href= "#" > Something else here</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > Separated link</a></li>
</ul>
</div>
توغرىلاش
سۈكۈت بويىچە ، چۈشۈش تىزىملىكى ئاپتوماتىك ھالدا ئاتا-ئانىسىنىڭ ئۈستى ۋە سول تەرىپىگە% 100 ئورۇن بەلگىلەيدۇ. .dropdown-menu-right
ئوڭغا ئوڭغا قوشۇش .dropdown-menu
تىزىملىكى.
قوشۇمچە ئورۇن بەلگىلەشنى تەلەپ قىلىشى مۇمكىن
تامچە ھۆججەتلەر ھۆججەتنىڭ نورمال ئېقىمى ئىچىدە ئاپتوماتىك ھالدا CSS ئارقىلىق ئورۇنلىنىدۇ. بۇ تۆۋەنلەشنىڭ ئاتا-ئانىلار تەرىپىدىن مەلۇم overflow
خۇسۇسىيەتكە ئىگە بولۇشى ياكى كۆرۈش دائىرىسىدىن چىقىپ كېتىشى مۇمكىنلىكىدىن دېرەك بېرىدۇ. بۇ مەسىلىلەرنى ئوتتۇرىغا چىققاندا ئۆزىڭىز ھەل قىلىڭ.
ۋاقتى ئۆتكەن .pull-right
ماسلىشىش
V3.1.0 دىن باشلاپ ، .pull-right
چۈشۈش تىزىملىكىدە ۋاقتى ئۆتكەن. تىزىملىكنى ئوڭغا توغرىلاش ئۈچۈن ئىشلىتىڭ .dropdown-menu-right
. يولباشچىدىكى ئوڭغا توغرىلانغان nav زاپچاسلىرى بۇ سىنىپنىڭ ئارىلاشما نۇسخىسىنى ئىشلىتىپ تىزىملىكنى ئاپتوماتىك توغرىلايدۇ. ئۇنى قاپلاش ئۈچۈن ئىشلىتىڭ .dropdown-menu-left
.
<ul class= "dropdown-menu dropdown-menu-right" aria-labelledby= "dLabel" >
...
</ul>
ھەر بىر ئېسىلما تىزىملىكتىكى ھەرىكەت بۆلەكلىرىگە بەلگە قوشۇڭ.
<ul class= "dropdown-menu" aria-labelledby= "dropdownMenu3" >
...
<li class= "dropdown-header" > Dropdown header</li>
...
</ul>
Divider
تارتما تىزىملىكتىكى بىر يۈرۈش ئۇلىنىشلارغا بۆلگۈچ قوشۇڭ.
<ul class= "dropdown-menu" aria-labelledby= "dropdownMenuDivider" >
...
<li role= "separator" class= "divider" ></li>
...
</ul>
تىزىملىك تۈرلىرى چەكلەنگەن
ئۇلانمىنى چەكلەش ئۈچۈن تامغا بىرنى .disabled
قوشۇڭ .<li>
<ul class= "dropdown-menu" aria-labelledby= "dropdownMenu4" >
<li><a href= "#" > Regular link</a></li>
<li class= "disabled" ><a href= "#" > Disabled link</a></li>
<li><a href= "#" > Another link</a></li>
</ul>
بىر قاتار كۇنۇپكىلارنى بىر گۇرۇپپا كۇنۇپكا گۇرۇپپىسى بىلەن گۇرۇپپىلاش. ئىختىيارىي JavaScript رادىئوسى ۋە تەكشۈرۈش رامكىسى ئۇسلۇبىدىكى ھەرىكەتلەرنى بىزنىڭ كۇنۇپكا قىستۇرمىمىز بىلەن قوشۇڭ .
توغرا role
ۋە بەلگە بىلەن تەمىنلەشكە كاپالەتلىك قىلىڭ
ئېكران ئوقۇغۇچىلىرىغا ئوخشاش ياردەمچى تېخنىكىلار ئۈچۈن بىر يۈرۈش كۇنۇپكىلارنىڭ گۇرۇپپىلانغانلىقىنى يەتكۈزۈش ئۈچۈن ، مۇۋاپىق role
خاسلىق بىلەن تەمىنلەش كېرەك. كۇنۇپكا گۇرۇپپىلىرىغا نىسبەتەن بۇ بولىدۇ role="group"
، قورالبالدىقىدا a بولۇشى كېرەك role="toolbar"
.
بىر مۇستەسنا پەقەت بىرلا كونترولنى ئۆز ئىچىگە ئالغان گۇرۇپپىلار (مەسىلەن ئېلېمېنتلار بىلەن يوللۇق كۇنۇپكا گۇرۇپپىسى <button>
) ياكى تۆۋەنلەش.
role
بۇنىڭدىن باشقا ، گۇرۇپپىلار ۋە قورال ستونىغا ئېنىق بەلگە بېرىلىشى كېرەك ، چۈنكى توغرا خاسلىق بولسىمۇ ، كۆپىنچە ياردەمچى تېخنىكىلار ئۇلارنى ئېلان قىلمايدۇ . بۇ يەردە تەمىنلەنگەن مىساللاردا بىز ئىشلىتىمىز aria-label
، ئەمما باشقا تاللاشلارنىمۇ aria-labelledby
ئىشلىتىشكە بولىدۇ.
ئاساسلىق مىسال
ئىچىگە بىر يۈرۈش كۇنۇپكىلارنى ئوراپ .btn
بېرىڭ .btn-group
.
<div class= "btn-group" role= "group" aria-label= "..." >
<button type= "button" class= "btn btn-default" > Left</button>
<button type= "button" class= "btn btn-default" > Middle</button>
<button type= "button" class= "btn btn-default" > Right</button>
</div>
تېخىمۇ مۇرەككەپ زاپچاسلار ئۈچۈن يۈرۈشلۈكلەرنى بىرلەشتۈرۈڭ <div class="btn-group">
.<div class="btn-toolbar">
<div class= "btn-toolbar" role= "toolbar" aria-label= "..." >
<div class= "btn-group" role= "group" aria-label= "..." > ...</div>
<div class= "btn-group" role= "group" aria-label= "..." > ...</div>
<div class= "btn-group" role= "group" aria-label= "..." > ...</div>
</div>
Sizing
بىر گۇرۇپپىدىكى ھەر بىر كۇنۇپكىغا كۇنۇپكا چوڭلۇقتىكى دەرسلەرنى ئىشلىتىشنىڭ ئورنىغا ، ھەر بىر گۇرۇپپىغا قوشۇڭ .btn-group-*
، .btn-group
جۈملىدىن بىر نەچچە گۇرۇپپا ئۇۋىسى بار.
سول
ئوتتۇرا
توغرا
سول
ئوتتۇرا
توغرا
سول
ئوتتۇرا
توغرا
سول
ئوتتۇرا
توغرا
<div class= "btn-group btn-group-lg" role= "group" aria-label= "..." > ...</div>
<div class= "btn-group" role= "group" aria-label= "..." > ...</div>
<div class= "btn-group btn-group-sm" role= "group" aria-label= "..." > ...</div>
<div class= "btn-group btn-group-xs" role= "group" aria-label= "..." > ...</div>
Nesting
تارتما تىزىملىكلەرنى بىر قاتار كۇنۇپكىلار بىلەن ئارىلاشتۇرماقچى بولغاندا ، .btn-group
باشقا ئورۇنغا قويۇڭ..btn-group
<div class= "btn-group" role= "group" aria-label= "..." >
<button type= "button" class= "btn btn-default" > 1</button>
<button type= "button" class= "btn btn-default" > 2</button>
<div class= "btn-group" role= "group" >
<button type= "button" class= "btn btn-default dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Dropdown
<span class= "caret" ></span>
</button>
<ul class= "dropdown-menu" >
<li><a href= "#" > Dropdown link</a></li>
<li><a href= "#" > Dropdown link</a></li>
</ul>
</div>
</div>
ۋېرتىكال ئۆزگىرىش
بىر يۈرۈش كۇنۇپكىلارنى توغرىسىغا ئەمەس تىك ھالەتتە تىزىپ قويۇڭ. بۇ يەردە بۆلۈش كۇنۇپكىسىنى چۈشۈرۈشنى قوللىمايدۇ.
Button
Button
Dropdown
Button
Button
Dropdown
Dropdown
Dropdown
<div class= "btn-group-vertical" role= "group" aria-label= "..." >
...
</div>
يوللۇق كۇنۇپكا گۇرۇپپىلىرى
بىر گۇرۇپپا كۇنۇپكىلارنى ئوخشاش چوڭلۇقتا سوزۇپ ، ئاتا-ئانىسىنىڭ پۈتۈن كەڭلىكىنى كېڭەيتىڭ. كۇنۇپكا گۇرۇپپىسىنىڭ ئىچىدىكى كۇنۇپكىلارنى چۈشۈرۈش بىلەنمۇ ئىشلەيدۇ.
چېگرانى بىر تەرەپ قىلىش
كونۇپكىلارنى (يەنى) ئاقلاشقا ئىشلىتىدىغان كونكرېت HTML ۋە CSS سەۋەبىدىن ، display: table-cell
ئۇلارنىڭ ئارىسىدىكى چېگرا بىر ھەسسە قاتلىنىدۇ. دائىملىق كۇنۇپكا گۇرۇپپىلىرىدا ، margin-left: -1px
چېگرىلارنى ئېلىۋېتىشنىڭ ئورنىغا تىزىشقا ئىشلىتىلىدۇ. قانداقلا بولمىسۇن ، margin
ئىشلىمەيدۇ display: table-cell
. نەتىجىدە ، Bootstrap غا خاسلاشتۇرۇشىڭىزغا ئاساسەن ، چېگرانى ئۆچۈرۈۋەتسىڭىز ياكى قايتا رەڭ بەرسىڭىز بولىدۇ.
IE8 ۋە چېگرا
<a>
Internet Explorer 8 مەيلى ئۇ ياكى <button>
ئېلېمېنتلار بولسۇن ، يوللۇق كۇنۇپكا گۇرۇپپىسىدىكى كۇنۇپكىلارغا چېگرا كۆرسەتمەيدۇ . بۇنى ھەل قىلىش ئۈچۈن ، ھەر بىر كۇنۇپكىنى يەنە بىرسىگە ئوراپ قويۇڭ.btn-group
.
تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن # 12476 گە قاراڭ .
<a>
ئېلېمېنتلار بىلەن
بىر يۈرۈش .btn
s نى ئوراپ قويۇڭ .btn-group.btn-group-justified
.
<div class= "btn-group btn-group-justified" role= "group" aria-label= "..." >
...
</div>
كۇنۇپكا رولىنى ئوينايدىغان ئۇلىنىشلار
ئەگەر <a>
ئېلېمېنتلار نۆۋەتتىكى بەت ئىچىدىكى باشقا ھۆججەت ياكى بۆلەككە يۆتكىلىشتىن كۆرە ، كۇنۇپكا - بەتتىكى ئىقتىدارنى قوزغىتىش رولىنى ئوينايدىغان بولسا ، ئۇلارغا مۇۋاپىق بېرىلىشى كېرەك role="button"
.
<button>
ئېلېمېنتلار بىلەن يوللۇق كۇنۇپكا گۇرۇپپىسىنى ئىشلىتىش ئۈچۈن ، چوقۇم ھەر بىر كۇنۇپكىنى بىر كۇنۇپكا گۇرۇپپىسىغا ئوراپ قويۇشىڭىز كېرەك . كۆپىنچە توركۆرگۈچلەر CSS نى ئېلېمېنتلارغا توغرىلاش ئۈچۈن مۇۋاپىق قوللانمايدۇ <button>
، ئەمما كۇنۇپكا چۈشۈرۈشنى قوللىغانلىقىمىز ئۈچۈن ، ئۇنى چۆرىدەپ ئىشلىيەلەيمىز.
<div class= "btn-group btn-group-justified" role= "group" aria-label= "..." >
<div class= "btn-group" role= "group" >
<button type= "button" class= "btn btn-default" > Left</button>
</div>
<div class= "btn-group" role= "group" >
<button type= "button" class= "btn btn-default" > Middle</button>
</div>
<div class= "btn-group" role= "group" >
<button type= "button" class= "btn btn-default" > Right</button>
</div>
</div>
ھەر قانداق كۇنۇپكىنى ئىشلىتىپ تىزىملىك تىزىملىكىنى قوزغىتىپ .btn-group
، مۇۋاپىق تىزىملىك بەلگىسى بىلەن تەمىنلەڭ.
قىستۇرمىغا تايىنىش
كونۇپكا تاختىسىنىڭ چۈشۈش قىستۇرمىسى سىزنىڭ Bootstrap نەشرىڭىزگە قوشۇلۇشىنى تەلەپ قىلىدۇ.
يەككە كۇنۇپكا چۈشۈش
بىر قىسىم ئاساسىي بەلگە ئۆزگەرتىشلىرى بىلەن بىر كۇنۇپكىنى تۆۋەنگە يۆتكەڭ.
سۈكۈتتىكى
Primary
مۇۋەپپەقىيەت
ئۇچۇر
ئاگاھلاندۇرۇش
خەتەر
<!-- Single button -->
<div class= "btn-group" >
<button type= "button" class= "btn btn-default dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Action <span class= "caret" ></span>
</button>
<ul class= "dropdown-menu" >
<li><a href= "#" > Action</a></li>
<li><a href= "#" > Another action</a></li>
<li><a href= "#" > Something else here</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > Separated link</a></li>
</ul>
</div>
كۇنۇپكا تاختىسىنى پارچىلاش
ئوخشاشلا ، ئوخشاش بەلگە ئۆزگەرتىش ئارقىلىق بۆلۈش كۇنۇپكىسى چۈشۈشنى ھاسىل قىلىڭ ، پەقەت ئايرىم كۇنۇپكا بىلەنلا.
سۈكۈتتىكى
Toggle Dropdown
Primary
Toggle Dropdown
مۇۋەپپەقىيەت
Toggle Dropdown
ئۇچۇر
Toggle Dropdown
ئاگاھلاندۇرۇش
Toggle Dropdown
خەتەر
Toggle Dropdown
<!-- Split button -->
<div class= "btn-group" >
<button type= "button" class= "btn btn-danger" > Action</button>
<button type= "button" class= "btn btn-danger dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<span class= "caret" ></span>
<span class= "sr-only" > Toggle Dropdown</span>
</button>
<ul class= "dropdown-menu" >
<li><a href= "#" > Action</a></li>
<li><a href= "#" > Another action</a></li>
<li><a href= "#" > Something else here</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > Separated link</a></li>
</ul>
</div>
Sizing
كونۇپكا تاختىلىرى ھەر خىل چوڭلۇقتىكى كۇنۇپكىلار بىلەن ئىشلەيدۇ.
<!-- Large button group -->
<div class= "btn-group" >
<button class= "btn btn-default btn-lg dropdown-toggle" type= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Large button <span class= "caret" ></span>
</button>
<ul class= "dropdown-menu" >
...
</ul>
</div>
<!-- Small button group -->
<div class= "btn-group" >
<button class= "btn btn-default btn-sm dropdown-toggle" type= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Small button <span class= "caret" ></span>
</button>
<ul class= "dropdown-menu" >
...
</ul>
</div>
<!-- Extra small button group -->
<div class= "btn-group" >
<button class= "btn btn-default btn-xs dropdown-toggle" type= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Extra small button <span class= "caret" ></span>
</button>
<ul class= "dropdown-menu" >
...
</ul>
</div>
تامچە ئۆزگىرىش
.dropup
ئاتا-ئانىغا قوشۇش ئارقىلىق ئېلېمېنتلارنىڭ ئۈستىدىكى تىزىملىكلەرنى قوزغىتىڭ .
<div class= "btn-group dropup" >
<button type= "button" class= "btn btn-default" > Dropup</button>
<button type= "button" class= "btn btn-default dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<span class= "caret" ></span>
<span class= "sr-only" > Toggle Dropdown</span>
</button>
<ul class= "dropdown-menu" >
<!-- Dropdown menu links -->
</ul>
</div>
ھەر قانداق تېكىستنى ئاساس قىلغاندىن كېيىن ، كېيىن ياكى ئىككى تەرىپىگە تېكىست ياكى كۇنۇپكا قوشۇش ئارقىلىق جەدۋەل كونتروللىرىنى كېڭەيتىڭ <input>
. بىرنى ئىشلىتىڭ .input-group
ياكى يەككە ئېلېمېنتلارنى ئالدىن تەييارلاڭ ياكى .input-group-addon
قوشۇڭ ..input-group-btn
.form-control
پەقەت تېكىستلىك <input>
s
بۇ يەردىكى ئېلېمېنتلارنى ئىشلىتىشتىن ساقلىنىڭ <select>
، چۈنكى ئۇلار WebKit توركۆرگۈلىرىدە تولۇق ئۇسلۇبقا ئىگە بولالمايدۇ.
بۇ يەردىكى ئېلېمېنتلارنى ئىشلىتىشتىن ساقلىنىڭ <textarea>
، چۈنكى ئۇلارنىڭ rows
خاسلىقى بەزى ئەھۋاللاردا ھۆرمەت قىلىنمايدۇ.
كىرگۈزۈش گۇرۇپپىسىدىكى قورال قوراللىرى ۋە كۆزنەكلەر ئالاھىدە تەڭشەشنى تەلەپ قىلىدۇ
قورال ئىچىدىكى ئېلېمېنتلار ياكى ئېلېكترونلۇق كۆزنەكلەرنى ئىشلەتكەندە ، لازىملىق ئەكىس تەسىرلەردىن ساقلىنىش ئۈچۈن .input-group
تاللاشنى بەلگىلىشىڭىز container: 'body'
لازىم (مەسىلەن ، قورال كېڭەيتىش ۋە ياكى قوزغاتقۇچ قوزغالغاندا ئېلېمېنتنىڭ كېڭىيىشى ۋە ياكى يۇمىلاق بۇلۇڭلىرىنى يوقىتىش دېگەندەك).
كىرگۈزۈشنىڭ ئىككى تەرىپىگە بىر قىستۇرما ياكى كۇنۇپكا قويۇڭ. كىرگۈزۈشنىڭ ئىككى تەرىپىگە بىرنى قويسىڭىزمۇ بولىدۇ.
بىز بىر تەرەپتىن كۆپ قوشۇمچە ( .input-group-addon
ياكى ) نى قوللىمايمىز ..input-group-btn
بىز بىر كىرگۈزۈش گۇرۇپپىسىدىكى كۆپ خىل شەكىل كونترول قىلىشنى قوللىمايمىز.
<div class= "input-group" >
<span class= "input-group-addon" id= "basic-addon1" > @</span>
<input type= "text" class= "form-control" placeholder= "Username" aria-describedby= "basic-addon1" >
</div>
<div class= "input-group" >
<input type= "text" class= "form-control" placeholder= "Recipient's username" aria-describedby= "basic-addon2" >
<span class= "input-group-addon" id= "basic-addon2" > @example.com</span>
</div>
<div class= "input-group" >
<span class= "input-group-addon" > $</span>
<input type= "text" class= "form-control" aria-label= "Amount (to the nearest dollar)" >
<span class= "input-group-addon" > .00</span>
</div>
<label for= "basic-url" > Your vanity URL</label>
<div class= "input-group" >
<span class= "input-group-addon" id= "basic-addon3" > https://example.com/users/</span>
<input type= "text" class= "form-control" id= "basic-url" aria-describedby= "basic-addon3" >
</div>
ئۆزىگە مۇناسىۋەتلىك جەدۋەل چوڭلۇقتىكى دەرسلەرنى قوشسىڭىز ، .input-group
ئىچىدىكى مەزمۇنلار ئاپتوماتىك چوڭ-كىچىك بولىدۇ - ھەر بىر ئېلېمېنتنىڭ جەدۋەل كونترول چوڭلۇقى سىنىپىنى تەكرارلاشنىڭ ھاجىتى يوق.
<div class= "input-group input-group-lg" >
<span class= "input-group-addon" id= "sizing-addon1" > @</span>
<input type= "text" class= "form-control" placeholder= "Username" aria-describedby= "sizing-addon1" >
</div>
<div class= "input-group" >
<span class= "input-group-addon" id= "sizing-addon2" > @</span>
<input type= "text" class= "form-control" placeholder= "Username" aria-describedby= "sizing-addon2" >
</div>
<div class= "input-group input-group-sm" >
<span class= "input-group-addon" id= "sizing-addon3" > @</span>
<input type= "text" class= "form-control" placeholder= "Username" aria-describedby= "sizing-addon3" >
</div>
ھەر قانداق تەكشۈرۈش رامكىسى ياكى رادىئو تاللانمىسىنى تېكىستنىڭ ئورنىغا كىرگۈزۈش گۇرۇپپىسىنىڭ قوشۇمچە قىسمىغا قويۇڭ.
<div class= "row" >
<div class= "col-lg-6" >
<div class= "input-group" >
<span class= "input-group-addon" >
<input type= "checkbox" aria-label= "..." >
</span>
<input type= "text" class= "form-control" aria-label= "..." >
</div> <!-- /input-group -->
</div> <!-- /.col-lg-6 -->
<div class= "col-lg-6" >
<div class= "input-group" >
<span class= "input-group-addon" >
<input type= "radio" aria-label= "..." >
</span>
<input type= "text" class= "form-control" aria-label= "..." >
</div> <!-- /input-group -->
</div> <!-- /.col-lg-6 -->
</div> <!-- /.row -->
كىرگۈزۈش گۇرۇپپىسىدىكى كۇنۇپكىلار بىر ئاز ئوخشىمايدۇ ، يەنە بىر دەرىجىدىكى ئۇۋا تەلەپ قىلىدۇ. ئۇنىڭ ئورنىغا ، كۇنۇپكىلارنى ئوراپ .input-group-addon
ئىشلىتىشكە توغرا كېلىدۇ . .input-group-btn
سۈكۈتتىكى توركۆرگۈچ ئۇسلۇبى سەۋەبىدىن تەلەپ قىلىنىدۇ.
<div class= "row" >
<div class= "col-lg-6" >
<div class= "input-group" >
<span class= "input-group-btn" >
<button class= "btn btn-default" type= "button" > Go!</button>
</span>
<input type= "text" class= "form-control" placeholder= "Search for..." >
</div> <!-- /input-group -->
</div> <!-- /.col-lg-6 -->
<div class= "col-lg-6" >
<div class= "input-group" >
<input type= "text" class= "form-control" placeholder= "Search for..." >
<span class= "input-group-btn" >
<button class= "btn btn-default" type= "button" > Go!</button>
</span>
</div> <!-- /input-group -->
</div> <!-- /.col-lg-6 -->
</div> <!-- /.row -->
<div class= "row" >
<div class= "col-lg-6" >
<div class= "input-group" >
<div class= "input-group-btn" >
<button type= "button" class= "btn btn-default dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" > Action <span class= "caret" ></span></button>
<ul class= "dropdown-menu" >
<li><a href= "#" > Action</a></li>
<li><a href= "#" > Another action</a></li>
<li><a href= "#" > Something else here</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > Separated link</a></li>
</ul>
</div> <!-- /btn-group -->
<input type= "text" class= "form-control" aria-label= "..." >
</div> <!-- /input-group -->
</div> <!-- /.col-lg-6 -->
<div class= "col-lg-6" >
<div class= "input-group" >
<input type= "text" class= "form-control" aria-label= "..." >
<div class= "input-group-btn" >
<button type= "button" class= "btn btn-default dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" > Action <span class= "caret" ></span></button>
<ul class= "dropdown-menu dropdown-menu-right" >
<li><a href= "#" > Action</a></li>
<li><a href= "#" > Another action</a></li>
<li><a href= "#" > Something else here</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > Separated link</a></li>
</ul>
</div> <!-- /btn-group -->
</div> <!-- /input-group -->
</div> <!-- /.col-lg-6 -->
</div> <!-- /.row -->
<div class= "input-group" >
<div class= "input-group-btn" >
<!-- Button and dropdown menu -->
</div>
<input type= "text" class= "form-control" aria-label= "..." >
</div>
<div class= "input-group" >
<input type= "text" class= "form-control" aria-label= "..." >
<div class= "input-group-btn" >
<!-- Button and dropdown menu -->
</div>
</div>
ھەر بىر تەرىپىڭىزدە پەقەت بىرلا قىستۇرما بولالىسىڭىز ، بىرلا ۋاقىتتا بىر قانچە كۇنۇپكا بار .input-group-btn
.
<div class= "input-group" >
<div class= "input-group-btn" >
<!-- Buttons -->
</div>
<input type= "text" class= "form-control" aria-label= "..." >
</div>
<div class= "input-group" >
<input type= "text" class= "form-control" aria-label= "..." >
<div class= "input-group-btn" >
<!-- Buttons -->
</div>
</div>
Bootstrap دىكى دېڭىز ئارمىيىسى ئاساسى .nav
سىنىپتىن باشلاپ ئورتاق بەھرىلىنىشتىن ئورتاق بەھرىلىنىدۇ. ھەر بىر ئۇسلۇب ئارىسىدا ئالماشتۇرۇش ئۈچۈن ئالماشتۇرغۇچ سىنىپى ئالماشتۇرۇڭ.
بەتكۈچ تاختىسى ئۈچۈن nav نى ئىشلىتىش JavaScript بەتكۈچ قىستۇرمىسىنى تەلەپ قىلىدۇ
جەدۋەل رايونى بار بەتكۈچلەرگە چوقۇم JavaScript قىستۇرمىسىنى ئىشلىتىڭ . بۇ بەلگە يەنە قوشۇمچە role
ۋە ARIA خاسلىقىنى تەلەپ قىلىدۇ - تېخىمۇ كۆپ تەپسىلاتلار ئۈچۈن قىستۇرمىنىڭ ئۈلگە بەلگىسىنى كۆرۈڭ.
يول باشلاش ئۈچۈن ئىشلىتىلىدىغان دېڭىز ئارمىيىسىنى ئىشلىتىڭ
ناۋادا يولباشچى بالداق بىلەن تەمىنلىمەكچى بولسىڭىز role="navigation"
، ئەڭ لوگىكىلىق ئانا قاچىسىغا چوقۇم بىر قوشۇشنى جەزملەشتۈرۈڭ <ul>
ياكى <nav>
پۈتكۈل يول باشلاش ئەتراپىغا بىر ئېلېمېنتنى ئوراپ بېرىڭ. رولنى ئۆزىگە قوشماڭ <ul>
، چۈنكى بۇ ئۇنىڭ ياردەمچى تېخنىكا ئارقىلىق ئەمەلىي تىزىملىك سۈپىتىدە ئېلان قىلىنىشىنىڭ ئالدىنى ئالىدۇ.
بەتكۈچ
.nav-tabs
دەرسنىڭ ئاساسىي سىنىپقا ئېھتىياجلىق ئىكەنلىكىگە دىققەت قىلىڭ .nav
.
<ul class= "nav nav-tabs" >
<li role= "presentation" class= "active" ><a href= "#" > Home</a></li>
<li role= "presentation" ><a href= "#" > Profile</a></li>
<li role= "presentation" ><a href= "#" > Messages</a></li>
</ul>
Pills
ئوخشاش HTML نى ئېلىڭ ، ئەمما .nav-pills
ئۇنىڭ ئورنىغا ئىشلىتىڭ:
<ul class= "nav nav-pills" >
<li role= "presentation" class= "active" ><a href= "#" > Home</a></li>
<li role= "presentation" ><a href= "#" > Profile</a></li>
<li role= "presentation" ><a href= "#" > Messages</a></li>
</ul>
دورىلارمۇ تىك ھالەتتە بولىدۇ. قوشۇڭ .nav-stacked
.
<ul class= "nav nav-pills nav-stacked" >
...
</ul>
يوللۇق
ئاتا-ئانىسىنىڭ كەڭلىكى 768px دىن چوڭ بولغان ئېكراندا ئاسانلا بەتكۈچ ياكى دورا ياساڭ .nav-justified
. كىچىك ئېكرانلاردا ، دېڭىز ئۇلانمىلىرى تىزىپ قويۇلغان.
يوللۇق navbar nav ئۇلىنىشى ھازىرچە قوللىمايدۇ.
سافارى ۋە ئىنكاسچان يوللۇق دېڭىز ئارمىيىسى
V9.1.2 دىن باشلاپ ، Safari توركۆرگۈڭىزنىڭ توغرىسىغا توغرىلىنىپ ، يېڭىلانغاندىن كېيىن تازىلانغان يوللۇق يولدا خاتالىق سادىر قىلىدىغان كەمتۈكنى كۆرسىتىپ بېرىدۇ. بۇ خاتالىق يوللۇق nav مىسالىدا كۆرسىتىلدى .
<ul class= "nav nav-tabs nav-justified" >
...
</ul>
<ul class= "nav nav-pills nav-justified" >
...
</ul>
ئۇلانمىلارنى چەكلىدى
ھەر قانداق دېڭىز زاپچاسلىرى (بەتكۈچ ياكى دورىلار) .disabled
ئۈچۈن كۈلرەڭ ئۇلىنىشلارنى قوشۇڭ ، يۆتكىلىش ئۈنۈمى يوق .
ئۇلىنىش ئىقتىدارى تەسىرگە ئۇچرىمىدى
بۇ سىنىپ پەقەت <a>
ئۇنىڭ كۆرۈنۈشىنىلا ئۆزگەرتىدۇ. بۇ يەردىكى ئۇلىنىشنى چەكلەش ئۈچۈن خاس JavaScript نى ئىشلىتىڭ.
<ul class= "nav nav-pills" >
...
<li role= "presentation" class= "disabled" ><a href= "#" > Disabled link</a></li>
...
</ul>
تامچە ئىشلىتىش
ئازراق قوشۇمچە HTML ۋە ئېسىلما JavaScript قىستۇرمىسى بىلەن تىزىملىك تىزىملىكىنى قوشۇڭ .
تارتما تىزىملىكلەر
<ul class= "nav nav-tabs" >
...
<li role= "presentation" class= "dropdown" >
<a class= "dropdown-toggle" data-toggle= "dropdown" href= "#" role= "button" aria-haspopup= "true" aria-expanded= "false" >
Dropdown <span class= "caret" ></span>
</a>
<ul class= "dropdown-menu" >
...
</ul>
</li>
...
</ul>
تۆۋەنگە چۈشكەن دورىلار
<ul class= "nav nav-pills" >
...
<li role= "presentation" class= "dropdown" >
<a class= "dropdown-toggle" data-toggle= "dropdown" href= "#" role= "button" aria-haspopup= "true" aria-expanded= "false" >
Dropdown <span class= "caret" ></span>
</a>
<ul class= "dropdown-menu" >
...
</ul>
</li>
...
</ul>
كۆڭۈلدىكى navbar
Navbars سىزنىڭ قوللىنىشچان پروگراممىڭىز ياكى تور بېتىڭىزنىڭ يول باشلاش ماۋزۇسى سۈپىتىدە ئىنكاس قايتۇرىدىغان مېتا زاپچاسلىرى. ئۇلار كۆچمە كۆرۈنۈشتە يىمىرىلىشكە باشلايدۇ (ۋە ئالماشتۇرغىلى بولىدۇ) ھەمدە بار بولغان كۆرۈنۈش كەڭلىكىنىڭ چوڭىيىشىغا ئەگىشىپ توغرىسىغا ئايلىنىدۇ.
يوللۇق navbar nav ئۇلىنىشى ھازىرچە قوللىمايدۇ.
تولۇپ تاشقان مەزمۇن
Bootstrap توربېتىڭىزدىكى مەزمۇننىڭ قانچىلىك بوشلۇققا ئېھتىياجلىق ئىكەنلىكىنى بىلمىگەچكە ، مەزمۇننى ئىككىنچى قۇرغا قاچىلاش مەسىلىسىگە يولۇقۇشىڭىز مۇمكىن. بۇنى ھەل قىلىش ئۈچۈن:
يولباشچى تۈرلىرىنىڭ مىقدارى ياكى كەڭلىكىنى ئازايتىڭ.
ئىنكاسچان ئەمەلىي دەرسلەر ئارقىلىق مەلۇم ئېكران چوڭلۇقىدىكى مەلۇم يولباشچى تۈرلەرنى يوشۇرۇڭ .
يولباشچىڭىزنىڭ يىمىرىلگەن ۋە توغرىسىغا توغرىلانغان نۇقتىنى ئۆزگەرتىڭ. ئۆزگەرگۈچى مىقدارنى خاسلاشتۇرۇڭ @grid-float-breakpoint
ياكى ئۆزىڭىزنىڭ مېدىيا سوئالىڭىزنى قوشۇڭ.
JavaScript قىستۇرمىسىنى تەلەپ قىلىدۇ
ئەگەر JavaScript چەكلەنگەن بولسا ھەمدە كۆرۈنۈش ئېغىزى تار بولۇپ ، يولباشچى يىمىرىلىدۇ ، يولباشچىنى كېڭەيتىپ ، ئىچىدىكى مەزمۇننى كۆرۈش مۇمكىن ئەمەس .navbar-collapse
.
ئىنكاسچان يولباشچى يىمىرىلىش قىستۇرمىسىنى Bootstrap نەشرىڭىزگە كىرگۈزۈشنى تەلەپ قىلىدۇ.
ئۆرۈلۈپ چۈشكەن كۆچمە يولباشچى بۆلىكىنى ئۆزگەرتىش
كۆرۈنۈش كۆزنىكى تار بولغاندا تىك بالداق ئۇنىڭ تىك كۆچمە كۆرۈنۈشىگە يىمىرىلىدۇ ، كۆرۈنۈش ئېغىزى كەم دېگەندە كەڭلىكتە @grid-float-breakpoint
بولغاندا ئۇدۇلسىز كۆچمە كۆرۈنۈشكە كېڭىيىدۇ . @grid-float-breakpoint
بۇ مەنبە ئۆزگەرگۈچى مىقدارنى مەنبەدىن تەڭشەپ ، يولباشچى يىمىرىلگەندە / كېڭەيگەندە كونترول قىلىڭ. سۈكۈتتىكى قىممىتى 768px
(ئەڭ كىچىك «كىچىك» ياكى «تاختا كومپيۇتېر» ئېكرانى).
ناۋايخانىلارنى زىيارەت قىلىڭ
بىر ئېلېمېنتنى ئىشلىتىشكە كاپالەتلىك قىلىڭ <nav>
ياكى ئەگەر a غا ئوخشاش تېخىمۇ ئومۇمىي ئېلېمېنتنى ئىشلەتسىڭىز ، ھەر بىر يولباشچىغا <div>
a قوشۇپ ، role="navigation"
ئۇنى ياردەمچى تېخنىكىلارنى ئىشلەتكۈچىلەر ئۈچۈن ئابىدە خاراكتېرلىك رايون دەپ ئېنىق تونۇۋېلىڭ.
<nav class= "navbar navbar-default" >
<div class= "container-fluid" >
<!-- Brand and toggle get grouped for better mobile display -->
<div class= "navbar-header" >
<button type= "button" class= "navbar-toggle collapsed" data-toggle= "collapse" data-target= "#bs-example-navbar-collapse-1" aria-expanded= "false" >
<span class= "sr-only" > Toggle navigation</span>
<span class= "icon-bar" ></span>
<span class= "icon-bar" ></span>
<span class= "icon-bar" ></span>
</button>
<a class= "navbar-brand" href= "#" > Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class= "collapse navbar-collapse" id= "bs-example-navbar-collapse-1" >
<ul class= "nav navbar-nav" >
<li class= "active" ><a href= "#" > Link <span class= "sr-only" > (current)</span></a></li>
<li><a href= "#" > Link</a></li>
<li class= "dropdown" >
<a href= "#" class= "dropdown-toggle" data-toggle= "dropdown" role= "button" aria-haspopup= "true" aria-expanded= "false" > Dropdown <span class= "caret" ></span></a>
<ul class= "dropdown-menu" >
<li><a href= "#" > Action</a></li>
<li><a href= "#" > Another action</a></li>
<li><a href= "#" > Something else here</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > Separated link</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > One more separated link</a></li>
</ul>
</li>
</ul>
<form class= "navbar-form navbar-left" >
<div class= "form-group" >
<input type= "text" class= "form-control" placeholder= "Search" >
</div>
<button type= "submit" class= "btn btn-default" > Submit</button>
</form>
<ul class= "nav navbar-nav navbar-right" >
<li><a href= "#" > Link</a></li>
<li class= "dropdown" >
<a href= "#" class= "dropdown-toggle" data-toggle= "dropdown" role= "button" aria-haspopup= "true" aria-expanded= "false" > Dropdown <span class= "caret" ></span></a>
<ul class= "dropdown-menu" >
<li><a href= "#" > Action</a></li>
<li><a href= "#" > Another action</a></li>
<li><a href= "#" > Something else here</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > Separated link</a></li>
</ul>
</li>
</ul>
</div> <!-- /.navbar-collapse -->
</div> <!-- /.container-fluid -->
</nav>
ماركا سۈرىتى
Nwarbar ماركىسىنى ئۆزىڭىزنىڭ سۈرىتى بىلەن ئالماشتۇرۇڭ <img>
. ئۇنىڭ ئۆزىگە خاس تاختا ۋە ئېگىزلىكى بولغاچقا .navbar-brand
، رەسىمىڭىزگە ئاساسەن بەزى CSS نى قاپلىۋېتىشىڭىز مۇمكىن.
<nav class= "navbar navbar-default" >
<div class= "container-fluid" >
<div class= "navbar-header" >
<a class= "navbar-brand" href= "#" >
<img alt= "Brand" src= "..." >
</a>
</div>
</div>
</nav>
شەكىل مەزمۇنىنى .navbar-form
مۇۋاپىق تىك توغرىلاش ۋە تار كۆرۈنۈشتە يىمىرىلگەن ھەرىكەتكە قويۇڭ. توغرىلاش تاللانمىلىرىنى ئىشلىتىپ ئۇنىڭ يولباشچى مەزمۇنى ئىچىدە قەيەردە تۇرىدىغانلىقىنى قارار قىلىڭ.
باش كۆتۈرگەندە ، .navbar-form
كودنىڭ كۆپ قىسمىنى .form-inline
ئارىلاشتۇرۇش ئارقىلىق ھەمبەھىرلەيدۇ. كىرگۈزۈش گۇرۇپپىلىرىغا ئوخشاش بەزى شەكىل كونتروللىرى مۇقىم كەڭلىكتىكى يولباشچى ئىچىدە مۇۋاپىق كۆرسىتىلىشىنى تەلەپ قىلىشى مۇمكىن.
<form class= "navbar-form navbar-left" role= "search" >
<div class= "form-group" >
<input type= "text" class= "form-control" placeholder= "Search" >
</div>
<button type= "submit" class= "btn btn-default" > Submit</button>
</form>
.navbar-btn
سىنىپنى تىك يۆنىلىشتە تۇرغۇزۇش ئۈچۈن <button>
تۇرمايدىغان ئېلېمېنتلارغا قوشۇڭ .<form>
<button type= "button" class= "btn btn-default navbar-btn" > Sign in</button>
مەزمۇنغا ماس ئىشلىتىش
ئۆلچەملىك كۇنۇپكا سىنىپىغا ئوخشاش ، ئېلېمېنت ۋە ئېلېمېنتلارنى .navbar-btn
ئىشلىتىشكە بولىدۇ . قانداقلا بولمىسۇن ، ئىچىدىكى ئۆلچەملىك كۇنۇپكىلار سىنىپىنىمۇ ئىشلىتىشكە بولمايدۇ .<a>
<input>
.navbar-btn
<a>
.navbar-nav
تېكىست
تېكىستنىڭ تىزمىسىنى ئېلېمېنتقا ئوراپ .navbar-text
، ئادەتتە <p>
مۇۋاپىق يېتەكلەش ۋە رەڭگىگە بەلگە قويۇڭ.
مارك ئوتتو دەپ تىزىملاتتى
<p class= "navbar-text" > Signed in as Mark Otto</p>
غەيرى ئۇلانمىلار
ئادەتتىكى يولباشچى يول باشلاش زاپچاسلىرى ئىچىدە بولمىغان ئۆلچەملىك ئۇلىنىشلارنى ئىشلىتىدىغان كىشىلەر ئۈچۈن ، .navbar-link
سىنىپتىن پايدىلىنىپ سۈكۈتتىكى ۋە تەتۈر يۆنىلىشلىك يولباشچى تاللانمىلىرىغا مۇۋاپىق رەڭ قوشۇڭ.
<p class= "navbar-text navbar-right" > Signed in as <a href= "#" class= "navbar-link" > Mark Otto</a></p>
زاپچاسلارنى توغرىلاش
Nav ئۇلانمىلىرى ، شەكىللەر ، كۇنۇپكىلار ياكى تېكىستلەرنى .navbar-left
توغرىلاڭ .navbar-right
. ھەر ئىككى سىنىپ بەلگىلەنگەن يۆنىلىشكە CSS لەيلىمە قوشىدۇ. مەسىلەن ، nav ئۇلانمىلىرىنى توغرىلاش ئۈچۈن <ul>
، مۇناسىۋەتلىك قوللىنىشچان سىنىپلار بىلەن ئايرىم قويۇڭ.
بۇ دەرسلەر ئارىلاشما نەشىر نۇسخىسى بولۇپ .pull-left
، .pull-right
ئەمما ئۇلار ئۈسكۈنىنىڭ چوڭ-كىچىكلىكىدىكى ناۋاي زاپچاسلىرىنى بىر تەرەپ قىلىش ئۈچۈن مېدىيا سوئاللىرىغا ماس كېلىدۇ.
كۆپ زاپچاسنى توغرا توغرىلاش
Navbars نىڭ ھازىر بىر قانچە .navbar-right
سىنىپ بىلەن چەكلىمىسى بار. بوشلۇق بوشلۇقىنى مۇۋاپىق ئىشلىتىش ئۈچۈن ، ئاخىرقى .navbar-right
ئېلېمېنتتا مەنپىي پەرق ئىشلىتىمىز. بۇ سىنىپنى ئىشلىتىدىغان نۇرغۇن ئېلېمېنتلار بولغاندا ، بۇ گىرۋەكلەر كۆڭۈلدىكىدەك ئىشلىمەيدۇ.
بىز بۇ زاپچاسنى v4 دا قايتا يازالايمىز.
ئۈستىگە مۇقىملاشتۇرۇلغان
مەركىزى ياكى pad navbar مەزمۇنىنى قوشۇڭ .navbar-fixed-top
ۋە قوشۇڭ..container
.container-fluid
<nav class= "navbar navbar-default navbar-fixed-top" >
<div class= "container" >
...
</div>
</nav>
بەدەنگە چاپلاش تەلەپ قىلىنىدۇ
مۇقىم يولباشچى باشقا مەزمۇنلىرىڭىزنى قاپلايدۇ ، ئەگەر سىز padding
ئۇنىڭ ئۈستىگە قوشۇلمىسىڭىز <body>
. ئۆزىڭىزنىڭ قىممىتىنى سىناپ بېقىڭ ياكى تۆۋەندىكى ئۈزۈندىمىزنى ئىشلىتىڭ. تەكلىپ: سۈكۈتتىكى ھالەتتە ، يولباشچى ئېگىزلىكى 50px.
body { padding-top : 70px ; }
يادرولۇق Bootstrap CSS دىن كېيىن بۇنى جەزملەشتۈرۈڭ .
ئاستىغا مۇقىملاشتۇرۇلغان
مەركىزى ياكى pad navbar مەزمۇنىنى قوشۇڭ .navbar-fixed-bottom
ۋە قوشۇڭ..container
.container-fluid
<nav class= "navbar navbar-default navbar-fixed-bottom" >
<div class= "container" >
...
</div>
</nav>
بەدەنگە چاپلاش تەلەپ قىلىنىدۇ
padding
مۇقىم يولباشچى باشقا مەزمۇنلارنى قاپلايدۇ ، پەقەت ئاستىغا قوشمىسىڭىز <body>
. ئۆزىڭىزنىڭ قىممىتىنى سىناپ بېقىڭ ياكى تۆۋەندىكى ئۈزۈندىمىزنى ئىشلىتىڭ. تەكلىپ: سۈكۈتتىكى ھالەتتە ، يولباشچى ئېگىزلىكى 50px.
body { padding-bottom : 70px ; }
يادرولۇق Bootstrap CSS دىن كېيىن بۇنى جەزملەشتۈرۈڭ .
تۇراقلىق
تولۇق ياكى كەڭلىكتىكى يولباشچى قۇر ، بۇ بەتنى قوشۇش .navbar-static-top
ۋە ئۆز ئىچىگە ئالغان .container
ياكى .container-fluid
مەركىزى ۋە تاختا يولباشچى مەزمۇنىنى ئۆز ئىچىگە ئالىدۇ.
دەرسلەرگە ئوخشىمايدىغىنى ، .navbar-fixed-*
ئۈستىدىكى ھېچقانداق تاختاينى ئۆزگەرتىشنىڭ ھاجىتى يوق body
.
<nav class= "navbar navbar-default navbar-static-top" >
<div class= "container" >
...
</div>
</nav>
تەتۈر يۆنىلىشلىك بالداق
قوشۇش ئارقىلىق يولباشچىنىڭ كۆرۈنۈشىنى ئۆزگەرتىڭ .navbar-inverse
.
<nav class= "navbar navbar-inverse" >
...
</nav>
نۆۋەتتىكى بەتنىڭ يول باشلاش دەرىجىسىدىكى ئورنىنى كۆرسىتىڭ.
:before
ئايرىغۇچلار CSS دا ئاپتوماتىك ھالدا قوشۇلىدۇ content
.
<ol class= "breadcrumb" >
<li><a href= "#" > Home</a></li>
<li><a href= "#" > Library</a></li>
<li class= "active" > Data</li>
</ol>
تور بېتىڭىز ياكى ئەپىڭىزگە كۆپ بەتلىك بەتكۈچ زاپچاسلىرى ياكى ئاددىيراق قەغەز تاللاش ئورنى بىلەن ئۇلىنىش ئۇلانمىسى تەمىنلەڭ .
Rdio دىن ئىلھام ئالغان ئاددىي تەسۋىر ، ئەپ ۋە ئىزدەش نەتىجىسى ئۈچۈن ناھايىتى ياخشى. چوڭ بۆلەكنى قولدىن بېرىپ قويۇش تەس ، ئاسان كېڭەيتىشكە بولىدۇ ھەمدە چوڭ چېكىش رايونى بىلەن تەمىنلەيدۇ.
<nav aria-label= "Page navigation" >
<ul class= "pagination" >
<li>
<a href= "#" aria-label= "Previous" >
<span aria-hidden= "true" > « </span>
</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= "#" > 5</a></li>
<li>
<a href= "#" aria-label= "Next" >
<span aria-hidden= "true" > » </span>
</a>
</li>
</ul>
</nav>
چەكلەنگەن ۋە ئاكتىپ ھالەتلەر
ئۇلىنىش ئوخشىمىغان ئەھۋاللارغا ماسلاشتۇرۇلغان. .disabled
چەككىلى بولمايدىغان ئۇلىنىش ۋە .active
نۆۋەتتىكى بەتنى كۆرسىتىش ئۈچۈن ئىشلىتىڭ .
<nav aria-label= "..." >
<ul class= "pagination" >
<li class= "disabled" ><a href= "#" aria-label= "Previous" ><span aria-hidden= "true" > « </span></a></li>
<li class= "active" ><a href= "#" > 1 <span class= "sr-only" > (current)</span></a></li>
...
</ul>
</nav>
ئاكتىپ ياكى چەكلەنگەن لەڭگەرلەرنى ئالماشتۇرۇشىڭىزنى <span>
ياكى ئالدىنقى / كېيىنكى ئوقيادا لەڭگەرنى ئەمەلدىن قالدۇرۇشىڭىزنى ، كۆزلىگەن ئۇسلۇبلارنى ساقلاپ قېلىش بىلەن بىرگە چېكىش ئىقتىدارىنى ئۆچۈرۈشىڭىزنى تەۋسىيە قىلىمىز.
<nav aria-label= "..." >
<ul class= "pagination" >
<li class= "disabled" >
<span>
<span aria-hidden= "true" > « </span>
</span>
</li>
<li class= "active" >
<span> 1 <span class= "sr-only" > (current)</span></span>
</li>
...
</ul>
</nav>
Sizing
چوڭ ياكى كىچىكرەك تەسەۋۋۇرمۇ؟ قوشۇمچە .pagination-lg
ياكى .pagination-sm
چوڭلۇقتا.
<nav aria-label= "..." ><ul class= "pagination pagination-lg" > ...</ul></nav>
<nav aria-label= "..." ><ul class= "pagination" > ...</ul></nav>
<nav aria-label= "..." ><ul class= "pagination pagination-sm" > ...</ul></nav>
يېنىك بەلگە ۋە ئۇسلۇب بىلەن ئاددىي كىچىكلىتىش ئەمەلگە ئاشۇرۇش ئۈچۈن تېز ۋە كېيىنكى ئۇلىنىشلار. بىلوگ ياكى ژۇرنال قاتارلىق ئاددىي تور بېكەتلەر ئۈچۈن ناھايىتى ياخشى.
سۈكۈتتىكى مىسال
سۈكۈتتىكى ھالەتتە ، قەغەز مەركىزى ئۇلىنىدۇ.
<nav aria-label= "..." >
<ul class= "pager" >
<li><a href= "#" > Previous</a></li>
<li><a href= "#" > Next</a></li>
</ul>
</nav>
ئۇلانمىلار
ئۇنىڭدىن باشقا ، سىز ھەر بىر ئۇلىنىشنى يان تەرەپكە توغرىلىيالايسىز:
<nav aria-label= "..." >
<ul class= "pager" >
<li class= "previous" ><a href= "#" ><span aria-hidden= "true" > ← </span> Older</a></li>
<li class= "next" ><a href= "#" > Newer <span aria-hidden= "true" > → </span></a></li>
</ul>
</nav>
ئىختىيارىي چەكلەنگەن ھالەت
Pager ئۇلانمىلىرى يەنە ئادەتتىكى .disabled
ئىشلىتىش سىنىپىدىن پايدىلىنىدۇ.
<nav aria-label= "..." >
<ul class= "pager" >
<li class= "previous disabled" ><a href= "#" ><span aria-hidden= "true" > ← </span> Older</a></li>
<li class= "next" ><a href= "#" > Newer <span aria-hidden= "true" > → </span></a></li>
</ul>
</nav>
مىسال
يېڭى ماۋزۇ
يېڭى ماۋزۇ
يېڭى ماۋزۇ
يېڭى ماۋزۇ
يېڭى ماۋزۇ
يېڭى ماۋزۇ
<h3> Example heading <span class= "label label-default" > New</span></h3>
ئىشلەتكىلى بولىدىغان ئۆزگىرىشلەر
بەلگىنىڭ كۆرۈنۈشىنى ئۆزگەرتىش ئۈچۈن تۆۋەندە تىلغا ئېلىنغان ئۆزگەرتىش سىنىپىنىڭ خالىغان بىرىنى قوشۇڭ.
سۈكۈتتىكى
دەسلەپكى
مۇۋەپپەقىيەت
ئۇچۇرى
ئاگاھلاندۇرۇش
خەۋىپى
<span class= "label label-default" > Default</span>
<span class= "label label-primary" > Primary</span>
<span class= "label label-success" > Success</span>
<span class= "label label-info" > Info</span>
<span class= "label label-warning" > Warning</span>
<span class= "label label-danger" > Danger</span>
توننا بەلگىسى بارمۇ؟
تار قاچىنىڭ ئىچىدە ئون نەچچە قۇر بەلگە بولغاندا ، ھەر بىرىنىڭ ئۆزىگە خاس inline-block
ئېلېمېنتى بار (سىنبەلگە ئوخشاش) بولغاندا ، مەسىلە كۆرۈلۈشى مۇمكىن. بۇنىڭ يولى تەڭشىلىۋاتىدۇ display: inline-block;
. مەزمۇن ۋە مىسال ئۈچۈن # 13219 گە قاراڭ .
<span class="badge">
ئۇلىنىش ، Bootstrap navs ۋە باشقىلارنى قوشۇش ئارقىلىق يېڭى ياكى ئوقۇلمىغان تۈرلەرنى ئاسان گەۋدىلەندۈرۈڭ .
<a href= "#" > Inbox <span class= "badge" > 42</span></a>
<button class= "btn btn-primary" type= "button" >
Messages <span class= "badge" > 4</span>
</button>
ئۆزى يىمىرىلىدۇ
يېڭى ياكى ئوقۇلمىغان تۈرلەر بولمىسا ، بەلگە :empty
ھېچقانداق مەزمۇن بولمىسا ، بەلگە (CSS تاللىغۇچ ئارقىلىق) يىمىرىلىدۇ.
تور كۆرگۈچنىڭ ماسلىشىشچانلىقى
بەلگىلەر Internet Explorer 8 دە ئۆزلۈكىدىن يىمىرىلمەيدۇ ، چۈنكى :empty
تاللىغۇچنى قوللىمايدۇ.
ئاكتىپ دېڭىز ھالىتىگە ماسلىشىدۇ
ئىچىگە ئورۇنلاشتۇرۇلغان ئۇسلۇبلار دورىنى يول باشلاشتا ئاكتىپ ھالەتكە بەلگە قويۇش ئۈچۈن ئۆز ئىچىگە ئالىدۇ.
<ul class= "nav nav-pills" role= "tablist" >
<li role= "presentation" class= "active" ><a href= "#" > Home <span class= "badge" > 42</span></a></li>
<li role= "presentation" ><a href= "#" > Profile</a></li>
<li role= "presentation" ><a href= "#" > Messages <span class= "badge" > 3</span></a></li>
</ul>
يېنىك ، ئەۋرىشىم زاپچاسلار پۈتكۈل كۆرۈنۈشنى خالىغانچە كېڭەيتىپ تور بېتىڭىزدىكى مۇھىم مەزمۇنلارنى كۆرسىتەلەيدۇ.
ياخشىمۇسىز ، دۇنيا!
بۇ ئاددىي قەھرىمان بىرلىكى ، ئالاھىدە jumbotron ئۇسلۇبىدىكى زاپچاس بولۇپ ، ئالاھىدە مەزمۇن ياكى ئۇچۇرغا ئالاھىدە ئەھمىيەت بېرىدۇ.
تەپسىلاتى
<div class= "jumbotron" >
<h1> Hello, world!</h1>
<p> ...</p>
<p><a class= "btn btn-primary btn-lg" href= "#" role= "button" > Learn more</a></p>
</div>
Jumbotron نى تولۇق كەڭلىك ۋە يۇمىلاق بۇلۇڭسىز قىلىش ئۈچۈن ، ئۇنى بارلىق .container
s نىڭ سىرتىغا قويۇپ ، ئىچىگە ئىچىگە قوشۇڭ .container
.
<div class= "jumbotron" >
<div class= "container" >
...
</div>
</div>
h1
مۇۋاپىق بوشلۇق ۋە بىر بەتتىكى مەزمۇن بۆلەكلىرى ئۈچۈن ئاددىي قاپ . ئۇ h1
سۈكۈتتىكى small
ئېلېمېنتنى ، شۇنداقلا باشقا نۇرغۇن زاپچاسلارنى ئىشلىتەلەيدۇ (قوشۇمچە ئۇسلۇب بىلەن).
<div class= "page-header" >
<h1> Example page header <small> Subtext for header</small></h1>
</div>
كىچىك كۆرۈنۈش زاپچاسلىرى بىلەن Bootstrap نىڭ تور سىستېمىسىنى كېڭەيتىپ ، رەسىم ، سىن ، تېكىست ۋە باشقا تورلارنى ئاسانلا كۆرسىتىدۇ.
ئوخشىمىغان ئېگىزلىك ۋە ياكى كەڭلىكتىكى كىچىك كۆرۈنۈشلەرنى Pinterest غا ئوخشاش كۆرسەتمەكچى بولسىڭىز ، ماسونرىي ، Isotope ياكى Salvattore قاتارلىق ئۈچىنچى تەرەپ قىستۇرمىسىنى ئىشلىتىشىڭىز كېرەك .
سۈكۈتتىكى مىسال
سۈكۈتتىكى ھالەتتە ، Bootstrap نىڭ كىچىك كۆرۈنۈشلىرى ئەڭ ئېھتىياجلىق بولغان بەلگە بىلەن ئۇلانغان رەسىملەرنى كۆرسىتىش ئۈچۈن لايىھەلەنگەن.
<div class= "row" >
<div class= "col-xs-6 col-md-3" >
<a href= "#" class= "thumbnail" >
<img src= "..." alt= "..." >
</a>
</div>
...
</div>
خاس مەزمۇن
ئازراق قوشۇمچە بەلگە ئارقىلىق كىچىك رەسىمگە ماۋزۇ ، ئابزاس ياكى كۇنۇپكا قاتارلىق HTML مەزمۇنلىرىنى قوشقىلى بولىدۇ.
كىچىك بەلگە
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida eget metus. Nullam id dolor id nibh ئۇلترا ماشىنىلىرى ut id elit.
Button Button
كىچىك بەلگە
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida eget metus. Nullam id dolor id nibh ئۇلترا ماشىنىلىرى ut id elit.
Button Button
كىچىك بەلگە
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida eget metus. Nullam id dolor id nibh ئۇلترا ماشىنىلىرى ut id elit.
Button Button
<div class= "row" >
<div class= "col-sm-6 col-md-4" >
<div class= "thumbnail" >
<img src= "..." alt= "..." >
<div class= "caption" >
<h3> Thumbnail label</h3>
<p> ...</p>
<p><a href= "#" class= "btn btn-primary" role= "button" > Button</a> <a href= "#" class= "btn btn-default" role= "button" > Button</a></p>
</div>
</div>
</div>
</div>
ئىشلەتكىلى بولىدىغان ۋە جانلىق بولغان ئاگاھلاندۇرۇش ئۇچۇرى بىلەن تىپىك ئىشلەتكۈچى ھەرىكىتى ئۈچۈن مەزمۇن خاراكتېرلىك ئىنكاس ئۇچۇرلىرى بىلەن تەمىنلەڭ.
مىساللار
ئاساسىي ئاگاھلاندۇرۇش ئۇچۇرلىرى ئۈچۈن ھەر قانداق تېكىست ۋە ئىختىيارىي ئىشتىن بوشىتىش كۇنۇپكىسىنى .alert
ۋە تۆت مەزمۇن سىنىپىنىڭ بىرىنى ئوراپ قويۇڭ..alert-success
سۈكۈتتىكى دەرس يوق
ئاگاھلاندۇرۇشنىڭ سۈكۈتتىكى دەرسلىرى يوق ، پەقەت ئاساسى ۋە ئۆزگەرتكۈچ دەرسلىرى بار. سۈكۈتتىكى كۈلرەڭ ئاگاھلاندۇرۇشنىڭ ئانچە ئەھمىيىتى يوق ، شۇڭا مەزمۇن سىنىپى ئارقىلىق بىر تۈرنى بەلگىلىشىڭىز تەلەپ قىلىنىدۇ. مۇۋەپپەقىيەت ، ئۇچۇر ، ئاگاھلاندۇرۇش ياكى خەتەردىن تاللاڭ.
ياخشى! سىز بۇ مۇھىم ئاگاھلاندۇرۇش ئۇچۇرىنى مۇۋەپپەقىيەتلىك ئوقۇدىڭىز.
Heads up! بۇ ئاگاھلاندۇرۇش سىزنىڭ دىققىتىڭىزگە موھتاج ، ئەمما ئۇ بەك مۇھىم ئەمەس.
ئاگاھلاندۇرۇش! ئەڭ ياخشىسى ئۆزىڭىزنى تەكشۈرۈڭ ، بەك ياخشى كۆرۈنمەيسىز.
ئاھ! بىر قانچە نەرسىنى ئۆزگەرتىپ قايتا يوللاپ بېقىڭ.
<div class= "alert alert-success" role= "alert" > ...</div>
<div class= "alert alert-info" role= "alert" > ...</div>
<div class= "alert alert-warning" role= "alert" > ...</div>
<div class= "alert alert-danger" role= "alert" > ...</div>
تارقاق ئاگاھلاندۇرۇش
ئىختىيارى .alert-dismissible
ۋە تاقاش كۇنۇپكىسىنى قوشۇش ئارقىلىق ھەر قانداق ئاگاھلاندۇرۇش بەرپا قىلىڭ.
JavaScript ئاگاھلاندۇرۇش قىستۇرمىسىنى تەلەپ قىلىدۇ
تولۇق ئىشلەيدىغان ، ئەمەلدىن قالدۇرغىلى بولىدىغان ئاگاھلاندۇرۇش ئۈچۈن ، چوقۇم ئاگاھلاندۇرۇش JavaScript قىستۇرمىسىنى ئىشلىتىشىڭىز كېرەك .
×
ئاگاھلاندۇرۇش! ئەڭ ياخشىسى ئۆزىڭىزنى تەكشۈرۈڭ ، بەك ياخشى كۆرۈنمەيسىز.
<div class= "alert alert-warning alert-dismissible" role= "alert" >
<button type= "button" class= "close" data-dismiss= "alert" aria-label= "Close" ><span aria-hidden= "true" > × </span></button>
<strong> Warning!</strong> Better check yourself, you're not looking too good.
</div>
ئاگاھلاندۇرۇشتىكى ئۇلىنىش
ئىشلىتىش .alert-link
سىنىپىدىن پايدىلىنىپ ھەر قانداق ئاگاھلاندۇرۇش ئىچىدە ماس ھالدىكى رەڭلىك ئۇلىنىشلارنى تەمىنلەڭ.
<div class= "alert alert-success" role= "alert" >
<a href= "#" class= "alert-link" > ...</a>
</div>
<div class= "alert alert-info" role= "alert" >
<a href= "#" class= "alert-link" > ...</a>
</div>
<div class= "alert alert-warning" role= "alert" >
<a href= "#" class= "alert-link" > ...</a>
</div>
<div class= "alert alert-danger" role= "alert" >
<a href= "#" class= "alert-link" > ...</a>
</div>
ئاددىي ، ئەمما جانلىق ئىلگىرىلەش بالدىقى بىلەن خىزمەت ئېقىمى ياكى ھەرىكەتنىڭ ئىلگىرىلىشى ھەققىدە ئەڭ يېڭى تەكلىپ-پىكىر بىلەن تەمىنلەڭ.
تور كۆرگۈچنىڭ ماسلىشىشچانلىقى
ئىلگىرىلەش بالدىقى CSS3 ئۆتكۈنچى ۋە كارتون ئارقىلىق ئۇلارنىڭ بىر قىسىم ئۈنۈملىرىنى قولغا كەلتۈرىدۇ. بۇ ئىقتىدارلار Internet Explorer 9 ۋە Firefox نىڭ ئاستىدىكى ياكى كونا نەشرىدە قوللىمايدۇ. Opera 12 كارتوننى قوللىمايدۇ.
مەزمۇن بىخەتەرلىك سىياسىتى (CSP) ماسلىشىشچانلىقى
ئەگەر تور بېتىڭىزدە رۇخسەت قىلمايدىغان مەزمۇن بىخەتەرلىك سىياسىتى (CSP) style-src 'unsafe-inline'
بولسا ، سىز style
تۆۋەندىكى مىساللاردا كۆرسىتىلگەندەك ، خاسلىق خاسلىقىنى ئىشلىتىپ ئىلگىرىلەش بالدىقىنىڭ كەڭلىكىنى بەلگىلىيەلمەيسىز. قاتتىق CSP غا ماس كېلىدىغان كەڭلىكنى تەڭشەشنىڭ باشقا ئۇسۇللىرى ئازراق خاسلاشتۇرۇلغان JavaScript (ئۇ تەڭشەلگەن element.style.width
) ياكى خاس CSS سىنىپلىرىنى ئىشلىتىشنى ئۆز ئىچىگە ئالىدۇ.
ئاساسلىق مىسال
كۆڭۈلدىكى ئىلگىرىلەش بالدىقى.
<div class= "progress" >
<div class= "progress-bar" role= "progressbar" aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 60%;" >
<span class= "sr-only" > 60% Complete</span>
</div>
</div>
بەلگە بىلەن
كۆرۈنەرلىك پىرسەنتنى كۆرسىتىش ئۈچۈن ئىلگىرىلەش ستونىنىڭ ئىچىدىن سىنىپنى <span>
ئۆچۈرۈڭ ..sr-only
<div class= "progress" >
<div class= "progress-bar" role= "progressbar" aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 60%;" >
60%
</div>
</div>
بەلگە تېكىستىنىڭ تۆۋەن پىرسەنتكىمۇ چۈشىنىشلىك بولۇشىغا كاپالەتلىك قىلىش ئۈچۈن min-width
، ئىلگىرىلەش بالدىقىغا قوشۇشنى ئويلاڭ.
<div class= "progress" >
<div class= "progress-bar" role= "progressbar" aria-valuenow= "0" aria-valuemin= "0" aria-valuemax= "100" style= "min-width: 2em;" >
0%
</div>
</div>
<div class= "progress" >
<div class= "progress-bar" role= "progressbar" aria-valuenow= "2" aria-valuemin= "0" aria-valuemax= "100" style= "min-width: 2em; width: 2%;" >
2%
</div>
</div>
كونكېرت تاللاش
ئىلگىرىلەش بالدىقى ئوخشاش ئۇسلۇبتىكى بەزى كۇنۇپكىلار ۋە ئاگاھلاندۇرۇش سىنىپلىرىنى ئىشلىتىدۇ.
60% تولۇق (ئاگاھلاندۇرۇش)
<div class= "progress" >
<div class= "progress-bar progress-bar-success" role= "progressbar" aria-valuenow= "40" aria-valuemin= "0" aria-valuemax= "100" style= "width: 40%" >
<span class= "sr-only" > 40% Complete (success)</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar progress-bar-info" role= "progressbar" aria-valuenow= "20" aria-valuemin= "0" aria-valuemax= "100" style= "width: 20%" >
<span class= "sr-only" > 20% Complete</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar progress-bar-warning" role= "progressbar" aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 60%" >
<span class= "sr-only" > 60% Complete (warning)</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar progress-bar-danger" role= "progressbar" aria-valuenow= "80" aria-valuemin= "0" aria-valuemax= "100" style= "width: 80%" >
<span class= "sr-only" > 80% Complete (danger)</span>
</div>
</div>
Striped
گىرافىك ئىشلىتىپ سىزىقلىق ئۈنۈم ھاسىل قىلىدۇ. IE9 ۋە ئۇنىڭدىن تۆۋەن.
60% تولۇق (ئاگاھلاندۇرۇش)
<div class= "progress" >
<div class= "progress-bar progress-bar-success progress-bar-striped" role= "progressbar" aria-valuenow= "40" aria-valuemin= "0" aria-valuemax= "100" style= "width: 40%" >
<span class= "sr-only" > 40% Complete (success)</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar progress-bar-info progress-bar-striped" role= "progressbar" aria-valuenow= "20" aria-valuemin= "0" aria-valuemax= "100" style= "width: 20%" >
<span class= "sr-only" > 20% Complete</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar progress-bar-warning progress-bar-striped" role= "progressbar" aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 60%" >
<span class= "sr-only" > 60% Complete (warning)</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar progress-bar-danger progress-bar-striped" role= "progressbar" aria-valuenow= "80" aria-valuemin= "0" aria-valuemax= "100" style= "width: 80%" >
<span class= "sr-only" > 80% Complete (danger)</span>
</div>
</div>
Animated
.active
سىزىقلارنى ئوڭدىن .progress-bar-striped
سولغا جانلاندۇرۇشقا قوشۇڭ . IE9 ۋە ئۇنىڭدىن تۆۋەن.
<div class= "progress" >
<div class= "progress-bar progress-bar-striped active" role= "progressbar" aria-valuenow= "45" aria-valuemin= "0" aria-valuemax= "100" style= "width: 45%" >
<span class= "sr-only" > 45% Complete</span>
</div>
</div>
Stacked
ئوخشاش بىر قانچە بالداقنى ئوخشاش .progress
ئورۇنغا قويۇڭ.
35% تولۇق (مۇۋەپپەقىيەت)
20% تولۇق (ئاگاھلاندۇرۇش)
% 10 تولۇق (خەتەر)
<div class= "progress" >
<div class= "progress-bar progress-bar-success" style= "width: 35%" >
<span class= "sr-only" > 35% Complete (success)</span>
</div>
<div class= "progress-bar progress-bar-warning progress-bar-striped" style= "width: 20%" >
<span class= "sr-only" > 20% Complete (warning)</span>
</div>
<div class= "progress-bar progress-bar-danger" style= "width: 10%" >
<span class= "sr-only" > 10% Complete (danger)</span>
</div>
</div>
تېكىست مەزمۇنى بىلەن بىللە سول ياكى ئوڭغا توغرىلانغان رەسىمنى ئۆز ئىچىگە ئالغان ھەر خىل زاپچاسلارنى قۇرۇشنىڭ ئابستراكت ئوبيېكت ئۇسلۇبى (بىلوگ باھالىرى ، Tweets قاتارلىقلار).
سۈكۈتتىكى مېدىيا مەزمۇن توپىنىڭ سول ياكى ئوڭ تەرىپىگە مېدىيا ئوبيېكتى (رەسىم ، سىن ، ئاۋاز) كۆرسىتىدۇ.
<div class= "media" >
<div class= "media-left" >
<a href= "#" >
<img class= "media-object" src= "..." alt= "..." >
</a>
</div>
<div class= "media-body" >
<h4 class= "media-heading" > Media heading</h4>
...
</div>
</div>
بۇ دەرسلەر .pull-left
ھەم .pull-right
مەۋجۇت بولۇپ ، ئىلگىرى مېدىيا زاپچاسلىرىنىڭ بىر قىسمى سۈپىتىدە ئىشلىتىلگەن ، ئەمما v3.3.0 دىن باشلاپ ئىشلىتىش ئۈچۈن ۋاقتى ئۆتكەن. ئۇلار تەخمىنەن html غا قويۇلغاندىن باشقا ، ئۇلار .media-left
بىلەن باراۋەر..media-right
.media-right
.media-body
رەسىم ياكى باشقا مېدىيانى ئۈستى ، ئوتتۇرىسى ياكى ئاستىغا توغرىلىغىلى بولىدۇ. سۈكۈتتىكىسى توغرىلىنىدۇ.
<div class= "media" >
<div class= "media-left media-middle" >
<a href= "#" >
<img class= "media-object" src= "..." alt= "..." >
</a>
</div>
<div class= "media-body" >
<h4 class= "media-heading" > Middle aligned media</h4>
...
</div>
</div>
ئازراق قوشۇمچە بەلگە ئارقىلىق ، تىزىملىك ئىچىدىكى مېدىيانى ئىشلىتەلەيسىز (باھا تېمىسى ياكى ماقالە تىزىملىكى ئۈچۈن پايدىلىق).
<ul class= "media-list" >
<li class= "media" >
<div class= "media-left" >
<a href= "#" >
<img class= "media-object" src= "..." alt= "..." >
</a>
</div>
<div class= "media-body" >
<h4 class= "media-heading" > Media heading</h4>
...
</div>
</li>
</ul>
تىزىملىك گۇرۇپپىلىرى ئېلېمېنتلارنىڭ ئاددىي تىزىملىكىنىلا ئەمەس ، بەلكى خاس مەزمۇندىكى مۇرەككەپلىرىنى كۆرسىتىشنىڭ جانلىق ۋە كۈچلۈك تەركىبىي قىسمى.
ئاساسلىق مىسال
ئەڭ ئاساسلىق تىزىملىك گۇرۇپپىسى پەقەت تىزىملىك تۈرلىرى ۋە مۇۋاپىق دەرسلەر بىلەن تەرتىپسىز تىزىملىك. ئۇنىڭغا ئەگىشىدىغان تاللاشلار ياكى ئېھتىياجغا ئاساسەن ئۆزىڭىزنىڭ CSS نى قۇرۇپ چىقىڭ.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vosibulum at eros
<ul class= "list-group" >
<li class= "list-group-item" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
<li class= "list-group-item" > Porta ac consectetur ac</li>
<li class= "list-group-item" > Vestibulum at eros</li>
</ul>
Badges
بەلگە زاپچاسلىرىنى ھەر قانداق تىزىملىك گۇرۇپپىسىنىڭ تۈرىگە قوشۇڭ ، ئۇ ئاپتوماتىك ھالدا ئوڭ تەرەپكە ئورۇنلاشتۇرۇلىدۇ.
14 Cras justo odio
2 Dapibus ac facilisis in
1 Morbi leo risus
<ul class= "list-group" >
<li class= "list-group-item" >
<span class= "badge" > 14</span>
Cras justo odio
</li>
</ul>
ئۇلانغان تۈرلەر
تىزىملىك گۇرۇپپىسىنىڭ تۈرلىرىنى تىزىملىك تۈرلىرىنىڭ ئورنىغا لەڭگەر بەلگىسىنى ئىشلىتىش ئارقىلىق باغلاڭ (بۇمۇ <div>
ئۇنىڭ ئورنىغا ئاتا-ئانىنى كۆرسىتىدۇ <ul>
). ھەر بىر ئېلېمېنت ئەتراپىدىكى ئاتا-ئانىلارنىڭ ھاجىتى يوق.
<div class= "list-group" >
<a href= "#" class= "list-group-item active" >
Cras justo odio
</a>
<a href= "#" class= "list-group-item" > Dapibus ac facilisis in</a>
<a href= "#" class= "list-group-item" > Morbi leo risus</a>
<a href= "#" class= "list-group-item" > Porta ac consectetur ac</a>
<a href= "#" class= "list-group-item" > Vestibulum at eros</a>
</div>
گۇرۇپپا تۈرلىرى تىزىملىك تۈرلىرىنىڭ ئورنىغا كۇنۇپكىلار بولۇشى مۇمكىن (بۇمۇ <div>
ئۇنىڭ ئورنىغا ئاتا-ئانىنى كۆرسىتىدۇ <ul>
). ھەر بىر ئېلېمېنت ئەتراپىدىكى ئاتا-ئانىلارنىڭ ھاجىتى يوق. بۇ يەردە ئۆلچەملىك دەرسلەرنى ئىشلەتمەڭ ..btn
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vosibulum at eros
<div class= "list-group" >
<button type= "button" class= "list-group-item" > Cras justo odio</button>
<button type= "button" class= "list-group-item" > Dapibus ac facilisis in</button>
<button type= "button" class= "list-group-item" > Morbi leo risus</button>
<button type= "button" class= "list-group-item" > Porta ac consectetur ac</button>
<button type= "button" class= "list-group-item" > Vestibulum at eros</button>
</div>
چەكلەنگەن تۈرلەر
كۈلرەڭگە قوشۇلۇپ .disabled
ئۇنى .list-group-item
چەكلەنگەندەك قىلىدۇ.
<div class= "list-group" >
<a href= "#" class= "list-group-item disabled" >
Cras justo odio
</a>
<a href= "#" class= "list-group-item" > Dapibus ac facilisis in</a>
<a href= "#" class= "list-group-item" > Morbi leo risus</a>
<a href= "#" class= "list-group-item" > Porta ac consectetur ac</a>
<a href= "#" class= "list-group-item" > Vestibulum at eros</a>
</div>
مەزمۇن دەرسلىرى
ئۇسلۇبتىكى تۈرلەرنى ئىشلىتىپ تىزىملىكتىكى تۈرلەرنى سۈكۈتتىكى ياكى ئۇلانغان. دۆلەتنىمۇ ئۆز ئىچىگە ئالىدۇ .active
.
Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vosibulum at eros
<ul class= "list-group" >
<li class= "list-group-item list-group-item-success" > Dapibus ac facilisis in</li>
<li class= "list-group-item list-group-item-info" > Cras sit amet nibh libero</li>
<li class= "list-group-item list-group-item-warning" > Porta ac consectetur ac</li>
<li class= "list-group-item list-group-item-danger" > Vestibulum at eros</li>
</ul>
<div class= "list-group" >
<a href= "#" class= "list-group-item list-group-item-success" > Dapibus ac facilisis in</a>
<a href= "#" class= "list-group-item list-group-item-info" > Cras sit amet nibh libero</a>
<a href= "#" class= "list-group-item list-group-item-warning" > Porta ac consectetur ac</a>
<a href= "#" class= "list-group-item list-group-item-danger" > Vestibulum at eros</a>
</div>
خاس مەزمۇن
ئاستىدىكىگە ئوخشاش ئۇلانغان تىزىملىك گۇرۇپپىلىرى ئۈچۈنمۇ HTML نى دېگۈدەك قوشۇڭ.
<div class= "list-group" >
<a href= "#" class= "list-group-item active" >
<h4 class= "list-group-item-heading" > List group item heading</h4>
<p class= "list-group-item-text" > ...</p>
</a>
</div>
ھەمىشە زۆرۈر بولمىسىمۇ ، بەزىدە DOM نى بىر قۇتىغا سېلىشىڭىز كېرەك. بۇ ئەھۋاللارغا قارىتا ، گۇرۇپپا زاپچاسلىرىنى سىناپ بېقىڭ.
ئاساسلىق مىسال
سۈكۈتتىكى ھالەتتە ، بارلىق .panel
مەزمۇنلار بىر قىسىم ئاساسىي چېگرا ۋە تاختا ئىشلىتىپ بەزى مەزمۇنلارنى ئۆز ئىچىگە ئالىدۇ.
<div class= "panel panel-default" >
<div class= "panel-body" >
Basic panel example
</div>
</div>
تېما تاختىسى
تاختىسىغا ئاسانلا ماۋزۇ قاچىسى قوشۇڭ .panel-heading
. سىز ئالدىن تەييارلانغان ماۋزۇ قوشۇش ئۈچۈن سىنىپ بىلەن ھەر <h1>
قانداقسىنى ئۆز ئىچىگە ئالالايسىز. قانداقلا بولمىسۇن ، خەتنىڭ چوڭ - كىچىكلىكى قاپلاپ كەتتى .<h6>
.panel-title
<h1>
<h6>
.panel-heading
مۇۋاپىق ئۇلىنىش رەڭگى ئۈچۈن ، ئۇلانمىلارنى ئىچىگە ماۋزۇ قويۇشقا كاپالەتلىك قىلىڭ .panel-title
.
تېما ماۋزۇسى يوق
گۇرۇپپا مەزمۇنى
گۇرۇپپا ئىسمى
گۇرۇپپا مەزمۇنى
<div class= "panel panel-default" >
<div class= "panel-heading" > Panel heading without title</div>
<div class= "panel-body" >
Panel content
</div>
</div>
<div class= "panel panel-default" >
<div class= "panel-heading" >
<h3 class= "panel-title" > Panel title</h3>
</div>
<div class= "panel-body" >
Panel content
</div>
</div>
كۇنۇپكىلار ياكى ئىككىلەمچى تېكىستنى ئوراپ قويۇڭ .panel-footer
. شۇنىڭغا دىققەت قىلىڭكى ، تاختاينىڭ ئاستى تەرىپى ئالدىنقى ئورۇنغا قويۇلمىغاچقا ، مەزمۇن ئۆزگىرىشىنى ئىشلەتكەندە رەڭ ۋە چېگراغا ۋارىسلىق قىلمايدۇ .
<div class= "panel panel-default" >
<div class= "panel-body" >
Panel content
</div>
<div class= "panel-footer" > Panel footer</div>
</div>
كونكېرت تاللاش
باشقا زاپچاسلارغا ئوخشاش ، كونكىرىت دۆلەت دەرسلىرىنىڭ خالىغان بىرىنى قوشۇش ئارقىلىق ئاسانلا مەلۇم بىر مەزمۇنغا تېخىمۇ ئەھمىيەتلىك بىر گۇرۇپپا قىلىڭ.
گۇرۇپپا ئىسمى
گۇرۇپپا مەزمۇنى
گۇرۇپپا ئىسمى
گۇرۇپپا مەزمۇنى
گۇرۇپپا ئىسمى
گۇرۇپپا مەزمۇنى
گۇرۇپپا ئىسمى
گۇرۇپپا مەزمۇنى
گۇرۇپپا ئىسمى
گۇرۇپپا مەزمۇنى
<div class= "panel panel-primary" > ...</div>
<div class= "panel panel-success" > ...</div>
<div class= "panel panel-info" > ...</div>
<div class= "panel panel-warning" > ...</div>
<div class= "panel panel-danger" > ...</div>
جەدۋەل بىلەن
.table
يوچۇقسىز لايىھىلەش ئۈچۈن تاختاينىڭ ئىچىگە چېگراسىز قوشۇڭ . ئەگەر a بولسا .panel-body
، جەدۋەلنىڭ ئۈستى تەرىپىگە قوشۇمچە چېگرا قوشىمىز.
گۇرۇپپا ماۋزۇسى
بۇ يەردىكى بىر قىسىم سۈكۈتتىكى مەزمۇن. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ئۇلترا ماشىنىلىرى ut id elit.
#
بىرىنچى ئىسمى
فامىلىسى
ئىشلەتكۈچى ئىسمى
1
Mark
Otto
@mdo
2
ياقۇپ
Thornton
@fat
3
Larry
قۇش
@twitter
<div class= "panel panel-default" >
<!-- Default panel contents -->
<div class= "panel-heading" > Panel heading</div>
<div class= "panel-body" >
<p> ...</p>
</div>
<!-- Table -->
<table class= "table" >
...
</table>
</div>
ئەگەر تاختاي گەۋدىسى بولمىسا ، زاپچاس ئۈزۈلمەي تاختاي بېشىدىن ئۈستەلگە يۆتكىلىدۇ.
گۇرۇپپا ماۋزۇسى
#
بىرىنچى ئىسمى
فامىلىسى
ئىشلەتكۈچى ئىسمى
1
Mark
Otto
@mdo
2
ياقۇپ
Thornton
@fat
3
Larry
قۇش
@twitter
<div class= "panel panel-default" >
<!-- Default panel contents -->
<div class= "panel-heading" > Panel heading</div>
<!-- Table -->
<table class= "table" >
...
</table>
</div>
تىزىملىك گۇرۇپپىلىرى بىلەن
خالىغان تاختا ئىچىدىكى كەڭلىكتىكى تىزىملىك گۇرۇپپىلىرىنى ئاسانلا ئۆز ئىچىگە ئالىدۇ.
گۇرۇپپا ماۋزۇسى
بۇ يەردىكى بىر قىسىم سۈكۈتتىكى مەزمۇن. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ئۇلترا ماشىنىلىرى ut id elit.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vosibulum at eros
<div class= "panel panel-default" >
<!-- Default panel contents -->
<div class= "panel-heading" > Panel heading</div>
<div class= "panel-body" >
<p> ...</p>
</div>
<!-- List group -->
<ul class= "list-group" >
<li class= "list-group-item" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
<li class= "list-group-item" > Porta ac consectetur ac</li>
<li class= "list-group-item" > Vestibulum at eros</li>
</ul>
</div>
توركۆرگۈچلەرنىڭ ئۆز ئىچىگە ئالغان بۆلەكنىڭ كەڭلىكىگە ئاساسەن سىن ياكى تام تەسۋىرنىڭ چوڭ-كىچىكلىكىنى ئېنىقلىشىغا يول قويۇڭ.
قائىدىلەر <iframe>
، <embed>
ۋە ئېلېمېنتلارغا بىۋاسىتە قوللىنىلىدۇ <video>
. باشقا خاسلىقلارنىڭ ئۇسلۇبىنى ماسلاشتۇرماقچى بولغاندا <object>
، ئېنىق ئەۋلاد سىنىپىنى ئىشلىتىڭ ..embed-responsive-item
Pro-Tip! frameborder="0"
بىز ئۇنى ئۆز ئىچىگە ئالغان بولغاچقا ، ئۇنى ئۆز ئىچىگە ئېلىشىڭىزنىڭ ھاجىتى يوق <iframe>
.
<!-- 16:9 aspect ratio -->
<div class= "embed-responsive embed-responsive-16by9" >
<iframe class= "embed-responsive-item" src= "..." ></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class= "embed-responsive embed-responsive-4by3" >
<iframe class= "embed-responsive-item" src= "..." ></iframe>
</div>
كۆڭۈلدىكى ياخشى
قۇدۇققا ئاددىي تەسىر قىلىپ ، ئېلېمېنتقا ئاددىي ئۈنۈم بېرىدۇ.
<div class= "well" > ...</div>
ئىختىيارى دەرسلەر
ئىككى تاللاشچان ئۆزگەرتىش سىنىپى بار تاختا ۋە يۇمىلاق بۇلۇڭنى كونترول قىلىڭ.
<div class= "well well-lg" > ...</div>
قاراڭ ، مەن بىر كىچىك قۇدۇقتا!
<div class= "well well-sm" > ...</div>