Bootstrap 4: 7 алхамаар хэрхэн гоёмсог, энгийн вэбсайт хийх вэ

2024 Зохиолч: John Day | [email protected]. Хамгийн сүүлд өөрчлөгдсөн: 2024-01-30 11:02

Энэхүү зааварчилгааны зорилго нь програмчлалын талаар мэддэг хүмүүст HTML эсвэл бусад хэлбэрээр өгөх явдал юм. Bootstrap 4 ашиглан онлайн портфолио хийх энгийн танилцуулга өгөх болно., мөн танд тулгарч болох цөөн хэдэн асуудал.

Энэ багцыг илүү хялбар болгохын тулд хэд хэдэн жижиг алхам болгон хуваасан: HTML хүрээ, CSS хүрээ, Javascript хүрээ, навигацийн самбар, нүүр хуудас (агуулгын блоктой).

Хэрэв ямар нэг зүйлийн талаархи миний тайлбар танд эргэлзээ төрүүлсээр байвал асуулт, санал, эсвэл эргэлзэж буй элементээ google -ээр үлдээж болно. Вэбсайт болон Bootstrap програмчлах олон эх сурвалжууд байдаг.

Тэмдэглэл: Энэхүү гарын авлага нь бүгдийг хамардаггүй бөгөөд HTML, CSS эсвэл Javascript дээр програмчлах талаар сурахад орлуулах зүйл биш юм.

Шаардлагатай нөөц

• Ачаалагч 4
• jQuery 3.3.1

Нэмэлт нөөц

• FontAwesome
• Google фонтууд
• онцлох.js

Хэрэв та бүрэн жишээг алгасах эсвэл репозиторийг үзэхийг хүсч байвал:

• Бүрэн жишээ
• Хадгалах сан

Тэмдэглэл: Хэрэв та ижил текст засварлагчтай хамт дагаж мөрдөхийг хүсч байвал би жишээн дээрээ Sublime -ийг зурган дээрээ ашиглах болно.

Алхам 1: Тохируулах

Фолдерын тохиргоо

1. Бидний татаж авах гэж байгаа бүх зүйлийг хадгалах боломжтой хавтас үүсгэнэ үү. Энэ нь таны багцын үндсэн лавлах болно.
2. Үүний дотор "bootstrap" нэртэй хавтас үүсгэнэ үү.
3. Root portfolio фолдер дотроо "jquery" нэртэй өөр хавтас үүсгэнэ үү.

Портфолио хавтас

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

Ачаалагч 4

1. Тэдний вэбсайтад зочилж, "Эмхэтгэсэн CSS ба JS" хэсгийн доорх "Татаж авах" товчийг дарна уу.
2. . Zip файлыг "Татаж авах" фолдер эсвэл өөр тохиромжтой газарт хадгална уу.
3. . Zip файлыг нээгээд өмнө нь үүсгэсэн "bootstrap" фолдерт "css" ба "js" фолдерыг задална уу.

jQuery

1. Тэдний вэбсайтад зочилж, "шахагдаагүй, хөгжүүлэлт jQuery 3.3.1" -ийг татаж аваарай.
2. Энэ файлыг өмнө нь хийсэн "jquery" фолдер дотор хадгална уу.

Бодит портфолио дээр ажиллаж эхлэхэд бүх хүрээ бэлэн болно.

Алхам 2: HTML Frame (index.html)

Таны нэр

Энэ хүрээ нь хэт нарийн төвөгтэй зүйл биш боловч би тохиргооны ерөнхий зорилгыг тайлбарлахыг хүсч байна.

JQuery -ийн дараа Bootstrap JS

Bootstrap -ийн Javascript файл болон jQuery хоёрын хооронд ямар нэгэн давхцал байгаа бололтой. Энэ давхцал хэр өргөн цар хүрээтэй болохыг би туршиж үзээгүй боловч нэг жишээ бол навигацийн мөрөнд ашигладаг унах функц юм. Хэрэв та эхлээд Bootstrap дээр ачаалвал унах товч ажиллахгүй болно.

FontAwesome

Хэрэв та вэб хөгжүүлэлт хийсэн бол FontAwesome гэж юу болохыг та мэдэх байх. Гэсэн хэдий ч хэрэв тийм биш бол энэ нь нэмэлт тохиргооны хэрэгслүүдийг багтаасан дүрс тэмдгийн багц юм. Хэрэв та над шиг уран сайхны авъяас чадваргүй бол энэ нь үнэхээр хэрэгтэй болно.

