Глифонууд

Боломжтой глифүүд

Glyphicon Halflings багцын фонтын форматтай 250 гаруй глифийг багтаасан. Glyphicons Halflings нь ихэвчлэн үнэ төлбөргүй байдаггүй ч бүтээгч нь Bootstrap-д үнэ төлбөргүй ашиглах боломжтой болгосон. Баярлалаа, бид танаас боломжтой бол Glyphicons руу буцах холбоосыг оруулахыг л хүсч байна .

  • glyphicon glyphicon-одон
  • glyphicon glyphicon-plus
  • glyphicon glyphicon-euro
  • glyphicon glyphicon-eur
  • glyphicon glyphicon-хасах
  • glyphicon glyphicon-үүл
  • glyphicon glyphicon-дугтуй
  • glyphicon glyphicon-харандаа
  • 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-ок
  • glyphicon glyphicon-устгах
  • glyphicon glyphicon-томруулах
  • glyphicon glyphicon-томруулах
  • glyphicon glyphicon- унтраах
  • glyphicon glyphicon-дохио
  • glyphicon glyphicon-cog
  • glyphicon glyphicon-хогийн сав
  • glyphicon glyphicon-гэр
  • glyphicon glyphicon-файл
  • glyphicon glyphicon-цаг хугацаа
  • glyphicon glyphicon-зам
  • glyphicon glyphicon-татаж авах-alt
  • glyphicon glyphicon-татаж авах
  • glyphicon glyphicon-байршуулах
  • glyphicon glyphicon-inbox
  • glyphicon glyphicon-тоглох тойрог
  • glyphicon glyphicon-давталт
  • glyphicon glyphicon-refresh
  • glyphicon glyphicon-list-alt
  • glyphicon glyphicon-lock
  • glyphicon glyphicon-туг
  • glyphicon glyphicon-чихэвч
  • glyphicon glyphicon-bolume-off
  • glyphicon glyphicon-bolume
  • glyphicon glyphicon-эзэлхүүнийг нэмэгдүүлэх
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon-бар код
  • glyphicon glyphicon-tag
  • glyphicon glyphicon-tags
  • glyphicon glyphicon-ном
  • glyphicon glyphicon-хавчуурга
  • glyphicon glyphicon-print
  • glyphicon glyphicon-камер
  • glyphicon glyphicon-фонт
  • glyphicon glyphicon-bold
  • glyphicon glyphicon-налуу
  • glyphicon glyphicon-текстийн өндөр
  • glyphicon glyphicon-текстийн өргөн
  • glyphicon glyphicon-align-left
  • glyphicon glyphicon-align-center
  • glyphicon glyphicon-align-right
  • glyphicon glyphicon-align-wustify
  • glyphicon glyphicon-жагсаалт
  • glyphicon glyphicon-догол-зүүн
  • glyphicon glyphicon-догол-баруун
  • glyphicon glyphicon-facetime-видео
  • glyphicon glyphicon-зураг
  • glyphicon glyphicon-map-marker
  • glyphicon glyphicon-тохируулга
  • glyphicon glyphicon-tint
  • glyphicon glyphicon-засварлах
  • glyphicon glyphicon-хувь
  • glyphicon glyphicon-check
  • glyphicon glyphicon-хөдөлгөөн
  • glyphicon glyphicon-алхам ухрах
  • glyphicon glyphicon-хурдан ухарч
  • glyphicon glyphicon-буцах
  • glyphicon glyphicon-тоглох
  • glyphicon glyphicon-түр зогсоох
  • glyphicon glyphicon-stop
  • glyphicon glyphicon-forward
  • glyphicon glyphicon-хурдан урагшлах
  • glyphicon glyphicon-алхам урагшлах
  • glyphicon glyphicon-хөлөгдөх
  • glyphicon glyphicon-chevron-зүүн
  • glyphicon glyphicon-chevron-баруун
  • glyphicon glyphicon-нэмэх тэмдэг
  • glyphicon glyphicon-хасах тэмдэг
  • glyphicon glyphicon-remove-sign
  • glyphicon glyphicon-ok-sign
  • glyphicon glyphicon-асуултын тэмдэг
  • glyphicon glyphicon-мэдээллийн тэмдэг
  • glyphicon glyphicon-дэлгэцийн агшин
  • glyphicon glyphicon-remove-round
  • glyphicon glyphicon-ok-дугуй
  • glyphicon glyphicon-ban-round
  • glyphicon glyphicon-сум-зүүн
  • glyphicon glyphicon-сум-баруун
  • glyphicon glyphicon-дээш сум
  • glyphicon glyphicon-сум доош
  • glyphicon glyphicon-share-alt
  • glyphicon glyphicon-resize-full
  • glyphicon glyphicon-resize-small
  • glyphicon glyphicon-cclamation-sign
  • 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-chevron-down
  • glyphicon glyphicon-retweet
  • glyphicon glyphicon-худалдааны тэрэг
  • glyphicon glyphicon-хавтас-хаах
  • glyphicon glyphicon-хавтас-нээлттэй
  • glyphicon glyphicon-resize-vertical
  • glyphicon glyphicon-resize-horizontal
  • glyphicon glyphicon-hdd
  • glyphicon glyphicon-bullhorn
  • glyphicon glyphicon-хонх
  • glyphicon glyphicon-сертификат
  • glyphicon glyphicon-эрхий хуруу
  • glyphicon glyphicon-thumbs-down
  • 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-pushpin
  • glyphicon glyphicon-usd
  • glyphicon glyphicon-gbp
  • glyphicon glyphicon-ангилах
  • glyphicon glyphicon-цагаан толгойгоор нь ангилах
  • glyphicon glyphicon-цагаан толгойн үсгээр ангилах
  • glyphicon glyphicon- дарааллаар нь ангилах
  • glyphicon glyphicon-захиалгаар нь ангилах-alt
  • glyphicon glyphicon-шинж чанараар нь ангилах
  • glyphicon glyphicon-шинж чанараар нь ангилах-alt
  • glyphicon glyphicon-шалгагдаагүй
  • glyphicon glyphicon-expand
  • glyphicon glyphicon-уналт-унах
  • glyphicon glyphicon-нууралт
  • glyphicon glyphicon-нэвтрэх
  • glyphicon glyphicon-флэш
  • glyphicon glyphicon-log-out
  • glyphicon glyphicon-шинэ цонх
  • glyphicon glyphicon-record
  • glyphicon glyphicon-хадгалах
  • glyphicon glyphicon-нээлттэй
  • glyphicon glyphicon-аар хадгалагдсан
  • glyphicon glyphicon-импорт
  • glyphicon glyphicon-экспорт
  • glyphicon glyphicon-илгээх
  • glyphicon glyphicon-floppy-disk
  • glyphicon glyphicon-floppy-хадгалагдсан
  • glyphicon glyphicon-floppy-remove
  • glyphicon glyphicon-floppy-save
  • glyphicon glyphicon-floppy-open
  • glyphicon glyphicon-credit-card
  • glyphicon glyphicon-шилжүүлэх
  • glyphicon glyphicon хутганы хэрэгсэл
  • glyphicon glyphicon-толгой
  • glyphicon glyphicon-шахсан
  • glyphicon glyphicon-чихэвч
  • glyphicon glyphicon-phone-alt
  • glyphicon glyphicon-цамхаг
  • glyphicon glyphicon-stats
  • glyphicon glyphicon-sd-видео
  • glyphicon glyphicon-hd-видео
  • glyphicon glyphicon-хадмал орчуулга
  • glyphicon glyphicon-sound-стерео
  • glyphicon glyphicon-sound-dolby
  • glyphicon glyphicon-sound-5-1
  • glyphicon glyphicon-sound-6-1
  • glyphicon glyphicon-sound-7-1
  • glyphicon glyphicon-зохиогчийн эрхийн тэмдэг
  • glyphicon glyphicon-бүртгэлийн тэмдэг
  • glyphicon glyphicon-cloud-татаж авах
  • glyphicon glyphicon-cloud-upload
  • glyphicon glyphicon-мод-шилмүүст
  • glyphicon glyphicon-мод-навчит
  • glyphicon glyphicon-cd
  • glyphicon glyphicon-save-файл
  • 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-piggy-bank
  • glyphicon glyphicon-хайч
  • глификон глификон-биткойн
  • glyphicon glyphicon-btc
  • glyphicon glyphicon-xbt
  • glyphicon glyphicon-yen
  • glyphicon glyphicon-jpy
  • glyphicon glyphicon-рубль
  • glyphicon glyphicon-rub
  • glyphicon glyphicon масштабтай
  • glyphicon glyphicon-мөс-хөөрөл
  • glyphicon glyphicon-мөсний чихэрлэг амттай
  • glyphicon glyphicon-боловсрол
  • glyphicon glyphicon-сонголт-хэвтээ
  • glyphicon glyphicon-сонголт-босоо
  • glyphicon glyphicon-цэс-гамбургер
  • glyphicon glyphicon-modal-window
  • glyphicon glyphicon-тос
  • glyphicon glyphicon-үр тариа
  • glyphicon glyphicon-нарны шил
  • glyphicon glyphicon-текстийн хэмжээ
  • glyphicon glyphicon-текстийн өнгө
  • glyphicon glyphicon-текст-арын дэвсгэр
  • glyphicon glyphicon-object-align-top
  • glyphicon glyphicon-объектыг тэгшлэх-доод
  • glyphicon glyphicon-объект-зохицуулах-хэвтээ
  • glyphicon glyphicon-объект-зүүн зэрэгцүүлэх
  • glyphicon glyphicon-объектыг тэгшлэх-босоо
  • glyphicon glyphicon-объект-зохицуулах-баруун
  • glyphicon glyphicon-гурвалжин-баруун
  • glyphicon glyphicon-гурвалжин-зүүн
  • glyphicon glyphicon-гурвалжин-доод
  • glyphicon glyphicon-гурвалжин-дээд
  • glyphicon glyphicon-консол
  • glyphicon glyphicon-superscript
  • glyphicon glyphicon-subscript
  • glyphicon glyphicon-цэс-зүүн
  • glyphicon glyphicon-цэс-баруун
  • glyphicon glyphicon-цэс доош
  • glyphicon glyphicon-цэс хүртэл

