Tez boshlash misollari

Tezkor andozalar kerakmi? Biz birlashtirgan asosiy misollarni ko'rib chiqing:

Standart tarmoq

Bootstrap-ning bir qismi sifatida taqdim etilgan standart tarmoq tizimi kengligi 940 piksel bo'lgan 16 ustunli panjaradir. Bu mashhur 960 grid tizimining ta'mi, lekin chap va o'ng tomonlarda qo'shimcha chekka/to'ldirishsiz.

To'r belgisiga misol

Bu erda ko'rsatilganidek, asosiy tartib ikkita "ustun" bilan yaratilishi mumkin, ularning har biri biz panjara tizimimizning bir qismi sifatida belgilagan 16 ta asosiy ustunlar sonini qamrab oladi. Ko'proq o'zgarishlar uchun quyidagi misollarni ko'ring.

<div class = "satr" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

Uyali ustunlar

.rowAgar kerak bo'lsa , mavjud ustun ichida kontent yarating .

O'rnatilgan ustunlarga misol

<div class = "satr" > 
  <div class = "span12" > 
    Ustunning 1-darajasi
    <div class = "satr" > 
      <div class = "span6" > 
        2-daraja
      </div>
      <div class = "span6" > 
        2-daraja
      </div>
    </div>
  </div>
</div>

O'z panjarangizni aylantiring

Bootstrap-ga standart 940px panjara tizimini sozlash uchun bir nechta o'zgaruvchilar o'rnatilgan. Bir oz moslashtirish bilan siz ustunlar o'lchamlarini, ularning oluklarini va ular joylashgan konteynerni o'zgartirishingiz mumkin.

To'r ichida

Grid tizimini o'zgartirish uchun zarur bo'lgan o'zgaruvchilar hozirda hammasi ichida joylashgan variables.less.

Endi sozlash uchun

To'rni o'zgartirish uchta @grid-*o'zgaruvchini o'zgartirish va Less fayllarini qayta kompilyatsiya qilishni anglatadi.

Bootstrap 24 tagacha ustunli grid tizimini boshqarish uchun jihozlangan; sukut bo'yicha atigi 16. Sizning panjara o'zgaruvchilaringiz 24 ustunli to'rga moslashtirilgan ko'rinishi.

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;   

Qayta kompilyatsiya qilingandan so'ng, siz o'rnatasiz!

Ruxsat etilgan tartib

Yagona tomonidan taqdim etilgan deyarli har qanday veb-sayt yoki sahifa uchun standart va oddiy 940px kenglikdagi, markazlashtirilgan tartib <div.container>.

<tana>
  <div class = "konteyner" > 
    ...
  </div>
</body>

Suyuqlikning joylashuvi

Minimal va maksimal kengliklari va chap yon panelli muqobil, moslashuvchan suyuqlik sahifa tuzilishi. Ilovalar va hujjatlar uchun juda yaxshi.

<tana>
  <div class = "konteyner-suyuqlik" > 
    <div class = "yon panel" > 
      ...
    </div>
    <div class = "content" > 
      ...
    </div>
  </div>
</body>

Sarlavhalar va nusxa

Veb-sahifalaringizni tizimlashtirish uchun standart tipografik ierarxiya.

Butun tipografik panjara bizning variables.less faylimizdagi ikkita Less oʻzgaruvchiga asoslangan: @basefontva @baseline. 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.

h1. Sarlavha 1

h2. Sarlavha 2

h3. Sarlavha 3

h4. Sarlavha 4

h5. Sarlavha 5

h6. Sarlavha 6

Misol paragraf

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.

Misol sarlavhada kichik sarlavha bor…

Boshqa. elementlar

Urg'u, manzillar va qisqartmalardan foydalanish

<strong> <em> <address> <abbr>

Qachon foydalanish kerak

Ta'kid teglari ( <strong>va <em>) so'z yoki iboraning atrofdagi nusxasiga nisbatan qo'shimcha ahamiyatini yoki urg'usini ko'rsatish uchun ishlatilishi kerak. <strong>Muhimlik va stressni<em> ta'kidlash uchun foydalaning .

