Bootstrap 4 muharririni tayyorlash bilan. Moslashuvchan bloklarni ketma-ket joylashtirish

GitHubdagi yulduzlar soniga asoslanib.

Agar siz Bootstrap-ni, xususan, uning so'nggi, to'rtinchi versiyasini o'zlashtirmoqchi bo'lsangiz, unda ushbu material siz uchun maxsus tayyorlangan. Bu erda yarim soat ichida haqiqatan ham o'zlashtirilishi mumkin bo'lgan kichik bir misoldan foydalanib, Bootstrap asoslari namoyish etiladi, ularni tushunganingizdan so'ng siz ushbu ramka yordamida o'zingizning biror narsa qilishingiz mumkin bo'ladi.

Old shartlar Ushbu material HTML, CSS va jQuery haqida asosiy tushunchaga ega bo'lgan boshlang'ich veb-ishlab chiquvchilar uchun mo'ljallangan.

Mana bir sahifali veb-sayt bo'lib, biz Bootstrap yordamida yaratish haqida gaplashamiz.

Bootstrap yordamida yaratilgan tayyor loyiha

Npm o'rnatish bootstrap
Bootstrap kontentni etkazib berish tarmog'i yordamida sahifaga ulanishi mumkin. Buning uchun tegga quyidagi havolani qo'shing:

Bootstrap-ning so'nggi versiyasini bu yerdan yuklab olish va mahalliy sifatida foydalanish mumkin.

Loyihaning tuzilishi quyidagi rasmga o'xshash bo'lishi kerak.

Loyiha tuzilishi Bootstrap 4 imkoniyatlari haqida Bootstrap 4 ning birinchi barqaror versiyasi joriy yilning yanvar oyi oxirida chiqarildi. Bootstrap endi oldingi versiyasida mavjud bo'lmagan ba'zi qiziqarli xususiyatlarni o'z ichiga oladi. Ya'ni, takomillashtirish va o'zgarishlar haqida gapiradigan bo'lsak, quyidagilarni ta'kidlashimiz mumkin:

• Bootstrap 4 flexbox texnologiyasidan foydalangan holda qayta yozilgan, Bootstrap 3 esa float texnologiyasidan foydalangan. Agar siz flexbox bilan tanish bo'lmasangiz, ushbu resursni ko'rib chiqing.
• Bootstrap 4 ning CSS rem birliklaridan foydalanadi, agar ilgari u px birliklaridan foydalangan. ular qanday farq qilishini bilib olishingiz mumkin.
• Panellar kabi ba'zi komponentlar olib tashlandi. Bootstrap 4 da kiritilgan o'zgarishlar haqida batafsil ma'lumot olishingiz mumkin.

Aslida, Bootstrap 4 da Bootstrap 3 ga nisbatan juda ko'p yangi narsalar mavjud, agar kerak bo'lsa, ushbu yangiliklar bilan tanishishingiz mumkin. Endi biz o'quv loyihamiz ustida ishlashni boshlaymiz Bootstrap Grid System Bootstrap Grid tizimi sahifa maketlarini yaratish uchun mo'ljallangan. Bu sezgir veb-saytlarni ishlab chiqishni osonlashtiradi. Bootstrap ning yangi versiyasida sinf nomlari o'zgarmagan (ta'kidlash kerakki, class.xs endi mavjud emas).

To'r 12 ta ustunga bo'lingan, ishlab chiquvchining ehtiyojlariga ko'ra tuzilgan ushbu tuzilma sahifa tartibining asosi hisoblanadi.

Bootstrap panjarasidan foydalanish uchun sahifaning asosiy elementiga .row sinfini qo'shishingiz kerak. Ichki elementlarning o'lchamlarini o'rnatishda quyidagi sinflar qo'llaniladi (sinf nomining oxiridagi yulduzcha o'rniga ma'lum bir element egallashi kerak bo'lgan asosiy 12 ustunli panjara ustunlari soni ko'rsatilgan):

• col-lg-* - noutbuklar kabi katta ekranli qurilmalar uchun mo'ljallangan sahifalar uchun ishlatiladigan sinf;
• col-md-* - planshetlar kabi o'rta o'lchamli ekranli qurilmalar uchun mo'ljallangan sahifalar uchun sinf;
• col-sm-* - smartfonlarda topilganlar kabi kichik ekranlar uchun mo'ljallangan sahifalar uchun sinf.

Navigatsiya paneli Bootstrap-dagi navigatsiya paneli .navbar klassi yordamida yaratilgan. Aslida, bu navigatsiya panelini tashkil etuvchi elementlar joylashtirilgan o'ram. Quyida biz hozir yaratadigan panel. U sahifaning yuqori qismida joylashgan va aylanayotganda yo'qolmaydi.

Navigatsiya paneli

Shunday qilib, sahifada navigatsiya paneli paydo bo'lishi uchun biz index.html ga .navbar klassi bilan teg qo'shamiz, uning ichida .navbar-brand, .navbar-toggler va .nav kabi boshqa sinflardan foydalanamiz. -element , biz sayt navigatsiya tizimining ba'zi maxsus elementlari va tuzilishini yaratamiz. .Fixed-top klassi sahifaning yuqori qismidagi navigatsiya panelini tuzatishga imkon beradi. Mana navigatsiya paneli tartibi:

Uy

• Haqida
• Portfel
• Jamoa
• Post
• Aloqa

Endi main.css faylini yaratamiz va uni index.html fayl tegiga quyidagini qo'yish orqali sahifaga ulaymiz:

Bu sizga CSS qoidalarini ushbu faylga joylashtirish orqali sahifa elementlarining uslublarini sozlash imkonini beradi. Keling, ushbu CSS fayliga navigatsiya panelining rang dizaynini o'rnatadigan qoidalarni qo'shamiz:

