Бүрэлдэхүүн хэсгүүд
Дахин ашиглах боломжтой арав гаруй бүрэлдэхүүн хэсгүүдийг дүрс дүрслэл, унадаг цэс, оролтын бүлгүүд, навигаци, сэрэмжлүүлэг болон бусад олон зүйлийг хангах зорилгоор бүтээсэн.
Дахин ашиглах боломжтой арав гаруй бүрэлдэхүүн хэсгүүдийг дүрс дүрслэл, унадаг цэс, оролтын бүлгүүд, навигаци, сэрэмжлүүлэг болон бусад олон зүйлийг хангах зорилгоор бүтээсэн.
Glyphicon Halflings багцын фонтын форматтай 250 гаруй глифийг багтаасан. Glyphicons Halflings нь ихэвчлэн үнэ төлбөргүй байдаггүй ч бүтээгч нь Bootstrap-д үнэ төлбөргүй ашиглах боломжтой болгосон. Баярлалаа, бид танаас боломжтой бол Glyphicons руу буцах холбоосыг оруулахыг л хүсч байна .
Гүйцэтгэлийн шалтгааны улмаас бүх дүрс нь үндсэн анги болон тусдаа дүрсний анги шаарддаг. Ашиглахын тулд дараах кодыг хаана ч байрлуулна уу. Зөв дүүргэхийн тулд дүрс болон текстийн хооронд зай үлдээхээ мартуузай.
Icon ангиудыг бусад бүрэлдэхүүн хэсгүүдтэй шууд нэгтгэх боломжгүй. Тэдгээрийг нэг элемент дээр бусад ангиудын хамт хэрэглэж болохгүй. Оронд нь үүр нэмээд <span>
дүрсний ангиллыг <span>
.
Icon ангиудыг зөвхөн текстийн агуулгагүй, хүүхэд элементгүй элементүүдэд ашиглах ёстой.
Bootstrap нь дүрсний фонтын файлуудыг ../fonts/
эмхэтгэсэн CSS файлуудтай харьцуулахад директорт байрлуулна гэж үздэг. Эдгээр фонтын файлуудыг зөөх эсвэл нэрийг нь өөрчлөх нь CSS-ийг гурван аргын аль нэгээр шинэчлэх гэсэн үг юм.
@icon-font-path
Бага файлуудын эх сурвалж дахь болон/эсвэл @icon-font-name
хувьсагчдыг өөрчил .url()
Эмхэтгэсэн CSS доторх замыг өөрчлөх .Өөрийн хөгжүүлэлтийн тохиргоонд хамгийн сайн тохирох аль ч сонголтыг ашиглаарай.
Туслах технологийн орчин үеийн хувилбарууд нь CSS-ээр үүсгэсэн контент, мөн Юникод тодорхой тэмдэгтүүдийг зарлах болно. Дэлгэц уншигчдад санамсаргүй, төөрөгдүүлсэн гаралтаас зайлсхийхийн тулд (ялангуяа дүрсийг зөвхөн гоёл чимэглэлийн зориулалтаар ашигладаг бол) бид тэдгээрийг aria-hidden="true"
шинж чанарын тусламжтайгаар нуудаг.
Хэрэв та утгыг илэрхийлэхийн тулд дүрсийг ашиглаж байгаа бол (зөвхөн гоёл чимэглэлийн элемент биш) энэ утгыг туслах технологид дамжуулж байгаа эсэхийг шалгаарай, жишээлбэл, .sr-only
ангид харагдахуйц байдлаар далдлагдсан нэмэлт контентыг оруулаарай.
Хэрэв та өөр ямар ч текстгүйгээр ( <button>
зөвхөн дүрс агуулсан) удирдлага үүсгэж байгаа бол удирдлагын зорилгыг тодорхойлох өөр контентыг үргэлж өгөх ёстой бөгөөд ингэснээр туслах технологи хэрэглэгчдэд ойлгомжтой байх болно. Энэ тохиолдолд та aria-label
хяналт дээр атрибут нэмж болно.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Тэдгээрийг товчлуурууд, товчлуурын бүлгүүд, хэрэгслийн самбар, навигаци эсвэл хавсаргасан маягтын оролтод ашиглана уу.
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
Туслах технологийн хэрэглэгчдэд энэ зөвлөмжийг хүргэх нэмэлт текстийн хамт алдааны мессеж гэдгийг дохиололд ашигладаг дүрс тэмдэг ..sr-only
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>
Холбоосуудын жагсаалтыг харуулах, солих боломжтой, контекст цэс. Унтраах JavaScript залгаасыг ашиглан интерактив болгосон .
Унждаг цэс болон унадаг цэсийг .dropdown
, эсвэл зарладаг өөр элемент дотор ороорой position: relative;
. Дараа нь цэсийн HTML-г нэмнэ үү.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
.dropup
Унждаг цэсийг эцэг эх рүү нэмэх замаар дээшээ (доошоо биш) өргөжүүлэхээр өөрчилж болно .
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Өгөгдмөл байдлаар, унждаг цэс нь эцэг эхийнхээ дээд ба зүүн талд автоматаар 100% байрладаг. Унждаг .dropdown-menu-right
цэсийг .dropdown-menu
баруун тийш зэрэгцүүлэх.
Унтраах цэсүүд нь баримт бичгийн хэвийн урсгалын хүрээнд CSS-ээр автоматаар байршдаг. Энэ нь унадаг цэсийг зарим overflow
шинж чанартай эцэг эх тайрах эсвэл харах цонхны гадна гарч ирж магадгүй гэсэн үг юм. Эдгээр асуудлууд гарч ирэх үед өөрсдөө шийдээрэй.
.pull-right
тохируулга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>
Холбоосыг идэвхгүй болгохын тулд унадаг цэсний .disabled
a дээр нэмнэ үү .<li>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Another link</a></li>
</ul>
Товчлуурын бүлэгтэй нэг мөрөнд хэд хэдэн товчлууруудыг бүлэглээрэй. Нэмэлт JavaScript радио болон шалгах хайрцагны хэв маягийг манай товчлуурын залгаасыг ашиглан нэмнэ үү .
А доторх элементүүдэд зөвлөмж эсвэл поповер ашиглах үед .btn-group
та container: 'body'
хүсээгүй гаж нөлөөнөөс зайлсхийхийн тулд сонголтыг зааж өгөх хэрэгтэй (жишээ нь, самбар эсвэл поповер идэвхжсэн үед элемент улам томрох ба/эсвэл дугуйрсан булангаа алдах гэх мэт).
role
, шошгыг өгнө үүДэлгэц уншигч гэх мэт туслах технологиуд нь хэд хэдэн товчлууруудыг бүлэглэсэн гэдгийг илэрхийлэхийн тулд тохирох role
шинж чанарыг өгөх шаардлагатай. Товчлуурын бүлгүүдийн хувьд энэ нь role="group"
, харин хэрэгслийн мөрөнд байх ёстой role="toolbar"
.
Нэг үл хамаарах зүйл бол зөвхөн нэг удирдлага (жишээ нь элементүүдтэй зөвтгөсөн товчлуурын бүлгүүд<button>
) эсвэл унждаг цэс агуулсан бүлгүүд юм.
Нэмж дурдахад, бүлгүүд болон хэрэгслийн самбаруудад тодорхой шошго өгөх ёстой, учир нь ихэнх туслах технологи нь зөв role
шинж чанар байгаа хэдий ч тэдгээрийг зарлахгүй. Энд өгсөн жишээнүүдэд бид -г ашигладаг aria-label
боловч өөр хувилбаруудыг aria-labelledby
ашиглаж болно.
.btn
-ээр хэд хэдэн товчлуурыг боож .btn-group
өгнө.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
Илүү төвөгтэй бүрэлдэхүүн хэсгүүдийн хувьд багцуудыг <div class="btn-group">
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-д тохируулсан тохиргооноос хамааран та хүрээг арилгах эсвэл дахин өнгөөр будаж болно.
<a>
Internet Explorer 8 нь асаалттай эсвэл <button>
элемент байгаа эсэхээс үл хамааран зөвтгөгдсөн товчлуурын бүлгийн товчлууруудын хил хязгаарыг гаргадаггүй . Үүнийг тойрон гарахын тулд товчлуур бүрийг өөр товчлуураар боож өгнө үү .btn-group
.
Дэлгэрэнгүй мэдээллийг №12476 -с үзнэ үү.
<a>
Элементүүдтэй _Зүгээр л цуваа .btn
s-г оруулаарай .btn-group.btn-group-justified
.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
Хэрэв <a>
элементүүд нь одоогийн хуудасны өөр баримт бичиг эсвэл хэсэг рүү шилжихийн оронд хуудасны функцийг идэвхжүүлдэг товчлуурын үүрэг гүйцэтгэдэг бол тэдгээрт мөн тохирох role="button"
.
<button>
Элементүүдтэй _Зөвшөөрөгдсөн товчлуурын бүлгүүдийг <button>
элементүүдтэй ашиглахын тулд товчлуур бүрийг товчлуурын бүлэгт оруулах ёстой . Ихэнх хөтчүүд манай CSS-ийг элементүүдэд зөвтгөх зорилгоор зөв ашигладаггүй <button>
ч бид товчлуурын унадаг цэсийг дэмждэг тул үүнийг тойрон гарах боломжтой.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
Дурын товчлуурыг ашиглан доош унадаг цэсийг a дотор байрлуулж .btn-group
, зохих цэсийн тэмдэглэгээг хийнэ үү.
Товчлуурын уналт нь унадаг залгаасыг таны Bootstrap хувилбарт оруулахыг шаарддаг.
Тэмдэглэгээний үндсэн өөрчлөлтүүдээр товчлуурыг унждаг унтраалга болгон хувиргаарай.
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Үүний нэгэн адил, ижил тэмдэглэгээний өөрчлөлт бүхий хуваах товчлуурын унждаг цэсийг зөвхөн тусдаа товчлуураар үүсгээрэй.
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Товчлуурын уналт нь бүх хэмжээтэй товчлууруудтай ажилладаг.
<!-- Large button group -->
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Small button group -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Extra small button group -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
Эцэг эх рүү нэмэх замаар элементүүдийн дээрх унадаг цэсийг өдөөх .dropup
.
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
Текст дээр суурилсан аливаа файлын өмнө, хойно эсвэл хоёр талд нь текст эсвэл товчлуур нэмж маягтын удирдлагыг өргөжүүлнэ үү <input>
. дан дээр элемент нэмэх эсвэл нэмэхийн .input-group
тулд .input-group-addon
эсвэл -ийг ашиглана уу ..input-group-btn
.form-control
<input>
Зөвхөн текст<select>
Элементүүдийг WebKit хөтчүүдэд бүрэн загварчлах боломжгүй тул энд ашиглахаас зайлсхий .
Зарим тохиолдолд <textarea>
тэдгээрийн шинж чанарыг үл хүндэтгэх тул энд элементүүдийг ашиглахаас зайлсхий .rows
Доторх элементүүд дээр хэрэгслийн зөвлөмж эсвэл поповер ашиглах үед .input-group
та container: 'body'
хүсээгүй гаж нөлөөнөөс зайлсхийхийн тулд сонголтыг зааж өгөх хэрэгтэй болно (жишээ нь, самбар эсвэл поповер идэвхжсэн үед элемент улам томрох ба/эсвэл дугуйрсан булангаа алдах гэх мэт).
Маягтын бүлгүүд эсвэл сүлжээ баганын ангиудыг оролтын бүлгүүдтэй шууд хольж болохгүй. Үүний оронд оролтын бүлгийг маягтын бүлэг эсвэл сүлжээтэй холбоотой элементийн дотор байрлуулна.
Хэрэв та оролт бүрт шошго оруулахгүй бол дэлгэц уншигчид таны маягттай холбоотой асуудалтай тулгарах болно. Эдгээр оролтын бүлгүүдийн хувьд аливаа нэмэлт шошго эсвэл функцийг туслах технологид дамжуулж байгаа эсэхийг шалгаарай.
Хэрэглэх арга техник (харагдах <label>
элементүүд, анги <label>
ашиглан нуугдсан элементүүд эсвэл , , , эсвэл шинж чанарыг ашиглах) болон ямар нэмэлт мэдээллийг дамжуулах шаардлагатай вэ гэдэг нь таны хэрэгжүүлж буй интерфейсийн виджетийн төрлөөс хамаарч өөр өөр байх болно. Энэ хэсэгт байгаа жишээнүүд нь тодорхой тохиолдлоор санал болгож буй цөөн хэдэн хандлагыг өгдөг..sr-only
aria-label
aria-labelledby
aria-describedby
title
placeholder
Оролтын хоёр талд нэг нэмэлт эсвэл товчлуурыг байрлуул. Та мөн оролтын хоёр талд нэгийг байрлуулж болно.
Бид нэг талдаа олон нэмэлт ( .input-group-addon
эсвэл ) дэмждэггүй ..input-group-btn
Бид нэг оролтын бүлэгт олон маягтын хяналтыг дэмждэггүй.
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
Харьцангуй маягтын хэмжээсийн ангиудыг .input-group
өөртөө нэмэх ба доторх агуулга автоматаар хэмжээг өөрчлөх болно- элемент бүр дээр маягтын хяналтын хэмжээтэй ангиудыг давтах шаардлагагүй.
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>
Текстийн оронд оролтын бүлгийн нэмэлт дотор дурын шалгах хайрцаг эсвэл радио сонголтыг байрлуул.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
Оролтын бүлгүүдийн товчлуурууд нь арай өөр бөгөөд нэмэлт нэг түвшний үүрлэх шаардлагатай. -ийн оронд .input-group-addon
та .input-group-btn
товчлууруудыг боохдоо ашиглах хэрэгтэй болно. Энэ нь хөтчийн өгөгдмөл загваруудын улмаас шаардлагатай бөгөөд үүнийг дарж болохгүй.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="input-group">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
</div>
Та нэг талдаа зөвхөн нэг нэмэлттэй байж болох ч нэг дотор олон товчлуур байж болно .input-group-btn
.
<div class="input-group">
<div class="input-group-btn">
<!-- Buttons -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Buttons -->
</div>
</div>
Bootstrap-д ашиглах боломжтой Navs нь үндсэн ангиас эхлээд хуваалцсан тэмдэглэгээ, .nav
мөн хуваалцсан төлөвтэй байдаг. Загвар бүрийн хооронд шилжихийн тулд өөрчлөгч ангиудыг солино уу.
Анги нь үндсэн .nav-tabs
анги шаарддаг гэдгийг анхаарна уу ..nav
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
Үүнтэй ижил HTML-г аваарай, гэхдээ .nav-pills
оронд нь:
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
Бэлдмэлийг мөн босоо байдлаар овоолох боломжтой. Зүгээр л нэмнэ үү .nav-stacked
.
<ul class="nav nav-pills nav-stacked">
...
</ul>
-ийн тусламжтайгаар 768 пикселээс илүү өргөн дэлгэц дээр таб эсвэл шахмалыг эцэг эхийнхээ өргөнтэй тэнцүү болгож хялбархан хийнэ үү .nav-justified
. Жижиг дэлгэц дээр навигацийн холбоосууд давхарласан байдаг.
Зөвшөөрөгдсөн навигацийн навигацийн холбоосыг одоогоор дэмждэггүй.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
Ямар ч навигацийн бүрэлдэхүүн хэсэг (таб эсвэл эм) дээр саарал холбоосыг нэмж .disabled
, хулганын эффект байхгүй .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
Бага зэрэг нэмэлт HTML болон унадаг JavaScript залгаас бүхий унадаг цэсүүдийг нэмнэ үү .
<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
<ul class="nav nav-pills">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
Navbars нь таны програм эсвэл сайтын навигацийн толгой болж үйлчилдэг хариу үйлдэл үзүүлэх мета бүрэлдэхүүн хэсэг юм. Тэдгээр нь хөдөлгөөнт харагдац дээр хумигдаж (мөн сэлгэх боломжтой) эхэлж, боломжтой харах цонхны өргөн нэмэгдэх тусам хэвтээ болно.
Зөвшөөрөгдсөн навигацийн навигацийн холбоосыг одоогоор дэмждэггүй.
<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>
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-fixed-top
оруулах ..container
.container-fluid
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Навбарын контентыг төв болон дэвсгэр дээр нэмэх , .navbar-fixed-bottom
оруулах ..container
.container-fluid
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
Хуудасны дагуу гүйлгэх бүрэн өргөнтэй навигацийн самбар .navbar-static-top
үүсгэнэ .container
үү .container-fluid
.
Ангиудаас ялгаатай нь .navbar-fixed-*
та body
.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>
Нэмэх замаар navbar-ийн харагдах байдлыг өөрчил .navbar-inverse
.
<nav class="navbar navbar-inverse">
...
</nav>
Навигацийн шатлал дотор одоогийн хуудасны байршлыг заана уу.
:before
Тусгаарлагчийг CSS-д болон дамжуулан автоматаар нэмдэг content
.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
Олон хуудас хуудасны бүрэлдэхүүн хэсэг эсвэл илүү энгийн пейжерийн хувилбар бүхий сайт эсвэл програмдаа хуудасны холбоосыг өгнө үү .
Rdio-ээс санаа авсан энгийн хуудаснууд нь програмууд болон хайлтын илэрцүүдэд тохиромжтой. Том блок нь алдахад хэцүү, хялбархан өргөжүүлэх боломжтой бөгөөд том товшилтын хэсгүүдийг өгдөг.
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<nav>
Дэлгэц уншигчид болон бусад туслах технологиудын навигацийн хэсэг гэж тодорхойлохын тулд хуудасны бүрэлдэхүүн хэсгийг элементээр ороосон байх ёстой . Нэмж дурдахад, хуудас нь аль хэдийн нэгээс олон навигацийн хэсэгтэй байх магадлалтай (толгойн үндсэн навигаци эсвэл хажуугийн самбарын навигаци гэх мэт) түүний зорилгыг тусгасан тайлбарыг aria-label
өгөхийг зөвлөж байна. <nav>
Жишээлбэл, хайлтын илэрцүүдийн хооронд шилжихэд хуудасны бүрэлдэхүүн хэсгийг ашигладаг бол тохирох шошго байж болно aria-label="Search results pages"
.
Холбоосыг өөр өөр нөхцөл байдалд тохируулж болно. .disabled
Товших боломжгүй холбоос болон .active
одоогийн хуудсыг зааж өгөхөд ашиглана уу.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
</nav>
<span>
Зориулалтын хэв маягийг хадгалахын зэрэгцээ товшилтын функцийг арилгахын тулд идэвхтэй эсвэл идэвхгүй болсон зангууг -аар солих эсвэл өмнөх/дараагийн сумны хувьд зангууг орхихыг зөвлөж байна .
<nav aria-label="...">
<ul class="pagination">
<li class="disabled">
<span>
<span aria-hidden="true">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>
Илүү том эсвэл жижиг хуудас бичихийг хүсч байна уу? Нэмэх .pagination-lg
эсвэл .pagination-sm
нэмэлт хэмжээ авах боломжтой.
<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>
Хөнгөн тэмдэглэгээ, хэв маяг бүхий энгийн хуудасны хэрэгжилтийн өмнөх болон дараагийн холбоосууд. Энэ нь блог, сэтгүүл гэх мэт энгийн сайтуудад тохиромжтой.
Анхдагч байдлаар, пейжер нь холбоосыг төвлөрүүлдэг.
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
Эсвэл та холбоос бүрийг хажуу тал руу нь зэрэгцүүлж болно:
<nav aria-label="...">
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
Пэйжерийн холбоосууд нь хуудасны жагсаалтаас ерөнхий .disabled
хэрэглээний ангиллыг мөн ашигладаг.
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
<h3>Example heading <span class="label label-default">New</span></h3>
Шошгоны харагдах байдлыг өөрчлөхийн тулд доор дурдсан өөрчилсөн ангиудын аль нэгийг нэмнэ үү.
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
inline-block
Нарийхан чингэлэг дотор тус бүр өөрийн гэсэн элементийг (дүрс гэх мэт) агуулсан олон арван доторлогоотой шошготой байх үед дүрслэхэд асуудал үүсч болно . Үүнийг тойрон гарах арга зам бол тохиргоо display: inline-block;
юм. Контекст болон жишээг №13219-аас үзнэ үү .
<span class="badge">
Холбоосууд, Bootstrap navs болон бусад зүйлд нэмж шинэ эсвэл уншаагүй зүйлсийг хялбархан тодруулаарай .
<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>
Жумботроныг бүрэн өргөн, бөөрөнхий булангүй болгохын тулд бүх .container
s-ийн гадна талд байрлуулж, оронд нь .container
дотор нь нэмнэ үү.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
h1
Хуудас дээрх агуулгын хэсгүүдийг зөв зайлж, хэсэгчлэн гаргахад зориулагдсан энгийн бүрхүүл . Энэ нь h1
үндсэн small
элемент болон бусад ихэнх бүрэлдэхүүн хэсгүүдийг (нэмэлт загвартай) ашиглаж болно.
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
Зураг, видео, текст болон бусад зүйлсийн сүлжээг хялбархан харуулахын тулд Bootstrap-ийн сүлжээний системийг өнгөц зургийн бүрэлдэхүүн хэсэг болгон өргөжүүлээрэй.
Хэрэв та янз бүрийн өндөр ба/эсвэл өргөнтэй өнгөц зургуудын Pinterest шиг танилцуулгыг хайж байгаа бол Masonry , Isotope , эсвэл Salvattore зэрэг гуравдагч талын залгаасыг ашиглах хэрэгтэй болно .
Анхдагч байдлаар, Bootstrap-ийн өнгөц зургууд нь хамгийн бага шаардлагатай тэмдэглэгээ бүхий холбосон зургуудыг харуулах зорилготой юм.
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
Бага зэрэг нэмэлт тэмдэглэгээ хийснээр гарчиг, догол мөр, товчлуур гэх мэт ямар ч төрлийн HTML контентыг өнгөц зурагт оруулах боломжтой.
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
Боломжтой, уян хатан сэрэмжлүүлгийн мессежийн тусламжтайгаар хэрэглэгчийн ердийн үйлдлийн контексттэй холбоотой санал хүсэлтийг илгээнэ үү.
Сэрэмжлүүлгийн үндсэн мессежүүдэд дурын бичвэр болон нэмэлт хаах товчлуур .alert
болон контекстийн дөрвөн ангийн нэгийг (жишээ нь, ) боож өгнө үү..alert-success
Анхааруулга нь анхдагч ангилалгүй, зөвхөн үндсэн болон өөрчлөгч ангиудтай. Өгөгдмөл саарал дохио нь тийм ч их утгагүй тул контекст ангиар дамжуулан төрлийг зааж өгөх шаардлагатай. Амжилт, мэдээлэл, сэрэмжлүүлэг, аюулаас сонго.
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
.alert-dismissible
Нэмэлт болон хаах товчлуурыг нэмж дурын сэрэмжлүүлэг дээр тулгуурлана уу .
Бүрэн ажиллагаатай, хэрэгсэхгүй болгоомжлолын хувьд та JavaScript залгаасыг ашиглах ёстой .
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
Өгөгдлийн шинж чанартай <button>
элементийг ашиглахаа мартуузай .data-dismiss="alert"
Хэрэглээний .alert-link
ангиудыг ашиглан ямар ч дохиололд тохирох өнгөт холбоосыг хурдан өгнө үү.
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">...</a>
</div>
Ажлын урсгал эсвэл үйл ажиллагааны явцын талаарх хамгийн сүүлийн үеийн санал хүсэлтийг энгийн атлаа уян хатан ахиц дэвшлийн самбараар өгнө үү.
Явцын мөрүүд нь зарим эффектийг хэрэгжүүлэхийн тулд CSS3 шилжилт, хөдөлгөөнт дүрсийг ашигладаг. Эдгээр функцуудыг Internet Explorer 9 болон түүнээс доош хувилбарууд эсвэл Firefox-ын хуучин хувилбаруудад дэмждэггүй. Opera 12 нь хөдөлгөөнт дүрсийг дэмждэггүй.
Хэрэв таны вэбсайтыг зөвшөөрөхгүй Агуулгын аюулгүй байдлын бодлого (CSP) байгаа бол та доорх жишээн дээр үзүүлсэн шиг явцын мөрний өргөнийг тохируулахын style-src 'unsafe-inline'
тулд шугамын шинж чанаруудыг ашиглах боломжгүй болно. style
Хатуу CSP-д нийцэх өргөнийг тохируулах өөр аргууд нь бага зэрэг өөрчлөн тохируулсан JavaScript (энэ нь тохируулдаг element.style.width
) эсвэл өөрчлөн CSS классуудыг ашиглах явдал юм.
Өгөгдмөл явцын мөр.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
Харагдах хувийг харуулахын тулд ахиц дэвшлийн талбараас <span>
хамт ангиллыг устгана уу ..sr-only
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
Шошгоны текстийг бага хувьтай байсан ч унших боломжтой min-width
байлгахын тулд явцын талбарт a нэмэх хэрэгтэй.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
2%
</div>
</div>
Явцын мөрүүд нь ижил товчлуур болон дохиоллын ангиудыг тогтмол загварт ашигладаг.
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
Судалчлагдсан эффект үүсгэхийн тулд градиент ашигладаг. IE9 болон түүнээс доош хувилбаруудад байхгүй.
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
Баруунаас зүүн тийш зураасыг хөдөлгөөнтэй .active
болгохын тулд дээр нэмнэ үү . .progress-bar-striped
IE9 болон түүнээс доош хувилбаруудад байхгүй.
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
Олон баарыг нэг дор байрлуулж, .progress
тэдгээрийг давхарлана.
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
Текстийн агуулгын хажууд зүүн эсвэл баруун тийш зэрэгцүүлсэн дүрс бүхий төрөл бүрийн бүрэлдэхүүн хэсгүүдийг (блогын сэтгэгдэл, жиргээ гэх мэт) бүтээхэд зориулсан хийсвэр объектын хэв маяг.
Өгөгдмөл медиа нь агуулгын блокийн зүүн эсвэл баруун талд медиа объектыг (зураг, видео, аудио) харуулдаг.
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
Ангиуд нь .pull-left
мөн .pull-right
байгаа бөгөөд өмнө нь медиа бүрэлдэхүүн хэсгийн нэг хэсэг болгон ашиглагдаж байсан боловч v3.3.0-с хойш уг хэрэглээнд хуучирсан. Эдгээр нь 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.
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>
Жагсаалтын бүлгүүд нь зөвхөн энгийн элементүүдийн жагсаалтыг төдийгүй тусгай агуулга бүхий нарийн төвөгтэй жагсаалтыг харуулах уян хатан, хүчирхэг бүрэлдэхүүн хэсэг юм.
Жагсаалтын хамгийн энгийн бүлэг нь жагсаалтын зүйл, зохих ангиуд бүхий эрэмблэгдээгүй жагсаалт юм. Дараах сонголтууд эсвэл шаардлагатай бол өөрийн CSS ашиглан үүн дээр тулгуурлана уу.
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
Жагсаалтын бүлгийн аль нэг зүйлд тэмдэгийн бүрэлдэхүүнийг нэмбэл баруун талд автоматаар байрлана.
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
Жагсаалтын зүйлийн оронд зангуу шошгуудыг ашиглан жагсаалтын бүлгийн зүйлсийг холбоно уу (энэ нь ын <div>
оронд эцэг эх гэсэн үг <ul>
). Элемент бүрийн эргэн тойронд эцэг эх байх шаардлагагүй.
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
Жагсаалтын бүлгийн зүйлүүд нь жагсаалтын зүйлийн оронд товчлуурууд байж болно (энэ нь ийн <div>
оронд эцэг эх гэсэн үг <ul>
). Элемент бүрийн эргэн тойронд эцэг эх байх шаардлагагүй. Энд стандарт ангиудыг бүү ашигла ..btn
<div class="list-group">
<button type="button" class="list-group-item">Cras justo odio</button>
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item">Morbi leo risus</button>
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
<button type="button" class="list-group-item">Vestibulum at eros</button>
</div>
.disabled
"А" дээр нэмээд .list-group-item
тахир дутуу харагдана.
<div class="list-group">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
Өгөгдмөл эсвэл холбосон жагсаалтын зүйлсийг загварчлахын тулд контекст ангиллыг ашиглана уу. Мөн .active
муж орно.
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>
Доорх шиг холбогдсон жагсаалтын бүлгүүдэд хүртэл бараг бүх HTML-г нэмж оруулаарай.
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 | Ларри | шувуу |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Хэрэв самбарын их бие байхгүй бол бүрэлдэхүүн хэсэг нь тасалдалгүйгээр самбарын толгойноос хүснэгт рүү шилжинэ.
# | Нэр | Овог | Хэрэглэгчийн нэр |
---|---|---|---|
1 | Марк | Отто | @mdo |
2 | Жейкоб | Торнтон | @ тарган |
3 | Ларри | шувуу |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Дурын самбар дотор бүрэн хэмжээний жагсаалтын бүлгүүдийг хялбархан оруулаарай .
Зарим өгөгдмөл самбарын контент энд байна. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
<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>