Bootstrap

Bootstrap kengaytirilmoqda

Kiritilgan uslublar va komponentlar, shuningdek, LESS o'zgaruvchilari va miksinlaridan foydalanish uchun Bootstrap-ni kengaytiring.

Oldindan qisqa ma'lumot berish! Bu hujjatlar 2.3.2 versiyasi uchun mo‘ljallangan bo‘lib, u endi rasman qo‘llab-quvvatlanmaydi. Bootstrap-ning so'nggi versiyasini tekshiring!

LESS bilan qurilgan

Kamroq CSS

Bootstrap LESS asosida yaratilgan bo'lib, bizning yaxshi do'stimiz Aleksis Sellier tomonidan yaratilgan dinamik uslublar jadvali tili . Bu tizimga asoslangan CSS-ni ishlab chiqishni tezroq, oson va qiziqarli qiladi.

Nega KAM?

Bootstrap yaratuvchilaridan biri bu haqda qisqacha blog postini yozdi, bu erda qisqacha bayon qilingan:

  • Bootstrap Sass bilan solishtirganda Less bilan ~6x tezroq kompilyatsiya qiladi
  • JavaScript-da kamroq yozilgan, bu bizga Ruby bilan Sass bilan solishtirganda sho'ng'ish va tuzatishni osonlashtiradi.
  • Kamroq bu ko'proq; Biz o'zimizni CSS-ni yozayotgandek his qilishni va Bootstrap-ni hamma uchun qulay qilishimizni xohlaymiz.

Nimalar kiritilgan?

CSS-ning kengaytmasi sifatida LESS o'zgaruvchilarni, qayta foydalanish mumkin bo'lgan kod parchalari uchun miksinlarni, oddiy matematika uchun operatsiyalarni, joylashtirish va hatto rang funktsiyalarini o'z ichiga oladi.

Ko'proq ma'lumot olish

Qo'shimcha ma'lumot olish uchun http://lesscss.org/ rasmiy veb-saytiga tashrif buyuring .

Bootstrap-ni Less bilan kompilyatsiya qilish

Bizning CSS-miz Less bilan yozilganligi va o'zgaruvchilar va miksinlardan foydalanganligi sababli, uni yakuniy ishlab chiqarishni amalga oshirish uchun kompilyatsiya qilish kerak. Mana qanday qilib.

Eslatma: Agar siz o'zgartirilgan CSS bilan GitHub-ga tortish so'rovini yuborayotgan bo'lsangiz , ushbu usullardan biri orqali CSS-ni qayta kompilyatsiya qilishingiz kerak .

Kompilyatsiya qilish uchun vositalar

Buyruqlar qatori

Buyruqlar qatori orqali kompilyatsiya qilish uchun GitHub- dagi loyiha readme-dagi ko'rsatmalarga amal qiling .

JavaScript

Eng so'nggi Less.js -ni yuklab oling va unga (va Bootstrap) yo'lni <head>.

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>

.less fayllarni qayta kompilyatsiya qilish uchun ularni saqlang va sahifangizni qayta yuklang. Less.js ularni kompilyatsiya qiladi va mahalliy xotirada saqlaydi.

Norasmiy Mac ilovasi

Norasmiy Mac ilovasi .less fayllar kataloglarini kuzatadi va tomosha qilingan .less faylining har bir saqlanishidan keyin kodni mahalliy fayllarga kompilyatsiya qiladi. Agar xohlasangiz, avtomatik ravishda kichiklashtirish va kompilyatsiya qilingan fayllar qaysi katalogga tushishi uchun ilovadagi afzalliklarni almashtirishingiz mumkin.

Boshqa ilovalar

Crunch

Crunch - bu Adobe Air-da yaratilgan LESS muharriri va kompilyatori.

CodeKit

Norasmiy Mac ilovasi bilan bir xil odam tomonidan yaratilgan CodeKit - LESS, SASS, Stylus va CoffeeScript-ni kompilyatsiya qiluvchi Mac ilovasi.

Oddiy

LESS fayllarni sudrab olib tashlash uchun Mac, Linux va Windows ilovasi. Bundan tashqari, manba kodi GitHub-da .

Statik aktivlar sifatida foydalaning

Kompilyatsiya qilingan yoki kichiklashtirilgan CSS va JS-ni qo'yib, istalgan veb-loyihani tezda boshlang . Oson yangilash va texnik xizmat ko'rsatish uchun oldinga siljish uchun maxsus uslublarni alohida-alohida joylashtiring.

Fayl tuzilishini sozlash

Eng so'nggi tuzilgan Bootstrap-ni yuklab oling va loyihangizga joylashtiring. Misol uchun, sizda shunday bo'lishi mumkin:

  ilova/
      maketlar/
      andozalar/
  ommaviy/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Starter shablonidan foydalaning

Boshlash uchun quyidagi asosiy HTML-dan nusxa oling.

  1. <html>
  2.   <head>
  3.     <title> Bootstrap 101 andozasi </title>
  4.     <!-- Bootstrap -->
  5.     <link href = "public/css/bootstrap.min.css" rel = "uslublar jadvali" >  
  6.   </head>
  7.   <tana>
  8.     <h1> Salom, dunyo! </h1>
  9.     <!-- Bootstrap -->
  10.     <script src = "public/js/bootstrap.min.js" >></script> 
  11.   </body>
  12. </html>

Maxsus kodda qatlam

Bootstrap-ni o'zingizning alohida CSS va JS fayllaringiz bilan o'zingiz qilish uchun kerak bo'lganda shaxsiy CSS, JS va boshqalarda ishlang.

  1. <html>
  2.   <head>
  3.     <title> Bootstrap 101 andozasi </title>
  4.     <!-- Bootstrap -->
  5.     <link href = "public/css/bootstrap.min.css" rel = "uslublar jadvali" >  
  6.     <!-- Loyiha -->
  7.     <link href = "public/css/application.css" rel = "uslublar jadvali" >  
  8.   </head>
  9.   <tana>
  10.     <h1> Salom, dunyo! </h1>
  11.     <!-- Bootstrap -->
  12.     <script src = "public/js/bootstrap.min.js" >></script> 
  13.     <!-- Loyiha -->
  14.     <script src = "public/js/application.js" >></script> 
  15.   </body>
  16. </html>