Bootstrap 2.3.2: Ishga kirishish bo'yicha qo'llanma

Twitter Bootstrap logotipi

Bootstrap - bu CSS doirasi bu butun tarmoq bo'ylab juda mashhur bo'lib qoldi. Ularning uslublari javob ijtimoiy tarmoqlarda ko'rinadi Tuenti y Twitter. Bundan foydalanish veb-dastur ishlab chiqishda ko'p vaqtimizni tejaydi, chunki barcha qurilmalar uchun mos bo'lgan toza sahifa uslubini yaratish bo'yicha barcha ishlar va kuchlarni tejaydi. Ushbu doirada ishlatiladigan uslublar bilan maslahatlashib, ular bizga tanish ekanligini anglaymiz, chunki bugungi kunda ko'plab veb-saytlar buni amalga oshirgan.

Tuzilishi

Bootstrap tuzilishi tasviri

Bootstrap suyuqlik tuzilishi

Bizning veb-saytimiz mobil telefonlar va planshetlardan foydalanish uchun biz Bootstrap taklif qiladigan suyuqlik tarkibidan foydalanishimiz kerak bo'ladi. Ushbu strukturadan foydalanish juda oddiy, hamma narsa elementlarga asoslangan span bu bizga yordam beradi maket bizning veb-dizaynimiz. Keyinchalik, ushbu dizaynga a dan kirganimizda smartfon o tabletka, bu avtomatik ravishda ushbu qurilmaga navigatsiya sifatini sezilarli darajada yaxshilaydi. Biz ishlatamiz span suyuqlik tarkibidagi mantiqiy bo'linmalardagi sinflar bilan, ya'ni:

<div class="row-fluid">
   <div class="span2">Contenido</div>
</div>

Qaerda 2 raqami oraliq hajmini anglatadi. Har bir satrda 12 o'lchamdagi yoki 1 o'lchamdagi 2 ta oraliq uchun etarli joy mavjud, bu siz xohlagan tarzda taqsimlanishi mumkin. Bir qator oralig'i oshib ketgandan so'ng, u avtomatik ravishda keyingisiga o'tadi va bizga a ni ishlatishga imkon beradi span chiziq oralig'ini yaratish uchun 12-o'lcham. Agar biz ba'zi narsalarni o'tkazib yubormoqchi bo'lsak span birini yaratishda, ya'ni 4 dan boshlang spanva 3 hajmini qo'llasangiz, biz ushbu koddan foydalanamiz:

<div class="span2 offset4">Contenido</div>

Bu bo'linishni to'rtga sakrashga imkon beradi oraliq tarkibni namoyish qilishdan oldin. Biz buni o'z xohishimiz bilan kodimiz yordamida xohlagan narsani o'tkazib yuborishimiz mumkin.

Ofset klassi bilan o'tish oralig'ida o'tish

Ofset klassi bilan o'tish oralig'ida o'tish

Har bir qurilma uchun har xil dizayn

Bootstrap qurilmalari uchun eksklyuzivlik sinflari bilan rasm

Har bir qurilmani farqlash uchun CSS sinflari

Har bir turdagi qurilma uchun har xil dizaynni qo'llash uchun quyidagi sinflardan foydalangan holda har bir mantiqiy bo'linishni qaysi qurilmaga yo'naltirilganligini aytib o'tamiz:

Shu tarzda, biz bir xil URL-ga ega har bir qurilma uchun butunlay boshqacha dizaynni namoyish eta olamiz.

Tugmalar

Rangli tugmalar

Bootstrap tomonidan taqdim etilgan tugmalar ro'yxati

Bootstrap bizga rangli tugmachalarning toza repertuarini taklif qiladi, ulardan foydalanish juda oddiy:

<a class="btn btn-success" href="URL">
   Nombre del Botón
</a>

Qaerda btn btn-success tugmachaning rangiga ishora qiladi, uni o'zgartirish uchun biz uni faqat avvalgi rasmda ko'rsatilgan sinflar bilan almashtirishimiz kerak bo'ladi.

Bootstrap-ni o'rnatish

Ushbu CSS ramkasini o'rnatish uchun biz postning oxirida qoldirgan ssilkadan zipni yuklab olamiz va quyidagi kodni yozamiz bizning HTML faylimizning boshida.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="./css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/bootstrap.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>

CSS va JS fayllari bizning HTML fayli bilan bir xil papkada ekanligiga ishonch hosil qilgandan so'ng, biz javob beradigan veb-saytimizni loyihalashtirishni boshlashimiz mumkin.

Qo'shimcha ma'lumot - Shaklni tasdiqlash

Yuklash - Bootstrap: CSS Framework


Izoh, o'zingiznikini qoldiring

Fikringizni qoldiring

Sizning email manzilingiz chop qilinmaydi. Kerakli joylar bilan belgilangan *

*

*

  1. Ma'lumotlar uchun javobgardir: Migel Anxel Gaton
  2. Ma'lumotlarning maqsadi: SPAMni boshqarish, izohlarni boshqarish.
  3. Qonuniylashtirish: Sizning roziligingiz
  4. Ma'lumotlar haqida ma'lumot: qonuniy majburiyatlar bundan mustasno, ma'lumotlar uchinchi shaxslarga etkazilmaydi.
  5. Ma'lumotlarni saqlash: Occentus Networks (EU) tomonidan joylashtirilgan ma'lumotlar bazasi
  6. Huquqlar: istalgan vaqtda siz ma'lumotlaringizni cheklashingiz, tiklashingiz va o'chirishingiz mumkin.

  1.   alejandra dijo

    Sizda bu doirada ko'proq o'quv qo'llanmalari yo'qmi ???