زاپچاسلار
سىنبەلگە ، چۈشۈش ، كىرگۈزۈش گۇرۇپپىسى ، يول باشلاش ، ئاگاھلاندۇرۇش ۋە باشقىلارنى تەمىنلەش ئۈچۈن ياسالغان ئوندىن ئارتۇق قايتا ئىشلىتىشكە بولىدىغان زاپچاس.
سىنبەلگە ، چۈشۈش ، كىرگۈزۈش گۇرۇپپىسى ، يول باشلاش ، ئاگاھلاندۇرۇش ۋە باشقىلارنى تەمىنلەش ئۈچۈن ياسالغان ئوندىن ئارتۇق قايتا ئىشلىتىشكە بولىدىغان زاپچاس.
Glyphicon Halflings يۈرۈشلۈكىدىن خەت شەكلىدىكى 250 دىن ئارتۇق گلىفنى ئۆز ئىچىگە ئالىدۇ. Glyphicons Halflings ئادەتتە ھەقسىز ئىشلەتكىلى بولمايدۇ ، ئەمما ئۇلارنىڭ ئىجادچىسى ئۇلارنى Bootstrap ئۈچۈن ھەقسىز تەمىنلىدى. رەھمەت سىزگە ، بىز ئىمكانقەدەر Glyphicons غا ئۇلىنىشنى قوشۇشىڭىزنى سورايمىز .
ئىقتىدار سەۋەبىدىن ، بارلىق سىنبەلگىلەر ئاساسىي سىنىپ ۋە يەككە سىنبەلگە سىنىپىنى تەلەپ قىلىدۇ. ئىشلىتىش ئۈچۈن تۆۋەندىكى كودنى خالىغان يەرگە قويۇڭ. مۇۋاپىق تاختا ئۈچۈن سىنبەلگە بىلەن تېكىست ئوتتۇرىسىدا بوشلۇق قالدۇرۇڭ.
سىنبەلگە دەرسلىرىنى باشقا زاپچاسلار بىلەن بىۋاسىتە بىرلەشتۈرگىلى بولمايدۇ. ئۇلارنى ئوخشاش ئېلېمېنتتىكى باشقا دەرسلەر بىلەن بىللە ئىشلىتىشكە بولمايدۇ. ئۇنىڭ ئورنىغا ، ئۇۋىسى قوشۇڭ <span>
ۋە سىنبەلگە دەرسلىرىنى ئىشلىتىڭ <span>
.
سىنبەلگە دەرسلىرى پەقەت تېكىست مەزمۇنى بولمىغان ۋە بالا ئېلېمېنتى بولمىغان ئېلېمېنتلاردىلا ئىشلىتىلىشى كېرەك.
../fonts/
Bootstrap توپلانغان CSS ھۆججىتىگە سېلىشتۇرغاندا ، سىنبەلگە خەت نۇسخىسىنىڭ مۇندەرىجىگە جايلاشقانلىقىنى پەرەز قىلىدۇ . بۇ خەت ھۆججەتلىرىنى يۆتكەش ياكى ئىسىم ئۆزگەرتىش CSS نى ئۈچ خىل ئۇسۇلدا يېڭىلاشنى كۆرسىتىدۇ:
@icon-font-path
ۋە ياكى ئۆزگەرگۈچى مىقدارنى ئۆزگەرتىڭ .@icon-font-name
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>
تارتما تىزىملىكتىكى بىر يۈرۈش ئۇلىنىشلارغا بۆلگۈچ قوشۇڭ.
<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 رادىئوسى ۋە تەكشۈرۈش رامكىسى ئۇسلۇبىدىكى ھەرىكەتلەرنى بىزنىڭ كۇنۇپكا قىستۇرمىمىز بىلەن قوشۇڭ .
A ئىچىدىكى ئېلېمېنتلارغا قورال كۆرسەتكۈچى ياكى پوپايكا ئىشلەتكەندە .btn-group
، كېرەكسىز ئەكىس تەسىرلەردىن ساقلىنىش ئۈچۈن تاللاشنى بەلگىلىشىڭىز container: 'body'
لازىم (مەسىلەن ، قورالنىڭ كېڭىيىشى ۋە ياكى قوزغاتقۇچ قوزغالغاندا ئېلېمېنتنىڭ كېڭىيىشى ۋە ياكى يۇمىلاق بۇلۇڭىدىن ئايرىلىشى دېگەندەك).
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>
بىر گۇرۇپپىدىكى ھەر بىر كۇنۇپكىغا كۇنۇپكا چوڭلۇقتىكى دەرسلەرنى ئىشلىتىشنىڭ ئورنىغا ، ھەر بىر گۇرۇپپىغا قوشۇڭ .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>
تارتما تىزىملىكلەرنى بىر قاتار كۇنۇپكىلار بىلەن ئارىلاشتۇرماقچى بولغاندا ، .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>
بىر يۈرۈش كۇنۇپكىلارنى توغرىسىغا ئەمەس تىك ھالەتتە تىزىپ قويۇڭ. بۇ يەردە بۆلۈش كۇنۇپكىسىنى چۈشۈرۈشنى قوللىمايدۇ.
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>
بىر گۇرۇپپا كۇنۇپكىلارنى ئوخشاش چوڭلۇقتا سوزۇپ ، ئاتا-ئانىسىنىڭ پۈتۈن كەڭلىكىنى كېڭەيتىڭ. كۇنۇپكا گۇرۇپپىسىنىڭ ئىچىدىكى كۇنۇپكىلارنى چۈشۈرۈش بىلەنمۇ ئىشلەيدۇ.
كونۇپكىلارنى (يەنى) ئاقلاشقا ئىشلىتىدىغان كونكرېت HTML ۋە CSS سەۋەبىدىن ، display: table-cell
ئۇلارنىڭ ئارىسىدىكى چېگرا بىر ھەسسە قاتلىنىدۇ. دائىملىق كۇنۇپكا گۇرۇپپىلىرىدا ، margin-left: -1px
چېگرىلارنى ئېلىۋېتىشنىڭ ئورنىغا تىزىشقا ئىشلىتىلىدۇ. قانداقلا بولمىسۇن ، margin
ئىشلىمەيدۇ display: table-cell
. نەتىجىدە ، Bootstrap غا خاسلاشتۇرۇشىڭىزغا ئاساسەن ، چېگرانى ئۆچۈرۈۋەتسىڭىز ياكى قايتا رەڭ بەرسىڭىز بولىدۇ.
<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>
ئېلېمېنتلار بىلەن<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 نەشرىڭىزگە قوشۇلۇشىنى تەلەپ قىلىدۇ.
بىر قىسىم ئاساسىي بەلگە ئۆزگەرتىشلىرى بىلەن بىر كۇنۇپكىنى تۆۋەنگە يۆتكەڭ.
<!-- 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>
ئوخشاشلا ، ئوخشاش بەلگە ئۆزگەرتىش ئارقىلىق بۆلۈش كۇنۇپكىسى چۈشۈشنى ھاسىل قىلىڭ ، پەقەت ئايرىم كۇنۇپكا بىلەنلا.
<!-- 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>
كونۇپكا تاختىلىرى ھەر خىل چوڭلۇقتىكى كۇنۇپكىلار بىلەن ئىشلەيدۇ.
<!-- 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'
لازىم (مەسىلەن ، قورال كېڭەيتىش ۋە ياكى قوزغاتقۇچ قوزغالغاندا ئېلېمېنتنىڭ كېڭىيىشى ۋە ياكى يۇمىلاق بۇلۇڭلىرىنى يوقىتىش دېگەندەك).
شەكىل گۇرۇپپىلىرى ياكى كاتەكچە ئىستون سىنىپلىرىنى بىۋاسىتە كىرگۈزۈش گۇرۇپپىلىرى بىلەن ئارىلاشتۇرماڭ. ئەكسىچە ، گۇرۇپپا ياكى تورغا مۇناسىۋەتلىك ئېلېمېنتنىڭ ئىچىگە كىرگۈزۈش گۇرۇپپىسىنى ئۇۋا قىلىڭ.
ئەگەر ھەر بىر كىرگۈزۈش بەلگىسىنى ئۆز ئىچىگە ئالمىسىڭىز ، ئېكران ئوقۇرمەنلىرى جەدۋەللىرىڭىزدە ئاۋارىچىلىققا ئۇچرايدۇ. بۇ كىرگۈزۈش گۇرۇپپىلىرىغا قوشۇمچە بەلگە ياكى ئىقتىدارلارنىڭ ياردەمچى تېخنىكىلارغا يەتكۈزۈلۈشىگە كاپالەتلىك قىلىڭ.
ئىشلىتىشكە بولىدىغان ئېنىق تېخنىكا (كۆرۈنگەن <label>
ئېلېمېنتلار ، سىنىپنى <label>
ئىشلىتىپ يوشۇرۇنغان ئېلېمېنتلار ، ياكى ، ، ياكى خاسلىقنى ئىشلىتىش ) ۋە قايسى قوشۇمچە ئۇچۇرلارنى يەتكۈزۈشكە ئېھتىياجلىق ئىكەنلىكىڭىز سىز ئىجرا قىلىۋاتقان كۆرۈنمە يۈزى كىچىك قورالىنىڭ ئوخشىماسلىقىغا ئاساسەن ئوخشىمايدۇ. بۇ بۆلەكتىكى مىساللار بىر قانچە تەۋسىيە قىلىنغان ، دېلوغا مۇناسىۋەتلىك ئۇسۇللارنى تەمىنلەيدۇ..sr-only
aria-label
aria-labelledby
aria-describedby
title
placeholder
كىرگۈزۈشنىڭ ئىككى تەرىپىگە بىر قىستۇرما ياكى كۇنۇپكا قويۇڭ. كىرگۈزۈشنىڭ ئىككى تەرىپىگە بىرنى قويسىڭىزمۇ بولىدۇ.
بىز بىر تەرەپتىن كۆپ قوشۇمچە ( .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-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>
ئوخشاش 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 ئۇلىنىشى ھازىرچە قوللىمايدۇ.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
ھەر قانداق دېڭىز زاپچاسلىرى (بەتكۈچ ياكى دورىلار) .disabled
ئۈچۈن كۈلرەڭ ئۇلىنىشلارنى قوشۇڭ ، يۆتكىلىش ئۈنۈمى يوق .
<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>
Navbars سىزنىڭ قوللىنىشچان پروگراممىڭىز ياكى تور بېتىڭىزنىڭ يول باشلاش ماۋزۇسى سۈپىتىدە ئىنكاس قايتۇرىدىغان مېتا زاپچاسلىرى. ئۇلار كۆچمە كۆرۈنۈشتە يىمىرىلىشكە باشلايدۇ (ۋە ئالماشتۇرغىلى بولىدۇ) ھەمدە بار بولغان كۆرۈنۈش كەڭلىكىنىڭ چوڭىيىشىغا ئەگىشىپ توغرىسىغا ئايلىنىدۇ.
يوللۇق navbar nav ئۇلىنىشى ھازىرچە قوللىمايدۇ.
<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-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
ئەمما ئۇلار ئۈسكۈنىنىڭ چوڭ-كىچىكلىكىدىكى ناۋاي زاپچاسلىرىنى بىر تەرەپ قىلىش ئۈچۈن مېدىيا سوئاللىرىغا ماس كېلىدۇ.
مەركىزى ياكى pad navbar مەزمۇنىنى قوشۇڭ .navbar-fixed-top
ۋە قوشۇڭ..container
.container-fluid
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
مەركىزى ياكى pad navbar مەزمۇنىنى قوشۇڭ .navbar-fixed-bottom
ۋە قوشۇڭ..container
.container-fluid
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
تولۇق ياكى كەڭلىكتىكى يولباشچى قۇر ، بۇ بەتنى قوشۇش .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>
كىچىكلىتىش زاپچاسلىرىنى ئېلېمېنتقا ئوراپ ، <nav>
ئۇنى ئوقۇرمەنلەر ۋە باشقا ياردەمچى تېخنىكىلارنى يول باشلاش بۆلىكى قىلىپ ئېنىقلاش كېرەك. بۇنىڭدىن باشقا ، بىر بەتتە ئاللىبۇرۇن بىردىن كۆپ يول باشلاش بۆلىكى بولۇشى مۇمكىن (مەسىلەن باش بەتتىكى دەسلەپكى يول باشلاش ياكى يانبالداق يول باشلاش دېگەندەك) ، ئۇنىڭ مەقسىتىنى ئەكس ئەتتۈرىدىغان چۈشەندۈرۈش aria-label
بىلەن تەمىنلەش تەۋسىيە قىلىنىدۇ. <nav>
مەسىلەن ، ئەگەر كىچىكلىتىش زاپچاسلىرى بىر يۈرۈش ئىزدەش نەتىجىسىنىڭ ئارىسىدا مېڭىشقا ئىشلىتىلسە ، مۇۋاپىق بەلگە بولۇشى مۇمكىن aria-label="Search results pages"
.
ئۇلىنىش ئوخشىمىغان ئەھۋاللارغا ماسلاشتۇرۇلغان. .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>
چوڭ ياكى كىچىكرەك تەسەۋۋۇرمۇ؟ قوشۇمچە .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 مەزمۇنلىرىنى قوشقىلى بولىدۇ.
<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
ئاگاھلاندۇرۇشنىڭ سۈكۈتتىكى دەرسلىرى يوق ، پەقەت ئاساسى ۋە ئۆزگەرتكۈچ دەرسلىرى بار. سۈكۈتتىكى كۈلرەڭ ئاگاھلاندۇرۇشنىڭ ئانچە ئەھمىيىتى يوق ، شۇڭا مەزمۇن سىنىپى ئارقىلىق بىر تۈرنى بەلگىلىشىڭىز تەلەپ قىلىنىدۇ. مۇۋەپپەقىيەت ، ئۇچۇر ، ئاگاھلاندۇرۇش ياكى خەتەردىن تاللاڭ.
<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 قىستۇرمىسىنى ئىشلىتىشىڭىز كېرەك .
<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>
<button>
ئېلېمېنتنى data-dismiss="alert"
سانلىق مەلۇمات خاسلىقى بىلەن ئىشلىتىشكە كاپالەتلىك قىلىڭ .
ئىشلىتىش .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)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>
ئىلگىرىلەش بالدىقى ئوخشاش ئۇسلۇبتىكى بەزى كۇنۇپكىلار ۋە ئاگاھلاندۇرۇش سىنىپلىرىنى ئىشلىتىدۇ.
<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>
گىرافىك ئىشلىتىپ سىزىقلىق ئۈنۈم ھاسىل قىلىدۇ. IE9 ۋە ئۇنىڭدىن تۆۋەن.
<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>
.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>
ئوخشاش بىر قانچە بالداقنى ئوخشاش .progress
ئورۇنغا قويۇڭ.
<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
رەسىم ياكى باشقا مېدىيانى ئۈستى ، ئوتتۇرىسى ياكى ئاستىغا توغرىلىغىلى بولىدۇ. سۈكۈتتىكىسى توغرىلىنىدۇ.
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin تاۋار. Cras purus odio ، تومۇردىكى تومۇر ئۆسمىسى ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur مەسخىرە مۇس.
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin تاۋار. Cras purus odio ، تومۇردىكى تومۇر ئۆسمىسى ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur مەسخىرە مۇس.
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin تاۋار. Cras purus odio ، تومۇردىكى تومۇر ئۆسمىسى ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur مەسخىرە مۇس.
<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>
ئازراق قوشۇمچە بەلگە ئارقىلىق ، تىزىملىك ئىچىدىكى مېدىيانى ئىشلىتەلەيسىز (باھا تېمىسى ياكى ماقالە تىزىملىكى ئۈچۈن پايدىلىق).
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin تاۋار. Cras purus odio ، تومۇردىكى تومۇر ئۆسمىسى ، tempus viverra turpis.
<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 نى قۇرۇپ چىقىڭ.
<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>
بەلگە زاپچاسلىرىنى ھەر قانداق تىزىملىك گۇرۇپپىسىنىڭ تۈرىگە قوشۇڭ ، ئۇ ئاپتوماتىك ھالدا ئوڭ تەرەپكە ئورۇنلاشتۇرۇلىدۇ.
<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
<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
.
<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 نى دېگۈدەك قوشۇڭ.
Donec id elit non mi porta gravida eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida eget metus. Maecenas sed diam eget risus varius blandit.
<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 | قۇش |
<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 | قۇش |
<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.
<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>