Šajā rakstā mēs sāksim ar vietnes izveidi, izmantojot Bootstrap, atvērtā pirmkoda ietvars, kas ļauj mums viegli padarīt to atsaucīgu un nodrošināt tai zināmu interaktivitāti. Tā ir pamata veidne, ko automātiski ģenerē izstrādes vides spraudnis, kuru mēs iepriekš ieteicām un kas mums būs jāmaina.
Jo iepriekšējais raksts Jūs atradīsit instrukcijas, kā instalēt VS Codium, tulkot tā lietotāja interfeisu spāņu valodā un instalēt spraudni Bootstrap.
Divas lietas, kas jāpatur prātā:
- Mūsu izmantotās komandas ir īsinājumtaustiņi, tie ir jāievada. Kopēšana/ielīmēšana nedarbojas.
- Mūsu satura pārvaldnieks neļauj man parādīt HTML kodu, tāpēc man ir jāizmanto ekrānuzņēmumi. Lai jums būtu piekļuve to piemēru kodiem, kurus es tos augšupielādēju uz GitHub.
Kā klonēt GitHub repozitoriju
Tas, kas izcilos atšķir no mums pārējiem, ir veids, kā viņi reaģē uz problēmām. Ričardam Stallmanam nepatika viņa printera draiveris, un, tā kā viņi neļāva viņam to mainīt, viņš sāka brīvās programmatūras kustību. Linusu Torvaldu nepārliecināja neviena no kodu koplietošanas platformām un izveidoja savu. git.
Atšķirībā no tradicionālajām programmatūras izplatīšanas sistēmām, kurās vienīgā atļautā lietotāja mijiedarbība ir lejupielāde, ar Git jūs varat sekot līdzi projekta attīstībai laika gaitā. Citi cilvēki var klonēt krātuvi, veikt modifikācijas un ierosināt, lai sākotnējā projekta izstrādātāji tās iekļauj. Ja tas tiek pieņemts, izstrādātāji to var viegli izdarīt bez nepieciešamības lejupielādēt un atkārtoti augšupielādēt failus.
Ir vairāki pakalpojumi, kuru pamatā ir Git, es izvēlējos GitHub vienkārši tāpēc, ka tas integrējas ar VS Codium.
Lai lejupielādētu parauga failus savā datorā, jums vienkārši jāinstalē git pakotne, ievērojot izplatīšanas norādījumus par pakotņu instalēšanu terminālī.
Pēc tam ierakstiet šādas komandas.
Es gribētu saglabāt failus mapē Dokumenti, lai es mainītu direktoriju ar
cd Documentos
Tad es klonēju failus ar:
git clone https://github.com/dggonzalez1971/bootstrap.git
Es jums atgādināšu par šīm darbībām katrā no atlikušajiem rakstiem, jo tādējādi jūs atjaunināsit piemēru failus, kad tie tiek augšupielādēti.
Lai skatītu failus, vienkārši atveriet failu pārlūku un atrodiet mapi bootstrap.
Vietnes izveide ar Bootstrap
Ja vēlaties ievadīt kodu manuāli, mēs sākam, izveidojot mapi, kurā saglabāsim vietni. Jūs varat ievietot jebkuru nosaukumu, kas jums patīk.
Pēc tam mēs veicam šādas darbības:
- Dodamies uz izvēlni Arhīvu.
- Klikšķiniet uz Jauns teksta fails.
- Klikšķiniet uz Saglabāt.
- Mēs meklējam izveidoto mapi un ievietojam faila nosaukumu example1.html.
- Klikšķiniet uz Saglabāt.
Dažreiz File Explorer logu var paslēpt VSCodium.
Ļaujiet paplašinājumam izveidot mūsu vietā pamata veidni. Šim nolūkam mēs ierakstām !b5-$
Tādējādi tiks ģenerēts kods, ko atradīsit piemēru mapē kā example1.html
Mēs redzēsim sekojošo:
Šis ir Bootstrap paplašinājuma ģenerēts kods.
Mēs veiksim dažas izmaiņas šajā failā. Modifikācijas atradīsit ar nosaukumu example2.html
- 2. rindā mēs mainām valodu, aizstājot eng ar es. Tas meklētājprogrammām norāda, ka vietnes valoda ir spāņu valoda.
- 6. rindā mēs mainām tekstu, kas atrodas zem etiķetēm virsraksts. Mēs liekam Mana pirmā Bootstrap vietne.
- 12. rindā mēs mainām saturu starp tagiem h1 līdz Šī ir vietne, kas izveidota ar Bootstrap.
Tālāk mēs veiksim dažas svarīgas izmaiņas. Šīs modifikācijas ir saistītas ar:
- Spraudņa izstrādātājs nevar sekot līdzi Bootstrap versijām, un ir arī jaunākas versijas.
- Bootstrap komponentiem ir daudz iespēju, un mani interesē vēl viena.
- Saskaņā ar oficiālo dokumentāciju Javascript bibliotēku izsaukumiem ir jāatrodas pamattekstu tagos.
Piemēram, 2. rindiņas saturs tiek mainīts, 7. un 8. rindiņa tiek dzēsta un atlikušais saturs tiek augšupielādēts, lai saglabātu numerācijas saderību. Pēc tam mēs noklikšķiniet uz 9. rindiņas beigām, lai izveidotu jaunu 10. rindiņu un ievietotu saiti uz Javascript bibliotēkām.
Neuztraucieties, ja nesaprotat kodu. Nākamajā rakstā es paskaidrošu katras rindas funkciju.