Яаж хэрэглэх вэ

Гүйцэтгэлийн шалтгааны улмаас бүх дүрс нь үндсэн анги болон тусдаа дүрсний анги шаарддаг. Ашиглахын тулд дараах кодыг хаана ч байрлуулна уу. Зөв дүүргэхийн тулд дүрс болон текстийн хооронд зай үлдээхээ мартуузай.

Бусад бүрэлдэхүүн хэсгүүдтэй хольж болохгүй

Icon ангиудыг бусад бүрэлдэхүүн хэсгүүдтэй шууд нэгтгэх боломжгүй. Тэдгээрийг нэг элемент дээр бусад ангиудын хамт хэрэглэж болохгүй. Оронд нь үүр нэмээд <span>дүрсний ангиллыг <span>.

Зөвхөн хоосон элементүүдэд хэрэглэнэ

Icon ангиудыг зөвхөн текстийн агуулгагүй, хүүхэд элементгүй элементүүдэд ашиглах ёстой.

Зургийн фонтын байршлыг өөрчлөх

Bootstrap нь дүрсний фонтын файлуудыг ../fonts/эмхэтгэсэн 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баруун тийш зэрэгцүүлэх.

Нэмэлт байрлал шаардаж магадгүй

Унтраах цэсүүд нь баримт бичгийн хэвийн урсгалын хүрээнд CSS-ээр автоматаар байршдаг. Энэ нь унадаг цэсийг зарим overflowшинж чанартай эцэг эх тайрах эсвэл харах цонхны гадна гарч ирж магадгүй гэсэн үг юм. Эдгээр асуудлууд гарч ирэх үед өөрсдөө шийдээрэй.

