Asosiy CSS

Iskala ustiga, asosiy HTML elementlari yangi, izchil ko'rinish va tuyg'uni ta'minlash uchun kengaytiriladigan sinflar bilan bezatilgan va yaxshilangan.

Sarlavhalar va asosiy nusxasi

Tipografik masshtab

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.

Tana matniga misol

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.

Asosiy korpus nusxasi

Qo'shish orqali xatboshini ajratib ko'rsatish .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

h1. Sarlavha 1

h2. Sarlavha 2

h3. Sarlavha 3

h4. Sarlavha 4

h5. Sarlavha 5
h6. Sarlavha 6

Urg'u, manzil va qisqartma

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

titleKengaytirilgan matn uchun ixtiyoriy atributni qo'shing

.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>

Diqqatdan foydalanish

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.

Misol manzillar

Tegdan qanday foydalanish mumkinligiga ikkita misol <address>:

Twitter, Inc.
795 Folsom Ave, Suite 600
San-Fransisko, CA 94107
P: (123) 456-7890
To'liq ism
[email protected]

Qisqartmalarga misollar

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 .

Blok tirnoq

Element Foydalanish Ixtiyoriy
<blockquote> Boshqa manbadan iqtibos keltirish uchun blok darajasidagi element

citeManba URL manzili uchun atribut qo‘shing

Suzilgan variantlar uchun foydalanish .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 .&mdash;

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  3. <small> Kimdir mashhur </small>
  4. </blockquote>

Blok tirnoqlarga misol

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

Ro'yxatlar

Tartibsiz

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Massada butun son molestie lorem
  • Pretium nisl aliquetdagi facilisis
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • To'g'ri keling
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Uslubsiz

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Massada butun son molestie lorem
  • Pretium nisl aliquetdagi facilisis
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • To'g'ri keling
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Buyurtma qilingan

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Massada butun son molestie lorem
  4. Pretium nisl aliquetdagi facilisis
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Tavsif

<dl>

Tavsif ro'yxatlari
Ta'riflar ro'yxati atamalarni aniqlash uchun juda mos keladi.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida va eget metus.
Malesuada porti
Etiam porta sem malesuada magna mollis euismod.

Gorizontal tavsif

<dl class="dl-horizontal">

Tavsif ro'yxatlari
Ta'riflar ro'yxati atamalarni aniqlash uchun juda mos keladi.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida va eget metus.
Malesuada porti
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

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.

Mos ravishda

Kodning ichki qismlarini bilan o'rab oling <code>.

  1. Misol uchun , <code> bo'limi </ code > inline sifatida o'ralgan bo'lishi kerak .

Asosiy blok

<pre>Kodning bir nechta satri uchun foydalaning . To'g'ri ko'rsatish uchun koddagi har qanday burchakli qavslardan qochishingizga ishonch hosil qiling.

<p>Matn namunasi bu yerda...</p>
  1. <pre>
  2. <p>Matn namunasi bu yerda...</p>
  3. </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.

Google Prettify

Xuddi shu elementni oling <pre>va yaxshilangan renderlash uchun ikkita ixtiyoriy sinf qo'shing.

  1. <p> Namuna matni bu yerda... </p>
  1. <pre class = "prettyprint
  2. linenums" >
  3. <p>Matn namunasi bu yerda...</p>
  4. </pre>

Google-code-prettify-ni yuklab oling va undan qanday foydalanishni bilish uchun readme-ni ko'ring.

Jadvalni belgilash

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
  1. <jadval>
  2. <bosh>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </jadval>

Jadval variantlari

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

Misol jadvallar

1. Standart jadval uslublari

Jadvallar o'qishni ta'minlash va tuzilmani saqlab qolish uchun avtomatik ravishda bir nechta chegaralar bilan stilize qilinadi. 2.0 bilan .tablesinf talab qilinadi.

  1. <jadval sinfi = "jadval" >
  2. </jadval>
