Paano Gumawa ng isang Madulas at Simpleng Website Sa Bootstrap 4: 7 Mga Hakbang

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:12

Ang layunin ng Instructable na ito ay upang bigyan ang mga pamilyar sa pagprograma - HTML o kung hindi man - isang simpleng pagpapakilala sa paggawa ng isang online portfolio sa Bootstrap 4. Susubukan kita sa paunang pag-set up ng website, kung paano lumikha ng ilang iba't ibang mga bloke ng nilalaman, at ilang mga problema na maaari mong masagasaan.

Ang portfolio ay pinaghiwa-hiwalay sa isang bilang ng mas maliit na mga hakbang upang subukan at gawin itong mas mapamahalaan: frame ng HTML, frame ng CSS, frame ng Javascript, nabigasyon na bar, at ang homepage (na may mga bloke ng nilalaman).

Kung ang aking mga paliwanag para sa isang bagay ay nag-iiwan pa rin sa iyo ng pagkalito, huwag mag-atubiling mag-iwan ng komento sa iyong mga katanungan, mungkahi, o google ang sangkap na naguguluhan ka. Maraming magagamit na mapagkukunan para sa mga website ng programa at Bootstrap.

Tandaan: Ang gabay na ito ay hindi lahat-ng-saklaw at hindi dapat gamitin bilang kapalit upang malaman kung paano mag-program sa HTML, CSS, o Javascript.

Mga Kinakailangan na Mapagkukunan

• Bootstrap 4
• jQuery 3.3.1

Opsyonal na Mga Mapagkukunan

• Kahanga-hanga
• Mga Font ng Google
• highlight.js

Kung nais mong laktawan ang buong halimbawa o tingnan ang imbakan:

• Buong Halimbawa
• Repository

Tandaan: Gumagamit ako ng Sublime sa mga larawan para sa aking mga halimbawa kung nais mong sundin kasama ang parehong editor ng teksto.

Hakbang 1: Pag-set up

Pag-setup ng Folder

1. Lumikha ng isang folder sa isang lugar kung saan mo maiimbak ang lahat na mai-download namin. Ito ang iyong magiging direktoryo ng ugat para sa portfolio.
2. Lumikha ng isang folder sa loob ng isang iyon na nagngangalang "bootstrap"
3. Lumikha ng isa pang folder sa loob ng iyong root portfolio folder na may pangalang "jquery"

Portfolio Folder

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

Bootstrap 4

1. Bisitahin ang kanilang website at i-click ang pindutang "I-download" sa ibaba ng seksyong "Compiled CSS at JS".
2. I-save ang.zip file sa iyong folder na "Mga Pag-download" o iba pang maginhawang lokasyon.
3. Buksan ang.zip file at kunin ang mga folder na "css" at "js" sa folder na "bootstrap" na ginawa mo kanina.

jQuery

1. Bisitahin ang kanilang website at i-download ang "hindi nai-compress, development jQuery 3.3.1"
2. I-save ang file na iyon sa loob ng folder na "jquery" na ginawa mo kanina.

Ang lahat ng mga balangkas ay handa na ngayon kapag nagsimula kaming magtrabaho sa aktwal na portfolio.

Hakbang 2: HTML Frame (index.html)

Ang pangalan mo

Ang frame na ito ay walang labis na kumplikado, ngunit nais kong ipaliwanag ang pangkalahatang mga layunin ng pag-setup.

Bootstrap JS Pagkatapos ng jQuery

Tila mayroong ilang uri ng overlap sa pagitan ng Javascript file ng Bootstrap at jQuery's. Hindi ko sinubukan upang makita kung gaano kalawak ang overlap na ito, ngunit ang isang halimbawa ay ang pagpapaandar na dropdown na ginagamit ko sa navigation bar. Kung na-load mo muna sa Bootstrap, hindi gagana ang dropdown button.

Kahanga-hanga

Kung nagawa mo ang anumang pag-unlad sa web, malalaman mo kung ano ang FontAwesome. Gayunpaman kung hindi iyon ang kaso, ito ay isang hanay ng icon na nagsasama ng isang toolkit para sa labis na pagpapasadya. Ito ay hindi kapani-paniwalang kapaki-pakinabang kung ikaw ay tulad ng sa akin at wala talagang artistikong talento sa lahat.