Bir paragrafda urg'u

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:<b> HTML5 da va teglardan foydalanish hali ham <i>ma'qul va ular mos ravishda qalin va kursiv bo'lishi shart emas (garchi ko'proq semantik element bo'lsa, undan foydalaning). <b>qo'shimcha ahamiyatga ega bo'lmasdan so'z yoki iboralarni ajratib ko'rsatish uchun mo'ljallangan <i>, asosan ovoz, texnik atamalar va boshqalar uchun.

Manzillar

Element <address>o'zining eng yaqin ajdodi yoki butun ish qismi uchun aloqa ma'lumotlari uchun ishlatiladi. Buni qanday ishlatish mumkinligiga ikkita misol:

Eslatma: Tarkibni toʻgʻri tuzish uchun har bir <address>satr qator uzilishi ( <br />) bilan tugashi yoki blok darajasidagi tegga (masalan, ) oʻralgan boʻlishi kerak.<p>

Qisqartmalar

Qisqartmalar va qisqartmalar uchun <abbr>tegdan foydalaning ( HTML5<acronym> da eskirgan ). Qisqa shaklni teg ichiga qo'ying va to'liq ism uchun sarlavha qo'ying.

Blok tirnoq

<blockquote> <p> <small>

Qanday qilib iqtibos keltirish kerak

<blockquote>Blok qo'shtirnoq qo'shish uchun atrofga o'rang <p>va <small>teglar. <small>Manbaga iqtibos keltirish uchun elementdan foydalaning va siz undan —oldin chiziqcha olasiz.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Doktor Yuliy Xibbert

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small> Doktor Yuliy Xibbert </small>
</blockquote>

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

Tavsifdl

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.

Kod

<code> <pre>

Ikkita oddiy teg bilan kodingizni uslubga moslashtiring. Javascript orqali yanada ajoyibroq bo'lish uchun Google kodini Prettify kutubxonasiga kiriting va siz tayyor bo'ldingiz.

Kod taqdim etilmoqda

Kod, bloklar yoki faqat inline parchalari faqat o'ng tegga o'ralgan holda uslub bilan ko'rsatilishi mumkin. Ko'p qatorli kod bloklari uchun <pre>elementdan foydalaning. Inline kod uchun <code>elementdan foydalaning.

<div>
  <h1>Sarlavha</h1>
  <p>Bu yerda nimadir...</p>
</div>

<div> <h1> Sarlavha </h1> <p> Bu yerda nimadir... </p> </div>
  
  

Inline teglar

<span class="label">

Tana matningizdagi har qanday iboraga e'tibor qarating yoki belgilang.

Har qanday narsani belgilang

Hech qachon o'sha ajoyib yangilaridan biriga kerak edi ! yoki kod yozishda muhim bayroqlar? Xo'sh, endi sizda ular bor. Bu erda sukut bo'yicha kiritilgan narsalar:

Media tarmog'i

Har xil oʻlchamdagi eskizlarni HTML hajmi past va minimal uslublarga ega sahifalarda koʻrsatish.

Eskizlarga misol

Kichik rasmlar .media-gridhar qanday o'lchamda bo'lishi mumkin, lekin ular to'g'ridan-to'g'ri o'rnatilgan Bootstrap grid tizimiga joylashtirilganda yaxshi ishlaydi. 90, 210 va 330 kabi tasvir kengliklari .span2, .span4, va .span6ustun o'lchamlarini tenglashtirish uchun bir necha piksel to'ldirish bilan birlashtiriladi.

Katta

O'rta

Kichik

Ularni kodlash

Media tarmoqlaridan foydalanish oson va belgilash tomonida juda oddiy. Ularning o'lchamlari faqat kiritilgan rasmlarning o'lchamiga asoslanadi.

<ul class = "media-grid" > 
  <li>
    <a href = "#" > 
      <img sinf = "eskiz" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img sinf = "eskiz" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

Qurilish stollari

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Jadvallar juda yaxshi - ko'p narsalar uchun. Ajoyib jadvallar foydali, kengaytiriladigan va o'qilishi mumkin (kod darajasida) bo'lishi uchun bir oz belgilash sevgisi kerak. Bu erda yordam beradigan bir nechta maslahatlar mavjud.