# Ism Familiya Foydalanuvchi nomi
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Larri qush @twitter

2. Chiziqli stol

“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.

  1. <stol klassi = "stol jadvali chiziqli" >
  2. </jadval>
# Ism Familiya Foydalanuvchi nomi
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Larri qush @twitter

3. Chegaralangan jadval

Butun stol atrofidagi chegaralarni va estetik maqsadlar uchun yumaloq burchaklarni qo'shing.

  1. <jadval sinfi = "jadval bilan chegaralangan" >
  2. </jadval>
# Ism Familiya Foydalanuvchi nomi
1 Mark Otto @mdo
Mark Otto @getbootstrap
2 Yoqub Tornton @yog'
3 Qush Larri @twitter

4. Quyultirilgan stol

.table-condensedJadval katakchalarini yarmiga (8px dan 4px gacha) kesish uchun sinf qoʻshish orqali jadvallaringizni yanada ixcham qiling .

  1. <stol klassi = "jadval-kondensatlangan jadval" >
  2. </jadval>
# Ism Familiya Foydalanuvchi nomi
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Qush Larri @twitter

5. Ularning barchasini birlashtiring!

Mavjud har qanday sinfdan foydalanib, har xil ko'rinishga erishish uchun har qanday jadval sinflarini birlashtiring.

  1. <stol klassi = "stol jadvali-chiziqli jadval-chegarali stol-kondensatlangan" >
  2. ...
  3. </jadval>
To'liq ismi sharif
# Ism Familiya Foydalanuvchi nomi
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Qush Larri @twitter

Moslashuvchan HTML va CSS

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.

To'rtta tartib kiritilgan

Bootstrap to'rt turdagi shakl tartibini qo'llab-quvvatlaydi:

  • Vertikal (standart)
  • Qidirmoq
  • Mos ravishda
  • Gorizontal

Har xil turdagi shakllar joylashuvi belgilash uchun ba'zi o'zgarishlarni talab qiladi, lekin boshqaruv elementlarining o'zi qoladi va bir xil ishlaydi.

Boshqaruv holatlari va boshqalar

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.

To'rt turdagi shakllar

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

Faqat shakl boshqaruvi yordamida namuna shakllar , qo'shimcha belgilash yo'q

Asosiy shakl

Qo'shimcha belgilarsiz aqlli va engil standart sozlamalar.

Blok darajasidagi yordam matni bu yerda.

  1. <forma sinfi = "yaxshi" >
  2. <label> Yorliq nomi </label>
  3. <kiritish turi = "matn" sinfi = "span3" to'ldiruvchisi = "Biror narsa yozing..." >
  4. <span class = "help-block" > Bu yerda blok darajasidagi yordam matniga misol. </span>
  5. <label class = "checkbox" >
  6. <kiritish turi = "checkbox" > Meni tekshiring
  7. </label>
  8. <button type = "submit" class = "btn" > Submit </button>
  9. </form>

Qidiruv shakli

.form-searchShaklga va .search-queryga qo'shing input.

  1. <forma sinfi = "yaxshi shakl qidirish" >
  2. <kirish turi = "matn" klassi = "kirish-o'rta qidiruv so'rovi" >
  3. <button type = "submit" class = "btn" > Qidiruv tugmasi </button>
  4. </form>

Inline shakl

.form-inlineShakl boshqaruv elementlarining vertikal tekislashi va oralig'ini nozik qo'shing .

  1. <forma sinfi = "quduq shakl-inline" >
  2. <kiritish turi = "matn" sinfi = "kirish-kichik" to'ldiruvchisi = "Elektron pochta" >
  3. <kiritish turi = "parol" klassi = "kirish-kichik" to'ldiruvchisi = "Parol" >
  4. <label class = "checkbox" >
  5. <kiritish turi = "checkbox" > Meni eslab qoling
  6. </label>
  7. <button type = "submit" class = "btn" > Kirish </button>
  8. </form>

Gorizontal shakllar