Хоцрогдсон .pull-rightтохируулга

3.1.0 хувилбарын хувьд бид унадаг .pull-rightцэсийг цуцалсан. Цэсийг баруун тийш зэрэгцүүлэхийн тулд -г ашиглана уу .dropdown-menu-right. Navbar дээрх баруун тийш зэрэгцүүлсэн навигацийн бүрэлдэхүүн хэсгүүд нь цэсийг автоматаар зэрэгцүүлэхийн тулд энэ ангийн холимог хувилбарыг ашигладаг. Үүнийг дарахын тулд ашиглана уу .dropdown-menu-left.

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

Дурын унждаг цэсэнд үйлдлүүдийн хэсгийг шошголохын тулд толгой хэсгийг нэмнэ үү.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

Унждаг цэсэнд тусдаа цуврал холбоосуудад хуваагч нэмнэ үү.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

Холбоосыг идэвхгүй болгохын тулд унадаг цэсний .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>Элементүүдтэй _

Зүгээр л цуваа .btns-г оруулаарай .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>

Унтраах товчлуурууд

Дурын товчлуурыг ашиглан доош унадаг цэсийг a дотор байрлуулж .btn-group, зохих цэсийн тэмдэглэгээг хийнэ үү.

Plugin-ийн хамаарал

Товчлуурын уналт нь унадаг залгаасыг таны 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

