Iskala ustiga, asosiy HTML elementlari yangi, izchil ko'rinish va tuyg'uni ta'minlash uchun kengaytiriladigan sinflar bilan bezatilgan va yaxshilangan.
Butun tipografik panjara bizning variables.less faylimizdagi ikkita Less oʻzgaruvchiga asoslangan: @baseFontSizeva @baseLineHeight. Birinchisi, butun ishlatiladigan asosiy shrift o'lchami, ikkinchisi esa asosiy satr balandligi.
Biz ushbu o'zgaruvchilardan va ba'zi matematikadan barcha turdagi va boshqalarning chekkalari, to'ldirishlari va chiziq balandligini yaratish uchun foydalanamiz.
Nullam quis risus eget urna mollis ornare vel eu leo. Sociis natoque penatibus va magnis disparturient Montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
| Element | Foydalanish | Ixtiyoriy |
|---|---|---|
<strong> |
Muhim bilan matn parchasini ta'kidlash uchun | Yo'q |
<em> |
Matn parchasini stress bilan ta'kidlash uchun | Yo'q |
<abbr> |
Hoverda kengaytirilgan versiyani ko'rsatish uchun qisqartmalar va qisqartmalarni o'rab oladi |
.initialismKatta harfli qisqartmalar uchun sinfdan foydalaning . |
<address> |
Uning eng yaqin ajdodi yoki butun ish qismi uchun aloqa ma'lumotlari uchun | Barcha qatorlarni bilan tugatgan holda formatlashni saqlang<br> |
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, pharetra augue.
Eslatma: HTML5 da bemalol foydalaning <b>, <i>lekin ulardan foydalanish biroz o'zgargan. <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.
Tegdan qanday foydalanish mumkinligiga ikkita misol <address>:
Atributli qisqartmalar titleochilgan nuqtali pastki chegaraga va kursor ustidagi yordam kursoriga ega. Bu foydalanuvchilarga hoverda biror narsa ko'rsatilishi haqida qo'shimcha ma'lumot beradi.
initialismBir oz kichikroq matn hajmini berib, tipografik uyg'unlikni oshirish uchun sinfni qisqartmaga qo'shing .
HTML tilim kesilgan nondan beri eng yaxshi narsadir.
Atribut so'zining qisqartmasi attr hisoblanadi .
| Element | Foydalanish | Ixtiyoriy |
|---|---|---|
<blockquote> |
Boshqa manbadan iqtibos keltirish uchun blok darajasidagi element |
.pull-leftva .pull-rightsinflar |
<small> |
Foydalanuvchiga iqtibos qo'shish uchun ixtiyoriy element, odatda asar nomi bilan muallif | <cite>Sarlavha yoki manba nomini atrofiga joylashtiring |
<blockquote>Blok iqtibosni qo'shish uchun har qanday HTMLni tirnoq sifatida o'rab oling. To'g'ri tirnoq uchun biz tavsiya qilamiz <p>.
Manbaga iqtibos keltirish uchun ixtiyoriy elementni qo'shing va uslublash maqsadida undan oldin <small>chiziqcha olasiz .—
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
- <small> Kimdir mashhur </small>
- </blockquote>
Birlamchi blok tirnoqlari quyidagi tarzda yaratilgan:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Ish tanasida mashhur kimdir
Blok tirnoqni o'ngga surish uchun quyidagilarni qo'shing class="pull-right":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Ish tanasida mashhur kimdir
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Oldindan qisqa ma'lumot berish! Gorizontal tavsif ro'yxatlari chap ustunni tuzatish uchun juda uzun bo'lgan atamalarni qisqartiradi text-overflow. Torroq ko'rish oynalarida ular birlamchi stacked maketga o'zgaradi.
Kodning ichki qismlarini bilan o'rab oling <code>.
- Misol uchun , <code> bo'limi </ code > inline sifatida o'ralgan bo'lishi kerak .
<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>Matn namunasi bu yerda...</p>
- </pre>
Eslatma: Kodni <pre>teglar ichida iloji boricha chapga yaqin tutganingizga ishonch hosil qiling; u barcha yorliqlarni ko'rsatadi.
Siz ixtiyoriy ravishda .pre-scrollable350px maksimal balandlikni o'rnatadigan va Y o'qi aylantirish panelini ta'minlaydigan sinfni qo'shishingiz mumkin.
Xuddi shu elementni oling <pre>va yaxshilangan renderlash uchun ikkita ixtiyoriy sinf qo'shing.
- <p> Namuna matni bu yerda... </p>
- <pre class = "prettyprint
- linenums" >
- <p>Matn namunasi bu yerda...</p>
- </pre>
Google-code-prettify-ni yuklab oling va undan qanday foydalanishni bilish uchun readme-ni ko'ring.
| teg | Tavsif |
|---|---|
<table> |
Ma'lumotlarni jadval ko'rinishida ko'rsatish uchun o'rash elementi |
<thead> |
<tr>Jadval ustunlarini belgilash uchun jadval sarlavhasi satrlari ( ) uchun konteyner elementi |
<tbody> |
<tr>Jadval tanasidagi jadval qatorlari ( ) uchun konteyner elementi |
<tr> |
Bitta qatorda paydo bo'ladigan jadval katakchalari to'plami ( <td>yoki ) uchun konteyner elementi<th> |
<td> |
Birlamchi jadval katakchasi |
<th> |
Ustun (yoki satr, qamrovi va joylashuviga qarab) yorliqlar uchun maxsus jadval katakchasidan foydalanish kerak. <thead> |
<caption> |
Jadvalning tavsifi yoki xulosasi, ayniqsa ekranni o'qiydiganlar uchun foydalidir |
- <jadval>
- <bosh>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </jadval>
| Ism | Sinf | Tavsif |
|---|---|---|
| Standart | Yo'q | Uslublar yo'q, faqat ustunlar va qatorlar |
| Asosiy | .table |
Faqat qatorlar orasidagi gorizontal chiziqlar |
| Chegaralangan | .table-bordered |
Burchaklarni yaxlitlaydi va tashqi chegara qo'shadi |
| Zebra chizig'i | .table-striped |
Toq qatorlarga (1, 3, 5 va h.k.) ochiq kulrang fon rangi qo‘shiladi. |
| Kondensatsiyalangan | .table-condensed |
tdBarcha va thelementlar ichida vertikal toʻldirishni yarmiga, 8px dan 4px gacha qisqartiradi |
Jadvallar o'qishni ta'minlash va tuzilmani saqlab qolish uchun avtomatik ravishda bir nechta chegaralar bilan stilize qilinadi. 2.0 bilan .tablesinf talab qilinadi.
- <jadval sinfi = "jadval" >
- …
- </jadval>
| # | Ism | Familiya | Foydalanuvchi nomi |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Yoqub | Tornton | @yog' |
| 3 | Larri | qush |
“Zebra” chizig‘ini qo‘shish orqali jadvallaringizga biroz zavqlaning – shunchaki .table-stripedsinfni qo‘shing.
Eslatma: Chiziqli jadvallar :nth-childCSS selektoridan foydalanadi va IE7-IE8 da mavjud emas.
- <stol klassi = "stol jadvali chiziqli" >
- …
- </jadval>
| # | Ism | Familiya | Foydalanuvchi nomi |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Yoqub | Tornton | @yog' |
| 3 | Larri | qush |
Butun stol atrofidagi chegaralarni va estetik maqsadlar uchun yumaloq burchaklarni qo'shing.
- <jadval sinfi = "jadval bilan chegaralangan" >
- …
- </jadval>
| # | Ism | Familiya | Foydalanuvchi nomi |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| Mark | Otto | @getbootstrap | |
| 2 | Yoqub | Tornton | @yog' |
| 3 | Qush Larri | ||
.table-condensedJadval katakchalarini yarmiga (8px dan 4px gacha) kesish uchun sinf qoʻshish orqali jadvallaringizni yanada ixcham qiling .
- <stol klassi = "jadval-kondensatlangan jadval" >
- …
- </jadval>
| # | Ism | Familiya | Foydalanuvchi nomi |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Yoqub | Tornton | @yog' |
| 3 | Qush Larri | ||
Mavjud har qanday sinfdan foydalanib, har xil ko'rinishga erishish uchun har qanday jadval sinflarini birlashtiring.
- <stol klassi = "stol jadvali-chiziqli jadval-chegarali stol-kondensatlangan" >
- ...
- </jadval>
| To'liq ismi sharif | |||
|---|---|---|---|
| # | Ism | Familiya | Foydalanuvchi nomi |
| 1 | Mark | Otto | @mdo |
| 2 | Yoqub | Tornton | @yog' |
| 3 | Qush Larri | ||
Bootstrap-dagi shakllarning eng yaxshi tomoni shundaki, barcha kiritishlaringiz va boshqaruvlaringiz ularni belgilashda qanday yaratganingizdan qat'iy nazar ajoyib ko'rinadi. Hech qanday ortiqcha HTML talab qilinmaydi, lekin biz buni talab qilganlar uchun naqshlarni taqdim etamiz.
Murakkab tartiblar oson uslublash va hodisalarni bog‘lash uchun qisqa va kengaytiriladigan sinflar bilan birga keladi, shuning uchun siz har bir qadamda qamrab olasiz.
Bootstrap to'rt turdagi shakl tartibini qo'llab-quvvatlaydi:
Har xil turdagi shakllar joylashuvi belgilash uchun ba'zi o'zgarishlarni talab qiladi, lekin boshqaruv elementlarining o'zi qoladi va bir xil ishlaydi.
Bootstrap shakllariga kiritish, matn maydoni va siz kutgan tanlov kabi barcha asosiy shakl boshqaruv elementlari uchun uslublar kiradi. Biroq, u qo'shilgan va oldindan qo'shilgan kirishlar va tasdiqlash qutilari ro'yxatini qo'llab-quvvatlash kabi bir qator maxsus komponentlar bilan birga keladi.
Xato, ogohlantirish va muvaffaqiyat kabi holatlar shakl boshqaruvining har bir turi uchun kiritilgan. Shuningdek, o'chirilgan boshqaruv uchun uslublar ham kiritilgan.
Bootstrap umumiy veb-shakllarning to'rtta uslubi uchun oddiy belgilash va uslublarni taqdim etadi.
| Ism | Sinf | Tavsif |
|---|---|---|
| Vertikal (standart) | .form-vertical (kerak emas) |
Boshqaruv elementlari ustida birlashtirilgan, chapga tekislangan teglar |
| Mos ravishda | .form-inline |
Chapga tekislangan yorliq va ixcham uslub uchun inline-blok boshqaruvlari |
| Qidirmoq | .form-search |
Oddiy qidiruv estetikasi uchun qo'shimcha yaxlit matn kiritish |
| Gorizontal | .form-horizontal |
Chapga, o‘ngga tekislangan teglarni boshqaruv elementlari bilan bir qatorda suzadi |
Qo'shimcha belgilarsiz aqlli va engil standart sozlamalar.
- <forma sinfi = "yaxshi" >
- <label> Yorliq nomi </label>
- <kiritish turi = "matn" sinfi = "span3" to'ldiruvchisi = "Biror narsa yozing..." >
- <span class = "help-block" > Bu yerda blok darajasidagi yordam matniga misol. </span>
- <label class = "checkbox" >
- <kiritish turi = "checkbox" > Meni tekshiring
- </label>
- <button type = "submit" class = "btn" > Submit </button>
- </form>
.form-searchShaklga va .search-queryga qo'shing input.
- <forma sinfi = "yaxshi shakl qidirish" >
- <kirish turi = "matn" klassi = "kirish-o'rta qidiruv so'rovi" >
- <button type = "submit" class = "btn" > Qidiruv tugmasi </button>
- </form>
.form-inlineShakl boshqaruv elementlarining vertikal tekislashi va oralig'ini nozik qo'shing .
- <forma sinfi = "quduq shakl-inline" >
- <kiritish turi = "matn" sinfi = "kirish-kichik" to'ldiruvchisi = "Elektron pochta" >
- <kiritish turi = "parol" klassi = "kirish-kichik" to'ldiruvchisi = "Parol" >
- <label class = "checkbox" >
- <kiritish turi = "checkbox" > Meni eslab qoling
- </label>
- <button type = "submit" class = "btn" > Kirish </button>
- </form>
O'ng tomonda biz qo'llab-quvvatlaydigan barcha standart shakl boshqaruvlari ko'rsatilgan. Bu erda markirovka qilingan ro'yxat:
Yuqoridagi misol shakl tartibini hisobga olgan holda, bu erda birinchi kiritish va nazorat guruhi bilan bog'liq belgilash. Styling uchun .control-group, .control-label, va .controlssinflar talab qilinadi.
- <forma sinfi = "form-gorizontal" >
- <maydonlar to'plami>
- <legend> Afsona matni </legend>
- <div class = "nazorat guruhi" >
- <label class = "control-label" for = "input01" > Matn kiritish </label>
- <div class = "nazorat" >
- <kirish turi = "matn" sinf = "input-xlarge" id = "input01" >
- <p class = "help-block" > Yordam matni </p>
- </div>
- </div>
- </fieldset>
- </form>
disabledBootstrap brauzer tomonidan qo'llab-quvvatlanadigan fokuslangan va holatlar uchun uslublarni o'z ichiga oladi . Biz standart Webkitni olib tashlaymiz va uning o'rniga outlinea qo'llaymiz .box-shadow:focus
Shuningdek, u xatolar, ogohlantirishlar va muvaffaqiyatlarni tekshirish uslublarini o'z ichiga oladi. Foydalanish uchun xato sinfini atrofga qo'shing .control-group.
- <maydonlar to'plami
- class = "boshqaruv guruhi xatosi" >
- …
- </fieldset>
Kiritish guruhlari - qo'shilgan yoki qo'shilgan matn bilan - kiritishlaringiz uchun ko'proq kontekstni berishning oson usulini ta'minlaydi. Ajoyib misollar orasida Twitter foydalanuvchi nomlari uchun @ belgisi yoki moliya uchun $ mavjud.
1.4 versiyasiga qadar Bootstrap belgilash kataklari va radiolarni joylashtirish uchun qo'shimcha belgilarni talab qildi. <label class="checkbox">Endi ni o'rab turgan so'zni takrorlash oddiy masala <input type="checkbox">.
Inline tasdiqlash qutilari va radiolar ham qo'llab-quvvatlanadi. Shunchaki .inlineistalganiga qo'shing .checkboxyoki .radiobajarasiz.
Inline shaklda kiritish yoki qoʻshishdan foydalanish uchun .add-onva inputni boʻsh joysiz bir qatorga qoʻyishni unutmang.
Shakl kiritishingiz uchun yordam matnini qo‘shish uchun , kiritish elementidan keyin qator ichidagi yordam matni <span class="help-inline">yoki yordam matn blokini qo‘shing.<p class="help-block">
Har bir piktogrammani qo'shimcha so'rov qilish o'rniga, biz ularni spraytga jamladik - tasvirlarni joylashtirish uchun CSS-dan foydalanadigan bitta fayldagi rasmlar to'plami background-position. Bu biz Twitter.com saytida ishlatadigan usul va u biz uchun yaxshi ishladi.
Boshqa komponentlar kabi barcha piktogramma sinflari .icon-nomlar oralig'i va qamrovini belgilash uchun prefiks bilan jihozlangan. Bu boshqa vositalar bilan ziddiyatlardan qochishga yordam beradi.
Glyphicons bizga ochiq manbali asboblar to'plamidagi Halflings to'plamidan foydalanishga ruxsat berdi, chunki biz bu erda hujjatlarda havola va kreditni taqdim etamiz. Iltimos, loyihalaringizda xuddi shunday qilishni o'ylab ko'ring.
Bootstrap <i>barcha piktogrammalar uchun tegdan foydalanadi, lekin ularda holatlar sinfi yo'q - faqat umumiy prefiks. Foydalanish uchun quyidagi kodni deyarli istalgan joyga joylashtiring:
- <i class = "icon-search" ></i>
Bundan tashqari, teskari (oq) piktogramma uchun uslublar mavjud bo'lib, ular bitta qo'shimcha sinf bilan tayyor:
- <i class = "icon-search icon-white" ></i>
Belgilaringiz uchun tanlash uchun 120 ta sinf mavjud. Faqat <i>kerakli sinflar bilan teg qo'shing va siz o'rnatasiz. Toʻliq roʻyxatni sprites.less da yoki shu yerda, ushbu hujjatda topishingiz mumkin .
Oldindan qisqa ma'lumot berish! Matn satrlari yonida, masalan, tugmalar yoki navbat havolalarida foydalanilganda, <i>tegdan keyin bo'sh joy qoldirishni unutmang.
Belgilar ajoyib, lekin ulardan qayerda foydalanish kerak? Mana bir nechta fikrlar:
Asosan, <i>teg qo'yishingiz mumkin bo'lgan har qanday joyda siz belgi qo'yishingiz mumkin.
Ulardan tugmalar, asboblar panelidagi tugmalar guruhlari, navigatsiya yoki oldindan oʻrnatilgan shakl kiritishlarida foydalaning.