CSS
Global CSS sozlamalari, kengaytiriladigan sinflar bilan yaratilgan va takomillashtirilgan asosiy HTML elementlari va rivojlangan tarmoq tizimi.
Umumiy koʻrinish
Bootstrap infratuzilmasining asosiy qismlari, jumladan, yaxshiroq, tezroq va kuchliroq veb-ishlab chiqishga bo‘lgan yondashuvimiz haqida ma’lumot oling.
HTML5 hujjat turi
Bootstrap HTML5 hujjat turidan foydalanishni talab qiluvchi ba'zi HTML elementlari va CSS xususiyatlaridan foydalanadi. Uni barcha loyihalaringizning boshida qo'shing.
<!DOCTYPE html>
<html lang="en">
...
</html>Avval mobil
Bootstrap 2 bilan biz ramkaning asosiy jihatlari uchun ixtiyoriy mobil mos uslublarni qo'shdik. Bootstrap 3 bilan biz loyihani boshidanoq mobil qurilmalarga moslash uchun qayta yozdik. Ixtiyoriy mobil uslublarni qo'shish o'rniga, ular to'g'ridan-to'g'ri yadroga pishiriladi. Aslida, Bootstrap birinchi navbatda mobil hisoblanadi . Mobil birinchi uslublarni alohida fayllarda emas, balki butun kutubxonada topish mumkin.
To'g'ri renderlash va teginish bilan kattalashtirishni ta'minlash uchun ko'rish maydoni meta tegini o'zingizning <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">user-scalable=noKo'rish maydoni meta tegiga qo'shish orqali mobil qurilmalarda kattalashtirish imkoniyatlarini o'chirib qo'yishingiz mumkin . Bu masshtablashni o‘chirib qo‘yadi, ya’ni foydalanuvchilar faqat aylana oladi va saytingiz o‘zini mahalliy dasturga o‘xshatadi. Umuman olganda, biz buni har bir saytda tavsiya etmaymiz, shuning uchun ehtiyot bo'ling!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">Tipografiya va havolalar
Bootstrap asosiy global displey, tipografiya va havola uslublarini o'rnatadi. Xususan, biz:
background-color: #fff;ustiga o'rnatingbody@font-family-base,@font-size-base, va@line-height-baseatributlaridan tipografik asosimiz sifatida foydalaning- U orqali global havola rangini o'rnating
@link-colorva havolaning tagiga chizishni faqat ustiga qo'llang:hover
Ushbu uslublarni ichida topish mumkin scaffolding.less.
Normalize.css
Brauzerlararo renderlashni yaxshilash uchun biz Nikolas Gallager va Jonatan Nilning loyihasi Normalize.css dan foydalanamiz .
Konteynerlar
Bootstrap sayt tarkibini o'rash va bizning tarmoq tizimimizni joylashtirish uchun o'z ichiga olgan elementni talab qiladi. Loyihangizda foydalanish uchun ikkita konteynerdan birini tanlashingiz mumkin. Shuni esda tutingki, paddingva boshqa sabablarga ko'ra, hech bir konteyner o'rnatib bo'lmaydi.
.containerQattiq kenglikdagi sezgir konteyner uchun foydalaning .
<div class="container">
...
</div>.container-fluidKo'rish oynangizning butun kengligini qamrab oluvchi to'liq kenglikdagi konteyner uchun foydalaning .
<div class="container-fluid">
...
</div>Grid tizimi
Bootstrap qurilma yoki ko‘rish oynasi o‘lchami kattalashgan sari mos ravishda 12 ta ustungacha o‘lchaydigan sezgir, mobil birinchi suyuqlik panjara tizimini o‘z ichiga oladi. U oson tartib variantlari uchun oldindan belgilangan sinflarni , shuningdek, ko'proq semantik tartiblarni yaratish uchun kuchli miksinlarni o'z ichiga oladi .
Kirish
Tarmoq tizimlari sizning tarkibingizni joylashtiradigan qatorlar va ustunlar orqali sahifa tartiblarini yaratish uchun ishlatiladi. Bootstrap grid tizimi qanday ishlaydi:
.containerTo'g'ri tekislash va to'ldirish uchun qatorlar (belgilangan kenglik) yoki.container-fluid(to'liq kenglik) ichida joylashtirilishi kerak .- Ustunlarning gorizontal guruhlarini yaratish uchun qatorlardan foydalaning.
- Tarkib ustunlar ichiga joylashtirilishi kerak va faqat ustunlar satrlarning bevosita bolalari bo'lishi mumkin.
- Oldindan belgilangan grid sinflari kabi
.rowva.col-xs-4ularni tezda grid maketlarini yaratish uchun mavjud. Ko'proq semantik tartiblar uchun kamroq miksinlardan ham foydalanish mumkin. - Ustunlar orqali oluklar (ustun tarkibi orasidagi bo'shliqlar) hosil
paddingqiladi. Ushbu to'ldirish birinchi va oxirgi ustun uchun satrlarda s ning salbiy chegarasi orqali ofset qilinadi.row. - Salbiy chekka quyida keltirilgan misollar nega oshib ketganligidir. Shunday qilib, panjara ustunlari ichidagi kontent grid bo'lmagan tarkib bilan bir qatorda bo'ladi.
- To'r ustunlari siz o'tkazmoqchi bo'lgan o'n ikkita mavjud ustunlar sonini belgilash orqali yaratiladi. Masalan, uchta teng ustun uchtadan foydalanadi
.col-xs-4. - Agar bitta qatorga 12 dan ortiq ustunlar joylashtirilsa, qo'shimcha ustunlarning har bir guruhi bitta birlik sifatida yangi qatorga o'raladi.
- Grid sinflari ekran kengligi to'xtash nuqtasi o'lchamidan kattaroq yoki teng bo'lgan qurilmalarga qo'llaniladi va kichikroq qurilmalarga mo'ljallangan grid sinflarini bekor qiladi. Shuning uchun, masalan, biron bir
.col-md-*sinfni elementga qo'llash nafaqat o'rta qurilmalarda, balki.col-lg-*sinf mavjud bo'lmasa, katta qurilmalarda ham uning uslubiga ta'sir qiladi.
Ushbu tamoyillarni kodingizga qo'llash uchun misollarni ko'rib chiqing.
Media so'rovlari
To'r tizimimizdagi asosiy to'xtash nuqtalarini yaratish uchun biz Less fayllarimizda quyidagi media so'rovlardan foydalanamiz.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }Biz vaqti-vaqti bilan ushbu media so'rovlarini kengaytiramiz va max-widthCSS-ni torroq qurilmalar to'plami bilan cheklaymiz.
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }Grid variantlari
Bootstrap grid tizimining aspektlari bir nechta qurilmalarda qanday ishlashini qulay jadval bilan ko'ring.
| Qo'shimcha kichik qurilmalar Telefonlar (<768px) | Kichik qurilmalar Planshetlar (≥768px) | Oʻrtacha qurilmalar ish stoli (≥992px) | Katta qurilmalar ish stoli (≥1200px) | |
|---|---|---|---|---|
| Grid harakati | Har doim gorizontal | Boshlash uchun yiqildi, toʻxtash nuqtalari ustida gorizontal holatda | ||
| Konteyner kengligi | Yo'q (avtomatik) | 750px | 970px | 1170px |
| Sinf prefiksi | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| # ustun | 12 | |||
| Ustun kengligi | Avtomatik | ~62px | ~81px | ~97px |
| Oluk kengligi | 30px (ustunning har bir tomonida 15px) | |||
| Yuragi | Ha | |||
| Ofsetlar | Ha | |||
| Ustunlarni buyurtma qilish | Ha | |||
Misol: stacked-to-gorizontal
Yagona .col-md-*tarmoq sinflari toʻplamidan foydalanib, ish stoli (oʻrta) qurilmalarda gorizontal holatga oʻtishdan oldin mobil qurilmalar va planshet qurilmalarida (qoʻshimcha kichik va kichik diapazon) yigʻilgan asosiy tarmoq tizimini yaratishingiz mumkin. To'r ustunlarini istalgan joyga joylashtiring .row.
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>Misol: Suyuqlik idishi
Har qanday qattiq kenglikdagi panjara tartibini toʻliq kenglikdagi sxemaga .containeraylantiring .container-fluid.
<div class="container-fluid">
<div class="row">
...
</div>
</div>Misol: Mobil va ish stoli
Ustunlaringiz shunchaki kichikroq qurilmalarda to'planishini xohlamaysizmi? .col-xs-* .col-md-*Ustunlaringizga qo'shish orqali qo'shimcha kichik va o'rta qurilmalar panjara sinflaridan foydalaning. Bularning barchasi qanday ishlashini yaxshiroq tushunish uchun quyidagi misolga qarang.
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>Misol: Mobil, planshet, ish stoli
.col-sm-*Oldingi misolga asoslanib, planshet sinflari bilan yanada dinamik va kuchli maketlarni yarating .
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>Misol: Ustunlarni o'rash
Agar bitta qatorga 12 dan ortiq ustunlar joylashtirilsa, qo'shimcha ustunlarning har bir guruhi bitta birlik sifatida yangi qatorga o'raladi.
.col-xs-9
.col-xs-4
9 + 4 = 13 > 12 boʻlganligi sababli, bu 4-ustun kenglikdagi div yangi qatorga bitta qoʻshni birlik sifatida oʻraladi.
9 + 4 = 13 > 12 boʻlganligi sababli, bu 4-ustun kenglikdagi div yangi qatorga bitta qoʻshni birlik sifatida oʻraladi.
.col-xs-6
Keyingi ustunlar yangi satr bo'ylab davom etadi.
Keyingi ustunlar yangi satr bo'ylab davom etadi.
<div class="row">
<div class="col-xs-9">.col-xs-9</div>
<div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>Javob beruvchi ustunlar asliga qaytariladi
Mavjud bo'lgan to'rtta darajali to'rlar bilan siz ba'zi bir to'xtash nuqtalarida ustunlaringiz to'g'ri aniqlanmaydigan muammolarga duch kelasiz, chunki biri ikkinchisidan balandroq. Buni tuzatish uchun a .clearfixva bizning javob beruvchi yordamchi dastur sinflarimiz kombinatsiyasidan foydalaning .
.col-xs-6 .col-sm-3 Ko‘rish oynasining
o‘lchamini o‘zgartiring yoki misol uchun uni telefoningizda tekshiring.
o‘lchamini o‘zgartiring yoki misol uchun uni telefoningizda tekshiring.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>Ta'sir qiluvchi to'xtash nuqtalarida ustunlarni tozalashdan tashqari, ofsetlarni, surishlarni yoki tortishlarni qayta o'rnatishingiz kerak bo'lishi mumkin . Buni grid misolida amalda ko'ring .
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>O'chirish ustunlari
.col-md-offset-*Sinflar yordamida ustunlarni o'ngga o'tkazing. Ushbu sinflar ustunning chap chetini *ustunlar bo'yicha oshiradi. Masalan, to'rtta ustun ustida .col-md-offset-4harakatlanadi ..col-md-4
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>Bundan tashqari, .col-*-offset-0sinflar bilan pastki panjara sathlaridan ofsetlarni bekor qilishingiz mumkin.
<div class="row">
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
</div>
</div>Uyali ustunlar
Kontentingizni standart tarmoqqa joylashtirish uchun mavjud ustunga yangi .rowva ustunlar to‘plamini qo‘shing . Ichki qatorlar 12 tagacha yoki undan kamroq ustunlar to'plamini o'z ichiga olishi kerak (barcha 12 ta mavjud ustundan foydalanish shart emas)..col-sm-*.col-sm-*
1-daraja: .col-sm-9
2-daraja: .col-xs-8 .col-sm-6
2-daraja: .col-xs-4 .col-sm-6
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>Ustunlarni buyurtma qilish
Bizning o'rnatilgan panjara ustunlar tartibini .col-md-push-*va .col-md-pull-*modifikator sinflari bilan osongina o'zgartiring.
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>Kamroq aralashmalar va o'zgaruvchilar
Tezkor tartiblar uchun oldindan tuzilgan grid sinflariga qo'shimcha ravishda , Bootstrap o'z sodda, semantik maketlaringizni tezda yaratish uchun kamroq o'zgaruvchilar va miksinlarni o'z ichiga oladi.
O'zgaruvchilar
O'zgaruvchilar ustunlar sonini, truba kengligini va suzuvchi ustunlarni boshlash uchun media so'rov nuqtasini aniqlaydi. Biz ulardan yuqorida hujjatlashtirilgan oldindan belgilangan grid sinflarini, shuningdek quyida sanab o'tilgan maxsus miksinlarni yaratish uchun foydalanamiz.
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;Aralashmalar
Miksinlar grid o'zgaruvchilari bilan birgalikda alohida panjara ustunlari uchun semantik CSS yaratish uchun ishlatiladi.
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
.clearfix();
@media (min-width: @screen-sm-min) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
// Negative margin nested rows out to align the content of columns
.row {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-sm-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-md-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the medium column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-md-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-lg-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns));
}
}Foydalanish misoli
Siz o'zgaruvchilarni o'zingizning shaxsiy qiymatlaringizga o'zgartirishingiz mumkin yoki shunchaki aralashmalarni standart qiymatlari bilan ishlatishingiz mumkin. Ikki ustunli tartibni yaratish uchun standart sozlamalardan foydalanishga misol.
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}<div class="wrapper">
<div class="content-main">...</div>
<div class="content-secondary">...</div>
</div>Tipografiya
Sarlavhalar
Barcha HTML sarlavhalari, <h1>orqali <h6>mavjud. Agar sarlavha shrift uslubiga mos kelmoqchi bo'lsangiz, lekin matningiz satrda ko'rsatilishini xohlasangiz, sinflar .h1orqali ham mavjud..h6
h1. Bootstrap sarlavhasi |
Yarim qalin 36px |
h2. Bootstrap sarlavhasi |
Yarim qalin 30px |
h3. Bootstrap sarlavhasi |
Yarim qalin 24px |
h4. Bootstrap sarlavhasi |
Yarim qalin 18px |
h5. Bootstrap sarlavhasi |
Yarim qalin 14px |
h6. Bootstrap sarlavhasi |
Yarim qalin 12px |
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6><small>Umumiy teg yoki .smallsinf bilan har qanday sarlavhada engilroq, ikkinchi darajali matn yarating .
h1. Bootstrap sarlavhasi Ikkilamchi matn |
h2. Bootstrap sarlavhasi Ikkilamchi matn |
h3. Bootstrap sarlavhasi Ikkilamchi matn |
h4. Bootstrap sarlavhasi Ikkilamchi matn |
h5. Bootstrap sarlavhasi Ikkilamchi matn |
h6. Bootstrap sarlavhasi Ikkilamchi matn |
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>Tana nusxasi
Bootstrapning global standarti font-size14px , a 1,428line-height ni tashkil qiladi . Bu va barcha paragraflarga nisbatan qo'llaniladi. Bundan tashqari, (paragraflar) hisoblangan chiziq balandligining yarmining pastki chetini oladi (sukut bo'yicha 10px).<body><p>
Nullam quis risus eget urna mollis ornare vel eu leo. Sociis natoque penatibus va magnis disparturient Montes, nascetur ridiculus mus. Nollam id dolor id nibh ultricies vehicula.
Sociis natoque penatibus va magnis disparturient Montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida va eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p>...</p>Asosiy korpus nusxasi
Qo'shish orqali xatboshini ajratib ko'rsatish .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">...</p>Kamroq bilan qurilgan
Tipografik masshtab oʻzgaruvchilardagi ikkita Less oʻzgaruvchisiga asoslanadi.less : @font-size-baseva @line-height-base. Birinchisi, butun ishlatiladigan asosiy shrift o'lchami, ikkinchisi esa asosiy satr balandligi. Biz ushbu o'zgaruvchilardan va oddiy matematikadan barcha turdagi va boshqalarning chekkalari, to'ldirishlari va chiziq balandligini yaratish uchun foydalanamiz. Ularni sozlang va Bootstrap moslashadi.
Inline matn elementlari
Belgilangan matn
Matnni boshqa kontekstga tegishliligi sababli ajratib ko'rsatish uchun <mark>tegdan foydalaning.
Belgilash tegidan foydalanishingiz mumkinta'kidlashmatn.
You can use the mark tag to <mark>highlight</mark> text.Oʻchirilgan matn
O'chirilgan matn bloklarini ko'rsatish uchun <del>tegdan foydalaning.
Ushbu matn qatori o'chirilgan matn sifatida ko'rib chiqilishi kerak.
<del>This line of text is meant to be treated as deleted text.</del>Chizilgan matn
Endi tegishli bo'lmagan matn bloklarini ko'rsatish uchun <s>tegdan foydalaning.
Ushbu matn qatori endi aniq emas deb hisoblanishi kerak.
<s>This line of text is meant to be treated as no longer accurate.</s>Kiritilgan matn
Hujjatga qo'shimchalarni ko'rsatish uchun <ins>tegdan foydalaning.
Ushbu matn qatori hujjatga qo'shimcha sifatida qarash uchun mo'ljallangan.
<ins>This line of text is meant to be treated as an addition to the document.</ins>Tagi chizilgan matn
Matnni tagiga chizish uchun <u>tegdan foydalaning.
Ushbu satr matni tagiga chizilgan holda ko'rsatiladi
<u>This line of text will render as underlined</u>Engil uslublar bilan HTMLning standart urg'u teglaridan foydalaning.
Kichik matn
Inline yoki matn bloklarini ta'kidlashni yo'qotish uchun <small>tegdan foydalanib, matnni ota-onaning 85% o'lchamiga o'rnating. font-sizeSarlavha elementlari ichki o'rnatilgan elementlar uchun o'zlarini <small>oladi.
.smallShu bilan bir qatorda har qanday o'rniga inline elementdan foydalanishingiz mumkin <small>.
Matnning ushbu qatori nozik nashr sifatida ko'rib chiqilishi kerak.
<small>This line of text is meant to be treated as fine print.</small>Qalin
Shrift og'irligi og'irroq bo'lgan matn parchasini ta'kidlash uchun.
Quyidagi matn parchasi qalin matn sifatida berilgan .
<strong>rendered as bold text</strong>Kursiv
Matn parchasini kursiv bilan ta'kidlash uchun.
Quyidagi matn parchasi kursiv matn sifatida berilgan .
<em>rendered as italicized text</em>Muqobil elementlar
Bemalol foydalaning <b>va <i>HTML5 da. <b>so'z yoki iboralarni qo'shimcha ahamiyatga ega bo'lmasdan ajratib ko'rsatish uchun mo'ljallangan <i>, asosan ovoz, texnik atamalar va boshqalar uchun.
Hizalama sinflari
Matnni tekislash sinflari bilan matnni komponentlarga osongina moslashtiring.
Chapga tekislangan matn.
Oʻrtaga tekislangan matn.
Oʻngga tekislangan matn.
Asoslangan matn.
Matnni oʻrash yoʻq.
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>Transformatsiya sinflari
Matnni bosh harflar sinflari bilan komponentlarga aylantiring.
Kichik harfli matn.
Katta harfli matn.
Katta harfli matn.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>Qisqartmalar
<abbr>Hoverda kengaytirilgan versiyani ko'rsatish uchun qisqartmalar va qisqartmalar uchun HTML elementining stilize qilingan ilovasi. Atributli qisqartmalar titleochilgan nuqtali pastki chegaraga va hoverda yordam kursoriga ega bo'lib, hoverda va yordamchi texnologiyalar foydalanuvchilariga qo'shimcha kontekstni taqdim etadi.
Asosiy qisqartma
Atribut so'zining qisqartmasi attr hisoblanadi .
<abbr title="attribute">attr</abbr>Initializm
.initialismBiroz kichikroq shrift o'lchami uchun qisqartma qo'shing .
HTML tilim kesilgan nondan beri eng yaxshi narsadir.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>Manzillar
Eng yaqin ajdod yoki butun ish uchun aloqa ma'lumotlarini taqdim eting. Barcha qatorlarni bilan tugatish orqali formatlashni saqlang <br>.
Twitter, Inc.
1355 Market Street, Suite 900
San-Fransisko, CA 94103
P: (123) 456-7890 Toʻliq ism
[email protected]
1355 Market Street, Suite 900
San-Fransisko, CA 94103
P: (123) 456-7890 Toʻliq ism
[email protected]
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">[email protected]</a>
</address>Blok tirnoq
Hujjatingizdagi boshqa manbadan kontent bloklarini keltirish uchun.
Birlamchi blok tirnoq
Iqtibos<blockquote> sifatida har qanday HTMLni aylantiring . To'g'ri tirnoq uchun biz tavsiya qilamiz .<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>Blok tirnoq variantlari
Standartdagi oddiy o'zgarishlar uchun uslub va tarkib o'zgaradi <blockquote>.
Manbaga nom berish
<footer>Manbani aniqlash uchun a qo'shing. Manba ishining nomini o'rang <cite>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>Muqobil displeylar
.blockquote-reverseO'ngga tekislangan kontent bilan blok-iqtibos uchun qo'shing .
<blockquote class="blockquote-reverse">
...
</blockquote>Ro'yxatlar
Tartibsiz
Buyurtma aniq ahamiyatga ega bo'lmagan narsalar ro'yxati.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Massada butun son molestie lorem
- Pretium nisl aliquetdagi facilisis
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- To'g'ri keling
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul>
<li>...</li>
</ul>Buyurtma qilingan
Buyurtma aniq ahamiyatga ega bo'lgan narsalar ro'yxati .
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Massada butun son molestie lorem
- Pretium nisl aliquetdagi facilisis
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ol>
<li>...</li>
</ol>Uslubsiz
Ro'yxatdagi standart list-styleva chap chekkalarni olib tashlang (faqat darhol bolalar uchun). Bu faqat bevosita bolalar roʻyxati elementlariga taalluqlidir , yaʼni siz har qanday ichki roʻyxatlar uchun ham sinf qoʻshishingiz kerak boʻladi.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Massada butun son molestie lorem
- Pretium nisl aliquetdagi facilisis
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- To'g'ri keling
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul class="list-unstyled">
<li>...</li>
</ul>Mos ravishda
Roʻyxatning barcha elementlarini bir display: inline-block;qator yorugʻlik bilan toʻldiring.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
<ul class="list-inline">
<li>...</li>
</ul>Tavsif
Ular bilan bog'liq tavsiflari bilan atamalar ro'yxati.
- Tavsif ro'yxatlari
- Ta'riflar ro'yxati atamalarni aniqlash uchun juda mos keladi.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida va eget metus.
- Malesuada porti
- Etiam porta sem malesuada magna mollis euismod.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>Gorizontal tavsif
Shartlar va tavsiflarni bir <dl>qatorda yonma-yon tuzing. Standart s kabi stacked boshlanadi <dl>, lekin navigatsiya paneli kengayganda, ularni ham shunday qiling.
- Tavsif ro'yxatlari
- Ta'riflar ro'yxati atamalarni aniqlash uchun juda mos keladi.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida va eget metus.
- Malesuada porti
- Etiam porta sem malesuada magna mollis euismod.
- Felis euismod semper eget lacinia
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>Avtomatik kesish
Gorizontal tavsif roʻyxatlari chap ustunga sigʻmaydigan juda uzun atamalarni qisqartiradi text-overflow. Torroq ko'rish oynalarida ular birlamchi stacked maketga o'zgaradi.
Kod
Mos ravishda
Kodning ichki qismlarini bilan o'rab oling <code>.
Misol uchun,
<section>inline sifatida o'ralgan bo'lishi kerak.
For example, <code><section></code> should be wrapped as inline.Foydalanuvchi kiritish
<kbd>Odatda klaviatura orqali kiritiladigan kiritishni ko'rsatish uchun foydalaning .
Kataloglarni almashtirish uchun,
cdkeyin katalog nomini kiriting.
Sozlamalarni tahrirlash uchun bosing ctrl + ,
Sozlamalarni tahrirlash uchun bosing ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>Asosiy blok
<pre>Kodning bir nechta satri uchun foydalaning . To'g'ri ko'rsatish uchun koddagi har qanday burchakli qavslardan qochishingizga ishonch hosil qiling.
<p>Matn namunasi bu yerda...</p>
<pre><p>Sample text here...</p></pre>Siz ixtiyoriy ravishda .pre-scrollablesinfni qo'shishingiz mumkin, bu maksimal balandlik 350px o'rnatadi va Y o'qi aylantirish panelini ta'minlaydi.
O'zgaruvchilar
O'zgaruvchilarni ko'rsatish uchun <var>tegdan foydalaning.
y = m x + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>Chiqish namunasi
Bloklarni ko'rsatish uchun dasturning namunaviy chiqishi <samp>tegidan foydalaning.
Ushbu matn kompyuter dasturidan olingan namuna sifatida ko'rib chiqilishi kerak.
<samp>This text is meant to be treated as sample output from a computer program.</samp>Jadvallar
Asosiy misol
.tableAsosiy uslublar uchun - engil to'ldirish va faqat gorizontal ajratgichlar - har qanday ga asosiy sinfni qo'shing <table>. Bu juda keraksizdek tuyulishi mumkin, ammo taqvimlar va sanalarni tanlovchilar kabi boshqa plaginlar uchun jadvallardan keng foydalanishni hisobga olib, biz shaxsiy jadval uslublarimizni ajratishni tanladik.
| # | Ism | Familiya | Foydalanuvchi nomi |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Yoqub | Tornton | @yog' |
| 3 | Larri | qush |
<table class="table">
...
</table>Chiziqli qatorlar
.table-stripedichidagi istalgan jadval qatoriga zebra-chiziq qo'shish uchun foydalaning <tbody>.
Brauzerlar o'rtasidagi muvofiqlik
Chiziqli jadvallar :nth-childCSS selektori orqali uslublanadi, bu Internet Explorer 8 da mavjud emas.
| # | Ism | Familiya | Foydalanuvchi nomi |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Yoqub | Tornton | @yog' |
| 3 | Larri | qush |
<table class="table table-striped">
...
</table>Chegaralangan stol
.table-borderedJadval va kataklarning barcha tomonidagi chegaralar uchun qo'shing .
| # | Ism | Familiya | Foydalanuvchi nomi |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Yoqub | Tornton | @yog' |
| 3 | Larri | qush |
<table class="table table-bordered">
...
</table>Satrlarni suring
.table-hoverJadval qatorlarida hover holatini yoqish uchun qo'shing <tbody>.
| # | Ism | Familiya | Foydalanuvchi nomi |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Yoqub | Tornton | @yog' |
| 3 | Larri | qush |
<table class="table table-hover">
...
</table>Kondensatsiyalangan stol
Jadvallarni .table-condensedyanada ixcham qilish uchun hujayra to'plamini yarmiga bo'ling.
| # | Ism | Familiya | Foydalanuvchi nomi |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Yoqub | Tornton | @yog' |
| 3 | Qush Larri | ||
<table class="table table-condensed">
...
</table>Kontekstli sinflar
Jadval satrlari yoki alohida kataklarni ranglash uchun kontekstli sinflardan foydalaning.
| Sinf | Tavsif |
|---|---|
.active |
Hover rangini ma'lum bir qator yoki katakka qo'llaydi |
.success |
Muvaffaqiyatli yoki ijobiy harakatni bildiradi |
.info |
Neytral informatsion o'zgarish yoki harakatni bildiradi |
.warning |
E'tibor talab qilishi mumkin bo'lgan ogohlantirishni bildiradi |
.danger |
Xavfli yoki potentsial salbiy harakatni bildiradi |
| # | Ustun sarlavhasi | Ustun sarlavhasi | Ustun sarlavhasi |
|---|---|---|---|
| 1 | Ustun tarkibi | Ustun tarkibi | Ustun tarkibi |
| 2 | Ustun tarkibi | Ustun tarkibi | Ustun tarkibi |
| 3 | Ustun tarkibi | Ustun tarkibi | Ustun tarkibi |
| 4 | Ustun tarkibi | Ustun tarkibi | Ustun tarkibi |
| 5 | Ustun tarkibi | Ustun tarkibi | Ustun tarkibi |
| 6 | Ustun tarkibi | Ustun tarkibi | Ustun tarkibi |
| 7 | Ustun tarkibi | Ustun tarkibi | Ustun tarkibi |
| 8 | Ustun tarkibi | Ustun tarkibi | Ustun tarkibi |
| 9 | Ustun tarkibi | Ustun tarkibi | Ustun tarkibi |
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>Yordamchi texnologiyalarga ma'no etkazish
Jadval qatori yoki alohida katakchaga ma'no qo'shish uchun rangdan foydalanish faqat vizual ko'rsatkichni beradi, bu esa yordamchi texnologiyalar foydalanuvchilariga, masalan, ekran o'quvchilariga etkazilmaydi. .sr-onlyRang bilan ko'rsatilgan ma'lumotlar tarkibning o'zidan (tegishli jadval qatori/hujayrasidagi ko'rinadigan matn) aniq bo'lishiga yoki sinf bilan yashiringan qo'shimcha matn kabi muqobil vositalar orqali kiritilganligiga ishonch hosil qiling .
Javob beruvchi jadvallar
Kichkina qurilmalarda (768 pikseldan past) gorizontal aylantirilishi uchun istalgan .tablebirini o'rash orqali sezgir jadvallar yarating . .table-responsiveKengligi 768px dan kattaroq narsalarni ko'rsangiz, ushbu jadvallarda hech qanday farqni ko'rmaysiz.
Vertikal kesish/kesish
Javob beruvchi jadvallar foydalanadioverflow-y: hidden pastki yoki yuqori chetlaridan tashqariga chiqadigan har qanday tarkibni o'chirib qo'yadigan dan foydalanadi. Xususan, bu ochiladigan menyular va boshqa uchinchi tomon vidjetlarini kesib tashlashi mumkin.
Firefox va maydonlar to'plami
widthFirefox-da sezgir jadvalga xalaqit beradigan ba'zi noqulay maydonlar uslubi mavjud. Buni biz Bootstrap-da taqdim etmaydigan Firefox-ga xos buzg'unchiliksiz bekor qilib bo'lmaydi:
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}Qo'shimcha ma'lumot olish uchun ushbu Stack Overflow javobini o'qing .
| # | Jadval sarlavhasi | Jadval sarlavhasi | Jadval sarlavhasi | Jadval sarlavhasi | Jadval sarlavhasi | Jadval sarlavhasi |
|---|---|---|---|---|---|---|
| 1 | Jadval katakchasi | Jadval katakchasi | Jadval katakchasi | Jadval katakchasi | Jadval katakchasi | Jadval katakchasi |
| 2 | Jadval katakchasi | Jadval katakchasi | Jadval katakchasi | Jadval katakchasi | Jadval katakchasi | Jadval katakchasi |
| 3 | Jadval katakchasi | Jadval katakchasi | Jadval katakchasi | Jadval katakchasi | Jadval katakchasi | Jadval katakchasi |
| # | Jadval sarlavhasi | Jadval sarlavhasi | Jadval sarlavhasi | Jadval sarlavhasi | Jadval sarlavhasi | Jadval sarlavhasi |
|---|---|---|---|---|---|---|
| 1 | Jadval katakchasi | Jadval katakchasi | Jadval katakchasi | Jadval katakchasi | Jadval katakchasi | Jadval katakchasi |
| 2 | Jadval katakchasi | Jadval katakchasi | Jadval katakchasi | Jadval katakchasi | Jadval katakchasi | Jadval katakchasi |
| 3 | Jadval katakchasi | Jadval katakchasi | Jadval katakchasi | Jadval katakchasi | Jadval katakchasi | Jadval katakchasi |
<div class="table-responsive">
<table class="table">
...
</table>
</div>Shakllar
Asosiy misol
Shaklning individual boshqaruvlari avtomatik ravishda ba'zi global uslublarni oladi. Barcha matnli <input>, <textarea>, va <select>elementlar sukut bo'yicha o'rnatiladi .form-control. Optimal oraliq uchun width: 100%;teglar va boshqaruv elementlarini o'rang ..form-group
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>Shakl guruhlarini kiritish guruhlari bilan aralashtirmang
Shakl guruhlarini to'g'ridan-to'g'ri kirish guruhlari bilan aralashtirmang . Buning o'rniga, kirish guruhini shakllar guruhiga joylashtiring.
Inline shakl
Chapga tekislangan va inline-blok boshqaruvlari uchun shaklingizga qo'shing .form-inline(u bo'lishi shart emas ). Bu faqat kengligi kamida 768 piksel bo'lgan ko'rish oynalaridagi shakllar uchun amal qiladi.<form>
Maxsus kengliklarni talab qilishi mumkin
Kirishlar va width: 100%;tanlashlar Bootstrap-da sukut bo'yicha qo'llaniladi. Inline shakllar ichida biz width: auto;bir qatorda bir nechta boshqaruv elementlari joylashishi uchun uni qayta o'rnatamiz. Tartibingizga qarab, qo'shimcha maxsus kengliklar talab qilinishi mumkin.
Har doim teg qo'shing
Har bir kiritish uchun yorliq qo'shmasangiz, ekranni o'qiydiganlar shakllaringiz bilan bog'liq muammolarga duch kelishadi. Ushbu inline shakllar uchun siz .sr-onlysinfdan foydalanib teglarni yashirishingiz mumkin. Yordamchi texnologiyalar uchun yorliqni taqdim etishning boshqa muqobil usullari mavjud, masalan, aria-label, aria-labelledbyyoki titleatribut. Agar ulardan hech biri mavjud bo'lmasa, ekranni o'qiydiganlar placeholder, agar mavjud bo'lsa, atributdan foydalanishlari mumkin, ammo placeholderyorliqlashning boshqa usullarini almashtirish sifatida foydalanish tavsiya etilmaydi.
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>Gorizontal shakl
.form-horizontalFormaga qo'shish (a bo'lishi shart emas ) orqali gorizontal tartibdagi yorliqlar va forma boshqaruvlari guruhlarini tekislash uchun Bootstrapning oldindan belgilangan panjara sinflaridan foydalaning <form>. .form-groupBunda s oʻzini panjara qatorlari sifatida oʻzgartiradi , shuning uchun kerak emas .row.
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>Qo'llab-quvvatlanadigan boshqaruv elementlari
Shakl tartibi namunasida qo'llab-quvvatlanadigan standart shakl boshqaruvlarining misollari.
Kirishlar
Eng keng tarqalgan shakl boshqaruvi, matnga asoslangan kiritish maydonlari. Barcha HTML5 turlarini qoʻllab-quvvatlaydi: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, va color.
Tur deklaratsiyasi talab qilinadi
Kirishlar faqat typeto'g'ri e'lon qilingan taqdirdagina to'liq shakllantiriladi.
<input type="text" class="form-control" placeholder="Text input">Kirish guruhlari
Har qanday matnga asoslangan matndan oldin va/yoki keyin birlashtirilgan matn yoki tugmalarni qo'shish <input>uchun kiritish guruhi komponentini tekshiring .
Textarea
Bir nechta matn qatorlarini qo'llab-quvvatlaydigan shakl boshqaruvi. Agar kerak bo'lsa, atributni o'zgartiring rows.
<textarea class="form-control" rows="3"></textarea>Belgilash qutilari va radiolar
Belgilash katakchalari ro'yxatdagi bir yoki bir nechta variantni tanlash uchun, radiolar esa ko'p variantlardan bittasini tanlash uchun.
O'chirilgan belgilash katakchalari va radiolar qo'llab-quvvatlanadi, lekin ota-onaning kursorida "ruxsat berilmagan" kursorni ko'rsatish uchun sinfni ota-ona , , , yoki <label>ga qo'shishingiz kerak bo'ladi ..disabled.radio.radio-inline.checkbox.checkbox-inline
Birlamchi (stacked)
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>Inline belgilash katakchalari va radiolar
.checkbox-inlineXuddi shu satrda paydo bo'ladigan boshqaruv elementlari uchun bir qator belgilash katakchalarida yoki .radio-inlinesinflaridan foydalaning .
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>Yorliq matnisiz belgilash katakchalari va radiolar
Agar ichida matn bo'lmasa <label>, kiritish siz kutgandek joylashtiriladi. Hozirda faqat inline bo'lmagan tasdiqlash qutilari va radiolarda ishlaydi. Yordamchi texnologiyalar uchun yorliqning qandaydir shaklini taqdim etishni unutmang (masalan, dan foydalanish aria-label).
<div class="checkbox">
<label>
<input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</label>
</div>Tanlaydi
E'tibor bering, ko'plab mahalliy tanlangan menyular, xususan, Safari va Chrome-da - xususiyatlar orqali o'zgartirib bo'lmaydigan yumaloq burchaklarga border-radiusega.
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select><select>Atributli boshqaruv elementlari uchun multiplesukut bo'yicha bir nechta parametrlar ko'rsatiladi.
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>Statik nazorat
Shakl ichidagi forma yorlig'i yoniga oddiy matnni qo'yish kerak bo'lganda, .form-control-staticsinfdan foydalaning <p>.
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only">Email</label>
<p class="form-control-static">[email protected]</p>
</div>
<div class="form-group">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Confirm identity</button>
</form>Fokus holati
Biz ba'zi forma boshqaruvlaridagi standart outlineuslublarni olib tashlaymiz va box-shadowuning o'rniga a qo'llaymiz :focus.
Demo :focusholati
Yuqoridagi misol kiritish hujjatidagi :focusholatni ko'rsatish uchun maxsus uslublardan foydalanadi .form-control.
O'chirilgan holat
disabledFoydalanuvchilarning oʻzaro taʼsirini oldini olish uchun kirishga mantiqiy atributni qoʻshing . O'chirilgan kirishlar engilroq ko'rinadi va not-allowedkursor qo'shing.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>O'chirilgan maydonlar to'plami
Bir vaqtning o'zida barcha boshqaruv elementlarini o'chirish uchun atributni disableda ga qo'shing .<fieldset><fieldset>
Havola funksiyasi haqida ogohlantirish<a>
Odatiy bo'lib, brauzerlar a ichidagi barcha mahalliy shakl boshqaruvlarini ( <input>, <select>va <button>elementlarni) <fieldset disabled>o'chirib qo'yib, ulardagi klaviatura va sichqonchaning o'zaro ta'sirini oldini oladi. Biroq, agar sizning shaklingiz <a ... class="btn btn-*">elementlarni o'z ichiga olsa, ularga faqat uslub beriladi pointer-events: none. Tugmalarning o'chirilgan holati (va ayniqsa, langar elementlari uchun kichik bo'lim) bo'limida ta'kidlanganidek , bu CSS xususiyati hali standartlashtirilmagan va Opera 18 va undan pastda yoki Internet Explorer 11 da to'liq qo'llab-quvvatlanmaydi va g'alaba qozondi. "Klaviatura foydalanuvchilariga ushbu havolalarni diqqatni jamlash yoki faollashtirishga to'sqinlik qilmang. Xavfsiz bo'lish uchun bunday havolalarni o'chirish uchun maxsus JavaScript-dan foydalaning.
Brauzerlar o'rtasidagi muvofiqlik
disabledBootstrap bu uslublarni barcha brauzerlarda qo‘llasa-da, Internet Explorer 11 va undan past versiyalari <fieldset>. Ushbu brauzerlarda maydonlar to'plamini o'chirish uchun maxsus JavaScript-dan foydalaning.
<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>Faqat o'qish holati
readonlyKirish qiymatini o'zgartirishning oldini olish uchun kirishga mantiqiy atributni qo'shing . Faqat o'qish uchun kirishlar engilroq ko'rinadi (xuddi o'chirilgan kirishlar kabi), lekin standart kursorni saqlab qoladi.
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>Yordam matni
Shakl boshqaruvlari uchun blok darajasidagi yordam matni.
Yordam matnini forma boshqaruvlari bilan bog‘lash
Yordam matni aria-describedbyatributdan foydalanish bilan bog'liq bo'lgan shakl boshqaruvi bilan aniq bog'langan bo'lishi kerak. Bu foydalanuvchi diqqatini qaratganda yoki boshqaruvga kirganida yordamchi texnologiyalar, masalan, ekranni o'qish dasturlari ushbu yordam matnini e'lon qilishini ta'minlaydi.
<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>Tasdiqlash holatlari
Bootstrap forma boshqaruvlaridagi xato, ogohlantirish va muvaffaqiyat holatlari uchun tekshirish uslublarini o'z ichiga oladi. Foydalanish uchun asosiy elementga .has-warning, .has-erroryoki qo'shing . Ushbu element ichidagi .has-successhar qanday .control-label, .form-control, va tasdiqlash uslublarini oladi..help-block
Tasdiqlash holatini yordamchi texnologiyalar va rangni ko'r foydalanuvchilarga etkazish
Shakl boshqaruvining holatini ko'rsatish uchun ushbu tasdiqlash uslublaridan foydalanish faqat vizual, rangga asoslangan ko'rsatkichni ta'minlaydi, bu esa yordamchi texnologiyalar foydalanuvchilariga, masalan, ekranni o'qiydiganlarga yoki rangni ko'r foydalanuvchilarga etkazilmaydi.
Davlatning muqobil ko'rsatkichi ham taqdim etilganligiga ishonch hosil qiling. Misol uchun, siz shakl boshqaruvi <label>matnining o'zida holat haqida maslahatni kiritishingiz mumkin (quyidagi kod misolida bo'lgani kabi), Glifikonni qo'shishingiz mumkin (sinfdan foydalangan holda tegishli muqobil matn bilan .sr-only- Glyphicon misollariga qarang ) yoki qo'shimcha yordam matn bloki. aria-invalid="true"Ayniqsa, yordamchi texnologiyalar uchun yaroqsiz shakl boshqaruvlariga atribut ham berilishi mumkin .
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxError" value="option1">
Checkbox with error
</label>
</div>
</div>Ixtiyoriy belgilar bilan
Bundan tashqari, ixtiyoriy fikr-mulohaza piktogrammalarini .has-feedbackva o'ng belgisini qo'shishingiz mumkin.
Fikr-mulohaza piktogrammalari faqat matn <input class="form-control">elementlari bilan ishlaydi.
Belgilar, teglar va kiritish guruhlari
Yorliqsiz kirishlar va o'ng tomonda qo'shimchasi bo'lgan kiritish guruhlari uchun fikr-mulohaza piktogrammalarini qo'lda joylashtirish talab qilinadi . Mavjud sabablarga ko'ra barcha kirishlar uchun yorliqlarni taqdim etish tavsiya etiladi. Agar siz teglar ko'rsatilishini oldini olishni istasangiz, ularni .sr-onlysinf bilan yashiring. Agar siz teglarsiz ishlashingiz kerak bo'lsa top, fikr-mulohaza belgisining qiymatini sozlang. Kirish guruhlari uchun rightqoʻshimchangiz kengligiga qarab qiymatni mos piksel qiymatiga sozlang.
Belgining ma'nosini yordamchi texnologiyalarga etkazish
Yordamchi texnologiyalar (masalan, ekranni o'qish dasturlari) piktogramma ma'nosini to'g'ri etkazishini ta'minlash uchun qo'shimcha yashirin matn sinfga kiritilishi .sr-onlyva u foydalanishga tegishli shakl boshqaruvi bilan aniq bog'lanishi kerak aria-describedby. Shu bilan bir qatorda, ma'no (masalan, ma'lum bir matn kiritish maydoni uchun ogohlantirish mavjudligi) boshqa shaklda uzatilishiga ishonch hosil qiling, masalan, <label>shakl boshqaruvi bilan bog'langan haqiqiy matnni o'zgartirish.
Quyidagi misollar matnning o'zida tegishli shakl boshqaruv elementlarini tekshirish holatini allaqachon eslatib o'tgan bo'lsa-da <label>, yuqoridagi uslub ( .sr-onlymatn va dan foydalangan holda aria-describedby) tasvirlash maqsadida kiritilgan.
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>Gorizontal va inline shakllardagi ixtiyoriy belgilar
<form class="form-horizontal">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess3Status" class="sr-only">(success)</span>
</div>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
</div>
</div>
</form><form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess4Status" class="sr-only">(success)</span>
</div>
</form>
<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess3">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
</div>
</form>.sr-onlyYashirin teglar bilan ixtiyoriy belgilar
Agar siz .sr-onlyshakl boshqaruvini yashirish uchun sinfdan foydalansangiz <label>(atribut kabi boshqa etiketlash opsiyalaridan foydalanish o'rniga aria-label), Bootstrap piktogramma qo'shilgandan so'ng avtomatik ravishda uning o'rnini moslashtiradi.
(muvaffaqiyat)
@
(muvaffaqiyat)
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>O'lchamlarni nazorat qilish
kabi sinflar yordamida balandliklarni o'rnating .input-lgva kabi panjara ustunlari sinflari yordamida kengliklarni o'rnating .col-lg-*.
Balandlik o'lchami
Tugma o'lchamlariga mos keladigan uzunroq yoki qisqaroq shakl boshqaruvlarini yarating.
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>Gorizontal shakl guruhlari o'lchamlari
Yorliqlarni tezda oʻlchamang va ichidagi boshqaruv elementlarini yoki .form-horizontalqoʻshish orqali shakllantirish ..form-group-lg.form-group-sm
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>Ustun o'lchamlari
Kerakli kengliklarni osongina kiritish uchun kirishlarni panjara ustunlariga yoki istalgan maxsus asosiy elementga o'rang.
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>Tugmalar
Tugma teglari
<a>, <button>, yoki <input>elementdagi tugma sinflaridan foydalaning .
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">Kontekstga xos foydalanish
<a>Tugma sinflari va elementlarda ishlatilishi mumkin bo'lsa-da , nav va navbar komponentlarimizda <button>faqat <button>elementlar qo'llab-quvvatlanadi.
Tugmalar vazifasini bajaradigan havolalar
Agar <a>elementlar joriy sahifadagi boshqa hujjat yoki boʻlimga oʻtish oʻrniga, sahifa ichidagi funksiyalarni ishga tushirish uchun tugmalar vazifasini bajarish uchun ishlatilsa, ularga tegishli role="button".
Brauzerlar o'rtasidagi renderlash
Eng yaxshi amaliyot sifatida brauzerlar o'rtasida mos kelishini ta'minlash uchun iloji boricha elementdan foydalanishni tavsiya etamiz .<button>
Boshqa narsalar qatorida , Firefox <30 da xatolik mavjud bo'lib, u bizga -asosli tugmalarni o'rnatishimizga to'sqinlik qiladi va line-heightbu <input>ularning Firefox-dagi boshqa tugmalar balandligiga to'liq mos kelmasligiga olib keladi.
Variantlar
Uslubli tugmani tezda yaratish uchun mavjud tugma sinflaridan birortasidan foydalaning.
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>Yordamchi texnologiyalarga ma'no etkazish
Tugmachaga ma'no qo'shish uchun rangdan foydalanish faqat vizual ko'rsatkichni ta'minlaydi, bu yordamchi texnologiyalar foydalanuvchilariga, masalan, ekranni o'qiydiganlarga etkazilmaydi. .sr-onlyRang bilan ko'rsatilgan ma'lumotlar tarkibning o'zidan (tugmaning ko'rinadigan matni) aniq bo'lishiga yoki sinf bilan yashiringan qo'shimcha matn kabi muqobil vositalar orqali kiritilganligiga ishonch hosil qiling .
O'lchamlari
Kattaroq yoki kichikroq tugmalarni xohlaysizmi? Qo'shimcha o'lchamlar uchun .btn-lg, .btn-sm, yoki qo'shing ..btn-xs
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>Qo'shish orqali blok darajasidagi tugmalarni yarating - ota-onaning to'liq kengligini qamrab oladiganlar .btn-block.
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>Faol holat
Tugmalar faol bo'lganda bosilgan ko'rinadi (qoraroq fon, quyuqroq chegara va ichki soya bilan). Elementlar uchun <button>bu orqali amalga oshiriladi :active. <a>Elementlar uchun u bilan bajariladi .active. Biroq, agar siz faol holatni dasturiy tarzda takrorlashingiz kerak bo'lsa , .activeon <button>s dan foydalanishingiz mumkin (va atributni o'z ichiga oladi ).aria-pressed="true"
Tugma elementi
Qo'shishning hojati yo'q :active, chunki bu psevdo-sinf, lekin agar siz bir xil ko'rinishga majburlashingiz kerak bo'lsa, davom eting va qo'shing .active.
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>Ankraj elementi
.activeSinfni <a>tugmalarga qo'shing .
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>O'chirilgan holat
Tugmalarni bosish mumkin boʻlmagan koʻrinishga keltiring opacity.
Tugma elementi
Tugmalarga disabledatribut qo'shing .<button>
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>Brauzerlar o'rtasidagi muvofiqlik
disabledAgar siz atributni ga qo'shsangiz <button>, Internet Explorer 9 va undan past versiyalari matnni kul rangga aylantirib, biz tuzatib bo'lmaydigan yomon matn soyasi bilan ishlaydi.
Ankraj elementi
.disabledSinfni <a>tugmalarga qo'shing .
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>Biz .disabledbu erda umumiy sinfga o'xshash yordamchi sinf sifatida foydalanamiz .active, shuning uchun hech qanday prefiks talab qilinmaydi.
Havola funksionalligi haqida ogohlantirish
Bu sinf s pointer-events: nonening havola funksiyasini oʻchirishga urinish uchun foydalanadi <a>, lekin bu CSS xususiyati hali standartlashtirilmagan va Opera 18 va undan past versiyalarda yoki Internet Explorer 11 da toʻliq qoʻllab-quvvatlanmaydi. Bundan tashqari, hatto pointer-events: none, klaviaturani qoʻllab-quvvatlaydigan brauzerlarda ham navigatsiya ta'sir qilmaydi, ya'ni ko'rish qobiliyatiga ega bo'lgan klaviatura foydalanuvchilari va yordamchi texnologiyalar foydalanuvchilari hali ham ushbu havolalarni faollashtirishi mumkin. Xavfsiz bo'lish uchun bunday havolalarni o'chirish uchun maxsus JavaScript-dan foydalaning.
Tasvirlar
Javob beruvchi tasvirlar
.img-responsiveBootstrap 3-dagi rasmlar sinfni qo'shish orqali sezgir bo'lishi mumkin . Bu max-width: 100%;, height: auto;va display: block;tasvirga tegishli bo'lib, u asosiy elementga yaxshi o'lchanadi.
Sinfdan foydalanadigan rasmlarni markazlashtirish uchun o'rniga .img-responsivefoydalaning . Foydalanish haqida batafsil ma'lumot olish uchun yordamchi sinflar bo'limiga qarang ..center-block.text-center.center-block
SVG tasvirlari va IE 8-10
Internet Explorer 8-10 da SVG tasvirlar .img-responsivenomutanosib o'lchamga ega. Buni tuzatish uchun width: 100% \9;kerak bo'lganda qo'shing. Bootstrap buni avtomatik ravishda qo'llamaydi, chunki u boshqa tasvir formatlarida asoratlarni keltirib chiqaradi.
<img src="..." class="img-responsive" alt="Responsive image">Tasvir shakllari
<img>Har qanday loyihada tasvirlarni osongina uslublash uchun elementga sinflar qo'shing .
Brauzerlar o'rtasidagi muvofiqlik
Shuni yodda tutingki, Internet Explorer 8-da yumaloq burchaklar qo'llab-quvvatlanmaydi.
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">Yordamchi sinflar
Kontekst ranglari
Bir nechta urg'u foydali sinflar bilan rang orqali ma'noni etkazish. Bular havolalarga ham qoʻllanilishi mumkin va xuddi standart havola uslublarimiz kabi kursor ustidagi qorayadi.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>O'ziga xoslik bilan shug'ullanish
Ba'zida urg'u sinflarini boshqa selektorning o'ziga xosligi tufayli qo'llash mumkin emas. Ko'pgina hollarda, matnni sinf bilan o'rash etarli vaqtinchalik echimdir <span>.
Yordamchi texnologiyalarga ma'no etkazish
Ma'no qo'shish uchun rangdan foydalanish faqat vizual ko'rsatkichni ta'minlaydi, bu yordamchi texnologiyalar foydalanuvchilariga, masalan, ekranni o'qiydiganlarga etkazilmaydi. Rang bilan ko'rsatilgan ma'lumotlar mazmunning o'zidan aniq bo'lishiga ishonch hosil qiling (kontekst ranglari faqat matnda/belgilashda mavjud bo'lgan ma'noni kuchaytirish uchun ishlatiladi) yoki .sr-onlysinf bilan yashirilgan qo'shimcha matn kabi muqobil vositalar orqali kiritilganligiga ishonch hosil qiling. .
Kontekst fonlari
Kontekstli matn rang sinflariga o'xshab, istalgan kontekstli sinfga elementning fonini osongina o'rnating. Anchor komponentlari xuddi matn sinflari kabi sichqonchani ko‘targanda qorayadi.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>O'ziga xoslik bilan shug'ullanish
Ba'zida boshqa selektorning o'ziga xosligi tufayli kontekstli fon sinflarini qo'llash mumkin emas. Ba'zi hollarda, elementingiz tarkibini sinf bilan o'rash uchun etarli vaqtinchalik yechim <div>.
Yordamchi texnologiyalarga ma'no etkazish
Kontekstli ranglarda bo'lgani kabi, rang orqali etkazilgan har qanday ma'no ham sof taqdimot bo'lmagan formatda uzatilishiga ishonch hosil qiling.
Yopish belgisi
Modallar va ogohlantirishlar kabi kontentni yopish uchun umumiy yopish belgisidan foydalaning.
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>Karetlar
Ochiladigan funksiya va yo'nalishni ko'rsatish uchun karetlardan foydalaning. E'tibor bering, standart karet ochiladigan menyularda avtomatik ravishda teskari bo'ladi .
<span class="caret"></span>Tez suzuvchilar
Elementni sinf bilan chapga yoki o'ngga surib qo'ying. !importanto'ziga xoslik bilan bog'liq muammolarni oldini olish uchun kiritilgan. Sinflar aralash sifatida ham ishlatilishi mumkin.
<div class="pull-left">...</div>
<div class="pull-right">...</div>// Classes
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
// Usage as mixins
.element {
.pull-left();
}
.another-element {
.pull-right();
}Markaziy kontent bloklari
Elementni o'rnating display: blockva orqali markazlashtiring margin. Mixin va sinf sifatida mavjud.
<div class="center-block">...</div>// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}Tozalash
Asosiy elementgafloat qo'shish orqali s ni osongina tozalang . Nikolas Gallager tomonidan ommalashtirilgan mikro aniq tuzatishdan foydalanadi . Aralashma sifatida ham foydalanish mumkin..clearfix
<!-- Usage as a class -->
<div class="clearfix">...</div>// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage as a mixin
.element {
.clearfix();
}Kontentni ko'rsatish va yashirish
Elementni ko'rsatish yoki yashirishga majburlash ( shu jumladan, ekranni o'qiydiganlar uchun ) .showva .hiddensinflardan foydalanish. Bu sinflar tezkor floats!important kabi o'ziga xoslik ziddiyatlarini oldini olish uchun foydalanadi . Ular faqat blok darajasini almashtirish uchun mavjud. Ular, shuningdek, aralashmalar sifatida ishlatilishi mumkin.
.hidemavjud, lekin u har doim ham ekranni o'qishga ta'sir qilmaydi va v3.0.1 dan boshlab eskirgan . .hiddenBuning o'rniga yoki foydalaning .sr-only.
Bundan tashqari, .invisiblefaqat elementning ko'rinishini almashtirish uchun ishlatilishi mumkin, ya'ni u displayo'zgartirilmaydi va element hujjat oqimiga ta'sir qilishi mumkin.
<div class="show">...</div>
<div class="hidden">...</div>// Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
}
.invisible {
visibility: hidden;
}
// Usage as mixins
.element {
.show();
}
.another-element {
.hidden();
}Ekranni o'quvchi va klaviatura navigatsiyasi tarkibi
Elementni ekranni o'qiydiganlardan tashqari barcha qurilmalarda yashirish .sr-only. Element fokuslanganida yana koʻrsatish uchun .sr-onlybilan birlashtiring (masalan, faqat klaviatura foydalanuvchisi tomonidan). Foydalanishning eng yaxshi amaliyotlariga rioya.sr-only-focusable qilish uchun zarur . Bundan tashqari, mikser sifatida ham foydalanish mumkin.
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>// Usage as a mixin
.skip-navigation {
.sr-only();
.sr-only-focusable();
}Rasmni almashtirish
.text-hideElement matn mazmunini fon tasviri bilan almashtirishga yordam berish uchun sinf yoki miksindan foydalaning.
<h1 class="text-hide">Custom heading</h1>// Usage as a mixin
.heading {
.text-hide();
}Javob beruvchi yordamchi dasturlar
Tezroq mobil qurilmalar uchun qulayroq ishlab chiqish uchun media so‘rovi orqali qurilma orqali kontentni ko‘rsatish va yashirish uchun ushbu yordamchi dasturlardan foydalaning. Shuningdek, chop etilganda tarkibni almashtirish uchun yordamchi dasturlar sinflari ham kiritilgan.
Ulardan cheklangan miqdorda foydalanishga harakat qiling va bir xil saytning butunlay boshqa versiyalarini yaratmang. Buning o'rniga, har bir qurilma taqdimotini to'ldirish uchun ulardan foydalaning.
Mavjud sinflar
Kontentni ko'rish maydonining to'xtash nuqtalari bo'ylab almashtirish uchun mavjud sinflarning bitta yoki kombinatsiyasidan foydalaning.
| Qo'shimcha kichik qurilmalarTelefonlar (<768px) | Kichik qurilmalarPlanshetlar (≥768px) | O'rta qurilmalarIsh stollari (≥992px) | Katta qurilmalarIsh stollari (≥1200px) | |
|---|---|---|---|---|
.visible-xs-* |
Ko'rinadigan | Yashirin | Yashirin | Yashirin |
.visible-sm-* |
Yashirin | Ko'rinadigan | Yashirin | Yashirin |
.visible-md-* |
Yashirin | Yashirin | Ko'rinadigan | Yashirin |
.visible-lg-* |
Yashirin | Yashirin | Yashirin | Ko'rinadigan |
.hidden-xs |
Yashirin | Ko'rinadigan | Ko'rinadigan | Ko'rinadigan |
.hidden-sm |
Ko'rinadigan | Yashirin | Ko'rinadigan | Ko'rinadigan |
.hidden-md |
Ko'rinadigan | Ko'rinadigan | Yashirin | Ko'rinadigan |
.hidden-lg |
Ko'rinadigan | Ko'rinadigan | Ko'rinadigan | Yashirin |
v3.2.0 holatiga ko'ra, har bir to'xtash nuqtasi uchun sinflar uchta o'zgarishda bo'ladi, quyida keltirilgan .visible-*-*har bir CSS xususiyati qiymati uchun bittadan .display
| Sinflar guruhi | CSSdisplay |
|---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
Shunday qilib, masalan, qo'shimcha kichik ( xs) ekranlar uchun mavjud .visible-*-*sinflar: .visible-xs-block, .visible-xs-inline, va .visible-xs-inline-block.
.visible-xs, .visible-sm, .visible-md, va sinflari .visible-lgham mavjud, lekin v3.2.0 dan boshlab eskirgan . Tegishli elementlarni .visible-*-blockalmashtirish uchun qo'shimcha maxsus holatlar bundan mustasno, ular taxminan ga ekvivalentdir .<table>
Chop etish sinflari
Oddiy javob beradigan sinflarga o'xshab, ulardan kontentni chop etish uchun almashtirish uchun foydalaning.
| Sinflar | Brauzer | Chop etish |
|---|---|---|
.visible-print-block.visible-print-inline.visible-print-inline-block |
Yashirin | Ko'rinadigan |
.hidden-print |
Ko'rinadigan | Yashirin |
Sinf .visible-printham mavjud, lekin v3.2.0 dan boshlab eskirgan . U taxminan ga ekvivalent bo'ladi , faqat tegishli elementlar .visible-print-blockuchun qo'shimcha maxsus holatlar bundan mustasno .<table>
Test holatlari
Brauzer o‘lchamini o‘zgartiring yoki sezgir yordamchi dasturlarni sinab ko‘rish uchun turli qurilmalarga yuklang.
Bu yerda koʻrinadi...
Yashil tasdiq belgilari element joriy ko'rish oynangizda ko'rinishini bildiradi .
Juda kichik
✔ x-small da ko'rinadi
Kichik
✔ Kichkinasida ko'rinadi
O'rta
✔ O'rtada ko'rinadi
Katta
✔ Katta hajmda ko'rinadi
✔ x-kichik va kichikda ko'rinadi
✔ O'rta va katta hajmda ko'rinadi
✔ x-kichik va o'rta hajmda ko'rinadi
✔ Kichik va kattada ko'rinadi
✔ x-kichik va katta hajmda ko'rinadi
✔ Kichik va o'rtada ko'rinadi
Yashirin...
Bu erda yashil tasdiq belgilari, shuningdek, element joriy ko'rish oynangizda yashiringanligini ko'rsatadi.
Kamroq foydalanish
Bootstrap's CSS o'zgaruvchilar, miksinlar va CSS-ni kompilyatsiya qilish funktsiyalari kabi qo'shimcha funktsiyalarga ega bo'lgan Less protsessoriga qurilgan. Bizning kompilyatsiya qilingan CSS-fayllarimiz o'rniga Less fayl manbasidan foydalanmoqchi bo'lganlar biz butun tizimda ishlatadigan ko'plab o'zgaruvchilar va miksinlardan foydalanishlari mumkin.
Grid o'zgaruvchilari va mixinlar Grid tizimi bo'limida qamrab olingan .
Bootstrap kompilyatsiya qilish
Bootstrap-dan kamida ikkita usulda foydalanish mumkin: kompilyatsiya qilingan CSS yoki manba Less fayllar bilan. Kamroq fayllarni kompilyatsiya qilish uchun kerakli buyruqlarni ishga tushirish uchun ishlab chiqish muhitini qanday o'rnatish haqida "Ishga tushirish" bo'limiga murojaat qiling .
Uchinchi tomon kompilyatsiya vositalari Bootstrap bilan ishlashi mumkin, ammo ular bizning asosiy jamoamiz tomonidan qo'llab-quvvatlanmaydi.
O'zgaruvchilar
O'zgaruvchilar butun loyiha davomida ranglar, bo'shliqlar yoki shriftlar to'plami kabi tez-tez ishlatiladigan qiymatlarni markazlashtirish va almashish usuli sifatida ishlatiladi. To'liq taqsimot uchun, iltimos , Customizer ga qarang .
Ranglar
Ikki rang sxemasidan osongina foydalaning: kulrang va semantik. Kulrang ranglar tez-tez ishlatiladigan qora ranglarga tezkor kirish imkonini beradi, semantik esa mazmunli kontekstual qiymatlarga tayinlangan turli xil ranglarni o'z ichiga oladi.
@gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555
@gray-light: lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;Ushbu rang o'zgaruvchilardan har qanday bo'lgani kabi foydalaning yoki ularni loyihangiz uchun yanada mazmunli o'zgaruvchilarga qayta tayinlang.
// Use as-is
.masthead {
background-color: @brand-primary;
}
// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}Iskala qurish
Saytingiz skeletining asosiy elementlarini tezda sozlash uchun bir nechta o'zgaruvchilar.
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;Havolalar
Havolalaringizni faqat bitta qiymat bilan kerakli rang bilan osongina uslublang.
// Variables
@link-color: @brand-primary;
@link-hover-color: darken(@link-color, 15%);
// Usage
a {
color: @link-color;
text-decoration: none;
&:hover {
color: @link-hover-color;
text-decoration: underline;
}
}E'tibor bering, @link-hover-colorto'g'ri hover rangini avtomatik ravishda yaratish uchun Less-dan yana bir ajoyib vosita funksiyasidan foydalanadi. darken, lighten, saturateva dan foydalanishingiz mumkin desaturate.
Tipografiya
Bir nechta tezkor oʻzgaruvchilar yordamida shrift, matn oʻlchami, yetakchi va boshqalarni osongina oʻrnating. Bootstrap bulardan ham oson tipografik aralashmalarni taqdim etish uchun foydalanadi.
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
@font-size-base: 14px;
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5: @font-size-base;
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
@headings-font-family: inherit;
@headings-font-weight: 500;
@headings-line-height: 1.1;
@headings-color: inherit;Belgilar
Belgilaringizning joylashuvi va fayl nomini sozlash uchun ikkita tezkor o'zgaruvchi.
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";Komponentlar
Bootstrap-dagi komponentlar umumiy qiymatlarni o'rnatish uchun ba'zi bir standart o'zgaruvchilardan foydalanadi. Bu erda eng ko'p ishlatiladiganlar.
@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;
@padding-large-vertical: 10px;
@padding-large-horizontal: 16px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
@line-height-large: 1.33;
@line-height-small: 1.5;
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
@component-active-color: #fff;
@component-active-bg: @brand-primary;
@caret-width-base: 4px;
@caret-width-large: 5px;Sotuvchi aralashmalari
Sotuvchi miksinlari kompilyatsiya qilingan CSS-ga barcha tegishli sotuvchi prefikslarini kiritish orqali bir nechta brauzerlarni qo'llab-quvvatlashga yordam beradigan miksinlardir.
Quti o'lchami
Komponentlaringiz qutisi modelini bitta miksin bilan tiklang. Kontekst uchun Mozilla'dan ushbu foydali maqolaga qarang .
Miksin 3.2.0 versiyasidan boshlab, Autoprefixer joriy qilinganidan keyin eskirgan . Orqaga qarab muvofiqlikni saqlab qolish uchun Bootstrap miksindan Bootstrap v4 ga qadar foydalanishda davom etadi.
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}Dumaloq burchaklar
border-radiusBugungi kunda barcha zamonaviy brauzerlar prefikssiz xususiyatni qo'llab-quvvatlaydi . Shunday qilib, aralashish yo'q .border-radius(), lekin Bootstrap ob'ektning ma'lum bir tomonidagi ikkita burchakni tezda yaxlitlash uchun yorliqlarni o'z ichiga oladi.
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
}Box (tomchi) soyalar
Agar sizning maqsadli auditoriyangiz eng so'nggi va eng zo'r brauzer va qurilmalardan foydalanayotgan bo'lsa, box-shadowmulkdan o'z-o'zidan foydalanishni unutmang. Agar eski Android (v4-dan oldingi) va iOS qurilmalari (iOS 5-dan oldingi) uchun qo‘llab-quvvatlash kerak bo‘lsa, kerakli prefiksni olish uchun eskirgan mikserdan foydalaning -webkit.
Miksin v3.1.0 dan boshlab eskirgan , chunki Bootstrap standart xususiyatni qo'llab-quvvatlamaydigan eskirgan platformalarni rasman qo'llab-quvvatlamaydi. Orqaga qarab muvofiqlikni saqlab qolish uchun Bootstrap miksindan Bootstrap v4 ga qadar foydalanishda davom etadi.
Qutidagi soyalarda ranglardan foydalanganingizga ishonch hosil rgba()qiling, shunda ular fon bilan iloji boricha uyg'unlashadi.
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}O'tishlar
Moslashuvchanlik uchun bir nechta aralashmalar. Barcha o'tish ma'lumotlarini bitta bilan o'rnating yoki kerak bo'lganda alohida kechikish va davomiylikni belgilang.
Miksinlar v3.2.0 dan boshlab, Autoprefixer joriy qilinganidan keyin eskirgan . Orqaga qarab muvofiqlikni saqlab qolish uchun Bootstrap miksinlarni Bootstrap v4 ga qadar ishlatishda davom etadi.
.transition(@transition) {
-webkit-transition: @transition;
transition: @transition;
}
.transition-property(@transition-property) {
-webkit-transition-property: @transition-property;
transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
-webkit-transition-timing-function: @timing-function;
transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition;
-o-transition: -o-transform @transition;
transition: transform @transition;
}Transformatsiyalar
Har qanday ob'ektni aylantiring, masshtablang, tarjima qiling (ko'chiring) yoki qiyshaytiring.
Miksinlar v3.2.0 dan boshlab, Autoprefixer joriy qilinganidan keyin eskirgan . Orqaga qarab muvofiqlikni saqlab qolish uchun Bootstrap miksinlarni Bootstrap v4 ga qadar ishlatishda davom etadi.
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // IE9 only
transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
-webkit-transform: scale(@ratio, @ratio-y);
-ms-transform: scale(@ratio, @ratio-y); // IE9 only
transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9 only
transform: translate(@x, @y);
}
.skew(@x; @y) {
-webkit-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
-webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
.rotateX(@degrees) {
-webkit-transform: rotateX(@degrees);
-ms-transform: rotateX(@degrees); // IE9 only
transform: rotateX(@degrees);
}
.rotateY(@degrees) {
-webkit-transform: rotateY(@degrees);
-ms-transform: rotateY(@degrees); // IE9 only
transform: rotateY(@degrees);
}
.perspective(@perspective) {
-webkit-perspective: @perspective;
-moz-perspective: @perspective;
perspective: @perspective;
}
.perspective-origin(@perspective) {
-webkit-perspective-origin: @perspective;
-moz-perspective-origin: @perspective;
perspective-origin: @perspective;
}
.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
-ms-transform-origin: @origin; // IE9 only
transform-origin: @origin;
}Animatsiyalar
CSS3 ning barcha animatsiya xususiyatlarini bitta deklaratsiyada ishlatish uchun bitta miksin va alohida xususiyatlar uchun boshqa miksinlar.
Miksinlar v3.2.0 dan boshlab, Autoprefixer joriy qilinganidan keyin eskirgan . Orqaga qarab muvofiqlikni saqlab qolish uchun Bootstrap miksinlarni Bootstrap v4 ga qadar ishlatishda davom etadi.
.animation(@animation) {
-webkit-animation: @animation;
animation: @animation;
}
.animation-name(@name) {
-webkit-animation-name: @name;
animation-name: @name;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
-webkit-animation-timing-function: @timing-function;
animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
-webkit-animation-iteration-count: @iteration-count;
animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
-webkit-animation-direction: @direction;
animation-direction: @direction;
}Shaffoflik
Barcha brauzerlar uchun shaffoflikni o'rnating va filterIE8 uchun zaxirani ta'minlang.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}To'ldiruvchi matn
Har bir maydonda shakl boshqaruvlari uchun kontekstni taqdim eting.
.placeholder(@color: @input-color-placeholder) {
&::-moz-placeholder { color: @color; } // Firefox
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
}Ustunlar
Bitta element ichida CSS orqali ustunlar yarating.
.content-columns(@width; @count; @gap) {
-webkit-column-width: @width;
-moz-column-width: @width;
column-width: @width;
-webkit-column-count: @count;
-moz-column-count: @count;
column-count: @count;
-webkit-column-gap: @gap;
-moz-column-gap: @gap;
column-gap: @gap;
}Gradientlar
Har qanday ikkita rangni osongina fon gradientiga aylantiring. Kengaytirilgan bo'ling va yo'nalishni o'rnating, uchta rangdan foydalaning yoki radial gradientdan foydalaning. Bitta miksin yordamida sizga kerak bo'ladigan barcha prefiksli sintaksislarni olasiz.
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);Bundan tashqari, standart ikki rangli chiziqli gradientning burchagini belgilashingiz mumkin:
#gradient > .directional(#333; #000; 45deg);Agar sizga sartarosh chiziqli gradient kerak bo'lsa, bu ham oson. Faqat bitta rangni belgilang va biz shaffof oq chiziqni qo'yamiz.
#gradient > .striped(#333; 45deg);Anteni yuqoriga ko'taring va uning o'rniga uchta rangdan foydalaning. Birinchi rangni, ikkinchi rangni, ikkinchi rangning rang to'xtashini (foiz qiymati 25%) va uchinchi rangni ushbu aralashmalar bilan o'rnating:
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);Oldindan qisqa ma'lumot berish! Agar siz gradientni olib tashlashingiz kerak bo'lsa, filtero'zingiz qo'shgan IE-ga xos bo'lgan narsalarni olib tashlang. Buni .reset-filter()miksin bilan birga ishlatishingiz mumkin background-image: none;.
Foydali aralashmalar
Foydali mikslar ma'lum bir maqsad yoki vazifaga erishish uchun boshqa bog'liq bo'lmagan CSS xususiyatlarini birlashtirgan miksinlardir.
Tozalash
Har qanday elementga qo'shishni unuting class="clearfix"va kerak bo'lganda aralashmani qo'shing .clearfix(). Nicolas Gallagher'dan micro clearfix'dan foydalanadi .
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}Gorizontal markazlashtirish
Har qanday elementni ota-ona ichida tezda markazlashtiring. Talab qiladi widthyoki max-widtho'rnatilishi kerak.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}Hajmi bo'yicha yordamchilar
Ob'ektning o'lchamlarini osonroq belgilang.
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }Oʻlchamini oʻzgartirish mumkin boʻlgan matn maydonlari
Har qanday matn maydoni yoki boshqa element uchun o'lchamini o'zgartirish parametrlarini osongina sozlang. Oddiy brauzer xatti-harakati uchun standart sozlamalar ( both).
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}Matnni qisqartirish
Bitta aralash bilan ellipsli matnni osongina kesib oling. Elementning boʻlishi blockyoki inline-blockdarajasi boʻlishini talab qiladi.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}Retina tasvirlari
Ikkita rasm yo'lini va @1x tasvir o'lchamlarini belgilang va Bootstrap @2x media so'rovini taqdim etadi. Agar sizda xizmat ko'rsatish uchun ko'plab tasvirlar bo'lsa, bitta media so'rovida to'r parda tasvirini CSS-ni qo'lda yozishni o'ylab ko'ring.
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-image: url("@{file-1x}");
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background-image: url("@{file-2x}");
background-size: @width-1x @height-1x;
}
}
// Usage
.jumbotron {
.img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}Sass yordamida
Bootstrap Less-da qurilgan bo'lsa-da, u rasmiy Sass portiga ham ega . Biz uni alohida GitHub omborida saqlaymiz va yangilanishlarni konversiya skripti bilan boshqaramiz.
Nima kiritilgan
Sass porti alohida repoga ega va biroz boshqacha auditoriyaga xizmat qilganligi sababli, loyiha mazmuni asosiy Bootstrap loyihasidan juda farq qiladi. Bu Sass portining iloji boricha ko'proq Sass-ga asoslangan tizimlar bilan mos kelishini ta'minlaydi.
| Yo'l | Tavsif |
|---|---|
lib/ |
Ruby gem kodi (Sass konfiguratsiyasi, Rails va Compass integratsiyasi) |
tasks/ |
Konverter skriptlari (yuqori oqimdan Less-ni Sassga aylantirish) |
test/ |
Kompilyatsiya testlari |
templates/ |
Kompas to'plami manifest |
vendor/assets/ |
Sass, JavaScript va shrift fayllari |
Rakefile |
Rake va aylantirish kabi ichki vazifalar |
Ushbu fayllarni amalda ko'rish uchun Sass portining GitHub omboriga tashrif buyuring .
O'rnatish
Bootstrap for Sassni qanday oʻrnatish va undan foydalanish haqida maʼlumot olish uchun GitHub repository readme ga murojaat qiling . Bu eng dolzarb manba bo'lib, Rails, Compass va standart Sass loyihalarida foydalanish uchun ma'lumotlarni o'z ichiga oladi.