Vadnica za zagonsko pot


učbenik za zagonsko pot 4


Škornji za prtljage je osrednji okvir, ki vam pomaga hitreje in preprosteje ustvariti odzivna spletna mesta za mobilne naprave. Bootstrap, ki ga je najprej razvil Twitter, se zdaj uporablja za karkoli, od razvoja spletnih aplikacij do WordPress teme. Je tudi popolnoma brezplačen, vsestranski in intuitiven.

S programom Bootstrap lahko pričarate zapletene spletne strani iz običajnega HTML-ja in jih prilagodite svojim potrebam. Bootstrap ima tudi številne jQuery vtičnike, ki lahko nudijo dodatne funkcije, kot so vrtiljaki, gumbi, namigi in še več.

Nenazadnje vam ponuja veliko bližnjic za izdelavo spletnih strani, ki vam bodo prihranile čas in energijo. Vse, kar potrebujete, je osnovno razumevanje HTML in CSS za ustvarjanje, ki je odziven, najprej mobilni in združljiv z vsemi sodobnimi brskalniki.

P.S. Bootstrap ni popolna možnost za popolne začetnike. Nekaj ​​znanja HTML in CSS bi bilo koristno. Za izdelavo spletnega mesta lahko uporabite tudi graditelje spletnih mest ali WordPress.

Kako ustvariti spletno mesto s programom Bootstrap (kazalo):

  1. Korak 1: Nastavitev in pregled
    1. Ustvari stran HTML
    2. Naložite Bootstrap prek CDN ali ga gostite lokalno
    3. Vključi jQuery
    4. Naložite zagonski JavaScript
    5. Vse skupaj spravite
  2. 2. korak: Oblikujte svojo ciljno stran
    1. Dodajte navigacijsko vrstico
    2. Vključi CSS po meri
    3. Ustvari vsebnik strani
    4. Dodajte sliko ozadja in JavaScript po meri
    5. Dodajte sloj
    6. Vključi naslov strani in besedilo telesa
    7. Ustvari gumb CTA
    8. Nastavite odsek s tremi stolpci
    9. Dodajte kontaktni obrazec
    10. Ustvari nogo z dvema stolpcema
    11. Dodajte poizvedbe v medijih
    12. Sprostite svoje spletno mesto v živo

Skupni čas za izdelavo spletnega mesta s programom Bootstrap: 3-4 ure.
Raven spretnosti: Začetni do Srednji

1. korak: Nastavitev in pregled


Če želite uporabljati Bootstrap, ga morate najprej vključiti v svoje razvojno okolje, tj. Spletno stran. Za to imate dve različni možnosti: naložite ga na daljavo ali naložite in uporabite Bootstrap lokalno. Vendar pa za oba najprej potrebujete nekaj, s čimer ga lahko naložite.,

1. Ustvari stran HTML

Kot prvi korak bomo ustvarili preprosto predlogo HTML kot osnovo, kjer bomo uporabljali Bootstrap. Za to je prva stvar, ki jo želite narediti, ustvariti mapo v računalniku ali strežniku za projektne datoteke. V tem primeru bom preprosto poklical škorenj. Tukaj ustvarite novo besedilno datoteko in jo pokličite index.html. Odprite ga z urejevalnikom besedil po vaši izbiri (npr. Beležnica++) in nato vanj prilepite kodo spodaj.





Vzorec strani za vadnice za začetno uporabo








Preden nadaljujete, ne pozabite shraniti datoteke!

2a. Naložite Bootstrap prek CDN

Kot smo že pojasnili, je Bootstrap sestavljen predvsem iz slogovnih skript in skriptov. Tako jih je mogoče naložiti v glavo in spodnjo stran vaše spletne strani kot druga sredstva, kot so pisave po meri. Okvir za to ponuja dostopno pot CDN (omrežje za prenos vsebine). Najdete ga na Stran za prenos zagonske različice, dalje spodaj.

Če želite Bootstrap spraviti na svojo stran, preprosto prilepite kodo spodaj v odsek vaše predloge.

Ko zdaj shranite datoteko, bo kateri koli brskalnik, ki se odpre, samodejno naložil sredstva Bootstrap.

Uporaba metode na daljavo je dobra ideja, saj bo veliko uporabnikov že imelo okvir v predpomnilniku svojega brskalnika. V tem primeru jim ne bo treba znova nalagati, ko pridejo na vaše spletno mesto, kar vodi k hitrejšemu času nalaganja strani. Posledično je to priporočena metoda za spletna mesta v živo.

