Қолжетімді глифтер

Glyphicon Halflings жинағынан қаріп пішіміндегі 250-ден астам глифтерді қамтиды. Glyphicons Halflings әдетте тегін қол жетімді емес, бірақ оларды жасаушы оларды Bootstrap үшін ақысыз қол жетімді етті. Рахмет ретінде мүмкіндігінше Glyphicons сілтемесін қосуыңызды сұраймыз .

глификон глификон-жұлдызша
glyphicon glyphicon-plus
глификон глификон-еуро
glyphicon glyphicon-eur
глификон глификон-минус
глификон глификон-бұлт
глификон глификон-конверт
глификон глификон-қарындаш
глификон глификон-әйнек
глификон глификон-музыка
glyphicon glyphicon-іздеу
глификон глификон-жүрек
глификон глификон-жұлдыз
глификон глификон-жұлдыз-бос
глификон глификон-пайдаланушы
глификон глификон-пленка
глификон глификон-үлкен
глификон глификон-th
глификон глификон-тізімі
глификон глификон-жақсы
glyphicon glyphicon-жою
глификон глификон-үлкейту
глификон глификон-кішірейту
глификон глифоны өшірулі
глификон глификон-сигнал
глификон глификон-тісті
глификон глификон-қоқыс
glyphicon glyphicon-үй
glyphicon glyphicon-файл
глификон глификон-уақыты
глификон глификон-жол
glyphicon glyphicon-download-alt
glyphicon glyphicon-жүктеу
glyphicon glyphicon-жүктеп салу
glyphicon glyphicon-кіріс жәшігі
глификон глификон-ойын-шеңбері
глификон глификон-қайталау
glyphicon glyphicon-жаңарту
glyphicon glyphicon-list-alt
глификон глификон-құлыптау
glyphicon glyphicon-ту
глификон глификон-құлаққаптар
глификон глификон-көлемді өшіру
глификон глификон-көлемді азайту
глификон глификон-көлемді арттыру
глификон глификон-qrcode
глификон глификон-штрих-код
глификон глификон-тег
глификон глификон-тегтері
глификон глифоны-кітап
glyphicon glyphicon-бетбелгі
глификон глификон-басып шығару
глификон глификон-камера
глификон глификон-шрифт
глифон глификон-қалың
глификон глификон-курсив
glyphicon glyphicon-мәтін-биіктігі
glyphicon glyphicon-мәтін-ені
glyphicon glyphicon-солға туралау
glyphicon glyphicon-align-центр
glyphicon glyphicon-туралау-оңға
glyphicon glyphicon-туралау-ақтау
глификон глифоны тізімі
glyphicon glyphicon-шегініс-солға
glyphicon glyphicon-шегініс-оң жақ
glyphicon glyphicon-facetime-бейне
глификон глификон-сурет
глификон глификон-карта-маркер
glyphicon glyphicon-реттеу
глификон глификон-түсі
glyphicon glyphicon-өңдеу
глификон глификон-үлесі
глификон глификон-тексеру
глификон глификон-қозғалыс
глификон глификон-қадам-артқа
glyphicon glyphicon-тез-артқа
глификон глификон-артқа
глификон глификон ойыны
глификон глификон-үзіліс
глификон глификон-тоқтамасы
глификон глификон алға
glyphicon glyphicon-жылдам алға
глификон глификон-алға қадам
глификон глификон-шығару
глифон глификон-шеврон-сол
глифон глификон-шеврон-оң жақ
глификон глификон-плюс-белгісі
глификон глификон-минус-белгісі
глификон глификон-жою-белгісі
глификон глификон-ок-белгісі
глификон глификон-сұрақ белгісі
глификон глификон-ақпарат-белгісі
glyphicon glyphicon-скриншот
glyphicon glyphicon-жою-шеңбер
глификон глификон-ок-шеңбер
глификон глификон-тыйым шеңбері
глификон глификон-көрсеткі-солға
глификон глификон-көрсеткі-оңға
глификон глификон-көрсеткі жоғары
глификон глификон-төмен көрсеткі
glyphicon glyphicon-pay-alt
glyphicon glyphicon-өлшемін өзгерту-толық
глификон глификон-өлшемін өзгерту-кіші
глификон глификон-леп белгісі-белгісі
глификон глификон-сыйлық
глификон глификон-жапырақ
глификон глификон-от
глификон глификон-көз ашық
глификон глификон-көзді жақын
глификон глификон-ескерту белгісі
глификон глификон-жазықтық
глификон глификон-күнтізбе
глификон глификон-кездейсоқ
глификон глификон-түсініктеме
глификон глификон-магнит
glyphicon glyphicon-шеврон-жоғары
глифон глификон-шеврон-төмен
glyphicon glyphicon-retweet
glyphicon glyphicon-сатып алу арбасы
glyphicon glyphicon-қалта-жабу
glyphicon glyphicon-қалта-ашық
глификон глификон-өлшемін өзгерту-тік
glyphicon glyphicon-өлшемін өзгерту-көлденең
глификон глификон-hdd
глификон глификон-бульгорн
глификон глификон-қоңырау
глификон глификон-сертификат
глификон глификон-бас бармақ
глификон глификон-бас бармақ
glyphicon glyphicon-қол-оң
глифон глификон-сол жақ
глификон глификон-қол жоғары
глификон глификон-төмен
глификон глификон-шеңбер-көрсеткі-оңға
глификон глификон-шеңбер-көрсеткі-солға
глификон глификон-шеңбер-көрсеткі-жоғары
глификон глификон-шеңбер-көрсеткі-төмен
глифон глификон-глобус
глификон кілті
глификон глификон-тапсырмалар
глификон глификон-сүзгісі
глификон глификон-портфель
glyphicon glyphicon-толық экран
glyphicon glyphicon-бақылау тақтасы
глификон глификон-қағаз қыстырғыш
глификон глификон-жүрек-бос
глификон глификон-сілтеме
глификон глификон-телефон
глификон глификон-итергіш
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
глификон глификон-сорт
глификон глификон-алфавит бойынша сұрыптау
glyphicon glyphicon-алфавит бойынша сұрыптау
глификон глификон-рет бойынша сұрыптау
glyphicon glyphicon-рет бойынша-сұрыптау-алт
атрибуттар бойынша сұрыптау
glyphicon glyphicon-атрибуттар бойынша сұрыптау-alt
glyphicon glyphicon-белгісіз
glyphicon glyphicon-кеңейту
глификон глификон-құла-төмен
глификон глификон-құлауы
glyphicon glyphicon-кіру
глификон глификон-жарқыл
glyphicon glyphicon-шығу
glyphicon glyphicon-жаңа терезе
глификон глификон-жазба
глификон глификонды сақтау
глификон глификон-ашық
глификон глифоны сақталды
глификон глификон-импорт
глификон глификон-экспорт
glyphicon glyphicon-жіберу
глификон глификон-дискет-диск
глификон глификон-дискет-сақталған
glyphicon glyphicon-floppy-жою
glyphicon glyphicon-дискет-сақтау
глификон глификон-иілгіш-ашық
glyphicon glyphicon-кредиттік карта
глификон глификон-тасымалдау
глификон глификон-ас құралдары
глификон глификон-тақырып
глификон глификонмен сығымдалған
глификон глификон-құлаққап
glyphicon glyphicon-телефон-алт
глификон глификон-мұнарасы
глификон глификон-стат
glyphicon glyphicon-sd-бейне
glyphicon glyphicon-hd-бейне
глификон глификон-субтитрлер
глифон глификон-дыбыс-стерео
глификон глификон-дыбыс-долби
glyphicon glyphicon-дыбыс-5-1
glyphicon glyphicon-дыбыс-6-1
glyphicon glyphicon-дыбыс-7-1
glyphicon glyphicon-авторлық құқық белгісі
глификон глификон-тіркеу белгісі
glyphicon glyphicon-бұлтты-жүктеу
glyphicon glyphicon-бұлт-жүктеп салу
глификон глификон-ағаш-қылқан жапырақты
глификон глификон-ағаш-жапырақты
glyphicon glyphicon-cd
glyphicon glyphicon-сақтау файлы
glyphicon glyphicon-open-файл
глификон глификон деңгейін жоғарылату
глификон глификон-көшірме
глификон глификон-паста
глификон глификонды ескерту
глификон глификон-эквалайзер
глификон глификон-патша
глификон глификон-ханшайымы
глификон глификон- пешка
глификон глификон-епископ
глификон глификон-рыцарь
глификон глификон-бала формуласы
глификон глификон-шатыр
глификон глификон-қара тақта
глификон глификон-қабат
глификон глификон-алма
глификон глификонды өшіру
глификон глификон-құм сағаты
глификон глификон-шам
глификон глификон-көшірме
глификон глификон-погги-банк
глификон глификон-қайшы
глификон глификон-биткоин
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
глификон глификон-йен
glyphicon glyphicon-jpy
глификон глификон-рубль
глификон глификон-руб
глификон глификон-шкала
глификон глификон-мұзды лола
глификон глификон-мұзды тәтті дәмі бар
глификон глификон-білім беру
glyphicon glyphicon-опция-көлденең
glyphicon glyphicon-опция-тік
glyphicon glyphicon-мәзір-гамбургер
глификон глификон-модальды-терезе
глификон глификон-май
глификон глификон-дән
глификон глификон-күн көзілдірігі
глификон глификон-мәтін өлшемі
глификон глификон-мәтін-түсі
глификон глификон-мәтін-фон
glyphicon glyphicon-объектіні туралау-жоғарғы
glyphicon glyphicon-нысанды-туралау-төменгі
glyphicon glyphicon-нысанды-туралау-көлденең
glyphicon glyphicon-нысанды-солға туралау
glyphicon glyphicon-нысанды-туралау-тік
glyphicon glyphicon-нысанды-оңға туралау
глификон глификон-үшбұрыш-оң жақ
глифон глификон-үшбұрыш-сол
глифон глификон-үшбұрыш-төменгі
глифон глификон-үшбұрыш-төбе
glyphicon glyphicon-консоль
глификон глификон-жоғарғы жазу
глифон глификон-жазба
glyphicon glyphicon-мәзір-сол жақта
glyphicon glyphicon-мәзір-оң жақта
glyphicon glyphicon-мәзір-төмен
glyphicon glyphicon-мәзірі

