Kā izveidot gludu un vienkāršu vietni, izmantojot Bootstrap 4: 7 soļus

2024 Autors: John Day | [email protected]. Pēdējoreiz modificēts: 2024-01-30 10:54

Šīs pamācības mērķis ir sniegt vienkāršu ievadu tiešsaistes portfeļa veidošanai ar Bootstrap 4. Iepazīstieties ar programmēšanu - HTML vai citādi. Es jums pastāstīšu par sākotnējo vietnes iestatīšanu, kā izveidot dažus dažādus satura blokus, un dažas problēmas, ar kurām jūs varētu saskarties.

Portfelis ir sadalīts vairākos mazākos soļos, lai mēģinātu to padarīt pārvaldāmāku: HTML rāmis, CSS rāmis, Javascript rāmis, navigācijas josla un sākumlapa (ar satura blokiem).

Ja mani paskaidrojumi par kaut ko joprojām jūs mulsina, lūdzu, atstājiet komentāru ar saviem jautājumiem, ieteikumiem vai google ar elementu, par kuru esat apjukusi. Vietņu un Bootstrap programmēšanai ir pieejami daudzi resursi.

Piezīme. Šī rokasgrāmata nav visaptveroša, un to nevajadzētu izmantot kā aizstājēju, lai uzzinātu, kā programmēt HTML, CSS vai Javascript.

Nepieciešamie resursi

• Bootstrap 4
• jQuery 3.3.1

Izvēles resursi

• FontsAwesome
• Google fonti
• izcelt.js

Ja vēlaties pāriet uz pilnu piemēru vai apskatīt krātuvi:

• Pilns piemērs
• Krātuve

Piezīme: Maniem piemēriem attēlos izmantošu Sublime, ja vēlaties sekot līdzi tam pašam teksta redaktoram.

1. darbība: iestatīšana

Mapes iestatīšana

1. Izveidojiet mapi kaut kur, kur var uzglabāt visu, ko lejupielādēsim. Tas būs jūsu portfeļa saknes direktorijs.
2. Izveidojiet tajā mapi ar nosaukumu “bootstrap”
3. Saknes portfeļa mapē izveidojiet citu mapi ar nosaukumu “jquery”

Portfeļa mape

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

Bootstrap 4

1. Apmeklējiet viņu vietni un noklikšķiniet uz pogas “Lejupielādēt” zem sadaļas “Apkopotais CSS un JS”.
2. Saglabājiet.zip failu mapē “Lejupielādes” vai citā ērtā vietā.
3. Atveriet.zip failu un izvelciet mapes “css” un “js” iepriekš izveidotajā mapē “bootstrap”.

jQuery

1. Apmeklējiet viņu vietni un lejupielādējiet “nesaspiestu, izstrādes jQuery 3.3.1”
2. Saglabājiet šo failu iepriekš izveidotajā mapē “jquery”.

Visas sistēmas ir gatavas, kad mēs sākam strādāt pie faktiskā portfeļa.

2. darbība: HTML rāmis (index.html)

Tavs vārds

Šis rāmis nav nekas pārāk sarežģīts, bet es vēlos izskaidrot iestatīšanas vispārīgos mērķus.

Bootstrap JS Pēc jQuery

Šķiet, ka Bootstrap Javascript fails un jQuery fails pārklājas. Es nepārbaudīju, lai redzētu, cik plaša ir šī pārklāšanās, bet viens piemērs ir nolaižamā funkcionalitāte, ko izmantoju navigācijas joslā. Ja vispirms ielādējat Bootstrap, nolaižamā poga nedarbojas.

FontsAwesome

Ja esat veicis jebkādu tīmekļa izstrādi, iespējams, jūs zināt, kas ir FontAwesome. Tomēr, ja tas tā nav, tā ir ikonu kopa, kas ietver rīku komplektu papildu pielāgošanai. Tas ir neticami noderīgi, ja jūs esat tāds kā es un jums vispār nav māksliniecisku talantu.

hightlight.js

Šī sistēma ļauj dinamiski izcelt kodu tīmekļa lapās. Jūs varat importēt to tāpat kā pārējās manis izmantotās sistēmas, ja izmantojat tikai parastās programmēšanas valodas, taču ir arī iespēja lejupielādēt pielāgotu valodu kopu. Es izvēlējos pēdējo iespēju dažu makro un ini valodu dēļ, bet tas ir pilnībā atkarīgs no jums.