Vendar pa za eksperimentiranje in razvoj ali če želite biti neodvisni od internetne povezave, lahko dobite tudi svojo kopijo programa Bootstrap. To počnem v tej vadnici, saj ima tudi manj objavljene kode.

2b. Lokalno Bootstrap

Drugi način za nastavitev Bootstrapa je prenos na trdi disk in datoteke lokalno uporabo. Možnosti prenosa najdete na istem mestu kot povezave do oddaljene različice. Tukaj ne pozabite dobiti datotek CSS in JS. Ne potrebujete izvornih datotek.

Ko to storite, razpakirajte datoteko in kopirajte njeno vsebino v isti imenik kot index.html. Po tem lahko Bootstrap CSS naložite v svoj projekt takole:

Opazili boste, da to vključuje pot datoteke, na kateri najdete datoteko Bootstrap. V vašem primeru se prepričajte, da vaša pot ustreza dejanski nastavitvi. Na primer, imena imen se lahko razlikujejo, če ste prenesli drugo različico Bootstrapa.

3. Vključite jQuery

Če želite dobiti popolno funkcionalnost programa Bootstrap, morate naložiti tudi knjižnico jQuery. Tudi tukaj imate možnost, da ga naložite na daljavo ali gostite lokalno.

V prvem primeru najdete povezavo do najnovejše različice jQueryja tukaj. Z njim lahko naložite knjižnico na svojo stran, tako da postavite vrstico kode spodaj, tam, kjer piše na vaši strani.

Druga možnost je, prenesi jQuery (z desno miškino tipko kliknite> Shrani povezavo kot…), razpakirajte in ga vstavite v projektno mapo. Nato na isti način vključite isto mesto kot datoteko:

Ponovno se prepričajte, da pot ustreza vaši nastavitvi.

4. Naložite zagonski JavaScript

Zadnji korak pri nastavitvi Bootstrapa je nalaganje knjižnice JavaScript Bootstrap. Ti so vključeni v preneseno različico okvira, prav tako najdete povezave do oddaljenih virov na istem mestu kot prej. Vendar ga bomo naložili na drugem mestu kot slogan. Namesto v glavo se vrne v nogo strani takoj po klicu za jQuery.

Lahko ga pokličete na daljavo tako:

Ali lokalno tako:

5. Vse skupaj zložite

Če ste pravilno sledili zgornjim korakom, končajte z datoteko, ki je videti tako za oddaljeno rešitev:

   Vzorec strani za vadnice za začetno uporabo         

Če gostujete lokalno, mora predloga vaše strani spominjati na spodnjo kodo:

   Vzorec strani za vadnice za začetno uporabo         

Če to imate in ste shranili svoje delo, ste zdaj pripravljeni za prehod na naslednji korak.

2. korak: Oblikujte svojo ciljno stran


V redu, to je bilo, res, veliko pripravljalnega dela. Vendar ni bilo zelo težko, kajne? Plus, zdaj se zabava začne.

V trenutku, ko se pomikate po vzorčnem mestu, morate preprosto videti prazno stran. Čas je, da to spremenim.

1. Dodajte navigacijsko vrstico

Prva stvar, ki jo želimo narediti, je, da na vrh strani dodamo navigacijsko vrstico. Tako lahko obiskovalci obiščejo vaše spletno mesto in odkrijejo preostale strani.

Za to bomo uporabili navbar razred. To je ena izmed privzeti elementi podjetja Bootstrap. Ustvari navigacijski element, ki je privzeto odziven in se bo samodejno zrušil na manjših zaslonih. Ponuja tudi vgrajeno podporo za dodajanje blagovne znamke, barvnih shem, razmika in drugih komponent.

Uporabili ga bomo kot spodaj in ga objavili tik pod oznaka:

 Logotip   