Ustun sarlavhalarini har doim <thead>ierarxiya <thead>> <tr>> bo'ladigan tarzda o'rang <th>.

Ustun sarlavhalariga o'xshab, jadvalingizning barcha asosiy mazmuni <tbody>ierarxiyangiz <tbody>> <tr>> bo'lishi uchun o'ralgan bo'lishi kerak <td>.

Misol: standart jadval uslublari

Barcha jadvallar o'qilishi va tuzilmani saqlab qolish uchun faqat asosiy chegaralar bilan avtomatik tarzda shakllantiriladi. Qo'shimcha sinflar yoki atributlarni qo'shishning hojati yo'q.

<jadval>
  ...
</jadval>

Misol: siqilgan stol

Qattiqroq joylarda ko'proq ma'lumot talab qiladigan jadvallar uchun to'ldirishni yarmiga qisqartiradigan quyultirilgan lazzatdan foydalaning. Bundan tashqari, standart jadval uslublari kabi chegaralar va zebra-chiziqlar bilan birgalikda ishlatilishi mumkin.

Misol: chegaralangan jadval

Jadvallaringizni burchaklarini yaxlitlash va har tomondan hoshiyalar qo'shish orqali ularni biroz chiroyliroq ko'ring.

<jadval sinfi = "chegaralangan jadval" > 
  ...
</jadval>

Misol: zebra chiziqli

“Zebra” chizig‘ini qo‘shish orqali jadvallaringizga biroz zavqlaning – shunchaki .zebra-stripedsinfni qo‘shing.

Eslatma: Zebra-striping - bu IE8 va undan pastroq eski brauzerlar uchun mavjud bo'lmagan progressiv takomillashtirish.

<stol sinfi = "zebra-chiziqli" > 
  ...
</jadval>

Misol: TableSorter.js bilan zebra-chiziqli

Oldingi misolni olib, biz jQuery va Tablesorter plaginlari orqali tartiblash funksiyalarini ta'minlash orqali jadvallarimizning foydaliligini yaxshilaymiz . Turni o'zgartirish uchun istalgan ustun sarlavhasini bosing.

