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: @baseFontSize
va @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> |
Matn parchasini muhim bilan ta'kidlash uchun | Yo'q |
<em> |
Stressli matn parchasini ta'kidlash uchun | Yo'q |
<abbr> |
Hoverda kengaytirilgan versiyani ko'rsatish uchun qisqartmalar va qisqartmalarni o'rab oladi | title Kengaytirilgan matn uchun ixtiyoriy qo'shing |
<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>
:
Qisqartmalar bosh harfli matn va engil nuqtali pastki chegara bilan bezatilgan. Shuningdek, ular hoverda yordam kursoriga ega, shuning uchun foydalanuvchilar kursor ustida biror narsa ko'rsatilishini ko'rsatadilar.
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-left va .pull-right sinflar |
<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 uchun 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>
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-scrollable
350px 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 |
td Barcha va th elementlar 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 .table
sinf talab qilinadi.
- <jadval sinfi = "jadval" >
- …
- </jadval>
# | Ism | Familiya | Til |
---|---|---|---|
1 | Mark | Otto | CSS |
2 | Yoqub | Tornton | Javascript |
3 | Stu | Tish | HTML |
“Zebra” chizig‘ini qo‘shish orqali jadvallaringizga biroz zavqlaning – shunchaki .table-striped
sinfni qo‘shing.
Eslatma: Chiziqli jadvallar :nth-child
CSS selektoridan foydalanadi va IE7-IE8 da mavjud emas.
- <stol klassi = "stol jadvali chiziqli" >
- …
- </jadval>
# | Ism | Familiya | Til |
---|---|---|---|
1 | Mark | Otto | CSS |
2 | Yoqub | Tornton | Javascript |
3 | Stu | Tish | HTML |
Butun stol atrofidagi chegaralarni va estetik maqsadlar uchun yumaloq burchaklarni qo'shing.
- <jadval sinfi = "jadval bilan chegaralangan" >
- …
- </jadval>
# | Ism | Familiya | Til |
---|---|---|---|
1 | Mark Otto | CSS | |
2 | Yoqub | Tornton | Javascript |
3 | Stu | Tish | |
3 | Brosef | Stalin | HTML |
.table-condensed
Jadval katakchalarini yarmiga (8px dan 4px gacha) kesish uchun sinf qoʻshish orqali jadvallaringizni yanada ixcham qiling .
- <stol klassi = "jadval-kondensatlangan jadval" >
- …
- </jadval>
# | Ism | Familiya | Til |
---|---|---|---|
1 | Mark | Otto | CSS |
2 | Yoqub | Tornton | Javascript |
3 | Stu | Tish | HTML |
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>
# | Ism | Familiya | Til |
---|---|---|---|
1 | Mark | Otto | CSS |
2 | Yoqub | Tornton | Javascript |
3 | Stu | Tish | HTML |
4 | Brosef | Stalin | HTML |
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 |
v2.0 bilan biz shakl uslublari uchun engilroq va aqlli standart sozlamalarga egamiz. Hech qanday qo'shimcha belgilash yo'q, faqat shakl boshqaruvlari.
- <forma sinfi = "yaxshi" >
- <label> Yorliq nomi </label>
- <kiritish turi = "matn" sinfi = "span3" to'ldiruvchisi = "Biror narsa yozing..." >
- <span class = "help-inline" > Bog'langan yordam matni! </span>
- <label class = "checkbox" >
- <kiritish turi = "checkbox" > Meni tekshiring
- </label>
- <button type = "submit" class = "btn" > Submit </button>
- </form>
Standart WebKit uslublarini aks ettirgan holda, .form-search
qo'shimcha yumaloq qidiruv maydonlarini qo'shing.
- <forma sinfi = "yaxshi shakl qidirish" >
- <kirish turi = "matn" klassi = "kirish-o'rta qidiruv so'rovi" >
- <button type = "submit" class = "btn" > Qidiruv tugmasi </button>
- </form>
Kirishlar boshlash uchun blok darajasidir. .form-inline
va uchun .form-horizontal
biz inline-blokdan foydalanamiz.
- <forma sinfi = "quduq shakl-inline" >
- <kiritish turi = "matn" sinfi = "kirish-kichik" to'ldiruvchisi = "Elektron pochta" >
- <kiritish turi = "parol" klassi = "kirish-kichik" to'ldiruvchisi = "Parol" >
- <button type = "submit" class = "btn" > O'tish </button>
- </form>
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 .controls
sinflar talab qilinadi.
- <forma sinfi = "form-gorizontal" >
- <maydon 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>
Chap tomonda biz qo'llab-quvvatlaydigan barcha standart shakl boshqaruvlari ko'rsatilgan. Belgilangan ro'yxat:
V1.4 gacha, Bootstrap standart shakl uslublari gorizontal tartibdan foydalangan. Bootstrap 2 yordamida biz ushbu cheklovni har qanday shakl uchun yanada oqilona va kengaytiriladigan standart sozlamalarga ega bo'lish uchun olib tashladik.
disabled
Bootstrap brauzer tomonidan qo'llab-quvvatlanadigan fokuslangan va holatlar uchun uslublarni o'z ichiga oladi . Biz standart Webkitni olib tashlaymiz va uning o'rniga outline
a 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 = "nazorat 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 .inline
biron biriga qo'shing .checkbox
yoki .radio
bajarasiz.
Inline shaklda kiritish yoki qoʻshishdan foydalanish uchun .add-on
va input
ni 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">
:after
. Hujjatlarda piktogramma o'lchamini ta'kidlash uchun sichqonchani ko'targanda och qizil fon rangini ko'rsatamiz.
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 da 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.
v2.0.1 bilan biz <i>
barcha piktogrammalarimiz uchun tegdan foydalanishni tanladik, 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. To'g'ri sinflar bilan teg qo'shing <i>
va siz o'rnatasiz. Toʻliq roʻyxatni sprites.less da yoki shu yerda, ushbu hujjatda topishingiz mumkin .
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.