Bootstrap 4: 7 bosqichlari yordamida qanday qilib zamonaviy va sodda veb -sayt yaratish mumkin

2024 Muallif: John Day | [email protected]. Oxirgi o'zgartirilgan: 2024-01-30 13:24

Bu ko'rsatmaning maqsadi - dasturlash bilan tanish bo'lganlarga HTML yoki boshqa yo'l bilan - Bootstrap 4 yordamida onlayn portfel yaratish bo'yicha oddiy ma'lumot berish. Men sizga veb -saytning dastlabki sozlamalari, bir nechta kontent bloklarini yaratish haqida ma'lumot beraman. va siz duch keladigan ba'zi muammolar.

Portfolio uni boshqarish uchun bir nechta kichik bosqichlarga bo'linadi: HTML ramka, CSS ramkasi, Javascript ramkasi, navigatsiya paneli va bosh sahifa (kontent bloklari bilan).

Agar biror narsaga tushuntirishlarim sizni hali ham chalkashtirib yuborsa, savollaringiz, takliflaringiz yoki google -da adashib qolgan elementingiz bilan izoh qoldiring. Veb -saytlar va Bootstrap -ni dasturlash uchun ko'plab manbalar mavjud.

Eslatma: Ushbu qo'llanma hamma narsani o'z ichiga olmaydi va HTML, CSS yoki Javascript-da dasturlashni o'rganishning o'rnini bosa olmaydi.

Kerakli manbalar

• Bootstrap 4
• jQuery 3.3.1

Majburiy bo'lmagan manbalar

• FontAwesome
• Google shriftlari
• ta'kidlash.js

Agar siz to'liq misolga o'tishni xohlasangiz yoki omborga qarasangiz:

• To'liq misol
• Ma'lumotlar ombori

Eslatma: Agar siz xuddi shu matn muharririga amal qilmoqchi bo'lsangiz, men misollar uchun rasmlarda Sublime -dan foydalanaman.

1 -qadam: sozlash

Jildni sozlash

1. Biz yuklamoqchi bo'lgan hamma narsani saqlaydigan papkani yarating. Bu portfel uchun sizning asosiy katalogingiz bo'ladi.
2. Uning ichida "bootstrap" nomli papka yarating.
3. Ildiz portfel papkasida "jquery" nomli boshqa papkani yarating.

Portfel papkasi

| ----- bootstrap | ----- jquery

Bootstrap 4

1. Ularning veb -saytiga tashrif buyuring va "Kompilyatsiya qilingan CSS va JS" bo'limining ostidagi "Yuklab olish" tugmasini bosing.
2. . Zip faylini "Yuklamalar" jildiga yoki boshqa qulay joyga saqlang.
3. . Zip faylini oching va "css" va "js" papkalarini ilgari yaratgan "bootstrap" papkasiga chiqarib oling.

jQuery

1. Ularning veb -saytiga tashrif buyuring va "siqilmagan, rivojlanish jQuery 3.3.1" ni yuklab oling.
2. Faylni ilgari yaratgan "jquery" papkasida saqlang.

Haqiqiy portfel ustida ishlashni boshlaganimizda, barcha ramkalar hozir tayyor.

2 -qadam: HTML ramka (index.html)

Ismingiz

Bu ramka juda murakkab narsa emas, lekin men sozlamaning umumiy maqsadlarini tushuntirmoqchiman.

JQuery -dan keyin JS -ni yuklash

Bootstrap -ning Javascript fayli va jQuery -ning bir -biriga o'xshashligi ko'rinadi. Men bu bir -birining qanchalik keng qamrovli ekanligini sinab ko'rmadim, lekin bitta misol - men navigatsiya panelida foydalanadigan ochiladigan funksiya. Agar siz avval Bootstrap -ga yuklasangiz, ochiladigan tugma ishlamaydi.

FontAwesome