Nekaj ​​razlage kode:

  • navbar-expand-md – To pomeni, na kateri točki se navigacijska vrstica razširi od navpične ali ikone hamburgerja do horizontalne vrstice v polni velikosti. V tem primeru smo ga nastavili na srednje zaslone, kar je v Bootstrapu karkoli večjega od 768px.
  • navbar-blagovna znamka – To se uporablja za trženje vašega spletnega mesta. Tu lahko vključite tudi slikovno datoteko z logotipom.
  • navbar-toggler – Označuje preklopni gumb za strnjeni meni. Kos data-toggle = "kolaps" določa, da se bo to preusmerilo na meni s hamburgerji, ne na spustni meni, kar je druga možnost. Pomembno je, da določite podatkovni cilj z ID-jem CSS (definira ga #) in zaviti a div z istim imenom okoli dejanskega navbar element.
  • ikona navbar-toggler – Kot verjetno ugibate, s tem uporabniki ikone kliknejo, da odprejo meni na manjših zaslonih.
  • navbar-nav – Razred za
      element seznama, ki vsebuje elemente menija. Slednji so označeni z nav-element in nav-povezava.

    Zakaj si tako veliko razlagam?

    Ker je to poanta Bootstrapa. Imate vse te standarde, ki vam omogočajo, da hitro ustvarite elemente z nekaterimi razredi HTML in CSS. Ni vam treba napisati nobenega CSS-ja, da bi zagotovili styling, v Bootstrapu je že vse nastavljeno. Poleg tega je vse mobilno odzivno izven škatle! Začenjate videti, kako koristno je to?

    Zgoraj navedeno je dovolj, da na spletno mesto dodate navigacijsko vrstico. Vendar pa je v tem trenutku še vedno videti zelo malo.

    vadnica za zagonsko uporabo dodaj navigacijsko vrstico

    To je zato, ker nima veliko stajlinga. Čeprav lahko dodate privzete barve (na primer z dajanjem navbarju razreda, kot je bg-temno navbar-temno), namesto tega želimo dodati svoje.

    2. Vključite CSS po meri

    Na srečo, če želite spremeniti privzeti slog, vam ni treba prelistati velike knjižnice slogovnih listov in spremembe spreminjati ročno. Namesto tega, tako kot pri otroški temi WordPress, lahko dodate svoje datoteke CSS, s katerimi lahko prepisujete obstoječe stajlinge.

    Za to preprosto ustvarite prazno datoteko s svojim urejevalnikom besedil in ga pokličite main.css. Shranite ga in ga nato dodajte v razdelek glave spletnega mesta Bootstrap takole:

    To je koda za slog slog, ki je v glavnem imeniku. Če se odločite za namestitev v notranjost css mapo, ne pozabite v povezavo vključiti pravilno pot.

    Od tu lahko na svoje spletno mesto dodate CSS po meri. Na primer, za slog navigacijske vrstice in njenih elementov lahko uporabite oznako takole:

    telo { oblazinjenje: 0; marža: 0; ozadje: # f2f6e9; } / * --- navigacijska vrstica --- * / .navbar { ozadje: # 6ab446; } .nav-povezava, .navbar-blagovna znamka { barva: #fff; kazalec: kazalec; } .nav-povezava { margina-desna: 1em! pomembno; } .nav-link: premaknite miško { barva: # 000; } .navbar-kolaps { upraviči-vsebina: flex-end; }

    In tu je rezultat:

    navigacijska vrstica za vadnice v začetnem slogu

    Izgleda bolje kot prej, kajne??

    3. Ustvari vsebnik strani

    Po navigacijski vrstici je naslednje, kar želite, vsebnik za vsebino strani. To je v Bootstrapu res enostavno, saj vse, kar potrebujete, je to pod oznako navbar:

    Opazite posoda-tekočina razred. To je še eden izmed teh privzetih razredov Bootstrap. Nanašamo ga na div element samodejno uporabi kup CSS nanj.

    The -tekočina del poskrbi, da se posoda razteza po celotni širini zaslona. Obstaja tudi samo posoda, ki ima nanjo določene fiksne širine, tako da bo vedno prostora na obeh straneh zaslona.

    Če zdaj stran ponovno naložite, še vedno ne boste videli ničesar (razen če uporabljate orodja za razvijalce). To je zato, ker ste ustvarili samo prazen element HTML. To se bo zdaj začelo spreminjati.

    4. Dodajte sliko ozadja in JavaScript po meri

    Kot naslednji korak v tej vadnici o začetnem zagonu želimo vključiti celotno sliko ozadja za glavo naše ciljne strani. Za to bomo morali uporabiti nekaj jQueryja, da se bo slika raztezala po celotnem zaslonu.

    To storite na enak način kot vključite CSS po meri. Najprej ustvarite besedilno datoteko imena main.js in ga namestite v mapo spletnega mesta. Nato pokličite pred zaključkom v notranjosti index.html.

    Po tem lahko kopirate in prilepite ta del kode, da ustvarite

    element se razteza na celotnem zaslonu:
    $ (document) .ready (funkcija () { višina ($ (okno). višina ()); })

    Nato ostane edino, kar nastavite sliko ozadja. To lahko storite tako v notranjosti main.css:

    .glava { background-image: url ('slike / header-background.jpg'); velikost ozadja: platnica; ozadje-položaj: sredina; položaj: sorazmeren; }

    Če na lokacijo, ki jo navede zgornja pot, postavite sliko zadostne velikosti, boste dosegli rezultat, podoben temu:

    Vadnica za zagonsko pot vključuje podobo ozadja glave

    5. Dodajte sloj

    Da bo slika ozadja izredno elegantna, bomo dodali tudi prekrivalo. V ta namen boste znotraj tistega, ki ste ga pravkar vključili, ustvarili še en element div.

    Nato lahko v datoteko CSS po meri dodate naslednje:

    .prekrivanje { položaj: absolutni; minimalna višina: 100%; najmanjša širina: 100%; levo: 0; vrh: 0; ozadje: rgba (0, 0, 0, 0,6); }

    To bo ustvarilo to lepo prekrivanje za sliko, ki ste jo vnesli prej:

    vadnica za zagonske strani dodajte prekrivanje

    6. Vključite naslov strani in besedilo besedila

    Zdaj verjetno želite dodati naslov strani v obliki naslova plus nekaj besedila. Tako bodo vaši obiskovalci takoj vedeli, na katerem spletnem mestu so in kaj lahko od njega pričakujejo.

    Če jih želite ustvariti, preprosto dodajte ta delček znotraj vsebnika, ki ste ga nastavili v zadnjem koraku, pod prekrivanjem:

    Dobrodošli na ciljni strani!

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis. Suspendisse consectetur mi id libero fringilla, in pharetra sem ullamcorper.

    Po tem dodajte naslednjo oznako main.css.

    .opis { levo: 50%; položaj: absolutni; vrh: 45%; preoblikovati: prevesti (-50%, -55%); poravnava besedila: sredina; } .opis h1 { barva: # 6ab446; } .opis p { barva: #fff; velikost pisave: 1.3rem; višina črte: 1,5; }

    Ko to storite, ciljna stran zdaj izgleda tako:

    vadba za zagonsko pot dodajte naslov strani in opis strani

    Res se začne združevati, kajne?

    7. Ustvari gumb CTA

    Nobena ciljna stran ni popolna brez poziva k dejanju, najpogosteje v obliki gumba. Zaradi tega bi bilo nenavadno, da ne vključimo, kako bi ga ustvarili v tej vadnici o začetnem zagonu.

    Okvir ponuja veliko orodij za hitro in enostavno ustvarjanje gumbov. Najdete lahko veliko primerov tukaj. V mojem primeru dodam naslednje oznake pod vsebino strani znotraj posoda:

    Poleg tega temu CSS dodam main.css:

    .opisni gumb { obroba: 1px trdna # 6ab446; ozadje: # 6ab446; meja-polmer: 0; barva: #fff; } .opisni gumb: s kazalcem miške { obroba: 1px trdna #fff; ozadje: #fff; barva: # 000; }

    Po shranjevanju in ponovnem nalaganju je videti tako:

    vadnica za zagonsko pot doda gumb za poziv k akciji

    8. Nastavite odsek s tremi stolpci

    Sem že čisto zadovoljen s tem, kako se stvari oblikujejo. Vendar s stranjo še nismo končali. Naslednje želimo ustvariti tri stolpce pod glavno vsebino za dodatne informacije. To je posebnost Bootstrapa, saj igra na svojo moč: ustvarjanje mreže. Takole lahko naredite v tem primeru:

    Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Prva stvar, ki jo boste opazili, je vrstica element. To potrebujete vsakič, ko ustvarite stolpce, da delujejo kot vsebnik za mrežo.

    Kar zadeva stolpce, imajo vsi več razredov: col-lg-4, col-md-4 in col-sm-12. Ti pomenijo, da imamo opravka s stolpci in velikostjo, ki jo bodo imeli na različnih zaslonih.

    Če želite to razumeti, morate vedeti, da v mreži Bootstrap vsi stolpci v eni vrstici vedno seštevajo do številke 12. Torej, če jim dodelite zgornje razrede, pomeni, da bodo na velikem in srednjem zasedli tretjino zaslona zasloni (12 razdeljeno s 3 je 4), vendar celoten zaslon v majhnih napravah (12 od 12 stolpcev).

    Smiselno je, kajne??

    Opazili boste tudi, da sem vključil slike in dodal .slika-tekočina razred zanje. Tako se lahko odzovejo tako, da se skupaj z zaslonom, na katerem je stran videti, spreminjajo v lestvico.

    Poleg tega imate na običajnem mestu vključene naslednje stajlinge:

    .Lastnosti { marža: 4em samodejno; oblazinjenje: 1em; položaj: sorazmeren; } .element-naslov { barva: # 333; velikost pisave: 1.3rem; teža pisave: 700; zgornja meja: 20px; preoblikovanje besedila: velika črka; } .lastnosti img { -webkit-box-senca: 1px 1px 4px rgba (0, 0, 0, 0,4); -moz-box-senca: 1px 1px 4px rgba (0, 0, 0, 0,4); okvirček-senca: 1px 1px 4px rgba (0, 0, 0, 0,4); zgornja meja: 16px; }

    Ko ga dodate pod glavno vsebino in shranite, je videti tako:

    vadnica za zagonsko pot doda tri razdelke stolpcev

    9. Dodajte kontaktni obrazec

    Opazili boste, da je eno od novih polj še vedno prazno. To je bilo namenoma, ker mu želimo dodati kontaktni obrazec. To je povsem običajna praksa za ciljne strani, ki obiskovalcem omogočajo stik.

    Ustvarjanje kontaktnega obrazca v programu Bootstrap je enostavno:

    Stopite v stik!

    Do zdaj mi ne bi bilo več treba razlagati oznake, da bi ustvarili stolpce. Tukaj je opisano ostalo:

    • oblika-skupina – Uporablja se za ovijanje polj obrazcev za oblikovanje.
    • nadzor nad formo – Označuje polja obrazca, kot so vnosi, besedilna področja itd.

    Z obrazci lahko storite veliko več, kar lahko ugotovite v dokumentacijo. Za predstavitvene namene pa je vse zgoraj navedeno dovolj. Postavite ga v preostali prazen stolpec in dodajte ta slog main.css:

    .značilnosti .form-control, .funkcije vnosa { meja-polmer: 0; } .lastnosti .btn { barva ozadja: # 589b37; obroba: 1px trdna # 589b37; barva: #fff; zgornja meja: 20px; } .lastnosti .btn: hover { barva ozadja: # 333; obroba: 1px trdna # 333; }

    Ko naredite, dobite takšen obrazec:

    Vadnica za zagonsko pot vključuje obrazec za stik

    10. Ustvari nogo z dvema stolpcema

    V redu, zdaj se približujemo koncu vadbe o začetni rabi. Zadnja stvar, ki jo želite dodati na svojo ciljno stran, je odsek noge z dvema stolpcema. Do zdaj to za vas več ne bi smelo predstavljati težav.

    Dodatne informacije

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Kontakt

    1640 Riverside Drive, Hill Valley, Kalifornija
    [zaščitena e-pošta]
    + 01 234 567 88
    + 01 234 567 89

    Poleg običajnega označevanja mreže ta razdelek poudarja nekaj možnosti za spreminjanje tipografije s programom Bootstrap:

    • veliko besedilo
    • pisava-krepka pisava
    • besedilno središče

    Iz imen razredov, ki jih opravljajo, mora biti precej jasno. Več informacij o Bootstrapu in tipografiji tukaj.

    Poleg zgoraj navedenega lahko uporabite takšen stajling:

    .footer strani { barva ozadja: # 222; barva: #ccc; oblazinjenje: 60px 0 30px; } .footer-copyright { barva: # 666; oblazinjenje: 40px 0; }

    Rezultat je lep podnožje, ki je videti tako:

    Vadnica za zagonsko pot vključuje nogo strani

    11. Dodajte medijske poizvedbe

    Stran je v osnovi že pripravljena. Prav tako je v celoti odgovoren. Vendar se v mobilnem pogledu brskalnika zgornji del še ne izkaže prav.

    napaka pri vadbi zagonskega računalnika pri mobilnem oblikovanju

    Vendar brez skrbi, to lahko enostavno popravite s preprosto medijsko poizvedbo. Če za pripravo spletnega mesta Bootstrap ne uporabljate SASS, ti delujejo enako kot v drugih primerih. Upoštevati morate samo prednastavljene mejne točke vključeno v Bootstrap.

    Posledično lahko za odpravo zgornje težave preprosto vključite delček kode, kot je ta:

    @media (največja širina: 575,98px) { .opis { levo: 0; oblazinjenje: 0 15px; položaj: absolutni; vrh: 10%; preobrazba: nobena; poravnava besedila: sredina; } .opis h1 { velikost pisave: 2em; } .opis p { velikost pisave: 1.2rem; } .Lastnosti { marža: 0; } }

    Po tem je vse tako, kot mora biti:

    vadnica za zagonsko pot doda predstavnostno poizvedbo

    12. Naložite svoje spletno mesto na spletnega gostitelja

    Če ste spremljali naprej, morate zdaj nastaviti dokončano spletno mesto, ki je tudi mobilno in je povsem odzivno.

    Vendar doslej tega ne morete videti nihče, razen vas. Če želite to spremeniti, potrebujete spletni gostitelj in domeno. Tako lahko ljudje vnesejo naslov vašega spletnega mesta v svojo brskalno vrstico in nato dostopajo do vaše novo kovane spletne strani Bootstrap v spletu.

    Da bi jim to omogočili, morate spletno mesto naložiti na svoj strežnik. To lahko storite s FTP odjemalcem FileZilla. Zbirajte vaš gostiteljski naslov FTP, uporabniško ime in geslo pri ponudniku gostovanja, da se na daljavo povežete s strežnikom. Ko to storite, bi si morali ogledati datoteke in imenike, ki so trenutno tam.

    naložite spletno mesto za zagonske strežnike na strežnik prek ftp

    Pomaknite se do imenika, na katerega je opozorila vaša domena (ponavadi je korenski imenik). Ko to storite, preprosto poiščite mapo z datotekami Bootstrap na trdem disku, označite vse datoteke znotraj in jih povlecite na strežnik, da začnete s prenosom. Postopek bo trajal kar nekaj časa, odvisno od hitrosti povezave ter števila in velikosti datotek.

    Ko pa to storite, ko dostopate do svoje domene, bi morali v oknu brskalnika videti končano spletno mesto.

    končana ciljna stran z vadbo za zagonsko pot

    Ni slabo za nekaj vrstic kode, kajne?

    Če že imate celotno kodo za stran, vključno s CSS-jem po meri in JavaScript, jih lahko prenesete tukaj. S tem imate vse, kar potrebujete za ustvarjanje ciljne strani s programom Bootstrap.

    Zaključek

    Bootstrap je odprtokodni razvojni okvir, ki ga lahko vsakdo uporablja brezplačno. Omogoča vam hitro oblikovanje prototipov, ustvarjanje spletnih strani in na splošno zadetek na tleh.

    Kot ste že videli v tej učiteljici za začetne zagonske programe za začetnike, potrebuje le osnovno znanje HTML, CSS in nekaj izbirnega jQueryja. Čeprav ni tako udoben kot uporaba WordPressa, je Bootstrap še vedno veljavna alternativa za izdelavo spletnega mesta.

    Zdaj že veste, kako nastaviti in namestiti Bootstrap in njegove komponente, ustvarite preprosto ciljno stran, vključite nekaj osnovne vsebine in jo oblikujete. Ustvarite lahko menije za krmarjenje, nastavite slike ozadja, vključite gumbe, stolpce in obrazce za stike.

    Seveda se je treba še kaj naučiti.

    Zahvaljujoč tej osnovni vadnici o Bootstrapu zdaj veste dovolj, da se lahko sami premikate naprej. Če se želite potopiti globlje v okvir, je dobro izhodišče W3Šole. Poleg tega upamo, da vam je bila ta vadnica za začetnike všeč in bi radi slišali vaše misli in izkušnje o njej.

    Posodobitev: Za začetnike smo ustvarili tudi varalico za začetne zagone v različicah .pdf in .png.

    Ali imate kakšno misel o zgornji vadnici za začetno uporabo? Vprašanja, komentarji, zahteve? Sporočite nam v spodnjem razdelku za komentarje!

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map