hightlight.js

Pinapayagan ng balangkas na ito ang pag-highlight ng pabago-bagong code sa mga web page. Maaari mo itong mai-import tulad ng natitirang mga balangkas na ginagamit ko kung gumagamit ka lamang ng mga karaniwang wika ng pagprograma, ngunit mayroon ding pagpipilian upang mag-download ng isang pasadyang hanay ng mga wika. Pinili ko ang huling pagpipilian dahil sa ilang mga macroing at ini na wika, ngunit nakasalalay sa iyo iyon.

Tandaan: Magkaroon ng kamalayan sa mga lugar kung saan gumagamit ako ng mga naka-code na mga link sa mga file tulad ng dalawang mga icon at highlight.js. Gayundin, dahil ang Bootstrap at jQuery lamang ang kinakailangan, huwag mag atubili na magdagdag o magtanggal ng anumang iba pang mga balangkas. Kung aalisin mo ang alinman, tandaan na alisin ang mga linya ng code na tumutugma sa ibang pagkakataon.

Hakbang 3: CSS Frame (style.css)

/ * * Inaasahan na ang pag-toning ng kulay ng bg sa kulay-abo at pagbabago ng istilo ng font ay ginagawang mas madaling ubusin ang website * / body {background: grey; font-family: 'Open Sans', sans-serif; }

