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

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баруун тийш зэрэгцүүлэх.

<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

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

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

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

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

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

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

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

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

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>

Судалчлагдсан

Судалчлагдсан эффект үүсгэхийн тулд градиент ашигладаг. 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-с хойш уг хэрэглээнд хуучирсан. Эдгээр нь 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>). Элемент бүрийн эргэн тойронд эцэг эх байх шаардлагагүй.

Cras justo odio Dapibus ac facilisis in Морби Лео Рисус Porta ac consectetur ac Эрос дахь үүдний хөндий

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

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

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

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

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

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

Cras justo odio Dapibus ac facilisis in Морби Лео Рисус Porta ac consectetur ac Эрос дахь үүдний хөндий

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

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

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

Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Эрос дахь үүдний хөндий

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-г нэмж оруулаарай.

Жагсаалтын бүлгийн зүйлийн гарчиг

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	Жейкоб	Торнтон	@ тарган
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>

Бүрэлдэхүүн хэсгүүд

Глифонууд

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

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

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

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

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

Боломжтой дүрс тэмдэг

Жишээ

Унтраах цэсүүд

Жишээ

Тохируулга

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

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

Гарчиг

Хуваагч

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

Товчлуурын бүлгүүд

Товчлуурын бүлгүүдийн зөвлөмж, поповер нь тусгай тохиргоо шаарддаг

Зөв эсэхийг баталгаажуулж role, шошгыг өгнө үү

Үндсэн жишээ

Товчлуурын самбар

Хэмжээ тогтоох

Үүрлэх

Босоо өөрчлөлт

Зөвшөөрөгдсөн товчлуурын бүлгүүд

Хил хязгаарыг зохицуулах

IE8 ба хил хязгаар

<a>Элементүүдтэй _

Товчлуурын үүрэг гүйцэтгэдэг холбоосууд

<button>Элементүүдтэй _

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

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

Нэг товчлуурын уналт

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

Хэмжээ тогтоох

Унтраах хувилбар

Оролтын бүлгүүд

<input>Зөвхөн текст

Оролтын бүлгүүдийн зөвлөмж, поповер нь тусгай тохиргоо шаарддаг

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

Үргэлж шошго нэмнэ үү

Үндсэн жишээ

Хэмжээ тогтоох

Шалгалтын нүднүүд болон радио нэмэлтүүд

Товчлуурын нэмэлтүүд

Унтраах товчлуур бүхий товчлуурууд

Хэсэгчилсэн товчлуурууд

Олон товчлуурууд

Навс

Таб самбарт navs ашиглахын тулд JavaScript таб залгаас шаардлагатай

Навигац болгон ашиглах боломжтой болгох

Таб

Эм

Зөвтгөсөн

Safari болон хариу үйлдэл үзүүлэх үндэслэлтэй navs

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

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

Унтраах цэсийг ашиглах

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

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

Navbar

Өгөгдмөл navbar

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

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

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

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

Брэндийн зураг

Маягтууд

Хөдөлгөөнт төхөөрөмжийн анхааруулга

Үргэлж шошго нэмнэ үү

Товчлуурууд

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

Текст

Navigation бус холбоосууд

Бүрэлдэхүүн хэсгүүдийн тохируулга

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

Дээд талд нь зассан

Биеийн дэвсгэр шаардлагатай

Доод талд нь зассан

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

Зөв эсэхийг баталгаажуулж `role`, шошгыг өгнө үү

`<a>`Элементүүдтэй _

`<button>`Элементүүдтэй _

`<input>`Зөвхөн текст