Navbar( fon:#F97300; ) .nav-link , .navbar-brand( rang: #f4f4f4; kursor: koʻrsatgich; ) .nav-link(chekka oʻng: 1em !important; ) .nav-link:hover( fon : #f4f4f4; color: #f97300; ) .navbar-collapse( justify-content: flex-end; ) .navbar-toggler( fon:#fff !important; )
Yangi Bootstrap panjarasi flexbox-ga asoslangan, shuning uchun tarkibni tekislash uchun tegishli xususiyatlardan foydalanishingiz kerak. Masalan, navbar menyusini o'ng tomonga joylashtirish uchun justify-content xususiyatidan foydalanishingiz va uning qiymatini flex-end ga o'rnatishingiz kerak:

Navbar-qulash (oqlash-tarkib: flex-end; )
Navigatsiya panelining fon rangini sozlash uchun siz .bg-light (ochiq fon), .bg-dark (quyuq fon) va .bg-primary (asosiy fon rangi) sinflaridan foydalanishingiz mumkin. Biz quyidagi sozlamalardan foydalanamiz:

Bg-dark( fon rangi:#343a40!muhim ) .bg-asosiy( fon rangi:#343a40!muhim )

Sahifa sarlavhasi Quyidagi teg sahifa sarlavhasini tavsiflash uchun ishlatiladi:

Keling, sahifa sarlavhasi uchun maket tayyorlaylik. Biz u derazaning butun balandligini egallashini xohlaymiz, shuning uchun jQuery bu erda foydali bo'ladi. Keling, main.js faylini yaratamiz va uni yopish tegidan oldin index.html ga ulaymiz:

Keling, main.js fayliga quyidagilarni qo'shamiz:

$(hujjat).ready(funksiya())( $(".header").height($(window).height()); ))
Sahifaning sarlavhasiga chiroyli fon tasvirini joylashtirish yaxshi fikr bo'lardi. Keling, buni shunday qilaylik:

/*sarlavha uslubi*/ .header( fon-rasm: url("../images/headerback.jpg"); fon-ilova: qattiq; fon o'lchami: qopqoq; fon-pozitsiyasi: markaz; )
Biz shu bilan yakun topdik.

Fon rasmi bilan sahifa sarlavhasi

Hozircha sayt sarlavhasi biroz bo'sh ko'rinadi, shuning uchun keling, unga .overlay sinfini belgilab, element qo'shamiz, bu sarlavhaning fon tasvirining tepasida joylashgan blokni yaratishga olib keladi. Keling, index.html faylining bo'limini o'zgartiramiz, bu erda biz sarlavhani quyidagicha tasvirlaymiz:

Keyin main.css da quyidagilarni qo'shing:

Qoplama (pozitsiya: mutlaq; minimal balandlik: 100%; min. kenglik: 100%; chap: 0; tepa: 0; fon: rgba(244, 244, 244, 0,79); )
Endi sarlavhaga loyiha tavsifini qo'shamiz. Biz uni .containter sinfi bilan yangi elementga joylashtiramiz. Bu javob beruvchi tartib ehtiyojlari asosida tarkibni joylashtirish uchun mo'ljallangan Bootstrap ramkasi uchun yordamchi sinfdir. Bu bosqichda belgilash qanday o'zgaradi:

Keling, bu erga yana bir element qo'shamiz, unga biz class.descriptionni tayinlaymiz:

▍ Salom, mening rasmiy veb-saytimga xush kelibsiz

Cillum doore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Batafsil
Shuningdek, biz ushbu tegga .text-center sinfini tayinlaymiz, bu uning mazmunini sahifaning markaziga moslashtirishga imkon beradi. Sayt tavsifining oxirida tugma mavjud. Keling, uni qanday o'rnatish haqida gapiraylik.

Buttons Bootstrap tugmalar uchun ko'plab sinflarni taqdim etadi. Siz tugma dizaynining ba'zi misollarini ko'rishingiz mumkin. Biz, oldingi bo'limdagi belgilash misolida ko'rib turganingizdek, elementga .btn va sinflarini qo'shdik. btn-outline-ikkinchi darajali .

Keling, class.description uchun uslublarni o'rnatamiz:

Tavsif(pozitsiya: mutlaq; tepa: 30%; chekka: avtomatik; toʻldirish: 2em; ) .description h1( rang:#F97300 ; ) .description p( rang:#666; shrift oʻlchami: 20px; kenglik: 50%; chiziq balandligi: 1,5; .description tugmasi (chegara: 1px qattiq #F97300; fon:#F97300; rang:#fff; )
Yuqoridagi amallarni bajargandan so'ng sahifa sarlavhasi shunday ko'rinadi:

Loyiha tavsifini o'z ichiga olgan sahifa sarlavhasi Bo'lim haqida Birinchidan, biz yaratmoqchi bo'lgan narsalarni ko'rib chiqaylik. Bu yerda veb-ishlab chiquvchi haqidagi ma'lumotlarga ega sahifaning bo'limi.

Haqida bo'lim

Bu erda biz ikki qismli bo'lim tartibini yaratish uchun Bootstrap tarmog'ining imkoniyatlaridan foydalanamiz. Keling, bo'limning asosiy elementiga class.row ni qo'shishni boshlaylik:

Tartibning birinchi qismi chap tomonda joylashgan bo'lib, unda fotosurat bo'ladi. O'ng tomonda joylashgan ikkinchi qism tavsifni o'z ichiga oladi.

Ushbu bo'limning chap tomonidagi belgi qanday ko'rinishga ega:

// chap tomon S.Web dasturchisi
Va bu erda tartibning o'ng tomonining tavsifi qo'shilgandan keyin sodir bo'ladi:

S.Web dasturchisi ▍D.John

Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore and doore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco workis nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

Yuqorida tavsiflangan col-lg-* , col-md-* va col-sm-* sinflari yordamida ustunlar kengligini oʻrnatishga eʼtibor bering.

Mana bularning barchasi uchun uslublar:

Haqida( chekka: 4em 0; toʻldirish: 1em; joylashuv: nisbatan; ) .h1 haqida( rang:#F97300; chekka: 2em; ) .img haqida( balandlik: 100%; kenglik: 100%; chegara radiusi: 50% ) .haqida span( displey: blok; rang: #888; joy: mutlaq; chap: 115px; ) .haqida .desc( toʻldirish: 2em; chegara-chap: 4px qattiq #10828C; ) .haqida .desc h3( rang: #10828C; .haqida .desc p( chiziq balandligi:2; rang:#888; )

Portfolio bo'limi Endi ishlab chiquvchi portfeli taqdim etiladigan bo'limga o'tamiz. Unda asarlar galereyasi bo'ladi.

Portfel bo'limi

Ushbu bo'limning tartibini yaratishda biz yuqorida muhokama qilgan panjara bilan ishlashning bir xil tamoyillari qo'llaniladi:

Portfel
Tasvirlarning har biriga .img-fluid sinfini qo'shish ularni sezgir qiladi.

Bizning galereyamizdagi har bir element o'rta va katta ekranlarda 4 ta ustunni egallaydi (esda tuting - col-sm-12 sinfi kichik ekranli qurilmalar uchun ishlatiladi, col-md-4 sinfi o'rta ekranlar uchun ishlatiladi, col-lg-4 - katta ekranli qurilmalar uchun). Natijada, katta va o'rta ekranlarda bitta element kichik qurilmalarda konteyner elementining taxminan 33,3% ni tashkil qiladi, har bir element butun ekranni egallaydi (12 ta ustun).

Asarlar galereyasini uslublash:

/*Portfolio*/ .portfolio( chegara: 4em 0; pozitsiya: nisbiy; ) .portfel h1( rang:#F97300; chekka: 2em; ) .portfolio img( balandlik: 15rem; kenglik: 100%; chekka: 1em; )

Blog bo'limi va kartalar bilan ishlash Keling, shartli veb-ishlab chiquvchimiz tomonidan olib boriladigan blog materiallari e'lonlarini o'z ichiga olgan bo'lim yaratish haqida gapiraylik.

Blog bo'limi

Ushbu bo'limni yaratish uchun bizga kartalar (Bootstrap terminologiyasidagi kartalar) kerak bo'ladi.

Karta yaratish uchun siz tuzilishga elementni kiritishingiz va unga .card sinfini qo'shishingiz kerak. Turli xil karta elementlarini sozlash uchun siz quyidagi sinflardan foydalanishingiz mumkin:

• .card-header: sarlavha
• .karta-tanasi: asosiy tarkib
• .card-title: sarlavha
• .card-footer: altbilgi
• .karta-tasvir: tasvir

Ushbu bo'lim uchun HTML belgisi quyidagicha ko'rinadi:

Blog Post sarlavhasi

Proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Ko'proq o'qish Post sarlavhasi

Proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Ko'proq o'qish Post sarlavhasi

Proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Ko'proq o'qish
Mana, kartalar uchun uslublar:

Blog( chekka: 4em 0; joylashuv: nisbatan; ) .blog h1( rang:#F97300; chekka: 2em; ) .blog .card( quti-soya: 0 0 20px #ccc; ) .blog .card img( kengligi: 100% balandlik: 12em; ) .blog .card-title( color:#F97300; ) .blog .card-body( padding: 1em; )
Blog bo'limini yaratgandan so'ng bizning bir sahifali sahifamiz shunday ko'rinadi:

Blog bo'limini qo'shgandan keyin sahifa Jamoa bo'limi Ushbu bo'lim loyiha jamoasi haqida ma'lumotni o'z ichiga oladi.

Jamoa bo'limi

Ushbu bo'limni shakllantirish uchun biz mavjud bo'sh joyni tasvirlar o'rtasida teng taqsimlagan holda panjara ishlatamiz. Har bir rasm (katta va o'rta ekranlarda) 3 ta panjara ustunini egallaydi, bu umumiy joyning 25% ni tashkil qiladi.

Bu bo'lim uchun HTML belgilash:

Bizning Jamoamiz Sara menejeri Kris S. Enginner Layla Front End Developer J.Jirard jamoa menejeri
Va bu erda uslublar:

Jamoa( chegara: 4em 0; pozitsiya: nisbiy; ) .team h1( rang:#F97300; chekka: 2em; ) .team .item( pozitsiya: nisbiy; ) .team .des( fon: #F97300; rang: #fff ; text-align: center-past-chap-radius: 93% o'tish:.3s.
Keling, ushbu bo'limni sichqonchani tasvirlar ustiga olib borganingizda paydo bo'ladigan animatsiya bilan bezatamiz. Quyidagi rasmga o'xshash bo'lishi kerak.

Sichqonchani tasvir ustiga olib borishda animatsiya

Ushbu effektga erishish uchun main.css-ga quyidagi uslublarni qo'shing:

Team .item:hover .des( balandlik: 100%; fon:#f973007d; joylashuv: mutlaq; kenglik: 89%; toʻldirish: 5em; tepa: 0; chegara-pastki-chap-radius: 0; )

Fikr-mulohaza shakli Sahifaning ushbu qismida saytga tashrif buyuruvchilar sayt egasiga xabar yuborishlari mumkin bo'lgan shakl mavjud. Bu erda, odatdagidek, elementlarni uslublash va ularning sezgirligini ta'minlash uchun biz Bootstrap imkoniyatlaridan foydalanamiz.

Fikr-mulohaza shakli

Bootstrap 3 singari, Bootstrap 4 ham kiritish maydonlari uchun .form-control sinfidan foydalanadi, ammo endi yangi narsa bor. Masalan - eskirgan class.input-group-addon o'rniga yangi class.input-group-prepend ishlatiladi (piktogramma va teglar uchun). Bu haqda batafsil ma'lumotni Bootstrap 4 hujjatlarida topish mumkin, bizning holatlarimizda har bir kiritish maydoni .form-group sinfi tayinlangan elementga joylashtiriladi.

index.html fayliga quyidagilarni qo'shamiz:

Aloqa qiling
Bu erda main.css faylida joylashtirilishi kerak bo'lgan fikr-mulohaza shakli bo'limi uchun uslublar keltirilgan:

Aloqa shakli (chegara: 6em 0; joylashuv: nisbatan; ) .aloqa shakli h1( toʻldirish:2em 1px; rang: #F97300; ) .kontakt shakli .oʻng( maksimal kenglik: 600px; ) .kontakt shakli . o'ng .btn-ikkinchi (fon: #F97300; rang: #fff; chegara:0; ) .contact-form .right .form-control::placeholder( rang: #888; shrift o'lchami: 16px; )

Shriftlar Standart shriftlar hamma uchun mos emas. Loyihamizda Raleway shriftidan foydalanish uchun Google Font API-dan foydalandik. Bu erda juda yaxshi ko'rinadi. Shriftni import qilish uchun main.css fayliga quyidagi direktivani qo'shing:

@import url("https://fonts.googleapis.com/css?family=Raleway");
Keyinchalik, turli HTML teglari uchun global uslublarni o'rnatamiz:

Html,h1,h2,h3,h4,h5,h6,a( shrift oilasi: "Raleway"; )

O'tkazish effektlari Quyidagi rasmda biz erishmoqchi bo'lgan sahifa harakati ko'rsatilgan.

Navigatsiya panelidagi havolalarni bosganda sahifani aylantirish

Navigatsiya panelidagi havolalarni bosganingizda sahifa kerakli bo'limga muammosiz o'tishi uchun biz jQuery imkoniyatlariga murojaat qilishimiz kerak. Agar siz ushbu kutubxona bilan unchalik tanish bo'lmasangiz, bilingki, bu erda hech qanday murakkab narsa yo'q - faqat main.js fayliga quyidagi kodni qo'shing:

$(".navbar a").click(funksiya())( $("tana,html").animatsiya(( scrollTop:$("#" + $(bu).data("qiymat")).ofset ( ).top ),1000) ))
Shundan so'ng, navigatsiya panelidagi havolalarning har biriga ma'lumotlar qiymati atributini qo'shing va belgilashni quyidagicha ko'ring:

Haqida

Portfel

Blog

Jamoa

Aloqa

Bularning barchasi nihoyat ishlashi uchun sahifaning har bir qismining asosiy elementiga id atributini qo'shish qoladi. Bunday holda, siz uning qiymati tegishli havolaning ma'lumotlar qiymati atributida ko'rsatilgan qiymat bilan bir xil ekanligiga ishonch hosil qilishingiz kerak. Misol uchun, bu erda "Haqida" bo'limiga tegishli atribut mavjud:

Bu bizning misolimizni to'ldiradi. Teglar qo'shing

Joriy yilning yanvar oyida Bootstrap 4 (shuningdek, v4 nomi bilan ham tanilgan) ikki yildan ortiq vaqt davomida alfa versiyalarida ishlagandan keyin nihoyat chiqarildi. Bu funksionallikning jiddiy qayta yozilishini ifodalaydi. U nafaqat kaput ostida ko'plab o'zgarishlar kiritadi, balki Bootstrap 4 ham boshingizni o'rashingiz kerak bo'lgan bir qator yangi tushunchalarni o'z ichiga oladi.

Shuning uchun, ushbu maqolada men v3 bilan solishtirganda v4-da Bootstrap-dagi eng muhim o'zgarishlar haqida gapiraman. Siz allaqachon Bootstrap-dan foydalangansiz deb o'ylayman, shuning uchun men asosiy tamoyillarni tushuntirmayman.

Endi eng muhim o'zgarishlarni ko'rib chiqamiz (aniq bir tartibda):

№1: Tugma ko'rinishi

Keling, qiziqarli va ingl. v4-dagi tugmalar v3-ga qaraganda tekisroq dizaynga ega. Mana oldingi tugmalar:

Va bu erda yangilaridan ba'zilari:

Bu so'nggi ikki yil ichida juda mashhur bo'lgan Material Design qo'llanmalari kabi zamonaviy dizayn qo'llanmalariga ko'proq mos keladi.

# 2: Yaxshilangan media so'rovlar

Menimcha, Boostrap v3-da tarmoq uchun juda kam nazorat nuqtalari bor edi, masalan, eng kichigi xs 768 pikselda edi. Bugungi kunda katta trafik kichikroq qurilmalardan keladi va bu ko'plab ishlab chiquvchilarni xafa qildi.

$grid-uzilish nuqtalari: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) !default;

$ grid - to'xtash nuqtalari : ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px ) ! sukut bo'yicha;

Bu barcha ekran o'lchamlarida yaxshi ishlaydigan panjaralarni yaratishni osonlashtiradi.

№3: Flexbox-ni qo'llab-quvvatlash bizga ko'proq moslashuvchanlikni beradi

Bootstrap-ning mashhur panjaralari endi float o'rniga Flexbox yordamida yaratilgan. Bir qarashda, bu ishlab chiquvchilar uchun unchalik katta farq qilmaydi, chunki ko'pchilik tarmoq sxemalari aynan bir xil ishlaydi. Biroq, bu bir qancha yangi imkoniyatlarni ochib beradi.

Ilgari biz har bir ustunning kengligini aniqlashimiz kerak edi (1 dan 12 gacha). Endi siz bitta ustunning kengligini belgilashingiz va keyin Flexbox-ga avtomatik ravishda boshqalarning kengligini belgilashga ruxsat berishingiz mumkin. Buni qanday amalga oshirishga misol:

Ko'rib turganingizdek, biz o'rta ustunning kengligini 6 ga (bu to'liq kenglikning yarmiga teng) o'rnatamiz va boshqa ustunlar bo'sh joyning qolgan qismini egallaydi.

1 dan 3 tadan 2 tadan 3 tadan (kengroq) 3 tadan 3 tasi

< div class = "container" > < div class = "row" > < div class = "col" > 1 / 3 < / div > < div class = "col-6" > 2/3 (kengroq) < / div > < div class = "col" > 3 / 3 < / div > < / div > < / div >

Flexbox darslari

Bootstrap 4 shuningdek, konteynerlar va Flexbox elementlarini boshqarish uchun foydalanishingiz mumkin bo'lgan bir qator sinflar bilan birga keladi. Elementni Flexbox konteyneriga aylantirish uchun unga d-flex sinfini bering.

Men flexbox konteynerman!

< div class = "d-flex" >Men flexbox konteynerman!< / div >

Bu Flexbox konteynerini ichida matn bilan beradi:

Eslatma. Men faqat Flexbox bilan bog'liq uslublarni qamrab olaman.

Keling, yana bir nechta elementlarni qo'shamiz va ularning konteynerda qanday joylashishini nazorat qilish uchun boshqa sinfni kiritamiz.

Bootstrap 4 ramkasi Tez boshlash

Blogni noldan loyihalashning amaliy misoli bilan Bootstrap 4 asoslarini bilib oling

< div >Egiluvchan element< / div >

< div >Egiluvchan element< / div >

< div >Egiluvchan element< / div >

< / div >

Natijada, elementlar idishning markazida joylashgan:

№4: Sinflar yordamida chekinishni boshqarish

Bu juda zo'r. Endi siz p-* va m-* sinflari yordamida toʻldirish va chekkalarni boshqarishingiz mumkin. 0 dan 5 gacha bo'lgan raqamlar yordamida to'ldirish 0,25 dan 3 rem gacha o'zgarishi mumkin. Masalan, maksimal to'ldirishni yaratish uchun Flexbox konteynerini p-5 sinfiga o'rnatamiz.

Biz javob beruvchi veb-sayt maketlarini yaratish uchun ishlatiladigan Bootstrap 4 panjarasini tahlil qiladigan maqola.

Grid maqsadi

Bootstrap 4 grid ramkasi sezgir veb-sayt maketlarini yaratish uchun mo'ljallangan.

Bootstrap 4 tarmog'i CSS Flexbox va CSS media so'rovlariga asoslangan. Ularni o'rganish sizga Bootstrap 4 grid qanday ishlashini batafsilroq tushunish imkonini beradi.

Moslashuvchan tartib - bu brauzerning asosiy maydoni (ko'rish oynasi) kengligiga qarab tashqi ko'rinishini o'zgartirishi mumkin bo'lgan maket. Bu shuni anglatadiki, ba'zi ko'rish maydoni kengliklarida sezgir tartib bir tomonga ko'rinishi mumkin, ammo boshqalarida u butunlay boshqacha ko'rinishi mumkin.

Bootstrap 4 da tartib ko'rinishini o'zgartirish media so'rovlari orqali amalga oshiriladi. Bootstrap-dagi har bir media so'rovi brauzer ko'rish oynasining minimal kengligiga (to'xtash nuqtasi, to'xtash nuqtasi, qurilma nomi) asoslanadi.

Bootstrap 4 ramkasida 5 ta to'xtash nuqtasi yoki qurilma nomi (yorlig'i yo'q, sm, md, lg, xl) mavjud va shuning uchun ularning har birida har xil ko'rinishi mumkin bo'lgan tartibni yaratishga imkon beradi.

Bootstrap 4 da, Bootstrap 3 bilan solishtirganda, to'xtash nuqtalari soni o'zgartirildi. Bootstrap 3 da ulardan to'rttasi bor edi: xs, sm, md va lg.

Grid elementlari

Bootstrap 4 panjarasi quyidagi elementlardan iborat:

• O'rash idishlari (konteyner va konteyner-suyuqlik);
• Qatorlar (qator);
• Moslashuvchan bloklar (kol).

Konteynerlarni o'rash

Oʻram konteyneri Bootstrap 4 panjara elementi boʻlib, undan javob beruvchi sahifa yoki blok tartibini yaratish boshlanadi. Uning ichiga boshqa panjara elementlari (qatorlar va moslashuvchan bloklar) joylashtirilishi kerak.

Bootstrap 4-da 2 turdagi konteyner o'ramlari mavjud: sezgir-fiksatsiyalangan va sezgir-suyuqlik.

Javob beruvchi o'rnatilgan konteynerning HTML belgisi:

...

Javob beruvchi kauchuk konteynerning HTML belgisi:

...

Birinchi (javob beruvchi) konteyner ma'lum bir brauzer ko'rish maydoni kengligida doimiy qolishi kerak bo'lgan kenglikdagi tartibni yaratish kerak bo'lganda ishlatiladi.

Moslashuvchan o'rnatilgan konteyner kengligining brauzer ko'rish oynasining kengligiga bog'liqligi jadvalda ko'rsatilgan:

Bu shuni anglatadiki, moslashuvchan o'rnatilgan konteyner quyidagilarga ega bo'ladi:

• 576 pikselgacha bo'lgan ko'rish oynasi kengligi uchun 100% kenglik;
• Ko'rish maydoni kengligi 576 dan 768 pikselgacha bo'lgan 540 piksel;
• Ko'rish maydoni kengligi 768 dan 992 pikselgacha bo'lgan 720 piksel va boshqalar.

Gorizontal yo'nalishda sobit javob beruvchi konteyner markazlashtirilgan holda joylashtirilgan, bu bootstrap.css da CSS xususiyatlari orqali margin-left: auto va margin-right: auto orqali amalga oshiriladi.

Ikkinchi (javob beruvchi kauchuk) konteyner sahifaning yoki biron bir blokning to'liq moslashuvchan tartibini yaratish kerak bo'lganda ishlatiladi. Ushbu konteyner har qanday ko'rish maydoni kengligi uchun 100% kenglikka ega.

Bundan tashqari, o'rash idishlari (konteyner va konteyner-suyuqlik) ham 15px chap va o'ng tomonda ichki to'ldirishga ega. Konteynerlarni o'rash uchun to'ldirishni sozlash Bootstrap 4 CSS faylida padding-left: 15px va padding-right: 15px xususiyatlaridan foydalangan holda amalga oshiriladi.

Bootstrap 4 panjarasidan foydalanib tartib yaratishda, o'rash idishlarini boshqalar ichiga joylashtirmang.

Qatorlar

Qator - bu quyidagi hollarda tartib yaratishda foydalaniladigan maxsus panjara elementi (qator):

• konteyner va unga joylashtirilishi kerak bo'lgan adaptiv bloklar o'rtasida;
• birinchi adaptiv blokga joylashtirilishi kerak bo'lgan bir va boshqa adaptiv bloklar o'rtasida.

Qator HTML belgisi:

...

Bootstrap 3-dan farqli o'laroq, qator faqat o'rash konteynerlari yoki sezgir bloklarning chap va o'ng ichki to'ldirishlarini qoplash uchun harakat qilgan, Bootstrap 4-da u juda muhim rol o'ynaydi. Buning sababi, bu grid CSS Flexbox-da qurilgan. Ushbu panjarada u moslashuvchan elementlar (moslashuvchan bloklar) uchun moslashuvchan konteyner vazifasini bajaradi. Bular. agar siz satrdan tashqari adaptiv bloklardan foydalansangiz, ular ishlamaydi. Bootstrap 4 da javob beruvchi bloklar qator sinfiga ega blokda bo'lishi kerak.

Chetlarning ichki to'ldirilishi uchun kompensatsiya 15px ga teng salbiy chap va o'ng chekkalar tufayli Bootstrap 3-da bo'lgani kabi amalga oshiriladi (chekka-chap:-15px va chekka-o'ng:-15px).

Dala to'ldirish qanday kompensatsiya qilinishiga misol:

konteyner (+15px) -> qator (-15px) -> col (+15px) -> kontent konteyner-fluid (+15px) -> qator (-15px) -> col (+15px) -> qator (-15px) -> col (+15px) -> kontent

Natijada, o'rash idishining chap va o'ng qirralaridan tarkibga bo'lgan chegara har doim 15px bo'ladi.

Bundan tashqari, mantiqiy jihatdan bir-biri bilan bog'liq bo'lmagan adaptiv bloklarni qandaydir o'rash idishi yoki boshqa adaptiv bloklar doirasida bir qatorga joylashtirish shart emas. Eng to'g'ri yo'l ularni alohida mantiqiy guruhlarga bo'lish va ularning har birini alohida qatorga joylashtirishdir.

Masalan:

... … … … ...

Moslashuvchan bloklar

Moslashuvchan bloklar javob beruvchi tartibning asosiy qurilish bloklari bo'lib, ular veb-sahifaning turli boshqaruv nuqtalarida qanday ko'rinishini aniqlaydi (belgisiz, sm, md, lg va xl);

Moslashuvchan blokni yaratish juda oddiy: bir yoki bir nechta sinflarni qo'shish orqali col-?-? kerakli HTML elementiga.

col-?-?> sinfida birinchi savol belgisi o'rniga nazorat nuqtasining nomi ko'rsatiladi: belgilanmagan, sm, md, lg yoki xl. Ikkinchi savol belgisi o'rniga moslashuvchan blokning kengligi ko'rsatilgan, u belgilangan nazorat nuqtasida bo'lishi kerak. Javob beruvchi blokning kengligi 1 dan 12 gacha bo'lgan raqam yordamida nisbiy shaklda belgilanadi (Bootstrap ustunlari).

Bu raqam ota-ona blokining kengligidan ko'rsatilgan nazorat nuqtasida adaptiv blokning qanchalik kengligini egallashini aniqlaydi, ya'ni. qator. Raqamli ko'rinishdagi satr kengligi (Bootstrap ustunlari) 12 ga teng.

Misol uchun, md nazorat nuqtasida col-md-4 sinfiga ega blok qator kengligining 4/12 qismini egallaydi, ya'ni. 33,3% (ya'ni 4/12 * 100% = 33,3%).

Moslashuvchan bloklar, shuningdek, konteynerlar 15px chap va o'ng to'ldirishga ega. Bootstrap 4 ramkasining adaptiv bloklari uchun ushbu to'ldirishlar CSS xususiyatlaridan foydalangan holda o'rnatiladi padding-left: 15px va padding-right: 15px.

Moslashuvchan bloklar bir qatorga joylashtirilishi kerak. Bular. Har qanday adaptiv blokda uning ota-onasi sifatida sinf qatori bo'lgan blok bo'lishi kerak.

Misol uchun, har bir qurilmada quyidagi javob bloki qanchalik keng bo'lishini ko'rib chiqing:

...

Ushbu moslashuvchan blok quyidagilarga ega bo'ladi:

• sm gacha (xs bo'yicha) 12 Bootstrap ustuniga teng kenglik (ya'ni 12/12*100%=satr kengligining 100%);
• sm qurilmasida 9 ta Bootstrap ustuniga teng kenglik (ya'ni 9/12*100%=satr kengligining 75%);
• md qurilmasida 7 ta Bootstrap ustuniga teng kenglik (ya'ni 7/12*100%=satr kengligining 58,3%);
• lg qurilmasida 5 ta Bootstrap ustuniga teng kenglik (ya'ni 5/12*100%=satr kengligining 41,6%);
• xl qurilmasida 3 ta Bootstrap ustuniga teng kenglik (masalan, 3/12*100%=satr kengligining 25%).

Bunga qo'shimcha ravishda, ba'zi bir nazorat nuqtasi uchun moslashuvchan blokning kengligini belgilashda, u nafaqat ushbu nuqtaga, balki ular ko'rsatilmagan bo'lsa, barcha keyingilarga ham tegishli bo'ladi.

md va lg qurilmalaridagi sezgir blokning kengligi 6 ta Bootstrap ustuniga teng bo'ladi: (12) -> sm(6) -> md -> lg -> xl(3) .

Sm qurilmasidagi sezgir blokning kengligi 8 ta Bootstrap ustuniga, lg va xl qurilmalarida esa 4 ta Bootstrap ustuniga teng bo'ladi: (8) -> sm -> md(4) -> lg - > xl.

Barcha qurilmalardagi javob blokining kengligi 6 ta Bootstrap ustuniga teng bo'ladi: (6) -> sm -> md -> lg -> xl .

Ustunlarsiz moslashuvchan bloklar

col , col-sm , col-md , col-lg , col-xl, col-auto, col-sm-auto, col-md-auto, col-lg-auto va col-xl maxsus sinflari qo‘shildi. Bootstrap 4 grid - avtomatik .

Sinflarning birinchi guruhi (col, col-sm, col-md, col-lg, col-xl) moslashuvchan bloklarni yaratish uchun mo'ljallangan, ularning kengligi chiziqning bo'sh joyiga bog'liq bo'ladi. Chiziqning band bo'lmagan kengligi (bo'sh joy) barcha bunday bloklar o'rtasida teng taqsimlanadi. Bunga qo'shimcha ravishda, bu adaptiv bloklar bo'sh chiziq maydonini ajratishdan oldin (sukut bo'yicha) nol kenglikka ega.

Keling, bir nechta misollarni ko'rib chiqaylik.

1. Bir qatorda bir xil kenglikdagi 5 ta moslashtirilgan bloklarni yarating.

1/5 2/5 3/5 4/5 5/5

Kenglikni hisoblash:

• bo'sh chiziq maydoni - 100% (chunki ularning kengligi 0);
• har bir adaptiv blokning kengligi 20% (100%/5);

2. Agar chiziqdagi ustunlar soniga moslashtirilgan blok mavjud bo'lsa, sinf colli bloklarning kengligi.

? 7 ustun? ?

Kenglikni hisoblash:

• erkin satr maydoni - 41,67% ((12-7)/12*100%);
• Har bir adaptiv blokning kengligi, col-7dan tashqari, 13,89% (41,67% / 3).

Safari brauzerlarining ba'zi versiyalarida bunday belgilarni ishlatishda xatolik mavjud; uni bir nechta qatorlarga bo'lish mumkin.

Buni tuzatishning 2 yo'li mavjud:

• moslashuv bloklarini o'rnatish orqali border.col (chegara: 1px qattiq shaffof; )
• javob beruvchi bloklarni o'rnatish orqali CSS xususiyati flex-basis .col ( flex: 1 0 20%; )

Bundan tashqari, Bootstrap 4 panjarasi bir nechta satrlarda ustunlar sonini ko'rsatmasdan, sezgir bloklarni joylashtirish imkonini beradi.

... ... ... ...

Ushbu harakat yangi qatordan boshlanishi kerak bo'lgan adaptiv blok oldidagi belgiga w-100 sinfiga ega bo'sh div elementini qo'shish orqali amalga oshiriladi.

Agar ushbu amalni faqat ba'zi nazorat nuqtalari uchun ishlatish kerak bo'lsa, siz unga Bootstrap 4 javob beruvchi yordamchi dastur sinflarini ham qo'shishingiz kerak (w-100 klassi).

Ushbu misolda adaptiv bloklar faqat kichik yoki kichik ko'rish oynasi bo'lgan qurilmalarda yangi qatorga o'tkaziladi.

... ... ... ...

Ikkinchi guruh sinflari (col-auto, col-sm-auto, col-md-auto, col-lg-auto va col-xl-auto) moslashuvchan bloklarni yaratish uchun mo'ljallangan, ularning kengligi quyidagilarga qarab belgilanadi. ularning mazmuni.

Masalan:

(1) (2) - md, lg va xl nazorat nuqtalaridagi kenglik tarkibga qarab aniqlanadi (3)

Natijada:

• xs va sm da adaptiv bloklar vertikal ravishda (birining ostidan) joylashadi va qatorning butun kengligini egallaydi;
• md da, sezgir blok 2 uning mazmunini ko'rsatish uchun zarur bo'lgan kenglikka ega bo'ladi; agar 2-blok qatorning butun kengligini egallamasa, 1 va 3-moslashuvchan bloklar uni o'zaro teng taqsimlaydi; agar 2-blok chiziqning butun kengligini egallasa, u holda rasm xs va sm nazorat nuqtalaridagi kabi bo'ladi;
• lg va xl da, sezgir blok 2 uning mazmunini ko'rsatish uchun zarur bo'lgan kenglikka ega bo'ladi; agar 2-blok satrning butun enini egallamasa, u holda 3-blok 2 ta Bootstrap ustuniga teng kenglikni, 1-blok esa satrning butun qolgan kengligini egallaydi; agar 2-blok satrning butun kengligini egallasa, u holda belgilash xs va sm-dagi kabi bo'ladi, faqat 3-qatordagi 3-blokning kengligi 2 ta Bootstrap ustuniga teng bo'ladi.

Moslashuvchan bloklarni ketma-ket joylashtirish

Odatiy bo'lib, ketma-ket adaptiv bloklar gorizontal chiziqlarga joylashtirilgan. Gorizontal chiziq ichida adaptiv bloklar chapdan o'ngga ketma-ket joylashtirilgan. Ustunlarning umumiy soni 12 tadan ko'p bo'lmagan adaptiv bloklar bitta gorizontal chiziqqa sig'ishi mumkin, joriy chiziqqa mos kelmaydigan moslashtirilgan bloklar keyingisiga o'tadi.

(1) (2) (3) (4)

Keling, boshqa bir misolni ko'rib chiqaylik, unda moslashuvchan bloklar turli boshqaruv nuqtalarida turli xil kengliklarga ega:

Joylashtirishning asosiy printsipi

Bootstrap 4 tarmog'ida veb-sahifa tartibini joylashtirishning asosiy printsipi ba'zi moslashtiruvchi bloklarni boshqalarga joylashtirishdir.

Shu bilan birga, adaptiv bloklarning kengligi har doim nisbiy qiymat bo'lib, u Bootstrap ustunlarida o'rnatiladi va faqat ota-onaning kengligiga bog'liq, ya'ni. qator.

Veb-sahifa tarkibi faqat sezgir bloklarga joylashtirilishi kerak.

Masalan, mavjud tartibda, ya'ni col-8 moslashuv blokida biz yana 2 ta blokni qo'shamiz:

... ...

Buni amalga oshirish uchun siz birinchi navbatda 8-blokda qatorni (moslashuvchan bloklar uchun konteyner) qo'yishingiz kerak:

... ... Bootstrap 4 - javob beruvchi blok col-8 tarkibiga qator kiritish

Shundan so'ng, ketma-ket 2 ta adaptiv blok qo'shing:

... ... ... Bootstrap 4 - javob beruvchi bloklarni qatorga kiritish

Moslashuvchan bloklarni tekislash

Moslashuvchan bloklarni gorizontal va vertikal yo'nalishlarda tekislash Bootstrap 4 da utility flex sinflari yordamida amalga oshiriladi.

Moslashuvchan bloklarni vertikal tekislash

Moslashuvchan bloklarni satr chizig'ida vertikal tekislash quyidagi sinflardan biri yordamida amalga oshiriladi, ular qatorga qo'shimcha ravishda qo'shilishi kerak:

• align-element-start (satr boshlanishiga nisbatan);
• align-element-center(markaz);
• align-element-end (oxiriga nisbatan).

Masalan, barcha moslashtirilgan bloklarni satr chizig'ining o'rtasiga to'g'rilaymiz:

1/2 2/2

Odatiy bo'lib, sezgir elementlar ular joylashgan qatorning butun balandligini egallaydi.

Chiziq ichidagi ma'lum bir moslashuvchan blokni vertikal tekislash quyidagi sinflardan biri bilan amalga oshirilishi mumkin:

• tekislash-o'z-o'zidan boshlash (chiziq boshlanishiga nisbatan);
• tekislash-o'z-o'zini markazlashtirish (markaz);
• tekislash-o'z-o'zidan oxiri (oxiriga nisbatan).

Bu sinflar qatorga emas, balki adaptiv bloklarga qo'shilishi kerak.

Masalan, biz moslashtiruvchi blok 2ni chiziqning pastki chetiga tekislaymiz:

(1) (2)

Moslashuvchan bloklarni gorizontal tekislash

Quyidagi sinflar adaptiv bloklarni gorizontal yo'nalishda tekislash uchun mo'ljallangan:

• oqlash-kontent-start (satr chizig'ining boshlanishiga nisbatan - standart);
• oqlash-kontent-markaz (markaz);
• oqlash-tarkib-oxirini (satr oxiriga nisbatan);
• oqlash-kontent-atrofida (birinchi va oxirgi adaptiv blokdan oldingi bo'shliqni hisobga olgan holda, teng ravishda);
• oqlash-tarkib-orasini (teng, javob beruvchi bloklar orasidagi teng bo'shliq bilan).

Masalan, adaptiv bloklarni gorizontal yo'nalishda teng ravishda taqsimlaymiz:

(1) (2)

Ta'sirchan chegarasiz tartib

Moslashuvchan bloklarning ichki qoplamasi va qatorlarning tashqi manfiy chekkalari, agar ikkinchisiga no-gutters sinfi qo'shilsa (ya'ni, qator) olib tashlanishi mumkin.

... ... ...

Shuni esda tutingki, bu sinf (yo'q oluklar) faqat to'g'ridan-to'g'ri ushbu qatorga joylashtirilgan moslashuvchan bloklarga ta'sir qiladi. Bular. To'ldirishni olib tashlash uchun CSS xususiyatlari ota-ona sifatida ushbu qatorga ega bo'lmagan adaptiv bloklarga taalluqli bo'lmaydi.

Bootstrap 4 da javob beruvchi blokirovkalarni almashtirish quyidagi usullar yordamida amalga oshirilishi mumkin:

• sinflar ofset (ma'lum miqdordagi ustunlar uchun);
• xizmat (foydali) marja sinflari.

ofset sinflari

Ofset sinflari moslashtirilgan bloklarni ma'lum sonli ustunlar bilan o'ngga siljitish uchun mo'ljallangan.

Ushbu sinflar quyidagi sintaksisga ega:

Ofset-(1) yoki ofset-(uzilish nuqtasi)-(1)

(uzilish nuqtasi) - nazorat nuqtasi, undan boshlab ushbu blokga ofset qo'llaniladi (agar u ko'rsatilmagan bo'lsa, eng kichik qurilmalardan boshlab ofset qo'llaniladi).

(2) - Bootstrap ustunlari sonidan foydalangan holda belgilangan ofset qiymati.

Misol sifatida, rasmda ko'rsatilganidek, moslashuv bloklariga ofsetni o'rnatamiz.

(1) (2) (1) (2) (1)

Margin sinflari yordamida ofset

Bootstrap-ning to'rtinchi versiyasida siz chekka chekkalari (chekka-chap: avtomatik va (yoki) chekka-o'ng: avtomatik) yordamida moslashuvchan bloklar uchun ofsetni ham o'rnatishingiz mumkin. Ushbu ofset opsiyasi Bootstrap (4) ning yangi versiyasidagi panjara CSS Flexbox-ga asoslanganligi sababli yuzaga keladi.

Ushbu o'zgartirish opsiyasi (marj sinflaridan foydalangan holda) bloklarni bir-biriga nisbatan ba'zi o'zgaruvchan miqdorga siljitish kerak bo'lganda ishlatiladi.

Bootstrap 4-da bloklar uchun chekka chekinishlarni yanada qulayroq va moslashuvchan sozlash uchun (chekka-chap: avtomatik va (yoki) chekka-o'ng: avtomatik) siz ml-auto , mr-auto , ml-(uzilish nuqtasi) sinflaridan foydalanishingiz mumkin. )-avto va mr-( uzilish nuqtasi)-avtomatik .

Bootstrap 4 - Responsive blok ofset

(1) (2) (1) (2) (3) (1) (2)

Moslashuvchan bloklarning vizual tartibini o'zgartirish

Odatiy bo'lib, sezgir bloklar HTML kodida paydo bo'ladigan tartibda vizual tarzda ko'rsatiladi.

Bootstrap 4 da javob beruvchi blokning vizual tartibini o'zgartirish order-(vizual_raqam) klassi yordamida amalga oshiriladi. Bu sinf xs nazorat punkti uchun. Agar elementning tartibini xs boshqaruv nuqtasi uchun emas, balki sm, md, lg yoki xl uchun aniqlash kerak bo'lsa, unda ushbu sinfning quyidagi versiyasi qo'llaniladi:

Buyurtma-(uzilish nuqtasi)-(vizual_raqam)

(vizual_raqam) o'rniga 1 dan 12 gacha raqamni ko'rsatishingiz kerak.

Bu raqam elementlarning sahifada qanday ko'rinishini aniqlaydi. Ya'ni, barcha moslashuvchan elementlar vizual ravishda ushbu raqamlarning ortib borish tartibida bo'ladi. Agar elementda tartib klassi mavjud bo'lmasa, u sukut bo'yicha 0 ga teng.

Masalan, ikkita adaptiv blokning tartibini o'zgartiramiz:

Birinchisi (buyurtmasiz, tartibsiz) Ikkinchidan, lekin oxirgi uchinchisida ko'rsatiladi, lekin ikkinchisida ko'rsatiladi

Yana bir misol (moslashuvchan tartib sinflari yordamida):

Birinchidan (xs da sm ikkinchi ko'rsatiladi) Ikkinchidan (xs da sm birinchi bo'lib ko'rsatiladi)

Raqamlarga qo'shimcha ravishda (sukut bo'yicha 1 dan 12 gacha), siz birinchi va oxirgi so'zlardan ham foydalanishingiz mumkin. Bu sinflar (tartib-birinchi, tartib-(uzilish nuqtasi)-birinchi, tartib-oxirgi, tartib-(to'xtash nuqtasi)-oxirgi) elementni mos ravishda boshiga yoki oxiriga vizual ko'chirish imkonini beradi.

Birinchi tartib va ​​tartib-(uzilish nuqtasi)-birinchi sinflar elementning CSS tartib xususiyatini -1 (tartib: -1) ga o'rnatish orqali o'z ta'sirini ko'rsatadi va tartib-oxirgi va tartib-(uzilish nuqtasi)-oxirgi sinflar CSS-ni o'rnatadi. mulkni 13 qiymatiga buyurtma qiling (tartib: $columns + 1).

Keling, yuqoridagi misolni birinchi va oxirgi kalit so'zlardan foydalanadigan tartib sinflari yordamida qayta yozamiz:

Birinchisi (xs da sm oxirgi ko'rsatiladi) Oxirgi (xs da sm birinchi bo'lib ko'rsatiladi)

Raqam va birinchi va oxirgi so'zlar bilan tartib sinflaridan foydalanishga misol:

#1 (XS), #LAST (SM), #1 (MD, LG va XL) #2 (XS), #7 (MD, LG va XL) #3 (XS), #6 (MD, LG va XL ) #4 (XS), #5 (MD, LG va XL) #5 (XS), #4 (MD, LG va XL) #6 (XS), #3 (MD, LG va XL) #7 (XS) ), #2 (MD, LG va XL) #8 (XS), #FIRST (SM), #8 (MD, LG va XL)

Boostrap 4 tarmog'idagi moslashuvchan tartibning namunasi

Bootstrap 4 panjarasidan foydalanib, rasmda ko'rsatilgan veb-sahifa bloki uchun javob beruvchi maket yarataylik

1. Mobil qurilmalar uchun blok belgilarini yarating (xs).

(1) (2) (3) (4) (5)

2. sm nazorat nuqtasi uchun belgilashni o'rnating:

(1) (2) (3) (4) (5)

3. Bloklarni md va lg qurilmalarida bo'lishi kerak bo'lgan ustunlar soniga o'rnating:

(1) (2) (3) (4) (5)

4. Xl uchun belgi yarating:

(1) (2) (3) (4) (5)

Biz moslashtirilgan bloklardan keraksiz boshqaruv nuqtalarini olib tashlaymiz:

(1) (2) (3) (4) (5)

Bundan tashqari, dastlab Bootstrap 4 da sezgir blok 100% kengligiga ega. Bu adaptiv bloklarni yaratishda ustunlar sonini ko'rsatmaslikka imkon beradi, agar ularning dastlabki kengligi 12 ustun (100%) bo'lishi kerak.

(1) (2) (3) (4) (5)