Бид нэг оролтын бүлэгт олон маягтын хяналтыг дэмждэггүй.

@

@example.com

доллар .00

https://example.com/users/
<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 болон хариу үйлдэл үзүүлэх үндэслэлтэй navs

9.1.2 хувилбарын хувьд Safari нь хөтчийнхөө хэмжээг хэвтээ байдлаар өөрчлөхөд шинэчлэгдсэнээр арилгадаг зөвтгөгдсөн Nav-д алдаа гаргахад хүргэдэг алдааг харуулж байна. Энэ алдаа нь үндэслэлтэй navigation жишээн дээр бас харагдаж байна .

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

Ямар ч навигацийн бүрэлдэхүүн хэсэг (таб эсвэл эм) дээр саарал холбоосыг нэмж .disabled, хулганын эффект байхгүй .

Холбоосын үйл ажиллагаанд нөлөөлөөгүй

Энэ анги нь зөвхөн <a>гадаад төрхийг өөрчлөх болно, функцийг нь өөрчлөхгүй. Энд байгаа холбоосыг идэвхгүй болгохын тулд захиалгат JavaScript ашиглана уу.

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

Бага зэрэг нэмэлт HTML болон унадаг JavaScript залгаас бүхий унадаг цэсүүдийг нэмнэ үү .

Унтраах цонхтой табууд

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

Унтраах эмүүд

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

Navbar

Navbars нь таны програм эсвэл сайтын навигацийн толгой болж үйлчилдэг хариу үйлдэл үзүүлэх мета бүрэлдэхүүн хэсэг юм. Тэдгээр нь хөдөлгөөнт харагдац дээр хумигдаж (мөн сэлгэх боломжтой) эхэлж, боломжтой харах цонхны өргөн нэмэгдэх тусам хэвтээ болно.

Зөвшөөрөгдсөн навигацийн навигацийн холбоосыг одоогоор дэмждэггүй.

Бялхсан контент

Bootstrap нь таны navbar дээрх контентод хэр их зай хэрэгтэйг мэдэхгүй тул та контентыг хоёр дахь мөрөнд оруулахтай холбоотой асуудалтай тулгарч магадгүй юм. Үүнийг шийдэхийн тулд та дараахь зүйлийг хийх боломжтой.

  1. Navbar зүйлийн хэмжээ эсвэл өргөнийг багасгах.
  2. responsive хэрэгслийн ангиудыг ашиглан тодорхой дэлгэцийн хэмжээтэй зарим navbar зүйлсийг нуу .
  3. Таны navbar нурсан болон хэвтээ горимд шилжих цэгийг өөрчил. Хувьсагчийг тохируулах @grid-float-breakpointэсвэл өөрийн медиа асуулга нэмнэ үү.

JavaScript залгаас шаарддаг

