Құрамдас бөліктер
Иконографияны, ашылмалы тізімдерді, енгізу топтарын, навигацияны, ескертулерді және т.б. қамтамасыз ету үшін жасалған оннан астам қайта пайдалануға болатын компоненттер.
Иконографияны, ашылмалы тізімдерді, енгізу топтарын, навигацияны, ескертулерді және т.б. қамтамасыз ету үшін жасалған оннан астам қайта пайдалануға болатын компоненттер.
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
. Шарлау тақтасындағы оң жаққа тураланған шарлау құрамдастары мәзірді автоматты түрде туралау үшін осы сыныптың араластыру нұсқасын пайдаланады. Оны қайта анықтау үшін пайдаланыңыз .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
a қосыңыз .<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 радиосын және құсбелгі мәнерінің әрекетін қосыңыз .
Құрал кеңестерін немесе қалқымалы элементтерді пайдаланған кезде қажетсіз жанама әсерлерді болдырмау .btn-group
опциясын көрсетуіңіз керек container: 'body'
(мысалы, құрал кеңесі немесе қалқымалы түйме іске қосылғанда кеңейетін элемент және/немесе дөңгелектелген бұрыштарын жоғалтады).
role
, белгіні беріңізКөмекші технологиялар (мысалы, экраннан оқу құралдары) түймелердің топтастырылғанын жеткізуі үшін сәйкес role
атрибут қамтамасыз етілуі керек. Түйме топтары үшін бұл болады role="group"
, ал құралдар тақталарында болуы керек 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>
Тек мәтіндікБұл жерде элементтерді пайдаланудан аулақ болыңыз <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 жүйесінде қолжетімді Navs негізгі сыныптан бастап ортақ белгілеулерге, .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>
-мен ені 768 пиксельден асатын экрандарда қойындыларды немесе таблеткаларды ата-анасының еніне тең етіп оңай жасаңыз .nav-justified
. Кішірек экрандарда шарлау сілтемелері жинақталады.
Негізделген шарлау тақтасының шарлау сілтемелеріне қазіргі уақытта қолдау көрсетілмейді.
<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>
Шарлау жолақтары қолданбаңыз немесе сайтыңыз үшін шарлау тақырыптары ретінде қызмет ететін жауап беретін мета құрамдас бөліктер болып табылады. Олар мобильді көріністерде жиырылған (және ауыстырылатын) күйде басталады және қолжетімді қарау алаңының ені ұлғайған сайын көлденең болады.
Негізделген шарлау тақтасының шарлау сілтемелеріне қазіргі уақытта қолдау көрсетілмейді.
<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>
Мәтінді мәтінге ауыстыру арқылы шарлау тақтасының брендін өзіңіздің суретіңізбен ауыстырыңыз <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
Назар аударыңыз , кодтың көп бөлігін mixin .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>
Шарлау сілтемелерін, пішіндерді, түймелерді немесе мәтінді .navbar-left
немесе .navbar-right
утилита сыныптарын пайдаланып туралаңыз. Екі сыныпта көрсетілген бағытта CSS қалқымалы қосылады. Мысалы, шарлау сілтемелерін туралау үшін оларды <ul>
тиісті қызметтік бағдарлама класы қолданылған бөлек қойыңыз.
.pull-left
Бұл сыныптар және -ның аралас нұсқалары болып табылады .pull-right
, бірақ олар құрылғы өлшемдері бойынша шарлау тақтасының құрамдастарын оңай өңдеу үшін медиа сұрауларына арналған.
Ортаға немесе шарлау тақтасының мазмұнына қосу .navbar-fixed-top
және қосу ..container
.container-fluid
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Ортаға немесе шарлау тақтасының мазмұнына қосу .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>
Пейджерлік сілтемелер беттеудегі жалпы .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 шолуларына және т.б. қосу арқылы жаңа немесе оқылмаған элементтерді оңай бөлектеңіз .
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
Жаңа немесе оқылмаған элементтер болмаған кезде, бейдждер (CSS :empty
селекторы арқылы) ішінде мазмұн болмаса, жай ғана құлап қалады.
Таңбалар 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>
Веб-сайтыңыздағы негізгі мазмұнды көрсету үшін бүкіл қарау терезесін қосымша кеңейте алатын жеңіл, икемді компонент.
Бұл қарапайым батыр бірлігі, таңдаулы мазмұнға немесе ақпаратқа қосымша назар аударуға арналған қарапайым джумботрон стиліндегі компонент.
<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>
Джумботронды толық ені және бұрыштары дөңгеленген ету үшін оны барлық .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 тәрізді көрсетілімін іздесеңіз, Masonry , 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
орындалу жолағына a қосуды қарастырыңыз.
<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>
Мәтіндік мазмұнмен қатар солға немесе оңға тураланған кескінді көрсететін компоненттердің әртүрлі түрлерін (мысалы, блог пікірлері, твиттер және т.б.) құруға арналған дерексіз нысан мәнерлері.
Әдепкі медиа медиа нысанын (суреттер, бейне, аудио) мазмұн блогының сол немесе оң жағында көрсетеді.
<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 нұсқасы бойынша бұл пайдалану үшін ескірген. Олар шамамен .media-left
және -ге тең .media-right
, тек html-де .media-right
кейін орналастырылуы керек ..media-body
Кескіндерді немесе басқа медианы жоғарғы, орта немесе төмен туралауға болады. Әдепкі жоғарыдан тураланған.
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Doec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus and magnis disparturient Montes, nascetur ridiculus mus.
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Doec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus and magnis disparturient Montes, nascetur ridiculus mus.
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Doec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus and magnis disparturient Montes, nascetur ridiculus mus.
<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 commodo. Cras purus odio, vestibulum in vulputate, 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 қосыңыз.
Doec id elit non mi porta gravida және eget metus. Maecenas sed diam eget risus varius blandit.
Doec id elit non mi porta gravida және eget metus. Maecenas sed diam eget risus varius blandit.
Doec 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
Біркелкі дизайн үшін панельге кез келген жиегі жоқ қосыңыз . Егер бар болса, .panel-body
бөлу үшін кестенің жоғарғы жағына қосымша жиек қосамыз.
Кейбір әдепкі панель мазмұны осында. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Идентификатордың идентификаторы жоқ.
# | Аты | Тек | Пайдаланушы аты |
---|---|---|---|
1 | белгі | Отто | @mdo |
2 | Джейкоб | Торнтон | @май |
3 | Ларри | құс |
<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 | белгі | Отто | @mdo |
2 | Джейкоб | Торнтон | @май |
3 | Ларри | құс |
<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, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Идентификатордың идентификаторы жоқ.
<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! s- ге қосудың қажеті жоқ, 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>