CSS
Global CSS sozlamalari, kengaytiriladigan sinflar bilan yaratilgan va takomillashtirilgan asosiy HTML elementlari va rivojlangan tarmoq tizimi.
Global CSS sozlamalari, kengaytiriladigan sinflar bilan yaratilgan va takomillashtirilgan asosiy HTML elementlari va rivojlangan tarmoq tizimi.
Bootstrap infratuzilmasining asosiy qismlari, jumladan, yaxshiroq, tezroq va kuchliroq veb-ishlab chiqishga bo‘lgan yondashuvimiz haqida ma’lumot oling.
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>
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=no
Ko'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">
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-base
atributlaridan tipografik asosimiz sifatida foydalaning@link-color
va havolaning tagiga chizishni faqat ustiga qo'llang:hover
Ushbu uslublarni ichida topish mumkin scaffolding.less
.
Brauzerlararo renderlashni yaxshilash uchun biz Nikolas Gallager va Jonatan Nilning loyihasi Normalize.css dan foydalanamiz .
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, padding
va boshqa sabablarga ko'ra, hech bir konteyner o'rnatib bo'lmaydi.
.container
Qattiq kenglikdagi sezgir konteyner uchun foydalaning .
<div class="container">
...
</div>
.container-fluid
Ko'rish oynangizning butun kengligini qamrab oluvchi to'liq kenglikdagi konteyner uchun foydalaning .
<div class="container-fluid">
...
</div>
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 .
Tarmoq tizimlari sizning tarkibingizni joylashtiradigan qatorlar va ustunlar orqali sahifa tartiblarini yaratish uchun ishlatiladi. Bootstrap grid tizimi qanday ishlaydi:
.container
To'g'ri tekislash va to'ldirish uchun qatorlar (belgilangan kenglik) yoki .container-fluid
(to'liq kenglik) ichida joylashtirilishi kerak ..row
va .col-xs-4
ularni tezda grid maketlarini yaratish uchun mavjud. Ko'proq semantik tartiblar uchun kamroq miksinlardan ham foydalanish mumkin.padding
qiladi. Ushbu to'ldirish birinchi va oxirgi ustun uchun satrlarda s ning salbiy chegarasi orqali ofset qilinadi .row
..col-xs-4
..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.
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-width
CSS-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) { ... }
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 |
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
.
<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>
Har qanday qattiq kenglikdagi panjara tartibini toʻliq kenglikdagi sxemaga .container
aylantiring .container-fluid
.
<div class="container-fluid">
<div class="row">
...
</div>
</div>
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.
<!-- 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>
.col-sm-*
Oldingi misolga asoslanib, planshet sinflari bilan yanada dinamik va kuchli maketlarni yarating .
<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>
Agar bitta qatorga 12 dan ortiq ustunlar joylashtirilsa, qo'shimcha ustunlarning har bir guruhi bitta birlik sifatida yangi qatorga o'raladi.
<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>
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 .clearfix
va bizning javob beruvchi yordamchi dastur sinflarimiz kombinatsiyasidan foydalaning .
<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>
.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-4
harakatlanadi ..col-md-4
<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-0
sinflar 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>
Kontentingizni standart tarmoqqa joylashtirish uchun mavjud ustunga yangi .row
va 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-*
<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>
Bizning o'rnatilgan panjara ustunlar tartibini .col-md-push-*
va .col-md-pull-*
modifikator sinflari bilan osongina o'zgartiring.
<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>
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 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;
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));
}
}
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>
Barcha HTML sarlavhalari, <h1>
orqali <h6>
mavjud. Agar sarlavha shrift uslubiga mos kelmoqchi bo'lsangiz, lekin matningiz satrda ko'rsatilishini xohlasangiz, sinflar .h1
orqali 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 .small
sinf 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>
Bootstrapning global standarti font-size
14px , 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>
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>
Tipografik masshtab oʻzgaruvchilardagi ikkita Less oʻzgaruvchisiga asoslanadi.less : @font-size-base
va @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.
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 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>
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>
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>
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.
Inline yoki matn bloklarini ta'kidlashni yo'qotish uchun <small>
tegdan foydalanib, matnni ota-onaning 85% o'lchamiga o'rnating. font-size
Sarlavha elementlari ichki o'rnatilgan elementlar uchun o'zlarini <small>
oladi.
.small
Shu 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>
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>
Matn parchasini kursiv bilan ta'kidlash uchun.
Quyidagi matn parchasi kursiv matn sifatida berilgan .
<em>rendered as italicized text</em>
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.
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>
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>
<abbr>
Hoverda kengaytirilgan versiyani ko'rsatish uchun qisqartmalar va qisqartmalar uchun HTML elementining stilize qilingan ilovasi. Atributli qisqartmalar title
ochilgan nuqtali pastki chegaraga va hoverda yordam kursoriga ega bo'lib, hoverda va yordamchi texnologiyalar foydalanuvchilariga qo'shimcha kontekstni taqdim etadi.
Atribut so'zining qisqartmasi attr hisoblanadi .
<abbr title="attribute">attr</abbr>
.initialism
Biroz 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>
Eng yaqin ajdod yoki butun ish uchun aloqa ma'lumotlarini taqdim eting. Barcha qatorlarni bilan tugatish orqali formatlashni saqlang <br>
.
<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>
Hujjatingizdagi boshqa manbadan kontent bloklarini keltirish uchun.
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>
Standartdagi oddiy o'zgarishlar uchun uslub va tarkib o'zgaradi <blockquote>
.
<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>
.blockquote-reverse
O'ngga tekislangan kontent bilan blok-iqtibos uchun qo'shing .
<blockquote class="blockquote-reverse">
...
</blockquote>
Buyurtma aniq ahamiyatga ega bo'lmagan narsalar ro'yxati.
<ul>
<li>...</li>
</ul>
Buyurtma aniq ahamiyatga ega bo'lgan narsalar ro'yxati .
<ol>
<li>...</li>
</ol>
Ro'yxatdagi standart list-style
va 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.
<ul class="list-unstyled">
<li>...</li>
</ul>
Roʻyxatning barcha elementlarini bir display: inline-block;
qator yorugʻlik bilan toʻldiring.
<ul class="list-inline">
<li>...</li>
</ul>
Ular bilan bog'liq tavsiflari bilan atamalar ro'yxati.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
Shartlar va tavsiflarni bir <dl>
qatorda yonma-yon tuzing. Standart s kabi stacked boshlanadi <dl>
, lekin navigatsiya paneli kengayganda, ularni ham shunday qiling.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
Gorizontal tavsif roʻyxatlari chap ustunga sigʻmaydigan juda uzun atamalarni qisqartiradi text-overflow
. Torroq ko'rish oynalarida ular birlamchi stacked maketga o'zgaradi.
Kodning ichki qismlarini bilan o'rab oling <code>
.
<section>
inline sifatida o'ralgan bo'lishi kerak.
For example, <code><section></code> should be wrapped as inline.
<kbd>
Odatda klaviatura orqali kiritiladigan kiritishni ko'rsatish uchun foydalaning .
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>
<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-scrollable
sinfni qo'shishingiz mumkin, bu maksimal balandlik 350px o'rnatadi va Y o'qi aylantirish panelini ta'minlaydi.
O'zgaruvchilarni ko'rsatish uchun <var>
tegdan foydalaning.
y = m x + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
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>
.table
Asosiy 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>
.table-striped
ichidagi istalgan jadval qatoriga zebra-chiziq qo'shish uchun foydalaning <tbody>
.
Chiziqli jadvallar :nth-child
CSS 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>
.table-bordered
Jadval 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>
.table-hover
Jadval 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>
Jadvallarni .table-condensed
yanada 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>
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>
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-only
Rang 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 .
Kichkina qurilmalarda (768 pikseldan past) gorizontal aylantirilishi uchun istalgan .table
birini o'rash orqali sezgir jadvallar yarating . .table-responsive
Kengligi 768px dan kattaroq narsalarni ko'rsangiz, ushbu jadvallarda hech qanday farqni ko'rmaysiz.
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.
width
Firefox-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>
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 to'g'ridan-to'g'ri kirish guruhlari bilan aralashtirmang . Buning o'rniga, kirish guruhini shakllar guruhiga joylashtiring.
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>
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 bir kiritish uchun yorliq qo'shmasangiz, ekranni o'qiydiganlar shakllaringiz bilan bog'liq muammolarga duch kelishadi. Ushbu inline shakllar uchun siz .sr-only
sinfdan foydalanib teglarni yashirishingiz mumkin. Yordamchi texnologiyalar uchun yorliqni taqdim etishning boshqa muqobil usullari mavjud, masalan, aria-label
, aria-labelledby
yoki title
atribut. Agar ulardan hech biri mavjud bo'lmasa, ekranni o'qiydiganlar placeholder
, agar mavjud bo'lsa, atributdan foydalanishlari mumkin, ammo placeholder
yorliqlashning 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>
.form-horizontal
Formaga 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-group
Bunda 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>
Shakl tartibi namunasida qo'llab-quvvatlanadigan standart shakl boshqaruvlarining misollari.
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
.
Kirishlar faqat type
to'g'ri e'lon qilingan taqdirdagina to'liq shakllantiriladi.
<input type="text" class="form-control" placeholder="Text input">
Har qanday matnga asoslangan matndan oldin va/yoki keyin birlashtirilgan matn yoki tugmalarni qo'shish <input>
uchun kiritish guruhi komponentini tekshiring .
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 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
<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>
.checkbox-inline
Xuddi shu satrda paydo bo'ladigan boshqaruv elementlari uchun bir qator belgilash katakchalarida yoki .radio-inline
sinflaridan 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>
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>
E'tibor bering, ko'plab mahalliy tanlangan menyular, xususan, Safari va Chrome-da - xususiyatlar orqali o'zgartirib bo'lmaydigan yumaloq burchaklarga border-radius
ega.
<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 multiple
sukut 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>
Shakl ichidagi forma yorlig'i yoniga oddiy matnni qo'yish kerak bo'lganda, .form-control-static
sinfdan 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>
Biz ba'zi forma boshqaruvlaridagi standart outline
uslublarni olib tashlaymiz va box-shadow
uning o'rniga a qo'llaymiz :focus
.
:focus
holatiYuqoridagi misol kiritish hujjatidagi :focus
holatni ko'rsatish uchun maxsus uslublardan foydalanadi .form-control
.
disabled
Foydalanuvchilarning oʻzaro taʼsirini oldini olish uchun kirishga mantiqiy atributni qoʻshing . O'chirilgan kirishlar engilroq ko'rinadi va not-allowed
kursor qo'shing.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Bir vaqtning o'zida barcha boshqaruv elementlarini o'chirish uchun atributni disabled
a ga qo'shing .<fieldset>
<fieldset>
<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.
disabled
Bootstrap 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>
readonly
Kirish 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>
Shakl boshqaruvlari uchun blok darajasidagi yordam matni.
Yordam matni aria-describedby
atributdan 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>
Bootstrap forma boshqaruvlaridagi xato, ogohlantirish va muvaffaqiyat holatlari uchun tekshirish uslublarini o'z ichiga oladi. Foydalanish uchun asosiy elementga .has-warning
, .has-error
yoki qo'shing . Ushbu element ichidagi .has-success
har qanday .control-label
, .form-control
, va tasdiqlash uslublarini oladi..help-block
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>
Bundan tashqari, ixtiyoriy fikr-mulohaza piktogrammalarini .has-feedback
va o'ng belgisini qo'shishingiz mumkin.
Fikr-mulohaza piktogrammalari faqat matn <input class="form-control">
elementlari bilan ishlaydi.
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-only
sinf bilan yashiring. Agar siz teglarsiz ishlashingiz kerak bo'lsa top
, fikr-mulohaza belgisining qiymatini sozlang. Kirish guruhlari uchun right
qoʻshimchangiz kengligiga qarab qiymatni mos piksel qiymatiga sozlang.
Yordamchi texnologiyalar (masalan, ekranni o'qish dasturlari) piktogramma ma'nosini to'g'ri etkazishini ta'minlash uchun qo'shimcha yashirin matn sinfga kiritilishi .sr-only
va 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-only
matn 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>
<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-only
Yashirin teglar bilan ixtiyoriy belgilarAgar siz .sr-only
shakl 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.
<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>
kabi sinflar yordamida balandliklarni o'rnating .input-lg
va kabi panjara ustunlari sinflari yordamida kengliklarni o'rnating .col-lg-*
.
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>
Yorliqlarni tezda oʻlchamang va ichidagi boshqaruv elementlarini yoki .form-horizontal
qoʻ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>
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>
<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">
<a>
Tugma sinflari va elementlarda ishlatilishi mumkin bo'lsa-da , nav va navbar komponentlarimizda <button>
faqat <button>
elementlar qo'llab-quvvatlanadi.
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"
.
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-height
bu <input>
ularning Firefox-dagi boshqa tugmalar balandligiga to'liq mos kelmasligiga olib keladi.
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>
Tugmachaga ma'no qo'shish uchun rangdan foydalanish faqat vizual ko'rsatkichni ta'minlaydi, bu yordamchi texnologiyalar foydalanuvchilariga, masalan, ekranni o'qiydiganlarga etkazilmaydi. .sr-only
Rang 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 .
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>
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 , .active
on <button>
s dan foydalanishingiz mumkin (va atributni o'z ichiga oladi ).aria-pressed="true"
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>
.active
Sinfni <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>
Tugmalarni bosish mumkin boʻlmagan koʻrinishga keltiring opacity
.
Tugmalarga disabled
atribut 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>
disabled
Agar 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.
.disabled
Sinfni <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 .disabled
bu erda umumiy sinfga o'xshash yordamchi sinf sifatida foydalanamiz .active
, shuning uchun hech qanday prefiks talab qilinmaydi.
Bu sinf s pointer-events: none
ning 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.
.img-responsive
Bootstrap 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-responsive
foydalaning . Foydalanish haqida batafsil ma'lumot olish uchun yordamchi sinflar bo'limiga qarang ..center-block
.text-center
.center-block
Internet Explorer 8-10 da SVG tasvirlar .img-responsive
nomutanosib 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">
<img>
Har qanday loyihada tasvirlarni osongina uslublash uchun elementga sinflar qo'shing .
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">
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>
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>
.
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-only
sinf bilan yashirilgan qo'shimcha matn kabi muqobil vositalar orqali kiritilganligiga ishonch hosil qiling. .
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>
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>
.
Kontekstli ranglarda bo'lgani kabi, rang orqali etkazilgan har qanday ma'no ham sof taqdimot bo'lmagan formatda uzatilishiga ishonch hosil qiling.
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>
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>
Elementni sinf bilan chapga yoki o'ngga surib qo'ying. !important
o'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();
}
Elementni o'rnating display: block
va 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();
}
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();
}
Elementni ko'rsatish yoki yashirishga majburlash ( shu jumladan, ekranni o'qiydiganlar uchun ) .show
va .hidden
sinflardan 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.
.hide
mavjud, lekin u har doim ham ekranni o'qishga ta'sir qilmaydi va v3.0.1 dan boshlab eskirgan . .hidden
Buning o'rniga yoki foydalaning .sr-only
.
Bundan tashqari, .invisible
faqat elementning ko'rinishini almashtirish uchun ishlatilishi mumkin, ya'ni u display
o'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();
}
Elementni ekranni o'qiydiganlardan tashqari barcha qurilmalarda yashirish .sr-only
. Element fokuslanganida yana koʻrsatish uchun .sr-only
bilan 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();
}
.text-hide
Element 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();
}
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.
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-lg
ham mavjud, lekin v3.2.0 dan boshlab eskirgan . Tegishli elementlarni .visible-*-block
almashtirish uchun qo'shimcha maxsus holatlar bundan mustasno, ular taxminan ga ekvivalentdir .<table>
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-print
ham mavjud, lekin v3.2.0 dan boshlab eskirgan . U taxminan ga ekvivalent bo'ladi , faqat tegishli elementlar .visible-print-block
uchun qo'shimcha maxsus holatlar bundan mustasno .<table>
Brauzer o‘lchamini o‘zgartiring yoki sezgir yordamchi dasturlarni sinab ko‘rish uchun turli qurilmalarga yuklang.
Yashil tasdiq belgilari element joriy ko'rish oynangizda ko'rinishini bildiradi .
Bu erda yashil tasdiq belgilari, shuningdek, element joriy ko'rish oynangizda yashiringanligini ko'rsatadi.
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-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 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 .
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;
}
Saytingiz skeletining asosiy elementlarini tezda sozlash uchun bir nechta o'zgaruvchilar.
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;
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-color
to'g'ri hover rangini avtomatik ravishda yaratish uchun Less-dan yana bir ajoyib vosita funksiyasidan foydalanadi. darken
, lighten
, saturate
va dan foydalanishingiz mumkin desaturate
.
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;
Belgilaringizning joylashuvi va fayl nomini sozlash uchun ikkita tezkor o'zgaruvchi.
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";
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 miksinlari kompilyatsiya qilingan CSS-ga barcha tegishli sotuvchi prefikslarini kiritish orqali bir nechta brauzerlarni qo'llab-quvvatlashga yordam beradigan miksinlardir.
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;
}
border-radius
Bugungi 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;
}
Agar sizning maqsadli auditoriyangiz eng so'nggi va eng zo'r brauzer va qurilmalardan foydalanayotgan bo'lsa, box-shadow
mulkdan 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;
}
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;
}
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;
}
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;
}
Barcha brauzerlar uchun shaffoflikni o'rnating va filter
IE8 uchun zaxirani ta'minlang.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}
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
}
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;
}
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, filter
o'zingiz qo'shgan IE-ga xos bo'lgan narsalarni olib tashlang. Buni .reset-filter()
miksin bilan birga ishlatishingiz mumkin background-image: none;
.
Foydali mikslar ma'lum bir maqsad yoki vazifaga erishish uchun boshqa bog'liq bo'lmagan CSS xususiyatlarini birlashtirgan miksinlardir.
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();
}
Har qanday elementni ota-ona ichida tezda markazlashtiring. Talab qiladi width
yoki max-width
o'rnatilishi kerak.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}
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); }
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;
}
Bitta aralash bilan ellipsli matnni osongina kesib oling. Elementning boʻlishi block
yoki inline-block
darajasi 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();
}
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);
}
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.
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 .
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.