Хэрэв JavaScript-г идэвхгүй болгосон бөгөөд харах хэсэг нь навигацийн самбарыг задрахаар нарийссан бол navbar-г өргөтгөж, доторх агуулгыг үзэх боломжгүй болно .navbar-collapse.

Хариуцлагатай navbar нь таны Bootstrap хувилбарт задлах залгаасыг оруулахыг шаарддаг.

Хурсан гар утасны навигацийн таслах цэгийг өөрчилж байна

Харах цонх нь -ээс нарийссан үед навигацийн самбар нь босоо хөдөлгөөнт харагдац руугаа хумигдаж @grid-float-breakpoint, харагдац нь хамгийн багадаа @grid-float-breakpointөргөнтэй үед хэвтээ хөдөлгөөнт бус харагдац руу тэлэх болно. Navbar нурж/тэлэх үед хянахын тулд Less source-д энэ хувьсагчийг тохируулна уу. Анхдагч утга нь 768px(хамгийн жижиг "жижиг" эсвэл "таблет" дэлгэц).

Navbar-г ашиглах боломжтой болгох

Элемент ашиглахаа мартуузай <nav>, эсвэл хэрэв , гэх мэт илүү ерөнхий элементийг ашиглаж байгаа бол түүнийг туслах технологи хэрэглэгчдэд зориулсан тэмдэглэгээний бүс гэж тодорхой тодорхойлохын тулд навигац бүрийн хэсэгт <div>a-г нэмнэ үү.role="navigation"

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Текстийг солих замаар 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 контентын хаана байрлаж байгааг тодорхойлохын тулд зэрэгцүүлэх сонголтыг ашиглана уу.

.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

a-д оршдоггүй элементүүдэд .navbar-btnангийг нэмж , тэдгээрийг navbar дээр босоо байдлаар төвлөрүүл.<button><form>

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

Контекст тусгай хэрэглээ

Стандарт товчлуурын ангиудын нэгэн адил элементүүд болон .navbar-btnдээр ашиглаж болно . Гэсэн хэдий ч, доторх элементүүдэд стандарт товчлуурын ангиудыг ч ашиглах ёсгүй .<a><input>.navbar-btn<a>.navbar-nav

Текстийн мөрүүдийг элемент дотор ороож , зөв ​​хөтлөх, өнгөөр ​​нь тохируулна .navbar-text.<p>

<p class="navbar-text">Signed in as Mark Otto</p>

Ердийн навигацийн бүрэлдэхүүн хэсэг дотор байдаггүй стандарт холбоосыг ашигладаг хүмүүсийн .navbar-linkхувьд үндсэн болон урвуу навигацийн сонголтуудад тохирох өнгийг нэмэхийн тулд ангиа ашиглана уу.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

Navigation холбоосууд, маягтууд, товчлуурууд эсвэл текстийг .navbar-leftэсвэл .navbar-rightхэрэгслийн ангиудыг ашиглан зэрэгцүүлнэ үү. Хоёр анги хоёулаа заасан чиглэлд CSS float нэмнэ. Жишээ нь, навигацийн холбоосыг <ul>зэрэгцүүлэхийн тулд тэдгээрийг тус тусад нь тусад нь тусад нь хэрэглэгдэх хэрэгслийн ангилалд оруулна.

Эдгээр ангиуд нь and-ийн холимог хувилбарууд .pull-leftболовч .pull-rightтэдгээр нь төхөөрөмжийн хэмжээтэй холбоотой навигацийн бүрэлдэхүүн хэсгүүдтэй ажиллахад хялбар болгох үүднээс медиа асуулгад зориулагдсан болно.

Олон бүрэлдэхүүн хэсгүүдийг баруун тийш зэрэгцүүлэх

Navbar-д одоогоор олон .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>Өөрийн үнэ цэнийг туршиж үзээрэй эсвэл доороос манай хэсгийг ашиглана уу. Зөвлөмж: Анхдагчаар navbar нь 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>Өөрийн үнэ цэнийг туршиж үзээрэй эсвэл доороос манай хэсгийг ашиглана уу. Зөвлөмж: Анхдагчаар navbar нь 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-ийн харагдах байдлыг өөрчил .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 navs болон бусад зүйлд нэмж шинэ эсвэл уншаагүй зүйлсийг хялбархан тодруулаарай .