Piezīme. Esiet informēts par vietām, kur es izmantoju kodētas saites uz failiem, piemēram, abām ikonām un izceltām.js. Turklāt, tā kā ir nepieciešami tikai Bootstrap un jQuery, droši pievienojiet vai noņemiet jebkādus citus ietvarus. Ja kādu noņemat, neaizmirstiet noņemt vēlāk atbilstošās koda rindiņas.

3. darbība: CSS rāmis (style.css)

/ * * Cerams, ka bg krāsas nokrāsošana pelēkā krāsā un fonta stila maiņa atvieglo vietnes lietošanu */ body {background: grey; font-family: 'Open Sans', sans-serif; }

/*

* Tas nodrošina, ka navigācijas josla ir visam virsū */ nav {z-index: 9999; }

/*

* Tam vajadzētu padarīt rindkopas tekstu lasāmāku */ p {font-size: 18px; augšējā mala: 5 pikseļi; apakšējā mala: 5 pikseļi; }

/*

* Tas nodrošina, ka visi mani koda bloki ir pareizi formatēti */ code {text-align: left; }

/*

* Es nevēlos, lai sarakstos būtu aizzīmes */ li {list-style-type: none; }

/*

* Saites pēc noklusējuma ir zilas, un es vēlos, lai tās atbilstu Bootstrap stilam */ li a, a {krāsa: balta; }

/*

* Es saistu klases tagu ar div, kurā ir navigācijas josla, lai pārliecinātos, ka saturs nepārklājas */.navFix {padding-bottom: 70px; }

/*

* Palielināts izmērs stiepjas navbar */.social-media {font-size: 1.3em; }

/*

* Noklusējuma izceltā krāsa nolaižamajām saitēm ir balta */.dropdown-menu a: hover {background-color: #212529; }

/*

* Piespiest divs parādīt pdf noteiktā augstumā */.pdfFill {augstums: 45rem; }

/*

* Pievienojiet atstarpes starp pogām un koda blokiem */.codeStyle {padding-top: 30px; }

Šajā ietvarā es iekļāvu uz saturu balstītus CSS elementus, lai vēlāk mēģinātu ietaupīt. Tie visi ir ļoti vienkārši un lielākoties ir dzīves kvalitātes izmaiņas, kas atvieglo mijiedarbību ar portfeli lasītājiem.

nav z-indekss

Man ir ļoti ierobežota tīmekļa izstrādes pieredze, tāpēc neesmu pārliecināts, vai tā ir izplatīta problēma, ieviešot Bootstrap navigācijas joslu, taču bez jebkādas orientācijas no priekšas uz aizmuguri navigācijas josla faktiski parādīsies zem cita satura, piemēram, Bootstrap kartes. Tas ir visievērojamākais ar saliekamo navigācijas joslu, bet drošības labad es jebkurā gadījumā iekļāvu indeksa izmaiņas.

koda izlīdzināšana

Tā kā es parasti izmantoju Bootstrap klases "attaisnot-satura centrs" un "teksta centrs", lai izlīdzinātu elementus, es nevēlos, lai mans kods pārmantotu šo centrā izlīdzināto raksturu. To var viegli novērst, pārrakstot visas izlīdzināšanas izmaiņas un izlīdzinot koda tagus pa kreisi: tādējādi kodā tiek saglabāta atstarpe starp cilnēm.

navFix polsterējums

Kad Bootstrap navigācijas josla ir iestrēdzis lapas augšdaļā, saturs tiks ielādēts zem tā. Es uzskatu, ka tas notiek tāpēc, ka navigācijas josla faktiski ir iestrēdzis skata augšdaļā, nevis pašā lapā. Neatkarīgi no tā, tas tiek novērsts, palielinot atstarpi starp navigācijas joslu un pārējo saturu.

pdf augstums

PDF failu noklusējuma augstums ir neticami mazs. Tas būtībā nav lasāms, tāpēc es mainīju augstumu, lai mēģinātu piešķirt pietiekami daudz vietas aptuveni vienai lapai vienlaikus.

4. darbība. Javascript rāmis (javascript.js)

/ * * Tādējādi tiek meklēts jebkurš elements ar klasi "pārslēgt" un tas tiek paslēpts vai parādīts */ function toggleSection (id, toggleID) {if (document.getElementById (id)) {var divID = document.getElementById (id); var divArray = document.getElementsByClassName (toggleID);

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

divID.style.display = "bloķēt";

}

atgriezt nepatiesu;

}

/*

* Kods, kas jāizpilda noteiktā secībā */ $ (dokuments).ready (function () {/ * * Ielādēt saturu no failiem */

/*

* Piespiest nelielu aizkavi, lai ielādētu datus */ setTimeout (function () {/ * * Iezīmējiet visu kodu, kas ir ielādēts */ $ ('pre code'). hljs.highlightBlock (bloks);});}, 1000); });

