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'lchamini, 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 preboot.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 preboot.less faylimizdagi ikkita Less o'zgaruvchisiga 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'qishni ta'minlash 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: 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

Har qanday shaklni moslashtiring input, selectyokitextareaBelgilash uchun bir nechta sinflarni qo'shish orqali

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 mos keladi. Yorliqli yoki hapli uslublarda 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>

• 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 »

Example code

<div class="alert-message block-message warning">
  <a class="close" href="#">×</a>
  <p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
  <div class="alert-actions">
    <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
  </div>
</div>

Modals

Modals—dialogs or lightboxes—are great for contextual actions in situations where it’s important that the background context be maintained.

Get the javascript »

Tooltips

Twipsies are super useful for aiding a confused user and pointing them in the right direction.

Get the javascript »

Popovers

Use popovers to provide subtextual information to a page without affecting layout.

Get the javascript »

Getting started

Integrating javascript with the Bootstrap library is super easy. Below we go over the basics and provide you with some awesome plugins to get you started!

View javascript docs »

What's included

Bring some of Bootstrap's primary components to life with new custom plugins that work with jQuery and Ender. We encourage you to extend and modify them to fit your specific development needs.

Is javascript necessary?

Nope! Bootstrap is designed first and foremost to be a CSS library. This javascript provides a basic interactive layer on top of the included styles.

However, for those who do need javascript, we've provided the plugins above to help you understand how to integrate Bootstrap with javascript and to give you a quick, lightweight option for the basic functionality right away.

For more information and to see some live demos, please refer to our plugin documentation page.