Жеткиликтүү глифтер

Glyphicon Halflings топтомунан шрифт форматындагы 250дөн ашык глифтерди камтыйт. Glyphicons Halflings , адатта, акысыз жеткиликтүү эмес, бирок алардын жаратуучусу аларды Bootstrap үчүн бекер жеткиликтүү кылып койгон. Рахмат катары, биз сизден мүмкүн болушунча Glyphicons'ка кайра шилтемени кошууну суранабыз.

glyphicon глифик-жылдызча
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-булут
glyphicon glyphicon-конверт
glyphicon глифик-карандаш
глифкон глифик-айнек
глифкон глификон-музыка
glyphicon glyphicon-издөө
glyphicon glyphicon-жүрөк
glyphicon глификон-жылдыз
glyphicon glyphicon-жылдыз-бош
glyphicon glyphicon-колдонуучу
глификон глифкон-пленка
glyphicon glyphicon-th-чоң
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-алып салуу
glyphicon glyphicon-кичирейтүү
glyphicon glyphicon-кичирейтүү
glyphicon glyphicon-off
glyphicon glyphicon-сигнал
glyphicon glyphicon-тиштүү
glyphicon glyphicon-таштанды
glyphicon glyphicon-үй
glyphicon glyphicon-файл
glyphicon glyphicon-убакыт
glyphicon glyphicon-жол
glyphicon glyphicon-download-alt
glyphicon glyphicon-жүктөө
glyphicon glyphicon-жүктөө
glyphicon glyphicon-кирүү кутусу
glyphicon glyphicon-оюн-тегерек
glyphicon glyphicon-кайталоо
glyphicon glyphicon-жаңылоо
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-желек
glyphicon glyphicon-наушник
glyphicon glyphicon-көлөмү өчүрүү
glyphicon glyphicon-көлөмүн азайтуу
glyphicon glyphicon-көлөмүн жогорулатуу
glyphicon glyphicon-qrcode
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-тегиздөө-оңго
glyphicon glyphicon-тегиздөө-актоо
glyphicon glyphicon-тизмеси
glyphicon glyphicon-чыгынды-сол
glyphicon glyphicon-ичин-оң
glyphicon glyphicon-facetime-video
glyphicon glyphicon-сүрөт
glyphicon glyphicon-карта-маркер
glyphicon glyphicon-түзөтүү
glyphicon glyphicon-тону
glyphicon glyphicon-edit
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-шеврон-сол
glyphicon glyphicon-шеврон-оңго
glyphicon glyphicon-плюс-белгиси
glyphicon glyphicon-минус белгиси
glyphicon glyphicon-алып салуу-белгиси
glyphicon glyphicon-ок-белгиси
glyphicon glyphicon-суроо белгиси
glyphicon glyphicon-маалымат белгиси
glyphicon glyphicon-скриншот
glyphicon glyphicon-алып салуу-тегерек
glyphicon glyphicon-ok-circle
glyphicon glyphicon-тыйым-тегерек
glyphicon glyphicon-жебе-сол
glyphicon glyphicon-жебе-оңго
glyphicon glyphicon-жебе жогору
glyphicon glyphicon-жебе-ылдый
glyphicon glyphicon-pay-alt
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-chevron-up
glyphicon glyphicon-шеврон-төмөн
glyphicon glyphicon-retweet
glyphicon glyphicon-сауда-сабака
glyphicon glyphicon-папка-жабуу
glyphicon glyphicon-папка-ачык
glyphicon glyphicon-өлчөмүн өзгөртүү-вертикал
glyphicon glyphicon-өлчөмүн өзгөртүү-горизонталдуу
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
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-милдеттери
glyphicon glyphicon-фильтр
glyphicon glyphicon-портфель
glyphicon glyphicon-толук экран
glyphicon glyphicon-башкаруу тактасы
glyphicon glyphicon-клип
glyphicon glyphicon-жүрөк бош
glyphicon glyphicon-link
glyphicon глификон-телефон
glyphicon глификон-пушпин
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-сорт
glyphicon glyphicon-алфавит боюнча сорттоо
glyphicon glyphicon-алфавит боюнча-сорттоо
glyphicon глифкон-тартип боюнча-сорттоо
glyphicon glyphicon-тартип боюнча-алт
glyphicon glyphicon-сорттоо боюнча-атрибуттар
glyphicon glyphicon-атрибуттары боюнча-сорттоо-alt
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 glyphicon-жөнөтүү
glyphicon glyphicon-дискте-диск
glyphicon glyphicon-floppy-сакталган
glyphicon glyphicon-floppy-алып салуу
glyphicon glyphicon-floppy-сактоо
glyphicon glyphicon-floppy-open
glyphicon glyphicon-кредиттик карта
glyphicon glyphicon-өткөрүү
glyphicon glyphicon-кече
glyphicon glyphicon-башчысы
glyphicon glyphicon-кысылган
glyphicon glyphicon-наушник
glyphicon glyphicon-телефон-алт
glyphicon глификон-мунара
glyphicon glyphicon-stats
glyphicon glyphicon-sd-видео
glyphicon glyphicon-hd-video
glyphicon glyphicon-субтитрлер
glyphicon glyphicon-үн-стерео
glyphicon glyphicon-үн-долби
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-автордук укук белгиси
glyphicon glyphicon-каттоо белгиси
glyphicon glyphicon-булут-жүктөө
glyphicon glyphicon-булут-жүктөө
glyphicon glyphicon-дарак-ийне жалбырактуу
glyphicon glyphicon-дарак-жалбырактуу
glyphicon glyphicon-cd
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 glyphicon-кара такта
glyphicon глифон-төшөк
glyphicon glyphicon-алма
glyphicon glyphicon-тазалоо
glyphicon глифкон-кум сааты
глифкон глификон-лампа
glyphicon glyphicon-дубликат
glyphicon glyphicon-погги-банк
glyphicon glyphicon-кайчы
glyphicon glyphicon-биткоин
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
глификон глификон-йен
glyphicon glyphicon-jpy
глификон глификон-рубль
glyphicon glyphicon-rub
glyphicon глифик масштабдуу
glyphicon glyphicon-ice-lolly
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 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 glyphicon-меню