Lai šo portfeli būtu viegli modificēt un pārvaldīt, es nolēmu izmantot vienas lapas formātu. Tas lielākoties saglabā visu vietējo un paātrina satura ielādi.

toggleSekcija

Es izmantoju klases vērtības, lai pārvaldītu, kāds saturs ir jāparāda vai jāslēpj, jo lielākoties es izmantoju divs, lai atdalītu un grupētu vairākus elementus kopā. Varat to izmantot, lai grupētu arī atsevišķas pogas, taču pirms “bloķēšanas” displeja iestatīšanas ir nepieciešama papildu pārbaude, lai netiktu rādīts saturs.

dokumentu ielāde

Es to iekļāvu, jo parasti ir netīrs iekļaut virkni neatkarīgu programmēšanas kodu parastajos HTML failos. Mēs varam izmantot šo dinamiskās izcelšanas metodi, lai piespiestu procesu notikt pēc tam, kad esam ielādējuši saturu no citiem failiem.

$ ('#mq2-intro'). load ("files/tutorials/mq2/mq2-intro/content.html");

Šis ir piemērs tam, kā mēs ielādēsim saturu.

5. darbība: navigācijas josla

Iniciāļi

• Mājas
• Par Mani
• Projektu apmācības
• Sazinies ar mani