Қалай пайдалануға болады

Өнімділік себептері бойынша барлық белгішелер негізгі сыныпты және жеке белгіше сыныбын талап етеді. Пайдалану үшін келесі кодты кез келген жерге орналастырыңыз. Тиісті толтыру үшін белгіше мен мәтін арасында бос орын қалдырыңыз.

Басқа компоненттермен араластырмаңыз

Белгіше кластарын басқа компоненттермен тікелей біріктіру мүмкін емес. Оларды бір элементтегі басқа сыныптармен бірге қолдануға болмайды. Оның орнына кірістірілгенді қосып <span>, белгіше сыныптарын <span>.

Тек бос элементтерде пайдалануға арналған

Белгіше сыныптары мәтін мазмұны жоқ және еншілес элементтері жоқ элементтерде ғана пайдаланылуы керек.

Белгіше қаріпінің орнын өзгерту

../fonts/Bootstrap белгіше қаріп файлдары құрастырылған CSS файлдарына қатысты каталогта орналасады деп болжайды . Бұл қаріп файлдарын жылжыту немесе атын өзгерту CSS-ті үш жолдың бірімен жаңартуды білдіреді:

@icon-font-pathБастапқы аз файлдардағы және/немесе @icon-font-nameайнымалы мәндерді өзгертіңіз .
Less компиляторы ұсынған салыстырмалы URL мекенжайлары опциясын пайдаланыңыз .
url()Құрастырылған CSS ішіндегі жолдарды өзгертіңіз .