Кантип колдонуу керек

Өндүрүш үчүн бардык иконалар базалык классты жана жеке сүрөтчө классын талап кылат. Колдонуу үчүн, төмөнкү кодду каалаган жерге коюңуз. Туура толтуруу үчүн сөлөкөт менен тексттин ортосунда боштук калтырууну унутпаңыз.

Башка компоненттер менен аралаштырбаңыз

Белги класстарын башка компоненттер менен түздөн-түз айкалыштыруу мүмкүн эмес. Алар бир эле элементте башка класстар менен бирге колдонулбашы керек. Анын ордуна, уячаны кошуп <span>, иконка класстарын <span>.

Бош элементтерде гана колдонуу үчүн

Белги класстары текст мазмунун камтыбаган жана кошумча элементтери жок элементтерде гана колдонулушу керек.

Белги шрифтинин ордун өзгөртүү

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

@icon-font-pathБулак Less файлдарындагы жана/же @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>

Өчүрүлгөн меню пункттары

Шилтемени өчүрүү үчүн ачылуучу тизмеге .disabledкошуңуз .<li>

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

Бир катар баскычтарды баскычтар тобу менен бир сапта топтоңуз. Биздин баскычтар плагини менен кошумча JavaScript радиосун жана белгилөө кутучасынын стилин кошуңуз .

Баскыч топторундагы кеңештер жана поповерлер атайын жөндөөлөрдү талап кылат

А ичиндеги элементтерде куралдар кеңештерин же калкып чыкмаларды колдонууда .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 үчүн ыңгайлаштырууларыңызга жараша, чектерди алып салгыңыз же кайра боёкту кааласаңыз болот.

IE8 жана чек аралары

Internet Explorer 8 акталган баскычтар тобунун баскычтарына чектерди көрсөтпөйт, ал күйгүзүлгөн <a>же <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 вариациясы