O'ng tomonda biz qo'llab-quvvatlaydigan barcha standart shakl boshqaruvlari ko'rsatilgan. Bu erda markirovka qilingan ro'yxat:

  • matn kiritish (matn, parol, elektron pochta va boshqalar)
  • belgilash katagi
  • radio
  • tanlang
  • bir nechta tanlash
  • fayl kiritish
  • matn maydoni

Erkin shakldagi matnga qo'shimcha ravishda, har qanday HTML5 matnga asoslangan kiritish xuddi shunday ko'rinadi.

Belgilash misoli

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.

  1. <forma sinfi = "form-gorizontal" >
  2. <maydonlar to'plami>
  3. <legend> Afsona matni </legend>
  4. <div class = "nazorat guruhi" >
  5. <label class = "control-label" for = "input01" > Matn kiritish </label>
  6. <div class = "nazorat" >
  7. <kirish turi = "matn" sinf = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Yordam matni </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Shaklni boshqarish holatlari

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


Shaklni tekshirish

Shuningdek, u xatolar, ogohlantirishlar va muvaffaqiyatlarni tekshirish uslublarini o'z ichiga oladi. Foydalanish uchun xato sinfini atrofga qo'shing .control-group.

  1. <maydonlar to'plami
  2. class = "boshqaruv guruhi xatosi" >
  3. </fieldset>
Bu erda ba'zi qiymat
Nimadir noto‘g‘ri ketgan bo‘lishi mumkin
Iltimos, xatoni tuzating
Voy!
Voy!

Shakl boshqaruvlarini kengaytirish

Kirishlarni oldinga va qo'shish

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.


Belgilash qutilari va radiolar

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 shakllar va qo'shish/oldindan qo'shish

Inline shaklda kiritish yoki qoʻshishdan foydalanish uchun .add-onva inputni boʻsh joysiz bir qatorga qoʻyishni unutmang.


Shakl yordam matni

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">

.span*Kirish o'lchamlari uchun grid tizimidagi bir xil sinflardan foydalaning .

Shuningdek, siz tarmoqqa mos kelmaydigan, sezgir CSS uslublariga moslashtirilmaydigan yoki turli xil boshqaruv turlarini hisobga olmaydigan statik sinflardan foydalanishingiz mumkin (masalan, inputva boshqalar select).

@

Mana yordam matni

.00
Bu yerda koʻproq yordam matni
$ .00

Eslatma: Yorliqlar kattaroq bosish joylari va undan foydalanish mumkin bo'lgan shakl uchun barcha variantlarni o'rab oladi.

Tugma class="" Tavsif
btn Gradientli standart kulrang tugma
btn btn-primary Qo'shimcha vizual og'irlikni ta'minlaydi va tugmalar to'plamidagi asosiy harakatni aniqlaydi
btn btn-info Standart uslublarga muqobil sifatida ishlatiladi
btn btn-success Muvaffaqiyatli yoki ijobiy harakatni bildiradi
btn btn-warning Ushbu harakat bilan ehtiyot bo'lish kerakligini ko'rsatadi
btn btn-danger Xavfli yoki potentsial salbiy harakatni bildiradi
btn btn-inverse Semantik harakat yoki foydalanish bilan bog'lanmagan muqobil quyuq kulrang tugma

Harakatlar uchun tugmalar

Odatda, tugmalar faqat harakatlar uchun ishlatilishi kerak, giperhavolalar esa ob'ektlar uchun ishlatilishi kerak. Masalan, "Yuklab olish" tugmasi, "so'nggi faoliyat" esa havola bo'lishi kerak.

.btnTugma uslublari sinf qo'llanilgan har qanday narsaga qo'llanilishi mumkin . Biroq, odatda siz ularni faqat <a>va <button>elementlarga qo'llashni xohlaysiz.

O'zaro brauzer muvofiqligi