Арнайы әзірлеу параметрлеріне сәйкес келетін кез келген опцияны пайдаланыңыз.

Қолжетімді белгішелер

Көмекші технологиялардың заманауи нұсқалары CSS жасалған мазмұнды, сондай-ақ нақты Юникод таңбаларын жариялайды. Экранды оқу құралдарында күтпеген және шатастыратын нәтижелерді болдырмау үшін (әсіресе белгішелер тек безендіру үшін пайдаланылған кезде) біз оларды aria-hidden="true"атрибутпен жасырамыз.

Мағынаны беру үшін белгішені пайдалансаңыз (тек сәндік элемент ретінде емес), бұл мағынаның көмекші технологияларға да жеткізілетініне көз жеткізіңіз – мысалы, .sr-onlyсыныппен көрнекі түрде жасырылған қосымша мазмұнды қосыңыз.

Басқа мәтінсіз басқару элементтерін жасасаңыз (мысалы, <button>белгішені ғана қамтитын), басқару құралының мақсатын анықтау үшін әрқашан балама мазмұнды қамтамасыз ету керек, осылайша ол көмекші технологияларды пайдаланушыларға түсінікті болады. Бұл жағдайда aria-labelбасқару элементінің өзіне төлсипат қосуға болады.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Мысалдар