.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"нын эң логикалык ата-контейнерине кошууну <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 жана жооп берген акталган navs

v9.1.2 боюнча, Safari мүчүлүштүктөрдү көрсөтөт, анда браузериңиздин өлчөмүн горизонталдуу түрдө өзгөртүү жаңылангандан кийин тазаланган негизделген навигацияда рендеринг каталарын пайда кылат. Бул мүчүлүштүк да негизделген nav мисалында көрсөтүлгөн .

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

Өчүрүлгөн шилтемелер

Ар кандай навигация компоненттери үчүн (өтмөктөр же таблеткалар), боз шилтемелер.disabled үчүн кошуңуз жана эч кандай hover эффекттери жок .

Шилтеменин иштөөсүнө таасир эткен жок

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

Navbars - бул колдонмоңуз же сайтыңыз үчүн навигация баштары катары кызмат кылган жооп берүүчү мета компоненттер. Алар мобилдик көрүнүштөрдө жыгыла баштайт (жана которуштурууга болот) жана жеткиликтүү көрүнүштүн кеңдиги өскөн сайын горизонталдуу болуп калат.

Негизделген навигация шилтемелери учурда колдоого алынбайт.

Толуп жаткан мазмун

Bootstrap навигация тилкеңиздеги мазмунга канча орун керек экенин билбегендиктен, мазмунду экинчи сапка ороп коюуда көйгөйлөргө туш болушуңуз мүмкүн. Муну чечүү үчүн, сиз:

Navbar элементтеринин санын же туурасын азайтыңыз.
Жооптуу утилита класстарын колдонуу менен белгилүү бир экран өлчөмүндөгү айрым навигация элементтерин жашырыңыз .
Navbarыңыз жыйылган жана горизонталдуу режимге которулган чекитти өзгөртүңүз. Өзгөрмөлөрдү ыңгайлаштырыңыз @grid-float-breakpointже өз медиа сурооңузду кошуңуз.

JavaScript плагинин талап кылат

Эгерде JavaScript өчүрүлгөн болсо жана көрүү терезеси чабыттоо тилкеси жыйылгандай тар болсо, анда навигация тилкесин кеңейтүү жана ичиндеги мазмунду көрүү мүмкүн болбой калат .navbar-collapse.

Жооптуу навигация кыйратуучу плагинди Bootstrap версияңызга кошууну талап кылат.

Мобилдик навигация тилкесинин жыйылган чекити өзгөртүлүүдө

Көрүү терезеси караганда тар болгондо чабыт панели өзүнүн вертикалдуу мобилдик көрүнүшүнө жыгылат, ал эми @grid-float-breakpointкөрүү терезеси эң аз дегенде @grid-float-breakpointтуурасы болгондо горизонталдуу мобилдик эмес көрүнүшүнө кеңейет. Navbar кыйраганда/кеңейгенде көзөмөлдөө үчүн, бул өзгөрмөнү Less булагынан тууралаңыз. Демейки маани 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>

Текстти алмаштырып, Navbar брендин өз сүрөтүңүз менен алмаштырыңыз <img>. Анын өзүнүн толтургучтары жана бийиктиги бар болгондуктан .navbar-brand, сүрөтүңүзгө жараша кээ бир CSSти жокко чыгарышыңыз керек болушу мүмкүн.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

.navbar-formТар көрүү терезелеринде туура вертикалдуу тегиздөө жана жыйылган жүрүм-турум үчүн форманын мазмунун ичине жайгаштырыңыз . Тегиздөө параметрлерин колдонуңуз, ал навигация тилкесинин мазмунунда жайгашкан жерди чечет.

Эскерте кетсек, .navbar-formкодунун көбүн .form-inlinemixin аркылуу бөлүшөт. Киргизүү топтору сыяктуу кээ бир форманы башкаруу элементтери навигация тилкесинде туура көрсөтүлүшүн талап кылышы мүмкүн.