• Navigācijas josla ir vissarežģītākais elements no visa portfeļa. Vienīgā nodarbību kombinācija padara to par tādu kā mīklu, kas liek nepārtraukti aplūkot noteikumu grāmatu.

  Bootstrap funkcionalitāte

  Bootstrap galvenokārt darbojas, izmantojot dažādas klases vērtības. Aplūkojot pašu "nav" elementu, nav pārāk grūti noskaidrot katras klases mērķi:

  Mūsu "navbar" ir opcija "md" (vidēja), "paplašināt" spējīga, "tumša". Un mēs "salabojām" to "augšpusē". Tas izskatās mulsinoši, jo tas ir identifikatoru sajaukums, bet, ja uz tiem skatās kā uz elementa īpašības vārdiem, kļūst daudz vieglāk saprast notiekošo.

  Zīmols

  Zīmols ir tipisks logotips un nosaukums, ko redzat katrā vietnē augšējā kreisajā stūrī. Tas ir pārbaudīts dizaina elements, ko katrs lietotājs šajā brīdī sagaida.

  Piezīme: “i” tagi patiesībā ir FontAwesome ikonas, un šos tagus iegūstat no jebkuras ikonas lapas.

  Pārslēgšanas/saliekamā poga (mobilais)

  Šī poga tiek parādīta tikai mobilajās ierīcēs. Bet, tā kā "nav" deklarācijā iekļāvām nepieciešamību paplašināt navigācijas joslu, šie elementi savienojas viens ar otru, izmantojot savus ID un "datu pārslēgšanas" identifikatorus.

  Navigācijas saites (kreisajā pusē)

  Šīs saites ir pilnībā atkarīgas no jūsu portfelim nepieciešamajām kategorijām. Kā sākuma punktu es iekļāvu dažus tipiskus piemērus, taču neviens nav vienāds. Iespējams, jums nav nepieciešama sadaļa "Pamācības", jo jūs koncentrējaties uz mākslas skulptūru veidošanu. Katru "li" vienumu var kopēt un ielīmēt, tāpēc, kad esat sapratis, kas jums nepieciešams, ir viegli iestatīt navigāciju.

  Piezīme. Jūs varat tehniski izveidot nolaižamās izvēlnes citās nolaižamajās izvēlnēs, taču es to neieteiktu, ja vien nevēlaties pievienot vairāk CSS un Javascript, lai saskarne izskatītos tīra.

  Navigācijas saites (labajā pusē)

  Piešķirot pareizo saišu sarakstu "ml-auto" klasei, Bootstrap vienmērīgi atdala abus sarakstus. Tas rada tīru kreisās un labās puses sadalījumu. Es nolēmu izmantot šo vietu sociālo mediju saitēm, jo tā ir ļoti izplatīta un populāra metode jūsu klātbūtnes palielināšanai. Ja tas nav svarīgi, varat atcelt šīs saites, lai meklētu meklēšanas joslu, pieteikšanās informāciju utt. Bet atcerieties, ka tā ir svarīga vieta. Līdzīgi kā navigācijas joslas saites kreisajā pusē, varat arī kopēt un ielīmēt šīs.

  Piezīme. Ja plānojat izmantot jau iestatītās saites, mainiet “lietotājvārdu” pašās “href” saitēs.

  6. darbība: mājas lapa

  

  

  

  Tavs vārds

  Programmētājs Rakstnieks Spēlētājs

  Šī sadaļa un turpmākās satura lapas būs atkarīgas no tā, ko vēlaties iekļaut savā portfelī. Acīmredzot es nevaru pievērsties katram satura veidam, bet es mēģināju iekļaut attēlus, pdf failus, videoklipus, kodu blokus un dažus tipiskus iekļaušanas veidus.

  Tabulas formāts

  Mājas lapa ir iestatīta kā galds. Es nepaļautos uz savām pārsteidzošajām dizaina prasmēm, lai izveidotu jūsu galaproduktu, bet es pievienoju dažādas rindu un kolonnu kombināciju variācijas, lai parādītu, ka tas ir ļoti dinamisks un elastīgs. Varat izveidot 3 rindas un 2 kolonnas, lai kreisajā pusē būtu pogas un labajā pusē - saturs, vai arī varat rīkoties pavisam citādi. Tas prasa tikai nelielu eksperimentu.

  Pogas

  Šīs funkcijas būtībā darbojas tāpat kā parastās pogas. Vienīgā īstā Bootstrap integrācija šeit izriet no stila, kas atbilst pārējai tēmai. Pretējā gadījumā izveidojiet tik daudz vai tik maz pogu, cik nepieciešams, lai parādītu savu saturu, un pēc tam pārliecinieties, ka href saites ir saskaņotas ar divs ID.

  Programmēšanas koda saturs

  Tagi "kods" ir noklusējuma tagi, kurus izcēlums.js izmanto, lai pārvaldītu visu izcelšanu. Ja atceraties no faila javascript.js, ir sadaļa, kurā jāielādē saturs no citiem failiem.

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

  • Pirmajā daļā tiek meklēts tā elementa "id", kurā vēlaties ievietot saturu.
  • Otrā daļa ir faila atrašanās vieta, kuru vēlaties ielādēt.

  Piezīme. Saturs faktiski netiks ielādēts pilnībā, jo pastāv liela iespēja, ka šo vietni rediģējat lokāli, nevis serverī. To var atrisināt vairākos dažādos veidos, kurus es apskatīšu pamācības beigās.

  YouTube video

  Iebūvētais "iframe" patiesībā nāk no paša YouTube. Es plaši nepaskaidrošu, kā tos iegūt, taču, pārejot uz videoklipa "Kopīgot", ir opcija "Iegult", kas palīdzēs jums ģenerēt kodu, kas nepieciešams jūsu videoklipa parādīšanai tīmekļa lapā.

  7. solis: skatīties uz priekšu

  Pastāv ļoti liela iespēja, ka es neaptvēru kādu elementu vai satura veidu, kuru vēlaties iekļaut savā vietnē. Par laimi, jums ir daudz labu iespēju veikt nākamos soļus.

  Bootstrap dokumentācija

  Bootstrap dokumentācija ir lieliska vieta, kur sākt, ja meklējat elementus, kas ir ieprogrammēti un kuriem ir piemēri, kurus varat kopēt un ielīmēt savā portfolio, lai eksperimentētu. Es nepieskāros kartītēm, karuseļiem vai veidlapām. Es ļoti iesaku jums apskatīt sadaļu "Komponenti", lai redzētu iespējas.

  W3Skolas

  W3Schools ir brīnišķīga vietne, kurā varat uzzināt gandrīz visu, kas saistīts ar tīmekļa programmēšanu un izstrādi. Viņi ir daudz gudrāki nekā es, un tie aptver gandrīz visas HTML, CSS un Javascript funkcijas, par kurām varat iedomāties.

  Jūsu portfeļa mitināšana

  Šī pamācība māca, kā mitināt savu vietni dažās dažādās platformās. Šie ir soļi, kas jums jāveic, ja vēlaties parādīt savu portfeli cilvēkiem, vervētājiem utt.

  Eksperimentējiet un izklaidējieties

  Vienīgais veids, kā izveidot lielisku portfeli, ir eksperimentēt un izmēģināt jebko un visu, kas izskatās interesanti. Daudzi iedomātā dizaina portfeļi un vietnes izmanto lieliskus pārejas efektus vai dinamisku fonu, taču neviens no tiem nebija iepriekš sagatavots.