Оларды түймелерде, құралдар тақтасы үшін түймелер топтарында, шарлау немесе алдын ала берілген пішін енгізулерінде пайдаланыңыз.

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

Бұл ескертуді көмекші технологияларды пайдаланушыларға жеткізу үшін қосымша мәтіні бар қате туралы хабарды жеткізу үшін ескертуде пайдаланылатын белгіше ..sr-only

Жарамды электрондық пошта мекенжайын енгізіңіз

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

Сілтемелер тізімдерін көрсетуге арналған ауыспалы, контекстік мәзір. Ашылмалы JavaScript плагинімен интерактивті етіп жасалған .

Мысал

Ашылмалы тізімнің триггерін және ашылмалы мәзірді ішіне .dropdownнемесе жариялайтын басқа элементке ораңыз position: relative;. Содан кейін мәзірге HTML қосыңыз.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

.dropupАшылмалы мәзірлерді ата-анаға қосу арқылы жоғары (төменнің орнына) кеңейту үшін өзгертуге болады .

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Туралау

Әдепкі бойынша, ашылмалы мәзір ата-анасының жоғарғы жағында және сол жағында автоматты түрде 100% орналасады. А-ға қосыңыз .dropdown-menu-right, .dropdown-menuашылмалы мәзірді оңға туралаңыз.

<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>

Өшірілген мәзір элементтері

Сілтемені өшіру үшін ашылмалы тізімде .disableda қосыңыз .<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">a жиынын біріктіріңіз .<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 теңшеулеріне байланысты жиектерді алып тастағыңыз немесе қайта бояғыңыз келуі мүмкін.

IE8 және шекаралар

<a>Internet Explorer 8 қосылған немесе <button>элементтер болса да негізделген түймелер тобындағы түймелердің шекараларын көрсетпейді . Оны айналып өту үшін әр түймені басқа түймеге ораңыз .btn-group.

Қосымша ақпарат алу үшін №12476 қараңыз .

`<a>`Элементтермен _

.btnТек s қатарын ораңыз .btn-group.btn-group-justified.

Сол Орташа Дұрыс

Сол Орташа

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

Түйме ретінде әрекет ететін сілтемелер

Элементтер <a>ағымдағы беттегі басқа құжатқа немесе бөлімге өтудің орнына, бет ішіндегі функцияларды іске қосатын түймелер ретінде әрекет ету үшін пайдаланылса, оларға сәйкес таңба да берілуі керек role="button".

`<button>`Элементтермен _

<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-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder

Негізгі мысал

Бір қондырманы немесе түймені кірістің екі жағына орналастырыңыз. Біреуін кірістің екі жағына да қоюға болады.