IE9 yumaloq burchaklardagi fon gradientlarini kesmaydi, shuning uchun biz uni olib tashlaymiz. Tegishli, IE9 o'chirilgan buttonelementlarni jankifikatsiya qiladi va biz tuzatib bo'lmaydigan yomon matn soyasi bilan matnni kulrang qiladi.

Bir nechta o'lchamlar

Kattaroq yoki kichikroq tugmalarni xohlaysizmi? Ikki qoʻshimcha oʻlcham uchun .btn-large, .btn-small, yoki qoʻshing ..btn-mini


O'chirilgan holat

O'chirilgan tugmalar .disableduchun havolalarga sinf va elementlar uchun disabledatribut qo'shing.<button>

Asosiy havola Havola

Oldindan qisqa ma'lumot berish! Biz .disabledbu erda umumiy sinfga o'xshash yordamchi sinf sifatida foydalanamiz .active, shuning uchun hech qanday prefiks talab qilinmaydi.

Bitta sinf, bir nechta teglar

Sinfdan .btn, <a>, <button>yoki <input>elementda foydalaning.

Havola
  1. <a class = "btn" href = "" > Havola </a>
  2. <button class = "btn" type = "yuborish" >
  3. Tugma
  4. </button>
  5. <kiritish klassi = "btn" turi = "tugma"
  6. qiymat = "Kirish" >
  7. <kiritish sinfi = "btn" turi = "yuborish"
  8. qiymat = "Yuborish" >

Eng yaxshi amaliyot sifatida, brauzerlar o'rtasida ko'rsatilishini ta'minlash uchun elementni kontekstingizga moslashtirishga harakat qiling. Agar sizda bo'lsa , tugmachangiz uchun inputfoydalaning .<input type="submit">

  • ikonkali oyna
  • piktogramma-musiqa
  • piktogramma-qidiruv
  • piktogramma-konvert
  • piktogramma-yurak
  • ikona-yulduz
  • belgi-yulduz-bo'sh
  • ikonka foydalanuvchisi
  • piktogramma
  • katta piktogramma
  • ikonka-th
  • piktogramma ro'yxati
  • belgi-ok
  • belgisini olib tashlash
  • piktogramma-kattalashtirish
  • ikonka-kichraytirish
  • belgisini o'chirish
  • belgi-signal
  • piktogramma tishli
  • ikonka-axlat
  • ikona-uy
  • piktogramma fayli
  • piktogramma vaqti
  • belgi-yo'l
  • icon-yuklab olish-alt
  • piktogramma-yuklab olish
  • piktogramma-yuklash
  • belgisi-kiruvchi
  • piktogramma-o'yin-doira
  • ikonka-takrorlash
  • belgini yangilash
  • icon-list-alt
  • ikona qulfi
  • piktogramma-bayroq
  • icon-naushniklar
  • piktogramma ovoz balandligini o'chirish
  • piktogramma-tovushni pasaytirish
  • piktogramma ovoz balandligi
  • icon-qrkod
  • piktogramma-shtrix-kod
  • piktogramma belgisi
  • piktogramma teglari
  • ikona kitobi
  • belgi-xatcho‘p
  • piktogramma chop etish
  • piktogramma-kamera
  • ikonka-shrift
  • piktogramma qalin
  • belgi-kursiv
  • piktogramma-matn balandligi
  • piktogramma-matn-kengligi
  • piktogramma-chapga tekislash
  • piktogramma markazga tekislash
  • belgini tekislash-o'ngga
  • ikonkani tekislash-tozalash
  • piktogramma ro'yxati
  • ikonka-chekinti-chap
  • belgi-chiziq-o'ng
  • icon-facetime-video
  • ikonka-rasm
  • piktogramma-qalam
  • belgi-xarita-marker
  • belgini sozlash
  • piktogramma rangi
  • belgini tahrirlash
  • ikonka almashish
  • ikonka-tekshirish
  • piktogramma-harakat
  • orqaga qadam belgisi
  • ikonka-tez-orqaga
  • piktogramma - orqaga
  • piktogramma o'ynash
  • piktogramma-pauza
  • belgisi-stop
  • piktogramma oldinga
  • piktogramma-tezkor oldinga
  • oldinga qadam belgisi
  • belgini chiqarish
  • piktogramma-chevron-chap
  • piktogramma-chevron-o'ng
  • belgisi-plyus-belgisi
  • minus belgisi
  • belgini olib tashlash belgisi
  • belgisi-ok-belgisi
  • ikonka-savol belgisi
  • ikonka-ma'lumot belgisi
  • icon-skrinshot
  • belgi-o'chirish-doira
  • belgisi-ok-doira
  • ikonka-ban-doira
  • ikonka-strelka-chapga
  • ikonka-strelka-o'ngga
  • piktogramma-yuqoriga
  • piktogramma-pastga
  • icon-share-alt
  • ikonka o'lchamini o'zgartirish-to'liq
  • ikonka o'lchamini o'zgartirish-kichik
  • icon-plyus
  • piktogramma-minus
  • piktogramma yulduzcha
  • belgi-undov belgisi
  • ikonka-sovg'a
  • piktogramma-barg
  • ikona-olov
  • ikonka-ko'z ochiq
  • ikonka-ko'z-yopish
  • belgi-ogohlantirish belgisi
  • piktogramma-samolyot
  • piktogramma-taqvim
  • ikonka-tasodifiy
  • ikonka-sharh
  • piktogramma magnit
  • piktogramma-chevron
  • piktogramma-chevron-pastga
  • icon-retvit
  • ikonka-savdo
  • piktogramma-papka-yopish
  • piktogramma-papka-ochish
  • belgi o'lchamini o'zgartirish-vertikal
  • piktogramma o'lchamini o'zgartirish-gorizontal
  • belgi-hdd
  • ikona - buqa
  • belgi-qo'ng'iroq
  • belgi-sertifikat
  • piktogramma bosh barmog'i
  • piktogramma-bosh barmog'i-pastga
  • belgi-qo'l-o'ng
  • ikonka - chap qo'l
  • piktogramma-qo'l yuqoriga
  • piktogramma-pastga
  • ikonka-doira-strelka-o'ngga
  • piktogramma-aylana-strelka-chapga
  • piktogramma-aylana-yuqoriga
  • piktogramma-aylana-o'q-pastga
  • ikona-globus
  • piktogramma kaliti
  • piktogramma vazifalari
  • ikona filtri
  • ikonka-portfel
  • ikonka - to'liq ekran

