Jinsi ya Kutengeneza Tovuti Nyepesi na Rahisi na Bootstrap 4: 7 Hatua

2024 Mwandishi: John Day | [email protected]. Mwisho uliobadilishwa: 2024-01-30 12:51

Madhumuni ya Agizo hili ni kuwapa wale wanaojua programu - HTML au vinginevyo - utangulizi rahisi wa kutengeneza kwingineko mkondoni na Bootstrap 4. Nitakutembea kupitia usanidi wa mwanzo wa wavuti, jinsi ya kuunda vizuizi kadhaa vya yaliyomo, na shida kadhaa ambazo unaweza kuzipata.

Kwingineko imegawanywa kwa hatua kadhaa ndogo kujaribu na kuifanya iweze kudhibitiwa zaidi: fremu ya HTML, fremu ya CSS, fremu ya Javascript, bar ya urambazaji, na ukurasa wa kwanza (ulio na vizuizi vya yaliyomo).

Ikiwa maelezo yangu ya kitu bado yanakuacha umechanganyikiwa, jisikie huru kuacha maoni na maswali yako, mapendekezo, au google kipengee ambacho umechanganyikiwa nacho. Kuna rasilimali nyingi zinazopatikana kwa wavuti za programu na Bootstrap.

Kumbuka: Mwongozo huu haujumuishi yote na haupaswi kutumiwa kama mbadala ya kujifunza jinsi ya kupanga programu katika HTML, CSS, au Javascript.

Rasilimali zinazohitajika

• Kamba ya Boot 4
• jQuery 3.3.1

Rasilimali za Hiari

• FontAwesome
• Fonti za Google
• onyesha

Ikiwa ungependa kuruka kwa mfano kamili au angalia hifadhi:

• Mfano Kamili
• Hifadhi

Kumbuka: Nitatumia Sublime kwenye picha kwa mifano yangu ikiwa ungependa kufuata na kihariri hicho hicho cha maandishi.

Hatua ya 1: Kuweka Up

Usanidi wa Folda

1. Unda folda mahali pengine ambapo unaweza kuhifadhi kila kitu tutakachopakua. Hii itakuwa saraka yako ya mizizi kwa kwingineko.
2. Unda folda ndani ya ile iitwayo "bootstrap"
3. Unda folda nyingine ndani ya folda yako ya kwingineko ya mizizi hiyo jina "jQuery"

Folda ya kwingineko

| ----- bootstrap | ----- jQuery

Kamba ya Boot 4

1. Tembelea wavuti yao na bonyeza kitufe cha "Pakua" chini ya sehemu ya "Iliyoundwa CSS na JS".
2. Hifadhi faili ya.zip kwenye folda yako ya "Upakuaji" au eneo lingine rahisi.
3. Fungua faili ya.zip na utoe folda za "css" na "js" kwenye folda ya "bootstrap" uliyotengeneza mapema.

jQuery

1. Tembelea wavuti yao na pakua jQuery 3.3.1 ya "uncompressed, development"
2. Hifadhi faili hiyo ndani ya folda ya "jQuery" uliyotengeneza mapema.

Mfumo wote sasa uko tayari kwa wakati tunapoanza kufanya kazi kwenye kwingineko halisi.

Hatua ya 2: Sura ya HTML (index.html)

Jina lako

Sura hii sio ngumu sana, lakini nataka kuelezea madhumuni ya jumla ya usanidi.

Bootstrap JS Baada ya jQuery

Inaonekana kuna aina ya mwingiliano kati ya faili ya Javascript ya Bootstrap na ya jQuery. Sikujaribu kuona jinsi mwingiliano huu ulivyo mkubwa, lakini mfano mmoja ni utendaji wa kushuka ambao ninatumia kwenye upau wa kusogea. Ukipakia kwenye Bootstrap kwanza, kitufe cha kushuka hakifanyi kazi.

FontAwesome

Ikiwa umefanya maendeleo yoyote ya wavuti, kuna uwezekano unajua FontAwesome ni nini. Walakini ikiwa sio hivyo, ni seti ya ikoni ambayo ni pamoja na vifaa vya upendeleo zaidi. Ni muhimu sana ikiwa wewe ni kama mimi na hauna talanta yoyote ya kisanii kabisa.

mwangaza.js

Mfumo huu unaruhusu kuangazia nambari inayobadilika kwenye kurasa za wavuti. Unaweza kuiingiza kama mifumo mingine ninayotumia ikiwa utatumia tu lugha za kawaida za programu, lakini pia kuna fursa ya kupakua seti ya lugha maalum. Nilichagua chaguo la mwisho kwa sababu ya lugha chache za kawaida na za ini, lakini ni juu yako kabisa.