hightlight.js

Энэхүү хүрээ нь вэб хуудсан дээр кодын динамик тодруулалтыг хийх боломжийг олгодог. Хэрэв та зөвхөн нийтлэг програмчлалын хэлийг ашигладаг бол миний ашигладаг бусад хүрээ шиг импорт хийж болно, гэхдээ өөр хэлний багцыг татаж авах сонголт бас бий. Би цөөн хэдэн макро болон ини хэлний ачаар сүүлчийн сонголтыг сонгосон боловч энэ нь зөвхөн танд хамаарна.

Анхаарна уу: Би хоёр дүрс тэмдэг, онцлох.js гэх мэт файлд хатуу кодчилсон холбоос ашигладаг газруудыг мэдэж аваарай. Түүнчлэн, зөвхөн Bootstrap болон jQuery шаардлагатай тул өөр ямар ч хүрээ нэмэх эсвэл хасах боломжтой. Хэрэв та ямар нэгэн зүйлийг устгавал дараа нь харгалзах кодын мөрүүдийг устгахаа мартуузай.

Алхам 3: CSS Frame (style.css)

/ * * Bg өнгийг саарал болгож, үсгийн хэв маягийг өөрчилснөөр вэбсайт хэрэглэхэд хялбар болно гэж найдаж байна */ body {background: gray; font-family: 'Open Sans', sans-serif; }

/*

* Энэ нь nav bar нь бүх зүйлийн дээр байгаа эсэхийг баталгаажуулдаг */ nav {z-index: 9999; }

/*

* Энэ нь догол мөрийн текстийг илүү унших боломжтой болгох ёстой */ p {font-size: 18px; захын дээд: 5 пиксел; доод ирмэг: 5 пиксел; }

/*

* Энэ нь миний бүх кодын блокуудыг зөв форматласан эсэхийг шалгадаг */ code {text-align: left; }

/*

* Би жагсаалтыг сумтай байлгахыг хүсэхгүй байна */ li {list-style-type: none; }

/*

* Холбоосууд нь анхдагчаар цэнхэр өнгөтэй байдаг бөгөөд би тэднийг Bootstrap -ийн стильтэй нийцүүлэхийг хүсч байна */ li a, a {color: white; }

/*

* Би агуулгын давхцахгүй байгаа эсэхийг шалгахын тулд navbar-ийг агуулсан div-д ангийн тэмдэг холбодог */.navFix {padding-bottom: 70px; }

/*

* Хэмжээ нэмэгдэх нь navbar */.social-media {font-size: 1.3em; }