Agar siz biron bir veb -ishlab chiqishni amalga oshirgan bo'lsangiz, ehtimol siz FontAwesome nima ekanligini bilasiz. Ammo, agar bunday bo'lmasa, bu qo'shimcha sozlash uchun asboblar to'plamini o'z ichiga olgan piktogramma. Agar siz menga o'xshagan bo'lsangiz va umuman badiiy iste'dodga ega bo'lmasangiz, bu juda foydali.

shoxrux.js

Ushbu tizim veb -sahifalarda kodni dinamik ravishda ajratib ko'rsatish imkonini beradi. Agar siz faqat umumiy dasturlash tillaridan foydalansangiz, men foydalanadigan boshqa ramkalar kabi import qilishingiz mumkin, lekin maxsus tillar to'plamini yuklab olish imkoniyati ham bor. Men oxirgi variantni bir nechta makro va ini tillari tufayli tanladim, lekin bu butunlay sizga bog'liq.

Eslatma: Ikkala belgi va ta'kidlash.js kabi fayllarga qattiq kodli havolalarni ishlatadigan joylardan xabardor bo'ling. Bundan tashqari, faqat Bootstrap va jQuery talab qilinganligi sababli, boshqa ramkalarni qo'shish yoki olib tashlash mumkin. Agar biror narsani o'chirib tashlasangiz, keyinchalik mos keladigan kod satrlarini olib tashlashni unutmang.

3 -qadam: CSS Frame (style.css)

/ * * Umid qilamanki, bg rangini kul rangga bo'yash va shrift uslubini o'zgartirish veb -saytni iste'mol qilishni osonlashtiradi */ body {background: grey; shrift-oilasi: 'Ochiq Sans', sans-serif; }

/*

* Bu navigatsiya paneli hamma narsaning tepasida ekanligiga ishonch hosil qiladi */ nav {z-index: 9999; }

/*

* Bu paragraf matni o'qilishi uchun qulay bo'lishi kerak */ p {font-size: 18px; yuqori chegara: 5 piksel; pastki chegara: 5 piksel; }

/*

* Bu mening barcha kod bloklarim to'g'ri formatlanganligiga ishonch hosil qiladi */ code {text-align: left; }

/*

* Men ro'yxatlarda o'qlar bo'lishini xohlamayman */ li {list-style-type: none; }

/*

* Havolalar sukut bo'yicha ko'k rangda va men ularni Bootstrap uslubiga mos kelishini xohlayman */ li a, {rang: oq; }

/*

* Kontent bir-birining ustiga qo'yilmasligiga ishonch hosil qilish uchun men navbani o'z ichiga olgan divga sinf tegini bog'layman */.navFix {padding-bottom: 70px; }

/*

* Kengaytirilgan navbar */.social-media {font-size: 1.3em; }