<script src = "js/jquery/jquery.tablesorter.min.js" >></script> 
<skript > 
  $ ( funktsiya () { 
    $ ( "jadval#sortTableExample" ). jadval saralovchi ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<stol sinfi = "zebra-chiziqli" > 
  ...
</jadval>

Standart uslublar

Barcha shakllarga ularni o'qilishi mumkin va kengaytiriladigan tarzda taqdim etish uchun standart uslublar beriladi. Uslublar matn kiritish, tanlash roʻyxatlari, matn maydonlari, radio tugmalar va belgilash katakchalari va tugmalar uchun taqdim etiladi.

Yig'ilgan shakllar

Shaklingizning HTML-ga qo'shing .form-stackedva siz ularning maydonlarining chap tomonida emas, tepasida teglarga ega bo'lasiz. Agar sizning shakllaringiz qisqa bo'lsa yoki sizda og'irroq shakllar uchun ikkita ustun bo'lsa, bu juda yaxshi ishlaydi.

Shakl maydoni o'lchamlari

Belgilash uchun bir nechta sinflarni qo'shish orqali istalgan shakl input, select, yoki kenglikni moslashtiring .textarea

1.3.0 versiyasidan boshlab biz shakl elementlari uchun gridga asoslangan o'lcham sinflarini qo'shdik. Iltimos, bulardan mavjud .mini, .smallva hokazo sinflar ustida foydalaning.

Tugmalar

Konventsiya sifatida tugmalar amallar uchun, havolalar esa ob'ektlar uchun ishlatiladi. Masalan, "Yuklab olish" tugmasi va "so'nggi faoliyat" havola bo'lishi mumkin.

Barcha tugmalar sukut bo'yicha ochiq kulrang uslubda bo'ladi, lekin turli xil rang uslublari uchun bir qator funktsional sinflar qo'llanilishi mumkin. Bu sinflarga ko'k .primarysinf, ochiq-ko'k .infosinf, yashil .successsinf va qizil .dangersinf kiradi.

Misol tugmalari

Tugma uslublari qo'llaniladigan har qanday narsaga .btnqo'llanilishi mumkin. Odatda siz ularni faqat <a>, <button>, va tanlangan <input>elementlarga qo'llashni xohlaysiz. Bu shunday ko'rinadi:

Muqobil o'lchamlar

Kattaroq yoki kichikroq tugmalarni xohlaysizmi? Qabul qiling!

O'chirilgan holat

Faol bo'lmagan yoki biron bir sababga ko'ra ilova tomonidan o'chirilgan tugmalar uchun o'chirilgan holatdan foydalaning. Bu .disabledhavolalar va elementlar :disableduchun .<button>

Havolalar

Tugmalar

Nima u

Bizning yuqori panelimiz - bu veb-sayt logotipi yoki nomi, asosiy navigatsiya va qidiruv shaklini o'z ichiga olgan sobit panel.

Moslashuvchan

Barcha elementlar va yuqori paneldagi barcha elementlar ixtiyoriy. Siz logotip/nom, navbatma-navbat, qidiruv va ikkinchi darajali navbatni yoki ularning har qanday kombinatsiyasini qo'shishni tanlashingiz mumkin.

Ochiladigan menyular kiritilgan

Asosiy navigatsiyaning bir qismi sifatida biz sizning navbatingizga ochiladigan menyularni qo'shish imkoniyatini qo'shdik. Bu qanday bajarilganini ko'rish uchun yuqoridagi ikkinchi navbatni tekshiring (o'ngga tekislangan). Ochiladigan liteglar .activejoriy sahifa tanlovini ko'rsatishni ham qo'llab-quvvatlaydi.

Tabletkalar va tabletkalar

yordamida oddiy ikkinchi darajali navigatsiya yarating <ul>. Tegishli sinfni qo'shish orqali yorliqlar yoki tabletkalarni almashtiring.

Hisob sozlamalari sahifalari kabi kontentning quyi boʻlimlari va oʻxshash kontent sahifalari oʻrtasida almashish uchun foydalanuvchi vaqt jadvallari uchun juda yaxshi. Yorliqli yoki hapli uslublarda mavjud.

Asosiy yorliqlarga misol

Yorliqlar oddiy navigatsiya sifatida (tashqi sahifalarni bir xil yorliqda yuklash) yoki kontent panellarini almashtirish uchun yorliqli kontent maydonlari sifatida ishlatilishi mumkin. Bizda ikkinchisini birlashtirish uchun ishlatilishi mumkin bo'lgan tab plaginlari mavjud.

• Uy
• Profil
• Xabarlar
• Sozlamalar
• Aloqa
• Ochiladigan ro'yxat
  • Ikkilamchi havola
  • Bu yerda boshqa narsa
  • Boshqa havola

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Bosh sahifa </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Xabarlar </a></li> 
  <li><a href = "#" > Sozlamalar </a></li> 
  <li><a href = "#" > Kontakt </a></li> 
</ul>

Asosiy tabletkalarga misol

• Uy
• Profil
• Xabarlar
• Sozlamalar
• Aloqa

<ul class = "tabletkalar" > 
  <li class = "active" ><a href = "#" > Bosh sahifa </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Xabarlar </a></li> 
  <li><a href = "#" > Sozlamalar </a></li> 
  <li><a href = "#" > Kontakt </a></li> 
</ul>

Non bo'laklari

Breadcrumb navigatsiyasi foydalanuvchilarga ilova yoki sayt ichida qaerdaligini ko'rsatish usuli sifatida ishlatiladi, lekin asosiy navigatsiya uchun emas.

• Uy

• Bosh sahifa /
• O'rta sahifa

• Bosh sahifa /
• O'rta sahifa /
• Boshqasi

• Bosh sahifa /
• O'rta sahifa /
• Yana biri /
• Siz bu yerdasiz

<ul class = "non crumb" > 
  <li><a href = "#" > Bosh sahifa </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > O‘rta sahifa </a> <span class = "divider" > / </span></li>   
  <li><a  href = "#" > Yana biri </a> <span class = "divider" > / </span></li>  
  <li class = "active" > Siz shu yerdasiz </li> 
</ul>

Sahifalar

Rdio-dan ilhomlangan ultra sodda va minimal uslubdagi sahifalash. Katta blokni o'tkazib yuborish qiyin, osongina kengaytiriladi va katta bosish joylarini ta'minlaydi.

<div class = "sahifalash" > 
  <ul>
    <li class = "oldingi o'chirilgan" ><a href = "#" > ← Oldingi </a></li>  
    <li class = "faol" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 ​​</a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li class = "keyingi" ><a href = "#" > Keyingi → </a></li>  
  </ul>
</div>

Asosiy ogohlantirishlar

.alert-message

Harakatning muvaffaqiyatsizligi, mumkin bo'lgan muvaffaqiyatsizligi yoki muvaffaqiyatini ta'kidlash uchun bir qatorli xabarlar. Shakllar uchun ayniqsa foydali.

Javascriptni oling »

Misol kod

<div class = "ogohlantirish xabari" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Muqaddas guakamol! </strong> O'zingizni tekshiring, siz unchalik yaxshi emassiz. </p>
</div>

Xabarlarni bloklash

.alert-message.block-message

Bir oz tushuntirishni talab qiladigan xabarlar uchun bizda paragraf uslubidagi ogohlantirishlar mavjud. Ular uzoqroq xato xabarlarini ko'tarish, foydalanuvchini kutilayotgan harakat haqida ogohlantirish yoki sahifaga ko'proq e'tibor berish uchun ma'lumotlarni taqdim etish uchun juda mos keladi.

Javascriptni oling »

Misol kod

<div class = "alert-xabar blok-xabar ogohlantirish" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Muqaddas guakamol! Bu ogohlantirish! </strong> O'zingizni tekshiring, siz unchalik yaxshi emassiz. Nulla vitae elit libero, pharetra augue. To'g'ridan-to'g'ri commodo cursus magna, scelerisque nisl consectetur va boshqalar. </p>
  <div class = "alert-actions" > 
    <a class = "btn small" href = "#" > Ushbu amalni bajaring </a> <a class = "btn small" href = "#" > Yoki buni bajaring </a>     
  </div>
</div>

Modallar

Modallar - dialoglar yoki yorug'lik qutilari - fon kontekstini saqlab qolish muhim bo'lgan holatlarda kontekstli harakatlar uchun juda yaxshi.

Javascriptni oling »

Maslahat

Twipsies chalkash foydalanuvchiga yordam berish va ularni to'g'ri yo'nalishga ko'rsatish uchun juda foydali.

Javascriptni oling »

Popoverlar

Tartibga ta'sir qilmasdan sahifaga subtekst ma'lumotlarini taqdim etish uchun popoverlardan foydalaning.

Javascriptni oling »

Ishni boshlash

JavaScript-ni Bootstrap kutubxonasi bilan integratsiya qilish juda oson. Quyida biz asoslarni ko'rib chiqamiz va sizga boshlash uchun ajoyib plaginlarni taqdim etamiz!

Javascript hujjatlarini koʻrish »

Nima kiritilgan

jQuery va Ender bilan ishlaydigan yangi maxsus plaginlar yordamida Bootstrap-ning birlamchi komponentlarini hayotga olib keling . Biz ularni maxsus rivojlanish ehtiyojlaringizga mos ravishda kengaytirish va o'zgartirishingizni tavsiya qilamiz.

Javascript kerakmi?

Yoq! Bootstrap birinchi navbatda CSS kutubxonasi sifatida yaratilgan. Ushbu javascript kiritilgan uslublar ustiga asosiy interaktiv qatlamni taqdim etadi.

Biroq, JavaScript-ga muhtoj bo'lganlar uchun biz Bootstrap-ni javascript bilan qanday integratsiya qilishni tushunishga yordam berish va sizga darhol asosiy funksionallik uchun tez, engil variantni taqdim etish uchun yuqoridagi plaginlarni taqdim etdik.

Qo'shimcha ma'lumot olish va ba'zi jonli demolarni ko'rish uchun plagin hujjatlari sahifamizga qarang .