Sprite sifatida yaratilgan

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.

Qanday ishlatish

Bootstrap <i>barcha piktogrammalar uchun tegdan foydalanadi, lekin ularda holatlar sinfi yo'q - faqat umumiy prefiks. Foydalanish uchun quyidagi kodni deyarli istalgan joyga joylashtiring:

  1. <i class = "icon-search" ></i>

Bundan tashqari, teskari (oq) piktogramma uchun uslublar mavjud bo'lib, ular bitta qo'shimcha sinf bilan tayyor:

  1. <i class = "icon-search icon-white" ></i>

Belgilaringiz uchun tanlash uchun 140 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.

Foydalanish holatlari

Belgilar ajoyib, lekin ulardan qayerda foydalanish kerak? Mana bir nechta fikrlar:

  • Yon paneldagi navigatsiya uchun ingl
  • Faqat ikonaga asoslangan navigatsiya uchun
  • Harakatning ma'nosini etkazishga yordam beradigan tugmalar uchun
  • Foydalanuvchining manzilida kontekstni almashish uchun havolalar bilan

Asosan, <i>teg qo'yishingiz mumkin bo'lgan har qanday joyda siz belgi qo'yishingiz mumkin.

Misollar

Ulardan tugmalar, asboblar panelidagi tugmalar guruhlari, navigatsiya yoki oldindan oʻrnatilgan shakl kiritishlarida foydalaning.