Ирсэн имэйл42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

Өөрөө нурах

:emptyХэрэв шинэ эсвэл уншаагүй зүйл байхгүй бол дотор нь ямар ч контент байхгүй тохиолдолд тэмдэг нь зүгээр л унана (CSS сонгогчоор).

Хөтөч хоорондын нийцтэй байдал

:emptyСонгогчийг дэмждэггүй тул Internet Explorer 8 дээр тэмдэг нь өөрөө унадаггүй.

Идэвхтэй навигацийн төлөвт дасан зохицдог

Эмийн навигацийн идэвхтэй төлөвт тэмдэг байрлуулахад зориулагдсан загваруудыг оруулсан болно.

<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 контентыг өнгөц зурагт оруулах боломжтой.

100% x 200

Өнгөц зургийн шошго

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.

Товчлуур Товчлуур

100% x 200

Өнгөц зургийн шошго

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.

Товчлуур Товчлуур

100% x 200

Өнгөц зургийн шошго

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 классуудыг ашиглах явдал юм.

Үндсэн жишээ

Өгөгдмөл явцын мөр.

60% гүйцэтгэлтэй
<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>

Контекст хувилбарууд

Явцын мөрүүд нь ижил товчлуур болон дохиоллын ангиудыг тогтмол загварт ашигладаг.

40% гүйцэтгэл (амжилт)
20% бүрэн гүйцэд
60% дууссан (анхааруулга)
80% бүрэн (аюул)
<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 болон түүнээс доош хувилбаруудад байхгүй.

40% гүйцэтгэл (амжилт)
20% бүрэн гүйцэд
60% дууссан (анхааруулга)
80% бүрэн (аюул)
<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 болон түүнээс доош хувилбаруудад байхгүй.

45% гүйцэтгэлтэй
<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тэдгээрийг давхарлана.

35% гүйцэтгэл (амжилт)
20% дууссан (анхааруулга)
10% бүрэн (аюул)
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

Медиа объект

Текстийн агуулгын хажууд зүүн эсвэл баруун тийш зэрэгцүүлсэн дүрс бүхий төрөл бүрийн бүрэлдэхүүн хэсгүүдийг (блогын сэтгэгдэл, жиргээ гэх мэт) бүтээхэд зориулсан хийсвэр объектын хэв маяг.

Өгөгдмөл медиа

Өгөгдмөл медиа нь агуулгын блокийн зүүн эсвэл баруун талд медиа объектыг (зураг, видео, аудио) харуулдаг.

Хэвлэл мэдээллийн гарчиг

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-с хойш уг хэрэглээнд хуучирсан. Эдгээр нь html- ийн ард байрлахаас бусад тохиолдолд .media-leftба -тай тэнцүү байна ..media-right.media-right.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 aparturient 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 aparturient 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 aparturient 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
  • Морби Лео Рисус
  • Porta ac consectetur 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>). Элемент бүрийн эргэн тойронд эцэг эх байх шаардлагагүй.

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

Товчлуурын зүйлс

Жагсаалтын бүлгийн зүйлүүд нь жагсаалтын зүйлийн оронд товчлуурууд байж болно (энэ нь ийн <div>оронд эцэг эх гэсэн үг <ul>). Элемент бүрийн эргэн тойронд эцэг эх байх шаардлагагүй. Энд стандарт ангиудыг бүү ашигла ..btn

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

Идэвхгүй болгосон зүйлс

.disabled"А" дээр нэмээд .list-group-itemтахир дутуу харагдана.

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

Контекст ангиуд

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

  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur 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-г нэмж оруулаарай.

<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 Жейкоб Торнтон @ тарган
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. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Морби Лео Рисус
  • Porta ac consectetur 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! Бид таны өмнөөс үүнийг хүчингүй болгож байгаа тул та frameborder="0"өөрийн s-д оруулах шаардлагагүй .<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>