/*

* Унтраах холбоосуудын үндсэн өнгө нь цагаан өнгөтэй байна */.dropdown-menu a: hover {background-color: #212529; }

/*

* Дивүүдийг pdf файлуудыг тодорхой өндөрт харуулах */.pdfFill {height: 45rem; }

/*

* Товчлуурууд болон кодын блокуудын хооронд жаахан зай нэмээрэй */.codeStyle {padding-top: 30px; }

Хэсэг хугацааны дараа таныг хэмнэхийн тулд би контент дээр суурилсан CSS элементүүдийг оруулсан болно. Тэд бүгд маш энгийн бөгөөд ихэнхдээ амьдралын чанарын өөрчлөлтүүд бөгөөд энэ нь уншигчдад портфолиотой харилцах ажлыг хөнгөвчилдөг.

nav z-индекс

Надад вэб хөгжүүлэлтийн маш хязгаарлагдмал туршлага байгаа тул энэ нь Bootstrap-ийн навигацийн самбарыг хэрэгжүүлэхэд тохиолддог нийтлэг асуудал мөн эсэхийг би сайн мэдэхгүй байна, гэхдээ урагшаа чиглүүлэх тодорхойлолт байхгүй бол навигацийн самбар нь бусад агуулгын дор гарч ирнэ. Bootstrap -ийн картууд. Энэ нь эвхэгддэг navbar дээр хамгийн их ажиглагддаг, гэхдээ аюулгүй байдлын үүднээс индексийн өөрчлөлтийг оруулсан болно.

кодын тохируулга

Би ихэвчлэн элементүүдийг тэгшлэхийн тулд Bootstrap-ийн "justify-content-center" ба "text-center" ангиудыг ашигладаг тул миний код энэ төвд нийцсэн мөн чанарыг өвлөхийг хүсэхгүй байна. Аливаа тохируулгын өөрчлөлтийг дарж бичих, кодын хаягийг зүүн тийш нь чиглүүлэх замаар үүнийг хялбархан засаж болно: энэ нь кодын таб хоорондын зайг хадгална.

navFix дүүргэлт

Bootstrap -ийн навигацийн самбар хуудасны дээд хэсэгт наалдсан тохиолдолд түүний доор контент ачаалагдах болно. Навч нь хуудсыг өөрөө харахын оронд харах цонхны дээд хэсэгт наасан тул ийм зүйл тохиолддог гэж би бодож байна. Үүнийг үл хамааран navbar болон бусад агуулгын хоорондох зайг нэмэгдүүлэх замаар засч залруулна.

pdf өндөр

Pdf файлуудын анхдагч өндөр нь маш бага хэмжээтэй байдаг. Энэ нь үндсэндээ уншигдах боломжгүй тул би өндрийг нь өөрчилж, нэг удаад ойролцоогоор нэг хуудсанд хангалттай зай гаргаж өгчээ.

Алхам 4: Javascript Frame (javascript.js)

/ * * Энэ нь 'toggle' ангилалтай аливаа элементийг хайх бөгөөд үүнийг нуух эсвэл нээх */ функц toggleSection (id, toggleID) {if (document.getElementById (id)) {var divID = document.getElementById (id); var divArray = document.getElementsByClassName (toggleID);

for (var i = 0; i <divArray.length; i ++) {divArray .style.display = "байхгүй"; }

divID.style.display = "блок";

}

худал буцах;

}

/*

* Тодорхой дарааллаар ажиллуулах шаардлагатай код */ $ (document).ready (function () {/ * * Файлуудаас контент ачаалах */

/*

* Өгөгдлийг ачаалахад бага зэрэг саатал гаргаарай */ setTimeout (function () {/ * * */ $ ('урьдчилсан код') -д ачаалагдсан бүх кодыг тодруулаарай. Тус бүр (функц (i, блок) { hljs.highlightBlock (блок);});}, 1000); });

Энэхүү багцыг өөрчлөх, удирдахад хялбар болгохын тулд би нэг хуудас форматыг ашиглахаар шийдсэн. Энэ нь ихэнхдээ бүх зүйлийг орон нутгийн хэмжээнд байлгаж, агуулгыг хурдан ачаалах боломжийг олгодог.

toggleSection

Би ихэвчлэн олон элементүүдийг салгаж, бүлэглэхийн тулд divs ашигладаг тул ямар агуулгыг харуулах эсвэл нуух шаардлагатайг удирдахын тулд ангийн утгыг ашигладаг байсан. Та үүнийг ашиглан тусдаа товчлууруудыг бүлэглэх боломжтой боловч контент харуулахгүй байхын тулд "блок" дэлгэцийг тохируулахын өмнө нэмэлт шалгалт хийх шаардлагатай болно.

баримт бичиг ачаалж байна

Ердийн HTML файлд бие даасан програмчлалын код оруулах нь ихэвчлэн эмх замбараагүй байдаг тул би үүнийг оруулсан болно. Бид динамик тодруулах энэ аргыг ашиглан бусад файлаас контент ачаалсны дараа процесс явагдах болно.

$ ('#mq2-intro'). ачаалах ("файлууд/хичээлүүд/mq2/mq2-танилцуулга/контент.html");

Энэ бол контентийг хэрхэн ачаалах жишээ юм.

Алхам 5: Навигацийн самбар

Эхний үсэг

• Гэр
• Миний тухай
• Төслийн хичээлүүд
• Надтай холбогдоорой

• Навигацийн самбар нь багцын бүх зүйлээс хамгийн төвөгтэй элемент юм. Ангийн хослол нь дүрмийн номыг тасралтгүй харахыг шаарддаг таавар шиг болгодог.

  Bootstrap функц

  Bootstrap нь үндсэндээ өөр өөр ангийн утгуудаар ажилладаг. "Нав" элементийг харахад анги тус бүрийн зорилгыг тодорхойлоход тийм ч хэцүү биш юм.

  Манай "navbar" бол "md" (дунд), "өргөжүүлэх" чадвартай, "харанхуй" сонголт юм. Тэгээд бид үүнийг "дээд талд" "зассан". Энэ нь ойлгомжгүй мэт харагдаж байна, учир нь энэ нь танигчдын хослол юм, гэхдээ хэрэв та тэдгээрийг элементийн нэр томъёо гэж үзвэл юу болж байгааг ойлгоход илүү хялбар болно.

  Брэнд

  Брэнд бол зүүн дээд буланд байгаа вэбсайт бүр дээр харагддаг ердийн лого, нэр юм. Энэ бол хэрэглэгч бүрийн хүлээж буй, туршиж үзсэн дизайны элемент юм.

  Тэмдэглэл: "i" хаягууд нь үнэндээ FontAwesome дүрсүүд бөгөөд та эдгээр тэмдэглэгээг дурын дүрс тэмдгийн хуудаснаас авдаг.

  Toggler/эвхэгддэг товчлуур (гар утас)

  Энэ товчлуур нь зөвхөн хөдөлгөөнт төхөөрөмж дээр харагдана. Гэхдээ бид навигацийн самбарыг өргөтгөх шаардлагатай гэсэн "nav" мэдэгдлийг оруулсан тул эдгээр элементүүд нь ID болон "өгөгдөл солих" таних тэмдгээр дамжуулан хоорондоо холбогддог.

  Navbar линкүүд (зүүн талд)

  Эдгээр холбоосууд нь таны багцад ямар категори хэрэгтэй байгаагаас бүрэн хамаарна. Би ердийн хэдэн жишээг эхлэлийн цэг болгон оруулсан боловч хэн ч адилхан биш юм. Урлагийн баримал урлахад анхаарлаа төвлөрүүлдэг тул танд "Хичээлүүд" хэсэг хэрэггүй байж магадгүй юм. "Li" зүйл бүрийг хуулж, буулгаж болох тул танд хэрэгтэй зүйлээ олж мэдмэгц навигацийг тохируулахад хялбар болно.

  Тэмдэглэл: Та бусад унах цэснүүд дотроос техникийн цэсийг үүсгэж болно, гэхдээ хэрэв та интерфэйсийг цэвэрхэн харагдуулахын тулд CSS болон Javascript -ийг нэмж оруулахыг хүсэхгүй байгаа бол би үүнийг зөвлөхгүй.

  Navbar линк (баруун талд)

  Холбоосуудын зөв жагсаалтыг "мл-авто" ангилалд оруулснаар Bootstrap нь хоёр жагсаалтыг жигд хуваарилдаг. Энэ нь цэвэр зүүн ба баруун талын хуваагдлыг бий болгоно. Би энэ орон зайг олон нийтийн мэдээллийн хэрэгслийн холбоос болгон ашиглахаар шийдсэн, учир нь энэ бол таны оролцоог нэмэгдүүлэх маш түгээмэл бөгөөд түгээмэл арга юм. Хэрэв энэ нь хамааралгүй бол та эдгээр холбоосыг хайх талбар, нэвтрэх мэдээлэл гэх мэтийг хуулж болно. Гэхдээ үүнийг ашиглах нь чухал орон зай гэдгийг санаарай. Зүүн талд байгаа navbar линкүүдийн нэгэн адил та тэдгээрийг хуулж, буулгаж болно.

  Тэмдэглэл: Хэрэв та миний тохируулсан линкүүдийг ашиглахаар төлөвлөж байгаа бол "href" холбоос дээрх "хэрэглэгчийн нэр" -ийг өөрөө солино уу.

  Алхам 6: Нүүр хуудас

  

  

  

  Таны нэр

  Программист зохиолч Геймер

  Энэ хэсэг болон таны дараагийн агуулгын хуудсууд таны багцад юу оруулахыг хүсч байгаагаас хамаарна. Би агуулгын төрөл бүрийг авч үзэж чадахгүй нь ойлгомжтой боловч зураг, pdf, видео, кодын блок, зарим ердийн оруулгыг оруулахыг хичээсэн.

  Хүснэгтийн формат

  Нүүр хуудсыг хүснэгтийн үүрэг гүйцэтгэхээр тохируулсан болно. Би эцсийн бүтээгдэхүүнээ бүтээхдээ өөрийн гайхалтай дизайны ур чадвартаа найдах ёсгүй байсан ч энэ нь маш динамик, уян хатан байдгийг харуулахын тулд мөр, баганын хослолын янз бүрийн хувилбаруудыг нэмсэн. Та 3 мөр, 2 багана үүсгэж, зүүн талд нь товчлуурууд, баруун талд нь контент байх болно, эсвэл та огт өөр зүйл хийж болно. Жаахан туршилт хийхэд л хангалттай.

  Товчлуурууд

  Эдгээр нь ердийн товчлууруудтай адил үүрэг гүйцэтгэдэг. Энд байгаа цорын ганц жинхэнэ Bootstrap интеграцчлал нь бусад сэдвүүдтэй нийцүүлэх загварчлалаас үүдэлтэй юм. Үгүй бол контентоо харуулахын тулд шаардлагатай олон эсвэл бага товчлуурыг үүсгээд дараа нь href холбоосыг div -ийн ID -тэй тааруулж байгаа эсэхийг шалгаарай.

  Кодын агуулгыг програмчлах

  "Код" шошго нь бүх тодруулгыг удирдахын тулд онцлон тэмдэглэдэг.js -ийг ашигладаг анхдагч хаягууд юм. Хэрэв та javascript.js файлаас санаж байгаа бол бусад файлын агуулгыг ачаалах хэсэг байна.

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

  • Үүний эхний хэсэг нь агуулгыг оруулахыг хүссэн элементийн "id" -ийг хайж олох болно.
  • Хоёр дахь хэсэг нь ачаалахыг хүсч буй файлын байршил юм.

  Тэмдэглэл: Энэ вэб хуудсыг сервер дээр биш дотооддоо засварлах магадлал өндөр байгаа тул контент бүрэн ачаалагдахгүй. Үүнийг янз бүрийн аргаар шийдвэрлэх боломжтой бөгөөд үүнийг би зааврын төгсгөлд авч үзэх болно.

  YouTube видео

  Суулгасан "iframe" нь үнэндээ YouTube -ээс гардаг. Би тэдгээрийг хэрхэн яаж авах талаар дэлгэрэнгүй тайлбарлахгүй, гэхдээ та видеог "Хуваалцах" хэсэгт очиход вэб хуудсан дээр видеогоо үзүүлэхэд шаардлагатай кодыг үүсгэхэд туслах "Оруулах" сонголт байна.

  Алхам 7: Урагшаа харах

  Таны вэбсайтад оруулахыг хүссэн зарим элемент эсвэл агуулгын төрлийг би хамруулаагүй байх маш сайн боломж байна. Аз болоход танд дараагийн алхмуудыг өөрөө хийх олон сайн сонголт бий.

  Bootstrap -ийн баримт бичиг

  Bootstrap-ийн баримт бичиг нь хэрэв та урьдчилан програмчлагдсан элементүүдийг хайж байгаа бол туршиж үзэхийн тулд портфолио руугаа хуулж, буулгаж болох жишээ хайж байгаа бол эхлэхэд тохиромжтой газар юм. Би карт, тойруулга, маягт дээр гар хүрээгүй. Сонголтуудыг харахын тулд "Бүрэлдэхүүн хэсгүүд" хэсгийг үзэхийг зөвлөж байна.

  W3Сургууль

  W3Schools бол вэб програмчлах, хөгжүүлэхтэй холбоотой бүх зүйлийг сурч мэдэх гайхалтай вэбсайт юм. Тэд надаас хамаагүй илүү ухаалаг бөгөөд таны бодож болох HTML, CSS, Javascript -ийн бүх функцийг багтаасан болно.

  Таны портфолио байршуулах

  Энэхүү зааварчилгаа нь вэбсайтаа хэд хэдэн өөр платформ дээр хэрхэн байршуулахыг заадаг. Эдгээр нь хэрэв та өөрийн портфолио, хүмүүсийг ажилд авах гэх мэт хүмүүст харуулахыг хүсч байвал хийх ёстой алхамууд юм.

  Туршилт хийж, хөгжилтэй байгаарай

  Таны гайхалтай портфолио хийх цорын ганц арга бол сонирхолтой, сонирхолтой бүх зүйлийг туршиж үзэх, туршиж үзэх явдал юм. Олон тооны гоёмсог дизайны портфолио, вэбсайтууд шилжилтийн эффект эсвэл динамик фон ашигладаг боловч тэдгээрийн аль нь ч урьдчилан хийгдээгүй байдаг.