/*

* Ochiladigan havolalar uchun standart ajratish rangi oq */.dropdown-menu a: hover {background-color: #212529; }

/*

* Divlarni pdf fayllarini ma'lum balandlikka ko'rsatishga majburlang */.pdfFill {balandligi: 45rem; }

/*

* Tugmalar va kod bloklari orasidagi bo'shliqni qo'shing */.codeStyle {padding-top: 30px; }

Keyinroq sizni vaqtni tejash uchun tarkibga asoslangan CSS elementlarini shu ramkaga qo'shdim. Ularning barchasi juda oddiy va asosan o'quvchilar uchun portfel bilan ishlashni osonlashtiradigan hayot sifatidagi o'zgarishlar.

nav z-indeksi

Menda veb-ishlab chiqish tajribasi juda cheklangan, shuning uchun men bu Bootstrap-ning navigatsiya panelida keng tarqalgan muammo emasligiga amin emasman, lekin oldinga va orqaga yo'naltirish spetsifikatsiyasi bo'lmasa, navigatsiya paneli aslida boshqa kontent ostida paydo bo'ladi. Bootstrap kartalari. Bu eng ko'p yig'iladigan navigatsiya panelida seziladi, lekin men xavfsizlik uchun indeks o'zgarishini o'z ichiga olganman.

kodni moslashtirish

Men odatda elementlarni tekislash uchun Bootstrap-ning "justify-content-center" va "text-center" sinflaridan foydalanganim uchun, men kodim markazga moslashtirilgan tabiatni meros qilib olishini xohlamayman. Bu har qanday hizalanish o'zgarishlarini qayta yozish va kod teglarini chap tomonga burish orqali osonlikcha tuzatiladi: bu kodda yorliqlar oralig'ini saqlaydi.

navFix to'ldirish

Bootstrap -ning navigatsiya paneli sahifaning yuqori qismiga yopishib qolsa, uning ostiga tarkib yuklanadi. Menimcha, bu sodir bo'ladi, chunki navbar sahifaning o'zi emas, balki ko'rish oynasining yuqori qismiga yopishtirilgan. Nima bo'lishidan qat'iy nazar, bu navigatsiya paneli va kontentning qolgan qismi orasidagi bo'shliqni ko'paytirish orqali aniqlanadi.

Pdf balandligi

Pdf fayllarining standart balandligi juda kichik. Bu deyarli o'qilmaydi, shuning uchun men balandlikni o'zgartirdim va bir vaqtning o'zida taxminan bitta sahifaga joy ajratdim.

4 -qadam: Javascript Frame (javascript.js)

/ * * Bu "o'tish" sinfidagi har qanday elementni qidiradi va uni yashiradi yoki yashiradi */ funktsiya toggleSection (id, toggleID) {if (document.getElementById (id)) {var divID = document.getElementById (id); var divArray = document.getElementsByClassName (toggleID);

uchun (var i = 0; i <divArray.length; i ++) {divArray .style.display = "hech biri"; }

divID.style.display = "blok";

}

noto'g'ri qaytarish;

}

/*

* Belgilangan tartibda bajarilishi kerak bo'lgan kod */ $ (hujjat).ready (function () {/ * * Fayllardan tarkibni yuklash */

/*

* Ma'lumotlarni yuklashga biroz kechiktirishga majbur qiling */ setTimeout (function () {/ * * */ $ ("oldingi kod") ga yuklangan barcha kodlarni ajratib ko'rsatish. Har bir (funktsiya (i, blok) {) hljs.highlightBlock (blok);});}, 1000); });

Ushbu portfelni o'zgartirish va boshqarish oson bo'lishi uchun men bir sahifali formatdan foydalanishga qaror qildim. U hamma narsani mahalliy darajada saqlaydi va kontent yuklanishini tezlashtiradi.

toggleSection

Men qaysi kontentni ko'rsatish yoki yashirish kerakligini boshqarish uchun sinf qiymatlaridan foydalanardim, chunki ko'pincha men bir nechta elementlarni ajratish va guruhlash uchun divlardan foydalanaman. Siz uni alohida tugmachalarni guruhlash uchun ishlatishingiz mumkin, lekin hech qanday kontent ko'rsatilmasligi uchun "blokirovka" displeyini o'rnatishdan oldin qo'shimcha tekshirish kerak.

hujjatlarni yuklash

Men buni kiritdim, chunki odatdagi HTML -fayllarga bir nechta mustaqil dasturlash kodini kiritish umuman tartibsiz. Biz boshqa fayllardan tarkibni yuklaganimizdan so'ng, jarayonni majburan bajarish uchun dinamik ajratish usulini qo'llashimiz mumkin.

$ ('#mq2-intro'). yuk ("fayllar/o'quv qo'llanmalari/mq2/mq2-intro/content.html");

Bu tarkibni qanday yuklashimizga misol.

5 -qadam: Navigatsiya paneli

Bosh harflar

• Uy
• Men haqimda
• Loyihalar bo'yicha darsliklar
• Men bilan bog'lan

Navigatsiya paneli - bu portfel ichidagi eng murakkab element. Sinflarning aniq kombinatsiyasi uni jumboqqa o'xshatadi, bu sizga qoidalar kitobiga doimiy ravishda qarashni talab qiladi.

Bootstrap funksiyasi

Bootstrap asosan turli sinf qiymatlari orqali ishlaydi. "Nav" elementining o'ziga qaraganda, har bir sinfning maqsadini aniqlash juda qiyin emas:

Bizning "navbar" - bu "md" (o'rta), "kengaytirish" qobiliyatli, "qorong'i" variant. Va biz uni "tepaga" o'rnatdik. Bu chalkash ko'rinadi, chunki bu identifikatorlarning yig'indisi, lekin agar siz ularga element sifatlari sifatida qarasangiz, nima bo'layotganini tushunish osonroq bo'ladi.

Brend

Brend - chap tomondagi har bir veb -saytda ko'riladigan odatiy logotip va ism. Bu har bir foydalanuvchi hozirda kutgan haqiqiy dizayn elementi.

Eslatma: "i" teglari aslida FontAwesome piktogrammalaridir va siz bu teglarni istalgan belgining sahifasidan olasiz.

Toggler/katlanadigan tugma (mobil)

Bu tugma faqat mobil qurilmalarda ko'rinadi. Ammo biz navigatsiya paneli kengaytirilishi kerakligi haqidagi "nav" deklaratsiyasini kiritganimiz uchun, bu elementlar bir-biriga identifikatorlari va "ma'lumotlar almashish" identifikatorlari orqali ulanadi.

Navbar havolalari (chap tomonda)

Ushbu havolalar butunlay sizning portfelingiz uchun qaysi toifalarga kerakligiga bog'liq. Men bir nechta odatiy misollarni boshlanish nuqtasi sifatida kiritdim, lekin hech kim bir xil emas. Sizga "darsliklar" bo'limi kerak bo'lmasligi mumkin, chunki siz san'at haykallarini yasashga e'tibor qaratasiz. Har bir "li" elementini nusxalash va joylashtirish mumkin, shuning uchun sizga nima kerakligini aniqlagandan so'ng, navigatsiyani sozlash oson.

Eslatma: Texnik jihatdan boshqa ochiladigan menyularda ochiladigan menyularni yaratishingiz mumkin, lekin interfeysni toza qilish uchun ko'proq CSS va Javascript qo'shishni xohlamasangiz, men buni tavsiya qilmayman.

Navbar havolalari (o'ng tomonda)

To'g'ri havolalar ro'yxatini "ml-auto" sinfini berib, Bootstrap ikkita ro'yxatni teng ravishda ajratadi. Bu toza chap va o'ng bo'linishni hosil qiladi. Men bu maydonni ijtimoiy tarmoqlarga havola qilish uchun ishlatishga qaror qildim, chunki bu sizning ishtirokingizni oshirishning juda keng tarqalgan va mashhur usuli. Agar bu muhim bo'lmasa, siz ushbu havolalarni qidirish satri, kirish ma'lumotlari va boshqalar uchun olib tashlashingiz mumkin. Lekin shuni esda tutingki, bu foydalanish uchun muhim joy. Chap tarafdagi navbar havolalariga o'xshab, siz ham ularni nusxa ko'chirishingiz va joylashtirishingiz mumkin.

Eslatma: Agar siz men o'rnatgan havolalarni ishlatmoqchi bo'lsangiz, "href" havolalaridagi "foydalanuvchi nomini" o'zgartiring.

6 -qadam: Bosh sahifa

Ismingiz

Dasturchi yozuvchi geymer

Bu bo'lim va sizning keyingi tarkib sahifalaringiz portfelingizga nimani kiritmoqchi ekaningizga bog'liq bo'ladi. Shubhasiz, men har bir kontent turiga murojaat qila olmayman, lekin men rasmlar, pdflar, videolar, kod bloklari va ba'zi odatiy qo'shimchalarni qo'shishga harakat qildim.

Jadval formati

Bosh sahifa jadval vazifasini bajarish uchun tuzilgan. Men sizning yakuniy mahsulotingizni yaratishda ajoyib dizayn mahoratimga tayanmagan bo'lardim, lekin men uning dinamik va moslashuvchan ekanligini ko'rsatish uchun qator va ustun birikmalarining turli xil variantlarini qo'shdim. Siz chapda tugmalar va o'ngda kontent bo'lishi uchun 3 qator va 2 ustunni yaratishingiz mumkin yoki siz butunlay boshqacha ish qilishingiz mumkin. Buning uchun ozgina tajriba kerak.

Tugmalar

Bu funktsiyalar oddiy tugmalar kabi ishlaydi. Bootstrap -ning yagona haqiqiy integratsiyasi bu mavzuning qolgan qismiga mos keladigan uslubdan kelib chiqadi. Aks holda, kerakli miqdordagi tugmachani yarating, shunda kontentni namoyish qilish uchun href havolalarini identifikatorlarga moslashtiring.

Kod tarkibini dasturlash

"Kod" teglari - ta'kidlash.js -ni barcha ajratib ko'rsatishni boshqarish uchun ishlatadigan standart teglar. Agar siz javascript.js faylidan eslasangiz, boshqa fayllardan tarkibni yuklash uchun bo'lim mavjud.

$ ('#home-programmer-macro'). load ("files/home/watchLoot.mac");

• Buning birinchi qismi tarkibni kiritmoqchi bo'lgan elementning "id" ni qidiradi.
• Ikkinchi qism - siz yuklamoqchi bo'lgan faylning joylashuvi.

Eslatma: Kontent to'liq yuklanmaydi, chunki siz ushbu veb -sahifani serverda emas, balki mahalliy tahrir qilishingiz mumkin. Buni turli yo'llar bilan hal qilish mumkin, men ko'rsatma oxirida aytib o'taman.

YouTube video

O'rnatilgan "iframe" aslida YouTube -dan keladi. Men ularni qanday olish kerakligini batafsil tushuntirmayman, lekin siz videoni "ulashish" ga kirganingizda, videoni veb -sahifada ko'rsatish uchun kerakli kodni yaratishga yordam beradigan "O'rnatish" varianti mavjud.

7 -qadam: Oldinga qarab

Men sizning veb -saytingizga kiritmoqchi bo'lgan element yoki kontent turini qamrab olmaganim uchun juda yaxshi imkoniyat bor. Yaxshiyamki, keyingi qadamlarni o'zingiz qilishingiz uchun juda ko'p yaxshi variantlar mavjud.

Bootstrap hujjatlari

Bootstrap hujjatlari, agar siz oldindan dasturlashtirilgan elementlarni qidirsangiz va tajribangiz uchun portfelingizga joylashtirishingiz mumkin bo'lgan misollarni qidirsangiz, boshlash uchun ajoyib joy. Men kartalarga, karusellarga yoki shakllarga tegmadim. Variantlarni ko'rish uchun "Komponentlar" bo'limini ko'rib chiqishingizni tavsiya qilaman.

W3 maktablari

W3Schools - bu veb -dasturlash va ishlab chiqish bilan bog'liq hamma narsani bilib olishingiz mumkin bo'lgan ajoyib veb -sayt. Ular mendan ancha aqlli va ular siz o'ylaydigan har qanday HTML, CSS va Javascript funksiyalarini qamrab oladi.

Portfelingizni joylashtirish

Bu ko'rsatma sizga veb -saytingizni turli platformalarda joylashtirishni o'rgatadi. Agar siz portfelingizni odamlarga, ishga yollovchilarga va boshqalarga ko'rsatishni xohlasangiz, bu qadamlardir.

Tajriba qiling va dam oling

Ajoyib portfel yaratishning yagona yo'li - tajriba o'tkazish va hamma narsani va hamma narsani sinab ko'rish. Ko'plab chiroyli dizayn portfellari va veb-saytlar ajoyib o'tish effektlari yoki dinamik fondan foydalanadi, lekin ularning hech biri oldindan tayyorlanmagan.