Kumbuka: Jihadharini na mahali ninapotumia viungo vyenye nambari ngumu kwa faili kama ikoni mbili na onyesha. Pia, kwa kuwa tu Bootstrap na jQuery zinahitajika, jisikie huru kuongeza au kuondoa mifumo mingine yoyote. Ikiwa utaondoa yoyote, kumbuka kuondoa mistari ya nambari inayofanana baadaye.

Hatua ya 3: Sura ya CSS (style.css)

/ * * Tunatarajia kupunguza rangi ya bg kuwa kijivu na kubadilisha mtindo wa fonti hufanya tovuti iwe rahisi kutumia * / mwili {msingi: kijivu; font-familia: 'Open Sans', sans-serif; }

/*

* Hii inahakikisha upau wa nav uko juu ya kila kitu * / nav {z-index: 9999; }

/*

* Hii inapaswa kufanya maandishi ya aya kusomeka zaidi * / p {font-size: 18px; juu-margin: 5px; chini-chini: 5px; }

/*

* Hii inahakikisha kwamba vizuizi vyangu vyote vya nambari vimepangwa vizuri * / code {text-align: left; }

/*

* Sitaki orodha kuwa na risasi * / li {list-style-type: none; }

/*

* Viungo ni hudhurungi kwa chaguo-msingi, na ninataka ziambatana na mtindo wa Bootstrap * / li a, a {color: white; }

/*

* Ninafunga tepe ya darasa kwa div iliyo na navbar ili kuhakikisha kuwa yaliyomo hayaingiliani * /.navFix {padding-bottom: 70px; }

/*

* Ukubwa ulioongezeka unyoosha navbar * /.social-media {font-size: 1.3em; }

/*

* Rangi ya kuonyesha chaguo-msingi ya viungo vya kushuka ni nyeupe * /.dropdown-menu a: hover {background-color: # 212529; }

/*

* Lazimisha divs zinazoonyesha pdf kwa urefu fulani * /.pdfJaza {urefu: 45rem; }

/*

* Ongeza nafasi kati ya vifungo na vizuizi vya nambari * /.codeStyle {padding-top: 30px; }

Nilijumuisha vitu vya CSS vilivyomo kwenye fremu hii kujaribu kukuokoa muda baadaye. Wote ni rahisi sana na ni mabadiliko ya hali ya juu ambayo hufanya mawasiliano na kwingineko iwe rahisi kwa wasomaji.

nav z-index

Nina uzoefu mdogo sana wa ukuzaji wa wavuti, kwa hivyo sina hakika kama hii ni shida ya kawaida wakati wa kutekeleza bar ya urambazaji ya Bootstrap, lakini bila maelezo ya mwelekeo wa mbele-nyuma, mwambaa wa urambazaji utaonekana chini ya yaliyomo kama Kadi za Bootstrap. Hii inaonekana zaidi na baharini inayoweza kuvunjika, lakini nilijumuisha mabadiliko ya faharisi kwa usalama.

mpangilio wa nambari

Kwa kuwa mimi hutumia darasa la "justify-content-center" na "text-center" ya Bootstrap kupatanisha vitu, sitaki nambari yangu kurithi asili hiyo iliyokaa katikati. Hii inarekebishwa kwa urahisi kwa kubadilisha mabadiliko yoyote ya mpangilio na kutengeneza vitambulisho vya msimbo vikiwa vimepangiliwa kushoto: hii inahifadhi nafasi ya tabo katika msimbo.

usafi wa navFix

Wakati mwambaa wa urambazaji wa Bootstrap umekwama juu ya yaliyomo kwenye ukurasa yatapakia chini yake. Ninaamini hii inatokea kwa sababu navbar kweli imekwama juu ya bandari ya kutazama badala ya ukurasa wenyewe. Bila kujali hii imerekebishwa kwa kuongeza nafasi kati ya navbar na yaliyomo kwenye maudhui.

urefu wa pdf

Urefu wa default wa faili za pdf ni ndogo sana. Kimsingi haisomeki, kwa hivyo nilibadilisha urefu kujaribu na kutoa nafasi ya kutosha kwa ukurasa mmoja kwa wakati.

Hatua ya 4: Javascript Frame (javascript.js)

/ * * Hii inatafuta kipengee chochote kilicho na darasa la 'toggle' na inaweza kuificha au kuifunua * / function toggleSection (id, toggleID) {if (document.getElementById (id)) {var divID = document.getElementById (id); var divArray = hati.getElementsByClassName (toggleID);

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

divid.style.display = "block";

}

kurudi uwongo;

}

/*

* Nambari ambayo inahitaji kuendeshwa kwa mpangilio fulani * / $ (hati) tayari (kazi () {/ * * Pakia yaliyomo kutoka kwa faili * /

/*

* Lazimisha ucheleweshaji mdogo kupakia kwenye data * / setTimeout (function () {/ * * Angaza nambari yote ambayo imepakiwa kwenye * / $ ('pre code'). Kila (function (i, block) { hljs.highlightBlock (block);});}, 1000); });

Ili kufanya kwingineko hii iwe rahisi kurekebisha na kusimamia, niliamua kutumia muundo wa ukurasa mmoja. Inaweka kila kitu cha ndani kwa sehemu kubwa na inafanya upakiaji wa yaliyomo kuwa wepesi zaidi.

toggleSection

Nilitumia maadili ya darasa kusimamia yaliyomo yanahitaji kuonyeshwa au kufichwa kwa sababu wakati mwingi ninatumia divs kutenganisha na kupanga vitu kadhaa pamoja. Unaweza kutumia hii kukusanya vifungo vya mtu binafsi pia, lakini inahitaji hundi ya ziada kabla ya kuweka onyesho la "block" ili kuruhusu hakuna maudhui yatakayoonyeshwa.

upakiaji hati

Nilijumuisha hii kwa sababu kwa kawaida ni fujo kujumuisha rundo la nambari ya programu huru katika faili za kawaida za HTML. Tunaweza kutumia njia hii ya kuonyesha nguvu ili kulazimisha mchakato ufanyike baada ya kupakia yaliyomo kutoka kwa faili zingine.

$ ('# mq2-intro'). mzigo ("faili / mafunzo / mq2 / mq2-intro / content.html");

Huu ni mfano wa jinsi tutapakia katika yaliyomo.

Hatua ya 5: Bar ya Urambazaji

Waanzilishi

• Nyumbani
• Kuhusu mimi
• Mafunzo ya Miradi
• Wasiliana nami

Baa ya urambazaji ni kitu ngumu zaidi kutoka kwa kila kitu kwenye kwingineko. Mchanganyiko mkubwa wa madarasa hufanya iwe kama fumbo ambalo linakuhitaji uangalie kitabu cha sheria.

Utendaji wa Bootstrap

Kazi za Bootstrap kimsingi kupitia maadili tofauti ya darasa. Kuangalia kipengee cha "nav" yenyewe, sio ngumu sana kujua madhumuni ya kila darasa:

"Navbar" yetu ni "md" (kati), "panua" uwezo, "giza" chaguo. Na sisi "tuliweka" juu "juu." Inaonekana kutatanisha kwa sababu ni utatanishi wa vitambulisho, lakini ikiwa utaziangalia kama vivumishi vya kipengee, inakuwa rahisi sana kuelewa kinachotokea.

Chapa

Chapa ni nembo na jina la kawaida unaloona kwenye kila wavuti juu kushoto. Ni kipengee cha kubuni kilichojaribiwa na ambacho kila mtumiaji anatarajia wakati huu.

Kumbuka: Lebo za "i" ni ikoni za FontAwesome, na unapata lebo hizi kutoka kwa ukurasa wowote wa ikoni.

Kitufe cha Kubadilisha / Kugonga (Simu ya Mkononi)

Kitufe hiki kinaonekana tu kwenye vifaa vya rununu. Lakini kwa kuwa tulijumuisha katika tamko la "nav" kwamba mwambaa wa kusogea unahitaji kupanuliwa, vitu hivi huunganisha kila mmoja kupitia vitambulisho vyake na vitambulisho vya "data-toggle".

Viungo vya Navbar (Upande wa kushoto)

Viungo hivi hutegemea kabisa ni aina gani unahitaji kwa jalada lako. Nilijumuisha mifano kadhaa ya kawaida kama mwanzo, lakini hakuna mtu aliye sawa. Labda hauitaji sehemu ya "Mafunzo" kwa sababu unazingatia utengenezaji wa sanamu za sanaa. Kila kitu cha "li" kinaweza kunakiliwa na kubandikwa, kwa hivyo ukishagundua kile unachohitaji, ni rahisi kuweka urambazaji juu.

Kumbuka: Kwa kiufundi unaweza kuunda menyu za kushuka ndani ya menyu zingine za kushuka, lakini nisingependekeza isipokuwa uwe tayari kuongeza CSS na Javascript zaidi ili kuifanya interface ionekane safi.

Viungo vya Navbar (Upande wa kulia)

Kwa kutoa orodha sahihi ya viungo darasa la "ml-auto", Bootstrap hutenganisha sawasawa orodha hizo mbili sawasawa. Hii inaunda mgawanyiko safi wa kushoto na kulia. Niliamua kutumia nafasi hii kwa viungo vya media ya kijamii kwa sababu ni njia ya kawaida na maarufu kuongeza uwepo wako. Ikiwa hiyo sio muhimu, unaweza kufuta viungo hivi kwa upau wa utaftaji, habari ya kuingia, n.k. Lakini kumbuka tu kwamba ni nafasi muhimu ya kutumia. Na sawa na viungo vya navbar upande wa kushoto, unaweza kunakili na kubandika hizi pia.

Kumbuka: Ikiwa una mpango wa kutumia viungo ninavyo tayari kuweka, badilisha "jina la mtumiaji" katika viungo halisi vya "href".

Hatua ya 6: Ukurasa wa kwanza

Jina lako

Mwandishi wa Programu Gamer

Sehemu hii, na kurasa zako zinazofuata za yaliyomo, zitategemea kile unachotaka kuweka katika jalada lako. Kwa kweli siwezi kushughulikia kila aina ya yaliyomo, lakini nilijaribu kujumuisha picha, pdf, video, vizuizi vya kificho, zingine za kawaida.

Fomati ya Jedwali

Ukurasa wa kwanza umewekwa kama meza. Singetegemea ustadi wangu wa kushangaza wa kubuni kuunda bidhaa yako ya mwisho, lakini niliongeza tofauti tofauti za mchanganyiko wa safu na safu kuonyesha kuwa ina nguvu sana na inabadilika. Unaweza kuunda safu 3 na safu 2 kuwa na vifungo upande wa kushoto na yaliyomo kulia, au unaweza kufanya kitu tofauti kabisa. Inachukua tu majaribio kidogo.

Vifungo

Hizi hufanya kazi kimsingi kama vifungo vya kawaida. Ushirikiano wa kweli tu wa Bootstrap hapa unatokana na mtindo ili kufanana na mandhari yote. Vinginevyo, tengeneza vifungo vingi au vidogo kama unahitaji kuonyesha yaliyomo na kisha uhakikishe kulinganisha viungo vya href na vitambulisho vya divs.

Yaliyomo ya Msimbo wa Programu

Lebo za "kificho" ni lebo chaguomsingi ambazo huonyesha.js hutumia kudhibiti uangazishaji wote. Ikiwa unakumbuka kutoka kwa faili ya javascript.js, kuna sehemu ya kupakia kwenye yaliyomo kutoka kwa faili zingine.

$ ('# home-programmer-macro'). mzigo ("faili / nyumbani / watchLoot.mac");

• Sehemu ya kwanza ya hii inatafuta "id" ya kitu unachotaka kuingiza yaliyomo ndani.
• Sehemu ya pili ni eneo la faili unayotaka kupakia.

Kumbuka: Yaliyomo hayatapakia kabisa kwa sababu kuna nafasi nzuri ya kuhariri ukurasa huu wa wavuti badala ya seva. Hii inaweza kushughulikiwa na njia kadhaa tofauti ambazo nitashughulikia mwishoni mwa Inayoweza Kusomwa.

Video ya YouTube

"Iframe" iliyoingia kweli hutoka kwa YouTube yenyewe. Sitaelezea kwa kina jinsi ya kuzipata, lakini unapoenda "Shiriki" video, kuna chaguo "Pachika" ambayo itakusaidia kutoa nambari inayofaa kuonyesha video yako kwenye ukurasa wa wavuti.

Hatua ya 7: Kuangalia Mbele

Kuna nafasi nzuri sana kwamba sikufunika kipengee au aina ya yaliyomo ambayo unataka kuingiza kwenye wavuti yako. Kwa bahati nzuri kuna chaguzi nyingi nzuri kwako kuchukua hatua zifuatazo mwenyewe.

Hati ya Bootstrap

Nyaraka za Bootstrap ni mahali pazuri kuanza ikiwa unatafuta vitu ambavyo vimepangwa mapema na vina mifano ambayo unaweza kunakili na kubandika kwenye jalada lako ili ujaribu. Sikugusa Kadi, Carousels, au Fomu. Ninapendekeza sana uangalie sehemu ya "Vipengele" ili uone chaguo.

Shule za W3

W3Schools ni wavuti nzuri ambapo unaweza kujifunza juu ya kitu chochote kinachohusiana na programu ya wavuti na maendeleo. Wao ni werevu zaidi kuliko mimi, na hushughulikia karibu kila HTML, CSS, na utendaji wa Javascript unayoweza kufikiria.

Kuhifadhi Jalada lako

Hii ya kufundisha inafundisha jinsi ya kukaribisha wavuti yako kwenye majukwaa kadhaa tofauti. Hizi ni hatua unazohitaji kuchukua ikiwa unataka kuweza kuonyesha watu, waajiri n.k jalada lako.

Jaribu na Uburudike

Njia pekee ambayo utafanya kwingineko nzuri ni kujaribu na kujaribu chochote na kila kitu kinachoonekana cha kupendeza. Portfolios nyingi za kubuni na tovuti hutumia athari kubwa za mpito au asili zenye nguvu, lakini hakuna hata moja iliyokuja kufanywa mapema.