<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>. Өзүңүздүн баалуулуктарыңызды сынап көрүңүз же төмөнкү биздин үзүндүнү колдонуңуз. Кеңеш: Демейки боюнча, навигация тилкесинин бийиктиги 50px.

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>. Өзүңүздүн баалуулуктарыңызды сынап көрүңүз же төмөнкү биздин үзүндүнү колдонуңуз. Кеңеш: Демейки боюнча, навигация тилкесинин бийиктиги 50px.

body { padding-bottom: 70px; }

Муну негизги Bootstrap CSS'тен кийин киргизиңиз.

Толук кеңдиктеги навигация тилкесин түзүңүз, ал барак менен бирге жылдырылат же ортосуна же тактасына мазмунун кошуу .navbar-static-topжана камтуу ..container.container-fluid

Класстардан айырмаланып .navbar-fixed-*, сиз body.

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

кошуу менен навигация панелинин көрүнүшүн өзгөртүңүз .navbar-inverse.

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

Нан күкүмдөрү

Навигация иерархиясында учурдагы барактын жайгашкан жерин көрсөтүңүз.

:beforeСепараторлор жана аркылуу CSS автоматтык түрдө кошулат content.

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

Барактоо

Сайтыңызга же колдонмоңузга көп барактуу барактоо компоненти же жөнөкөйраак пейджер альтернативасы менен барактоо шилтемелерин бериңиз .

Демейки барактоо

Rdio тарабынан шыктандырылган жөнөкөй баракчалар, колдонмолор жана издөө натыйжалары үчүн эң сонун. Чоң блокту өткөрүп жиберүү кыйын, оңой масштабдалат жана чоң чыкылдатуу аймактарын камсыз кылат.

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&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>

Жеңил, ийкемдүү компонент, бул сиздин сайтыңыздагы негизги мазмунду көрсөтүү үчүн көрүү портун толугу менен кеңейте алат.

Салам дүйнө!

Бул жөнөкөй баатыр бирдиги, өзгөчөлөнгөн мазмунга же маалыматка кошумча көңүл буруу үчүн жөнөкөй jumbotron стилиндеги компонент.

Көбүрөөк билүү

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

Джумботронду толук туурасы жана тегеректелген бурчтары жок кылуу үчүн, аны бардык .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, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

баскыч баскыч

Эскиз энбелгиси

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

баскыч баскыч

Эскиз энбелгиси

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

баскыч баскыч

<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 анимацияларды колдобойт.

Мазмундун коопсуздук саясаты (CSP) шайкештиги

Эгер веб- сайтыңызда уруксат бербеген Контенттик Коопсуздук Саясаты (CSP) болсо, анда төмөнкү мисалдарыбызда көрсөтүлгөндөй прогресс тилкесинин туурасын коюу style-src 'unsafe-inline'үчүн саптык атрибуттарды колдоно албайсыз . styleКатуу CSP'лерге туура келген тууралыктарды орнотуунун альтернативалуу ыкмаларына бир аз ыңгайлаштырылган JavaScript (бул орнотулган element.style.width) же ыңгайлаштырылган CSS класстарын колдонуу кирет.

Негизги мисал

Демейки прогресс тилкеси.

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

этикеткасы менен

Көрүнүүчү пайызды көрсөтүү үчүн прогресс тилкесинин ичинен классты <span>алып салыңыз ..sr-only

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>

Striped

Чаардуу эффект түзүү үчүн градиент колдонот. 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, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Медиа аталышы

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Кыстарылган медиа аталышы

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Медиа аталышы

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

Медиа аталышы

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, 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, бирок .media-righthtml'ден кийин жайгаштырылышы керек .media-body.

Медиа тегиздөө

Сүрөттөрдү же башка медианы өйдө, ортого же ылдый жагына тегиздөө мүмкүн. Демейки жогорку тегизделген.

Жогорку тегизделген медиа

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus and magnis dis tourient montes, nascetur ridiculus mus.

Орто тегизделген медиа

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus and magnis dis tourient montes, nascetur ridiculus mus.