/*

* Tinitiyak nito na ang nav bar ay nasa tuktok ng lahat * / nav {z-index: 9999; }

/*

* Dapat nitong gawing mas madaling mabasa ang teksto ng talata * / p {font-size: 18px; margin-top: 5px; margin-ilalim: 5px; }

/*

* Tinitiyak nito na ang lahat ng aking mga bloke ng code ay na-format nang tama * / code {text-align: left; }

/*

* Ayokong magkaroon ng mga bala ang mga listahan * / li {list-style-type: none; }

/*

* Ang mga link ay asul bilang default, at nais kong pumila sila sa istilo ng Bootstrap * / li a, isang {color: white; }

/*

* Itinatali ko ang isang tag ng klase sa isang div na naglalaman ng navbar upang matiyak na hindi overlap ang nilalaman * /.navFix {padding-ilalim: 70px; }

/*

* Ang nadagdagang laki ay umaabot sa navbar * /.social-media {laki ng font: 1.3em; }

/*

* Ang default na kulay ng pag-highlight para sa mga dropdown na link ay puti * /.dropdown-menu a: mag-hover {background-color: # 212529; }

/*

* Puwersahin ang mga div na nagpapakita ng mga pdf sa isang tiyak na taas * /.pdfFill {taas: 45rem; }

/*

* Magdagdag ng ilang spacing sa pagitan ng mga pindutan at mga bloke ng code * /.codeStyle {padding-top: 30px; }

Isinama ko ang mga elemento ng CSS na nakabatay sa nilalaman sa frame na ito upang subukan at mai-save ka ng ilang oras sa paglaon. Lahat sila ay napaka-simple at karamihan ay mga pagbabago sa kalidad ng buhay na ginagawang madali para sa mga mambabasa ang pakikipag-ugnay sa portfolio.

nav z-index

Mayroon akong isang napaka-limitadong halaga ng karanasan sa pag-unlad ng web, kaya't hindi ako sigurado kung ito ay isang pangkaraniwang problema kapag ipinapatupad ang bar ng pag-navigate ng Bootstrap, ngunit nang walang anumang detalye sa harap-sa-likod na orientation, ang nabigasyon na bar ay talagang lilitaw sa ilalim ng iba pang nilalaman tulad ng Mga Card ng Bootstrap. Ito ay pinaka-kapansin-pansin sa nababagsak na navbar, ngunit isinama ko pa rin ang pagbabago ng index para sa kaligtasan.

pagkakahanay ng code

Dahil karaniwang ginagamit ko ang mga klase ng "justify-content-center" at "text-center" ng Bootstrap upang ihanay ang mga elemento, hindi ko nais na manain ng aking code ang likas na nakahanay sa gitna. Madali itong naayos sa pamamagitan ng pag-o-overtake ng anumang mga pagbabago sa pagkakahanay at paggawa ng mga kaliwang linya ng mga tag ng code: pinapanatili nito ang sp-spacing sa code.

padding ng navFix

Kapag ang bar ng pag-navigate ng Bootstrap ay na-stuck sa tuktok ng nilalaman ng pahina ay mai-load sa ilalim nito. Naniniwala akong nangyari ito dahil ang navbar ay talagang naka-stuck sa tuktok ng viewport sa halip na ang pahina mismo. Anuman ito ay naayos sa pamamagitan ng pagtaas ng puwang sa pagitan ng navbar at ang natitirang nilalaman.

taas ng pdf

Ang default na taas ng mga PDF file ay hindi kapani-paniwala maliit. Mahalagang ito ay hindi nababasa, kaya binago ko ang taas upang subukan at bigyan ng sapat na silid para sa halos isang pahina nang paisa-isa.

Hakbang 4: Javascript Frame (javascript.js)

/ * * Naghahanap ito para sa anumang elemento na may klase na 'toggle' at maaaring itago o i-save ito * / function toggleSection (id, toggleID) {if (document.getElementById (id)) {var divID = document.getElementById (id); var divArray = document.getElementsByClassName (toggleID);

para sa (var i = 0; i <divArray.length; i ++) {divArray .style.display = "none"; }

divID.style.display = "block";

}

bumalik ng hindi totoo;

}

/*

* Code na kailangang patakbuhin sa isang tiyak na pagkakasunud-sunod * / $ (dokumento).siya (pagpapaandar () {/ * * Mag-load ng nilalaman mula sa mga file * /

/*

* Pilitin ang isang maliit na pagka-antala upang mai-load ang data * / setTimeout (function () {/ * * I-highlight ang lahat ng code na na-load sa * / $ ('pre code'). Bawat (function (i, block) { hljs.highlightBlock (block);});}, 1000); });

Upang gawing madaling baguhin ang portfolio na ito at pamahalaan, nagpasya akong gumamit ng isang pahina na format. Pinapanatili nitong lokal ang lahat para sa pinaka-bahagi at ginagawang mas mabilis ang pag-load ng nilalaman.

toggleSection

Gumamit ako ng mga halaga ng klase upang pamahalaan kung anong nilalaman ang kailangang ipakita o maitago dahil sa karamihan ng oras ay gumagamit ako ng mga div upang paghiwalayin at pangkatin ang maraming elemento. Maaari mo itong gamitin upang mapagsama-sama din ang mga indibidwal na pindutan, ngunit nangangailangan ito ng dagdag na pagsusuri bago itakda ang display na "block" upang payagan ang anumang nilalaman na maipakita.

pagkarga ng dokumento

Isinama ko ito sapagkat sa pangkalahatan ay magulo upang isama ang isang bungkos ng independiyenteng code ng programa sa mga regular na HTML file. Maaari naming gamitin ang pamamaraang ito ng pag-highlight ng pabagu-bago upang pilitin ang proseso na maganap pagkatapos na mag-load kami ng nilalaman mula sa iba pang mga file.

$ ('# mq2-intro'). load ("mga file / tutorial / mq2 / mq2-intro / content.html");

Ito ay isang halimbawa ng kung paano kami maglo-load sa nilalaman.

Hakbang 5: Navigation Bar

Inisyal

• Bahay
• Tungkol sa Akin
• Mga Tutorial sa Mga Proyekto
• Tawagan mo ako

Ang navigation bar ay ang pinaka-kumplikadong elemento sa lahat ng bagay sa portfolio. Ang manipis na kumbinasyon ng mga klase ay ginagawang uri ng tulad ng isang palaisipan na nangangailangan sa iyo upang patuloy na tumingin sa libro ng panuntunan.

Pag-andar ng Bootstrap

Mahalaga ang paggana ng Bootstrap sa pamamagitan ng iba't ibang mga halaga ng klase. Sa pagtingin sa mismong "nav" na elemento, hindi masyadong mahirap alamin ang layunin ng bawat klase:

Ang aming "navbar" ay ang "md" (medium), "palawakin" kaya, "madilim" na pagpipilian. At "naayos" namin ito sa "tuktok." Mukha itong nakalilito sapagkat ito ay isang paguusap ng mga identifier, ngunit kung titingnan mo sila bilang mga pang-uri para sa elemento, mas madaling maintindihan kung ano ang nangyayari.

Tatak

Ang tatak ay ang tipikal na logo at pangalan na nakikita mo sa bawat website sa kaliwang tuktok. Ito ay isang sinubukan at totoong elemento ng disenyo na inaasahan ng bawat gumagamit sa puntong ito.

Tandaan: Ang mga tag na "i" ay talagang mga icon ng FontAwesome, at nakukuha mo ang mga tag na ito mula sa pahina ng anumang icon.

Toggler / Collapsible Button (Mobile)

Lilitaw lamang ang pindutan na ito sa mga mobile device. Ngunit dahil isinama namin sa deklarasyong "nav" na kailangang palawakin ang nabigasyon, ang mga elementong ito ay kumokonekta sa bawat isa sa pamamagitan ng kanilang mga ID at mga identifier ng "data-toggle".

Mga Link sa Navbar (Kaliwa)

Ang mga link na ito ay ganap na nakasalalay sa kung anong mga kategorya ang kailangan mo para sa iyong portfolio. Nagsama ako ng ilang mga tipikal na halimbawa bilang isang panimulang punto, ngunit walang pareho ang pareho. Maaaring hindi mo kailangan ng isang seksyon na "Mga Tutorial" dahil nakatuon ka sa pag-arte ng mga iskultura ng sining. Ang bawat "li" na item ay maaaring makopya at mai-paste, kaya't sa oras na malaman mo kung ano ang kailangan mo, madaling maitakda ang pag-navigate.

Tandaan: Maaari kang teknikal na lumikha ng mga dropdown na menu sa loob ng iba pang mga dropdown na menu, ngunit hindi ko ito inirerekumenda maliban kung handa kang magdagdag sa higit pang CSS at Javascript upang magmukhang malinis ang interface.

Mga Link sa Navbar (Kanang Bahagi)

Sa pamamagitan ng pagbibigay ng tamang listahan ng mga link sa klase na "ml-auto", pantay na pinaghihiwalay ng Bootstrap ang pantay na dalawang listahan. Lumilikha ito ng malinis na kaliwa at kanang bahagi ng dibisyon. Napagpasyahan kong gamitin ang puwang na ito para sa mga link sa social media sapagkat ito ay isang napaka-pangkaraniwan at tanyag na pamamaraan upang madagdagan ang iyong presensya. Kung hindi ito nauugnay, maaari mong i-scrap ang mga link na ito para sa isang search bar, impormasyon sa pag-login, atbp. Ngunit tandaan lamang na mahalagang puwang upang magamit. At katulad ng mga link ng navbar sa kaliwang bahagi, maaari mo ring kopyahin at i-paste ang mga ito.

Tandaan: Kung plano mong gamitin ang mga link na mayroon na akong pag-set up, baguhin ang "username" sa aktwal na "href" na mga link mismo.

Hakbang 6: Homepage

Ang pangalan mo

Programmer Writer Gamer

Ang seksyon na ito, at ang iyong kasunod na mga pahina ng nilalaman, ay nakasalalay sa kung ano ang nais mong ilagay sa iyong portfolio. Malinaw na hindi ko matugunan ang bawat solong uri ng nilalaman, ngunit sinubukan kong magsama ng mga imahe, pdfs, video, code block, ilan sa mga tipikal na pagsasama.

Format ng Talahanayan

Ang homepage ay na-set up upang kumilos bilang isang talahanayan. Hindi ako aasa sa aking kamangha-manghang mga kasanayan sa disenyo upang likhain ang iyong end na produkto, ngunit idinagdag ko ang iba't ibang mga pagkakaiba-iba ng mga kumbinasyon ng hilera at haligi upang maipakita na ito ay napaka-pabago-bago at nababaluktot. Maaari kang lumikha ng 3 mga hilera at 2 mga haligi upang magkaroon ng mga pindutan sa kaliwa at nilalaman sa kanan, o maaari kang gumawa ng isang bagay na ganap na naiiba. Kailangan lang ng kaunting eksperimento.

Mga Pindutan

Mahalaga ang pagpapaandar na ito tulad ng ginagawa ng mga regular na pindutan. Ang tanging tunay na pagsasama ng Bootstrap dito ay nagmumula sa estilo upang tumugma sa natitirang tema. Kung hindi man, lumikha ng maraming o maliit na mga pindutan hangga't kailangan mo upang maipakita ang iyong nilalaman at pagkatapos ay siguraduhing maitugma ang mga href link sa mga ID para sa mga div.

Nilalaman ng Programming Code

Ang mga "code" na tag ay ang mga default na tag na ginagamit ng highlight.js upang pamahalaan ang lahat ng pagha-highlight. Kung naalala mo mula sa javascript.js file, mayroong isang seksyon upang mai-load ang nilalaman mula sa iba pang mga file.

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

• Ang unang bahagi nito ay hinahanap ang "id" ng sangkap na nais mong ipasok ang nilalaman.
• Ang pangalawang bahagi ay ang lokasyon ng file na nais mong mai-load.

Tandaan: Ang nilalaman ay hindi talaga maglo-load ng ganap sapagkat may isang magandang pagkakataon na mai-edit mo nang lokal ang web page na ito sa halip na sa isang server. Ito ay maaaring matugunan ng isang bilang ng iba't ibang mga paraan na tutugunan ko sa pagtatapos ng Instructable.

Video sa YouTube

Ang naka-embed na "iframe" ay nagmula mismo sa YouTube. Hindi ko malawak na ipaliwanag kung paano makuha ang mga ito, ngunit kapag nagpunta ka sa "Magbahagi" ng isang video, mayroong isang pagpipiliang "I-embed" na makakatulong sa iyong makabuo ng code na kinakailangan upang maipakita ang iyong video sa web page.

Hakbang 7: Naghahanap ng Pasulong

Mayroong napakahusay na pagkakataon na hindi ko natakpan ang ilang elemento o uri ng nilalaman na nais mong isama sa iyong website. Sa kabutihang palad maraming mga mahusay na pagpipilian para sa iyo na gawin ang mga susunod na hakbang.

Dokumentasyon ng Bootstrap

Ang dokumentasyon ng Bootstrap ay isang magandang lugar upang magsimula kung naghahanap ka ng mga elemento na paunang na-program at may mga halimbawa na maaari mong kopyahin at i-paste sa iyong portfolio upang mag-eksperimento. Hindi ko hinawakan ang Mga Card, Carousels, o Forms. Masidhing inirerekumenda kong tingnan mo ang seksyon na "Mga Bahagi" upang makita ang mga pagpipilian.

W3Schools

Ang W3Schools ay isang kahanga-hangang website kung saan maaari mong malaman ang tungkol sa anumang bagay na nauugnay sa web programming at pag-unlad. Mas matalino sila kaysa sa akin, at sinasaklaw nila ang halos bawat pag-andar ng HTML, CSS, at Javascript na maaari mong maiisip.

Pagho-host sa Iyong Portfolio

Itinuturo ng Instructable na ito ang iyong kung paano mag-host ng iyong website sa ilang iba't ibang mga platform. Ito ang mga hakbang na kailangan mong gawin kung nais mong maipakita sa mga tao, mga rekruter, atbp ang iyong portfolio.

Eksperimento at Magsaya

Ang tanging paraan na makakagawa ka ng isang mahusay na portfolio ay sa pamamagitan ng pag-eksperimento at pagsubok sa anumang bagay at lahat na mukhang kawili-wili. Maraming mga magarbong portfolio na disenyo at website ang gumagamit ng mahusay na mga epekto sa paglipat o mga pabago-bagong background, ngunit wala sa mga ito ang paunang ginawa.