Біз бір жағында бірнеше қондырмаларды ( .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сондай-ақ ортақ күйлерге ие. Әр стиль арасында ауысу үшін модификатор сыныптарын ауыстырыңыз.

Қойынды тақталары үшін navs пайдалану JavaScript қойындылары плагинін қажет етеді

Қойынды аймақтары бар қойындылар үшін JavaScript плагині қойындыларын пайдалану керек . Белгілеуге қосымша roleжәне ARIA атрибуттары қажет болады – қосымша мәліметтер алу үшін плагин үлгісінің белгілеуін қараңыз.

Навигация ретінде пайдаланылатын навигацияларды қолжетімді етіңіз

Шарлау жолағын қамтамасыз ету үшін navs қолданып жатсаңыз, role="navigation"ең логикалық негізгі контейнерге a қосуды ұмытпаңыз <ul>немесе <nav>элементті бүкіл шарлаудың айналасына ораңыз. Рөлді өзіне қоспаңыз <ul>, себебі бұл көмекші технологиялар арқылы оның нақты тізім ретінде жариялануына жол бермейді.

Қойындылар

.nav-tabsСынып негізгі сыныпты қажет ететінін ескеріңіз .nav.

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Таблеткалар

Дәл сол 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. Кішірек экрандарда шарлау сілтемелері жинақталады.

Негізделген шарлау тақтасының шарлау сілтемелеріне қазіргі уақытта қолдау көрсетілмейді.

Safari және жауапты негізделген навигациялар

v9.1.2 нұсқасы бойынша Safari браузерінің өлшемін көлденеңінен өзгерту жаңартылған кезде жойылатын негізделген навигацияда көрсету қателерін тудыратын қатені көрсетеді. Бұл қате негізделген навигация мысалында да көрсетілген .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

Өшірілген сілтемелер

Кез келген навигация компоненті үшін (қойындылар немесе таблеткалар) сұр сілтемелер .disabledүшін қосыңыз және меңзерді жылжыту әсерлері жоқ .

Сілтеме функциясына әсер еткен жоқ

<a>Бұл класс оның функционалдығын емес, сыртқы түрін ғана өзгертеді . Мұнда сілтемелерді өшіру үшін теңшелетін JavaScript пайдаланыңыз.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

Ашылмалы тізімдерді пайдалану

Кішкене қосымша HTML және ашылмалы JavaScript плагині бар ашылмалы мәзірлерді қосыңыз .

Ашылмалы тізімдері бар қойындылар

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Ашылмалы тізімі бар таблеткалар

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Шарлау жолақтары қолданбаңыз немесе сайтыңыз үшін шарлау тақырыптары ретінде қызмет ететін жауап беретін мета құрамдас бөліктер болып табылады. Олар мобильді көріністерде жиырылған (және ауыстырылатын) күйде басталады және қолжетімді қарау алаңының ені ұлғайған сайын көлденең болады.

Негізделген шарлау тақтасының шарлау сілтемелеріне қазіргі уақытта қолдау көрсетілмейді.

Толып жатқан мазмұн

Bootstrap шарлау тақтасындағы мазмұнға қанша орын қажет екенін білмейтіндіктен, мазмұнды екінші жолға орау кезінде мәселелер туындауы мүмкін. Мұны шешу үшін сіз:

Шарлау тақтасы элементтерінің санын немесе енін азайтыңыз.
Жауап беретін утилита сыныптарын пайдаланып белгілі бір экран өлшемдеріндегі шарлау тақтасының кейбір элементтерін жасырыңыз .
Шарлау тақтасы жиырылған және көлденең режим арасында ауысатын нүктені өзгертіңіз. Айнымалы мәнді теңшеңіз @grid-float-breakpointнемесе өзіңіздің медиа сұрауыңызды қосыңыз.

Жиырылған мобильді шарлау тақтасының тоқтау нүктесін өзгерту

Шарлау тақтасы көру порты өлшемінен тар болған кезде өзінің тік мобильді көрінісіне жиырылады және көру порты кемінде ені @grid-float-breakpointболған кезде көлденең мобильді емес көрініске кеңейеді . @grid-float-breakpointШарлау тақтасы жиырылған/кеңейетін уақытты басқару үшін осы айнымалы мәнді Less source ішінде реттеңіз. Әдепкі мән 768px(ең кіші «кіші» немесе «планшет» экраны).

<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>

Әрқашан белгілерді қосыңыз

Әрбір енгізу үшін белгіні қоспасаңыз, экранды оқу бағдарламаларында пішіндеріңізде қиындықтар туындайды. Бұл кірістірілген пішіндер үшін .sr-onlyсыныпты пайдаланып белгілерді жасыруға болады. Көмекші технологиялар үшін белгіні қамтамасыз етудің басқа балама әдістері бар, мысалы, aria-label, aria-labelledbyнемесе titleтөлсипаты. Бұлардың ешқайсысы болмаса, экраннан оқу құралдары бар placeholderболса, төлсипатты пайдалануға жүгінуі мүмкін, бірақ placeholderбасқа таңбалау әдістерін ауыстыру ретінде пайдалану ұсынылмайтынын ескеріңіз.

Оларды шарлау тақтасында тігінен ортаға қою үшін .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-rightсыныптармен шектеулер бар. Мазмұнды дұрыс орналастыру үшін біз соңғы .navbar-rightэлементте теріс маржаны пайдаланамыз. Бұл сыныпты пайдаланатын бірнеше элементтер болған кезде, бұл шеттер ойдағыдай жұмыс істемейді.

Бұл компонентті v4 жүйесінде қайта жаза алатын болсақ, біз мұны қайта қарастырамыз.

Ортаға немесе шарлау тақтасының мазмұнына қосу .navbar-fixed-topжәне қосу ..container.container-fluid

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

Денеге төсеу қажет

paddingЕгер сіз жоғарғы жағына қоспасаңыз, бекітілген шарлау тақтасы басқа мазмұнды қабаттасады <body>. Өз құндылықтарыңызды қолданып көріңіз немесе төмендегі үзіндіні пайдаланыңыз. Кеңес: Әдепкі бойынша шарлау тақтасының биіктігі 50 пиксель.

body { padding-top: 70px; }

Мұны негізгі Bootstrap CSS- тен кейін қосуды ұмытпаңыз.

Ортаға немесе шарлау тақтасының мазмұнына қосу .navbar-fixed-bottomжәне қосу ..container.container-fluid

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

Денеге төсеу қажет

paddingТөменгі жағына қоспасаңыз, бекітілген шарлау тақтасы басқа мазмұнды қабаттасады <body>. Өз құндылықтарыңызды қолданып көріңіз немесе төмендегі үзіндіні пайдаланыңыз. Кеңес: Әдепкі бойынша шарлау тақтасының биіктігі 50 пиксель.

body { padding-bottom: 70px; }

Мұны негізгі Bootstrap CSS- тен кейін қосуды ұмытпаңыз.

Шарлау тақтасының мазмұнын ортасына немесе тақтасына қосу .navbar-static-topжәне қосу арқылы бетпен бірге жылжатын толық енді шарлау тақтасын жасаңыз..container.container-fluid

Сыныптардан айырмашылығы .navbar-fixed-*, сізге ешқандай толтырғышты өзгерту қажет емес body.

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

қосу арқылы шарлау тақтасының көрінісін өзгертіңіз .navbar-inverse.

<nav class="navbar navbar-inverse">
  ...
</nav>

Нан үгінділері

Ағымдағы беттің орнын шарлау иерархиясында көрсетіңіз.

:beforeБөлгіштер CSS-ге және арқылы автоматты түрде қосылады content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Беттеу

Көп бетті беттеу құрамдас бөлігімен немесе қарапайым пейджер баламасымен сайтыңызға немесе қолданбаңызға беттеу сілтемелерін қамтамасыз етіңіз .

Әдепкі беттеу

Rdio арқылы шабыттандырылған қарапайым беттеу, қолданбалар мен іздеу нәтижелері үшін тамаша. Үлкен блокты жіберіп алу қиын, оңай масштабталады және үлкен басу аймақтарын қамтамасыз етеді.

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</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">&raquo;</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">&laquo;</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">&laquo;</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">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Қосымша өшірілген күй

Пейджерлік сілтемелер беттеудегі жалпы .disabledутилита класын да пайдаланады.

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</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 шолуларына және т.б. қосу арқылы жаңа немесе оқылмаған элементтерді оңай бөлектеңіз .

Кіріс жәшігі42

<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>

Джумботронды толық ені және бұрыштары дөңгеленген ету үшін оны барлық .containers сыртына қойып, оның орнына .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 мазмұнын нобайларға қосуға болады.

Нобай белгісі

Cras justo odio, dpibus ac facilisis in, egestas eget quam. Doec id elit non mi porta gravida және eget metus. Идентификатордың идентификаторы жоқ.

Түйме Түйме

Нобай белгісі

Cras justo odio, dpibus ac facilisis in, egestas eget quam. Doec id elit non mi porta gravida және eget metus. Идентификатордың идентификаторы жоқ.

Түйме Түйме

Нобай белгісі

Cras justo odio, dpibus ac facilisis in, egestas eget quam. Doec id elit non mi porta gravida және eget metus. Идентификатордың идентификаторы жоқ.

Түйме Түйме

<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 ескерту плагинін қажет етеді

Толық жұмыс істейтін, қабылданбайтын ескертулер үшін ескертулер 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">&times;</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 анимацияларды қолдамайды.

Content Security Policy (CSP) үйлесімділігі

Егер веб-сайтыңызда рұқсат бермейтін Мазмұн қауіпсіздігі саясаты (CSP) болса, төмендегі мысалдарымызда көрсетілгендей орындалу жолының ендерін орнату style-src 'unsafe-inline'үшін кірістірілген атрибуттарды пайдалана алмайсыз . styleҚатаң CSP-мен үйлесімді ендерді орнатудың балама әдістеріне кішкене теңшелетін JavaScript (ол орнатады element.style.width) немесе пайдаланушы CSS сыныптарын пайдалану кіреді.

Негізгі мысал

Әдепкі орындалу жолағы.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

Белгімен

Көрінетін пайызды көрсету үшін орындалу жолағынан <span>with класын алып тастаңыз ..sr-only

60%

<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 қосуды қарастырыңыз.

0%

2%

<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-stripedIE9 және одан төмен нұсқаларында қол жетімді емес.

<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>

Мәтіндік мазмұнмен қатар солға немесе оңға тураланған кескінді көрсететін компоненттердің әртүрлі түрлерін (мысалы, блог пікірлері, твиттер және т.б.) құруға арналған дерексіз нысан мәнерлері.

Әдепкі медиа

Әдепкі медиа медиа нысанын (суреттер, бейне, аудио) мазмұн блогының сол немесе оң жағында көрсетеді.

Бұқаралық ақпарат құралдарының тақырыбы

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.

Бұқаралық ақпарат құралдарының тақырыбы

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.

Кірістірілген медиа тақырыбы

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.

Бұқаралық ақпарат құралдарының тақырыбы

Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate, tempus viverra turpis.

Бұқаралық ақпарат құралдарының тақырыбы

Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate, tempus viverra turpis.

<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.

Кірістірілген медиа тақырыбы
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate, tempus viverra turpis.

Кірістірілген медиа тақырыбы
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate, tempus viverra turpis.

Кірістірілген медиа тақырыбы
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-мен жасаңыз.

Cras justo odio
Dapibus ac facilisis in
Морби Лео Рисус
Порта AC консекторы
Вестибулум және эроз

<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>

Белгілер

Белгілер компонентін кез келген тізім тобының элементіне қосыңыз және ол автоматты түрде оң жақта орналасады.

14Cras justo odio
2Dapibus ac facilisis in
1Морби Лео Рисус

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Байланыстырылған элементтер

Тізім элементтерінің орнына анкерлік тегтерді пайдалану арқылы тізім тобы элементтерін байланыстырыңыз (бұл сонымен қатар <div>орнына ата- ананы білдіреді <ul>). Әрбір элементтің айналасында жеке ата-аналар қажет емес.

Cras justo odio Dapibus ac facilisis in Морби Лео Рисус Порта AC консекторы Вестибулум және эроз

<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оны сұр түске қосу .

Cras justo odio Dapibus ac facilisis in Морби Лео Рисус Порта AC консекторы Вестибулум және эроз

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Мәтінмәндік сыныптар

Әдепкі немесе байланыстырылған тізім элементтерін мәнерлеу үшін мәтінмәндік сыныптарды пайдаланыңыз. Сондай-ақ .activeмемлекет кіреді.

Dapibus ac facilisis in
Cras sit amet nibh libero
Порта AC консекторы
Вестибулум және эроз

Dapibus ac facilisis in Cras sit amet nibh libero Порта AC консекторы Вестибулум және эроз

<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. Pelentesque ornare sem lacinia quam venenatis vestibulum. Идентификатордың идентификаторы жоқ.

#	Аты	Тек	Пайдаланушы аты
1	белгі	Отто	@mdo
2	Джейкоб	Торнтон	@май
3	Ларри	құс	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Егер панель корпусы болмаса, компонент панель тақырыбынан кестеге үзіліссіз жылжиды.

Панель тақырыбы

#	Аты	Тек	Пайдаланушы аты
1	белгі	Отто	@mdo
2	Джейкоб	Торнтон	@май
3	Ларри	құс	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Тізім топтарымен

Кез келген панельдегі толық ені тізім топтарын оңай қосыңыз.

Панель тақырыбы

Кейбір әдепкі панель мазмұны осында. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pelentesque ornare sem lacinia quam venenatis vestibulum. Идентификатордың идентификаторы жоқ.

Cras justo odio
Dapibus ac facilisis in
Морби Лео Рисус
Порта AC консекторы
Вестибулум және эроз

<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>

Құрамдас бөліктер

Глифондар

Қолжетімді глифтер

Қалай пайдалануға болады

Басқа компоненттермен араластырмаңыз

Тек бос элементтерде пайдалануға арналған

Белгіше қаріпінің орнын өзгерту

Қолжетімді белгішелер

Мысалдар

Ашылмалы тізімдер

Мысал

Туралау

Қосымша орналастыруды қажет етуі мүмкін

Ескірген .pull-rightтуралау

Тақырыптар

Бөлгіш

Өшірілген мәзір элементтері

Түйме топтары

Түйме топтарындағы кеңестер мен қалқымалы құралдар арнайы параметрді қажет етеді

Дұрыстығына көз жеткізіп role, белгіні беріңіз

Негізгі мысал

Түйме құралдар тақтасы

Өлшемді анықтау

Ұя салу

Тік вариация

Негізделген түйме топтары

Шекараларды өңдеу

IE8 және шекаралар

<a>Элементтермен _

Түйме ретінде әрекет ететін сілтемелер

<button>Элементтермен _

Түймелердің ашылмалы тізімдері

Плагинге тәуелділік

Жалғыз түйменің ашылмалы тізімдері

Бөлу түймелерінің ашылмалы тізімдері

Өлшемді анықтау

Ашылмалы нұсқа

Енгізу топтары

<input>Тек мәтіндік

Енгізу топтарындағы кеңестер мен қалқымалы құралдар арнайы параметрді қажет етеді

Басқа компоненттермен араластырмаңыз

Әрқашан белгілерді қосыңыз

Негізгі мысал

Өлшемді анықтау

Құсбелгілер мен радио қосымшалары

Түйме қосымшалары

Ашылмалы тізімі бар түймелер

Сегменттелген түймелер

Бірнеше түймелер

Navs

Қойынды тақталары үшін navs пайдалану JavaScript қойындылары плагинін қажет етеді

Навигация ретінде пайдаланылатын навигацияларды қолжетімді етіңіз

Қойындылар

Таблеткалар

Ақталған

Safari және жауапты негізделген навигациялар

Өшірілген сілтемелер

Сілтеме функциясына әсер еткен жоқ

Ашылмалы тізімдерді пайдалану

Ашылмалы тізімдері бар қойындылар

Ашылмалы тізімі бар таблеткалар

Navbar

Әдепкі шарлау тақтасы

Толып жатқан мазмұн

JavaScript плагинін қажет етеді

Жиырылған мобильді шарлау тақтасының тоқтау нүктесін өзгерту

Шарлау жолақтарын қолжетімді етіңіз

Бренд бейнесі

Пішіндер

Мобильді құрылғыға қатысты ескертулер

Әрқашан белгілерді қосыңыз

Түймелер

Мәтінмәнге қатысты қолдану

Мәтін

Жаңа емес сілтемелер

Құрамдас бөліктерді туралау

Бірнеше құрамдастарды оң жаққа туралау

Жоғарғы жағына бекітілген

Денеге төсеу қажет

Төменге дейін бекітілген

Ескірген `.pull-right`туралау

Дұрыстығына көз жеткізіп `role`, белгіні беріңіз

`<a>`Элементтермен _

`<button>`Элементтермен _

`<input>`Тек мәтіндік