Төмөндө тегизделген медиа

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus and magnis dis tourient 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, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

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

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

Кыстарылган медиа аталышы
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, 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
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Белгилер

Тизме тобунун каалаган элементине бейджиктер компонентин кошуңуз жана ал автоматтык түрдө оң жакта жайгашат.

14Cras justo odio
2Dapibus ac facilisis in
1Morbi leo risus

<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 Morbi leo risus Porta ac consectetur ac Vestibulum at eros

<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 Morbi leo risus Porta ac consectetur ac Vestibulum at eros

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

Контексттик класстар

Контексттик класстарды демейки же шилтемеленген тизме элементтерин стилдөө үчүн колдонуңуз. Мамлекет да кирет .active.

Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum at eros

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum at eros

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

Ыңгайлаштырылган мазмун

Төмөнкүгө окшогон шилтемеленген тизме топторунун ичинде дээрлик бардык HTML кошуңуз.

Тизме тобунун аталышы

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Тизме тобунун аталышы

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Тизме тобунун аталышы

Donec id elit non mi porta gravida at 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. Nullam id dolor id nibh ultricies vehicula ut id elit.

#	Биринчи аты	Акыркы аты	Колдонуучунун аты
1	Марк	Отто	@mdo
2	Жакып	Торнтон	@fat
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	Жакып	Торнтон	@fat
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. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

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

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Браузерлерге видео же слайдшоу өлчөмдөрүн аларды камтыган блоктун кеңдигине жараша аныктоого уруксат бериңиз, ал каалаган түзмөктө туура масштабдала турган ички катышты түзүңүз.

<iframe>Эрежелер , <embed>, <video>, жана <object>элементтерге түздөн- түз колдонулат ; .embed-responsive-itemбашка атрибуттар үчүн стилдештирүүнү кааласаңыз , ачык-айкын тукум классын колдонуңуз .

Про учу! Сизге киргизүүнүн кереги жок 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>Элементтер менен

Түймөктүн ачылуучу тизмелери

Плагинге көз карандылык

Жалгыз баскыч ачылуучу тизмелер

Бөлүнүүчү баскычтардын ачылуучу тизмелери

Өлчөмү

Dropup вариациясы

Киргизүү топтору

Тексттик <input>гана

Киргизүү топторундагы кеңештер жана поповерлер атайын жөндөөлөрдү талап кылат

Башка компоненттер менен аралаштырбаңыз

Ар дайым энбелгилерди кошуңуз

Негизги мисал

Өлчөмү

Белгилөө кутучалары жана радио кошумчалары

Баскыч кошумчалары

Ылдый түшүүчү баскычтар

Сегменттелген баскычтар

Бир нече баскычтар

Navs

Өтмөк панелдер үчүн navs колдонуу JavaScript өтмөктөр плагинин талап кылат

Навигация катары колдонулган навигацияларды жеткиликтүү кылыңыз

Өтмөктөр

Таблеткалар

Акталган

Safari жана жооп берген акталган navs

Өчүрүлгөн шилтемелер

Шилтеменин иштөөсүнө таасир эткен жок

Ашылмаларды колдонуу

ылдый түшүүчү өтмөктөр

Таблеткалар ылдый түшүүчү

Navbar

Демейки Navbar

Толуп жаткан мазмун

JavaScript плагинин талап кылат

Мобилдик навигация тилкесинин жыйылган чекити өзгөртүлүүдө

Navbars жеткиликтүү кыл

Бренд сүрөтү

Формалар

Мобилдик түзмөк эскертүүлөрү

Ар дайым энбелгилерди кошуңуз

Buttons

Контексттик колдонуу

Текст

Nav эмес шилтемелер

Компонентти тегиздөө

Бир нече компоненттерди туура тегиздөө

Үстүнө бекитилди

Денеге толтуруу талап кылынат

Түбүнө чейин бекитилген

Эскирген `.pull-right`тегиздөө

туура `role`камсыз кылуу жана энбелгисин камсыз кылуу

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

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

Тексттик `<input>`гана