Vodič za dizanje sustava


bootstrap 4 tutorial


bootstrap je napredni okvir koji vam pomaže da brže i lakše napravite internetske web stranice koje odgovaraju mobilnim uređajima. Prvo razvijen od strane Twittera, Bootstrap se sada koristi za sve, od razvoja web aplikacija do WordPress tema. Također je potpuno besplatan, svestran i intuitivan.

Pomoću Bootstrapa možete dočarati složene web stranice iz standardnog HTML-a i prilagoditi ih svojim potrebama. Bootstrap se također isporučuje s nizom jQuery dodataka koji mogu pružiti dodatne funkcije poput vrtilja, gumba, savjeta i još mnogo toga..

Posljednje, ali ne najmanje bitno, daje vam puno prečaca za izradu web stranica koje će vam uštedjeti vrijeme i energiju. Sve što trebate je osnovno razumijevanje HTML-a i CSS-a za stvaranje koji su prilagodljivi, prvo mobilni i kompatibilni sa svim modernim preglednicima.

P.S. Bootstrap nije savršena opcija za kompletne početnike. Bilo bi korisno HTML i CSS znanje. Za stvaranje web stranice možete upotrijebiti programere web stranica ili WordPress.

Kako stvoriti web mjesto pomoću Bootstrapa (sadržaj):

  1. Korak 1: Postavljanje i pregled
    1. Izradite HTML stranicu
    2. Učitajte Bootstrap putem CDN-a ili ga lokalno ugostite
    3. Uključite jQuery
    4. Učitajte JavaScript za pokretanje
    5. Stavite sve zajedno
  2. Korak 2: Dizajnirajte svoju odredišnu stranicu
    1. Dodajte navigacijsku traku
    2. Uključite prilagođeni CSS
    3. Izradite spremnik sadržaja na stranici
    4. Dodajte pozadinsku sliku i prilagođeni JavaScript
    5. Dodajte sloj
    6. Uključite naslov stranice i tekst teksta
    7. Stvorite gumb CTA
    8. Postavite odjeljak s tri stupca
    9. Dodajte kontakt obrazac
    10. Izradite podnožje s dva stupca
    11. Dodajte medijske upite
    12. Ostvarite svoju web lokaciju uživo

Ukupno vrijeme za stvaranje web stranice pomoću Bootstrapa: 3-4 sata.
Razina vještine: Početni do srednji

1. korak: Postavljanje i pregled


Da biste koristili Bootstrap, prvo ga morate integrirati u svoje razvojno okruženje, tj. Web stranicu. Za to imate dvije različite mogućnosti: učitajte ga na daljinu ili preuzmite i koristite Bootstrap lokalno. Međutim, obojici je prvo potrebno nešto u što ih možete učitati.,

1. Stvorite HTML stranicu

Kao prvi korak, napravit ćemo jednostavan HTML predložak kao bazu gdje ćemo koristiti Bootstrap. Zbog toga, prvo što želite učiniti je stvoriti mapu na računalu ili poslužitelju za projektne datoteke. U ovom slučaju to ću jednostavno nazvati bootstrap. Ovdje stvorite novu tekstualnu datoteku i nazovite je index.html. Otvorite ga uređivačem teksta po vašem izboru (npr. blokčić za bilješke++), a zatim zalijepite kôd dolje u njega.





Stranica uzorka udžbenika za pokretanje








Ne zaboravite spremiti datoteku prije nego što krenete dalje!

2a. Učitajte Bootstrap putem CDN-a

Kao što je već objašnjeno, Bootstrap se sastoji uglavnom od slogova i skripti. Kao takvi, mogu se učitati u zaglavlju i podnožju vaše web stranice kao i druga sredstva, poput prilagođenih fontova. Okvir nudi CDN (mrežu isporuke sadržaja) pristupni put za to. Možete ga pronaći na Stranica za preuzimanje sustava za pokretanje, dalje ispod.

Da biste dodali Bootstrap na svoju stranicu, jednostavno zalijepite kôd ispod u odjeljak vašeg predloška.

Kada sad spremite datoteku, svaki preglednik koji se otvori automatski će učitati sredstva Bootstrap.

Korištenje daljinske metode je dobra ideja jer će mnogi korisnici već imati okvir u predmemoriji preglednika. U tom slučaju neće ih morati ponovo učitavati kad dođu na vašu web lokaciju što dovodi do bržeg vremena učitavanja stranica. Kao posljedica toga, ovo je preporučena metoda za web lokacije uživo.

Međutim, za eksperimentiranje i razvoj ili ako želite biti neovisni o internetskoj vezi, možete dobiti i vlastiti primjerak Bootstrapa. To radim za ovaj tutorial jer također rezultira sa manje koda za objavljivanje.

2b. Lokalno učitavanje

Alternativni način postavljanja Bootstrapa je preuzimanje na tvrdi disk i datoteke datoteke koristite lokalno. Pronalaženje opcija nalazi se na istom mjestu kao i veze do udaljene verzije. Ovdje svakako nabavite sastavljene CSS i JS datoteke. Ne trebaju vam izvorne datoteke.

Nakon što to učinite, raspakujte datoteku i kopirajte njezin sadržaj u istu mapu kao index.html. Nakon toga možete učitati Bootstrap CSS u svoj projekt na sljedeći način:

Primijetit ćete da to uključuje put datoteke na kojoj možete pronaći datoteku Bootstrap. U vašem slučaju, provjerite odgovara li vaš put vašem stvarnom postavljanju. Na primjer, imena direktorija mogu se razlikovati ako ste preuzeli drugu inačicu Bootstrapa.

3. Uključite jQuery

Kako biste dobili potpunu funkcionalnost Bootstrapa, morate također učitati jQuery knjižnicu. I ovdje imate mogućnost učitati ga na daljinu ili ga lokalno ugostiti.

U prvom slučaju nalazite vezu na najnoviju verziju jQueryja ovdje. Možete ga koristiti za učitavanje biblioteke na svoju stranicu tako da ispod kuda stavite liniju koda na vašoj stranici.

Alternativno, preuzmi jQuery (desnom tipkom miša> Spremi link kao…), raspakujte i stavite ga u mapu projekta. Zatim je na isto mjesto uključite u datoteku:

Ponovno provjerite odgovara li put vašem postavljanju.

4. Učitajte JavaScript za pokretanje

Posljednji korak u postavljanju Bootstrapa je učitavanje JavaScript knjižnice Bootstrap. Oni su uključeni u preuzetu verziju okvira, a također možete pronaći veze do udaljenih izvora na istom mjestu kao i prije. Međutim, učitati ćemo ga na drugo mjesto od stilskog lista. Umjesto zaglavlja, ide u podnožje stranice, odmah nakon poziva za jQuery.

Možete ga nazvati na daljinu ovako:

Ili lokalno tako:

5. Stavite sve zajedno

Ako ste pravilno slijedili gore navedene korake, trebali biste završiti s datotekom koja izgleda ovako za udaljeno rješenje:

   Stranica uzorka udžbenika za pokretanje         

Alternativno, ako gostujete lokalno, predložak stranice trebao bi podsjećati na donji kôd:

   Stranica uzorka udžbenika za pokretanje         

Ako je to ono što imate i spasili ste svoj rad, sada ste spremni za prelazak na sljedeći korak.

2. korak: dizajnirajte odredišnu stranicu


U redu, to je, doduše, bilo puno priprema. Međutim to nije bilo jako teško, zar ne? Plus, sada počinje zabava.

U trenutku kada se nalazite na svom oglednom mjestu jednostavno biste trebali vidjeti praznu stranicu. Vrijeme je da se to promijeni.

1. Dodajte navigacijsku traku

Prvo što želimo učiniti je dodati navigacijsku traku na vrh stranice. To posjetiteljima omogućuje obilazak vaše web stranice i otkrivanje ostatka vaših stranica.

Za to ćemo upotrijebiti Navbara klase. Ovo je jedan od zadani elementi of Bootstrap. To stvara navigacijski element koji je prema zadanim postavkama osjetljiv i automatski će se srušiti na manjim zaslonima. Ona također nudi ugrađenu podršku za dodavanje marke, šeme boja, razmaka i drugih komponenti.

Koristit ćemo ga kao dolje i postavićemo ga ispod označiti:

 Logo   

Nešto objašnjenje koda:

  • Navbara-proširiti-MD – Označava u kojem se trenutku navigacijska traka širi od okomite ili ikone hamburgera u horizontalnu traku pune veličine. U ovom slučaju postavili smo je na srednje ekrane, što je u Bootstrapu nešto veće od 768px.
  • Navbara-marka – Ovo se koristi za markeranje vaše web stranice. Ovdje možete uključiti i datoteku slike logotipa.
  • Navbara-toggler – Označava preklopni gumb srušenog izbornika. Komad podataka preklopni = „kolaps” definira da će se ovo okrenuti meniju hamburgera, a ne padajućem izborniku, što je druga opcija. Važno je da definirate Podaci ciljanu s CSS idom (definiranim s #) i zamotati a div s istim imenom oko stvarnog Navbara element.
  • Navbara-toggler-ikona – Kao što vjerojatno možete pretpostaviti, ovo stvara ikonu koju korisnici kliknu kako bi otvorili izbornik na manjim zaslonima.
  • Navbara-navigaciju – Razred za
      element popisa koji sadrži stavke izbornika. Potonji su označeni sa nav-točka i nav-link.

    Zašto to toliko objašnjavam?

    Jer to je poanta Bootstrapa. Imate sve ove standarde koji vam omogućuju brzo stvaranje elemenata s nekim HTML i CSS klasama. Ne morate pisati CSS da biste osigurali styling, sve je već postavljeno unutar Bootstrapa. Uz to, sve je mobilno odgovorno izvan okvira! Počinjete li vidjeti koliko je ovo korisno?

    Navedeno je dovoljno za dodavanje navigacijske trake na vašu web lokaciju. Međutim, u ovom trenutku to još uvijek izgleda vrlo malo.

    Vodič za pokretanje sustava za dodavanje navigacijske trake

    To je zato što nema puno stilova za to. Dok ste u mogućnosti dodati zadane boje (na primjer, davanjem navbar klasi poput bg-dark navbar-dark), umjesto toga želimo dodati svoje.

    2. Uključite prilagođeni CSS

    Srećom, ako želite promijeniti zadani stil, ne morate se probijati kroz veliku biblioteku stilova i mijenjati ručno. Umjesto toga, baš kao i s WordPress podređenom temom, možete dodati vlastite CSS datoteke koje možete koristiti za prepisivanje postojećih stilova.

    Za to jednostavno stvorite praznu datoteku s uređivačem teksta i pozovite je main.css. Spremite ga, a zatim ga dodajte u odjeljak glave vašeg Bootstrap web mjesta poput ovog:

    Ovo je kod za stilsku tablicu koja se nalazi u glavnom imeniku. Ako se odlučite smjestiti unutar css mapu, obavezno uključite ispravan put u vezu.

    Odavde možete dodati prilagođeni CSS na svoju web lokaciju. Na primjer, za stiliziranje navigacijske trake i njenih elemenata možete upotrijebiti označavanje ovako:

    tijelo { obloga: 0; marža: 0; pozadina: # f2f6e9; } /*--- navigacijska traka ---*/ .navbar { Pozadina: # 6ab446; } .nav-link, .navbar-brand { boja: #fff; pokazivač: pokazivač; } .nav-link { margina-desno: 1em! važno; } .nav-link: lebdi { boja: # 000; } .navbar-kolaps { opravdati-sadržaj: flex-end; }

    I evo rezultata:

    navigacijska traka za poduke za pokretanje sustava

    Izgleda bolje nego prije, zar ne?

    3. Napravite spremnik sadržaja za stranicu

    Nakon navigacijske trake, sljedeće što želite je spremnik za sadržaj stranice. U Bootstrapu je ovo jednostavno, jer sve što vam treba je ispod oznake za navigaciju:

    Primjetite spremnik fluida klase. Ovo je još jedna od onih zadanih Bootstrap klasa. Primjenjujući ga na div element automatski primjenjuje gomilu CSS-a na njega.

    -tekućina dio osigurava da se spremnik proteže po cijeloj širini zaslona. Tu je i samo kontejner, koji ima fiksirane širine primijenjene na njega, tako da će uvijek biti mjesta na obje strane ekrana.

    Međutim, ako sada ponovo učitavate stranicu, i dalje nećete vidjeti ništa (osim ako ne koristite alate za razvojne programere). To je zato što ste stvorili samo prazan HTML element. To će se sada početi mijenjati.

    4. Dodajte pozadinsku sliku i prilagođeni JavaScript

    Kao sljedeći korak u ovom Bootstrap vodiču, želimo uključiti pozadinsku sliku preko cijelog zaslona zaglavlja naše odredišne ​​stranice. Za to ćemo morati upotrijebiti neki jQuery da se slika proteže cijelim zaslonom.

    To radite na isti način kao što uključujete prilagođeni CSS. Prvo stvorite tekstualnu datoteku imena main.js i smjestite ga u mapu svoje web lokacije. Zatim ga nazovite prije zatvaranja označite unutra index.html.

    Nakon toga, možete kopirati i zalijepiti ovaj komad koda da biste napravili

    element se proteže preko cijelog zaslona:
    $ (Dokument) .ready (funkcija () { $ ( 'Header') visina ($ (prozora) .height ()). })

    Zatim je jedino što preostaje postaviti pozadinsku sliku. Možete to učiniti tako iznutra main.css:

    .Zaglavlje { background-image: url ('slike / header-background.jpg'); pozadina: poklopac; pozadinski položaj: centar; položaj: relativan; }

    Ako na odgovarajuću stazu stavite sliku dovoljne veličine, postići ćete rezultat sličan ovom:

    tutorial za pokretanje programa uključuje pozadinsku sliku zaglavlja

    5. Dodajte sloj

    Da bismo pozadinsku sliku učinili dodatnom stilskom, dodaćemo i sloj. Za to ćete stvoriti još jedan div element unutar onog koji ste prethodno uključili.

    Zatim u svoju prilagođenu CSS datoteku možete dodati sljedeće:

    .prekrivanje { položaj: apsolutni; minimalna visina: 100%; minimalna širina: 100%; lijevo: 0; vrh: 0; pozadina: rgba (0, 0, 0, 0,6); }

    Ovo će stvoriti ovaj lijepi prekrivač za sliku koju ste unijeli ranije:

    udžbenik za pokretanje dodavanja sloja

    6. Uključite naslov stranice i tekst teksta

    Sada vjerojatno želite dodati naslov stranice u obliku naslova plus nešto teksta teksta. Na taj način će posjetitelji odmah znati na kojoj se web lokaciji nalaze i što mogu očekivati ​​od nje.

    Da biste ih stvorili, jednostavno dodajte ovaj isječak unutar spremnika koji ste postavili u posljednjem koraku, ispod sloja:

    Dobrodošli na odredišnu stranicu!

    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.

    Nakon toga, dodajte sljedeće oznake main.css.

    .opis { lijevo: 50%; položaj: apsolutni; vrh: 45%; transformirati: prevesti (-50%, -55%); poravnavanje teksta: središte; } .opis h1 { boja: # 6ab446; } .opis p { boja: #fff; veličina slova: 1.3rem; linija visina: 1,5; }

    Kad to učinite, odredišna stranica sada izgleda ovako:

    tutorial za pokretanje sustava, dodajte naslov i opis stranice

    To se zaista počinje zbližavati, zar ne??

    7. Stvorite CTA gumb

    Nijedna odredišna stranica nije potpuna bez poziva na akciju, najčešće u obliku gumba. Iz tog razloga, ne bi bilo dobro da ne uključimo kako ga stvoriti u ovaj Bootstrap udžbenik.

    Okvir nudi obilje alata za brzo i jednostavno stvaranje gumba. Možete naći puno primjera ovdje. U mom slučaju dodajem sljedeće označavanje odmah ispod sadržaja stranice unutar spremnik:

    Uz to dodajem i ovaj CSS main.css:

    .opisni gumb { obrub: 1px krutina # 6ab446; Pozadina: # 6ab446; obrub granice: 0; boja: #fff; } .opisni gumb: zadržite pokazivač { obrub: 1px solid #fff; Pozadina: #fff; Boja: # 000; }

    Nakon spremanja i ponovnog umetanja, izgleda ovako:

    udžbenik za pokretanje dodavanja poziva na gumb za akciju

    8. Postavite odjeljak s tri stupca

    Već sam sasvim zadovoljan kako se stvari oblikuju. Međutim, još nismo gotovi sa stranicom. Dalje, želimo stvoriti tri stupca ispod glavnog sadržaja za dodatne informacije. Ovo je specijalnost Bootstrapa jer igra na svoju snagu: stvarajući rešetku. Evo kako to učiniti u ovom slučaju:

    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.

    Prvo što ćete primijetiti je red element. To vam treba kad god kreirate stupce da bi radili kao spremnik za mrežu.

    Što se tiče stupaca, svi oni imaju nekoliko klasa: stupac-lg-4, stupac-md-4 i stupac-sm-12. Oni označavaju da imamo posla sa stupcima i veličinom koju će imati na različitim ekranima.

    Da biste to razumjeli, morate znati da se u Bootstrap mreži svi stupci u jednom retku zbroje s brojem 12. Dakle, davanje gore navedenih klasa znači da će oni zauzimati trećinu zaslona na velikim i srednjim zasloni (12 podijeljeno sa 3 je 4), ali cijeli zaslon na malim uređajima (12 od 12 stupaca).

    Ima smisla, zar ne??

    Također ćete primijetiti da sam uključio slike i dodao .Slika fluida klasa im. Na taj način oni će učiniti odgovornim tako da se oni skaliraju zajedno sa zaslonom na kojem se stranica pregledava.

    Pored toga, na uobičajeno mjesto uključeni su sljedeći styling:

    .mogućnosti { marža: 4em auto; obloga: 1em; položaj: relativan; } .značajka-naslov { boja: # 333; veličina slova: 1.3rem; težina slova: 700; marža-dno: 20px; pretvaranje teksta: velika slova; } .Features img { -webkit-box-shadow: 1px 1px 4px rgba (0, 0, 0, 0,4); -moz-box-sjena: 1px 1px 4px rgba (0, 0, 0, 0,4); okvir-sjena: 1px 1px 4px rgba (0, 0, 0, 0,4); marža-dno: 16px; }

    Kada se doda ispod glavnog sadržaja i spremi, izgleda ovako:

    tutorial za pokretanje sustava dodajte tri odjeljka stupca

    9. Dodajte kontakt obrazac

    Primijetit ćete da je jedno od novih polja još uvijek prazno. To je bilo namjerno jer tome želimo dodati obrazac za kontakt. To je sasvim uobičajena praksa za odredišne ​​stranice kako bi posjetitelji mogli stupiti u kontakt.

    Stvaranje kontaktnog obrasca u Bootstrapu prilično je jednostavno:

    Javite se!

    Do sad mi više ne bi trebalo objašnjavati oznaku za stvaranje stupaca. Evo što znači ostatak markiranja:

    • Oblik skupina – Koristi se za omotavanje polja obrazaca za oblikovanje.
    • Obrazac za kontrolu – Označava polja obrazaca kao što su ulazi, tekstualna područja itd.

    Mnogo više možete učiniti sa obrascima o čemu možete saznati u dokumentacija. Međutim, u demonstrativne svrhe, gore je dovoljno. Smjestite ga u preostali prazni stupac, a zatim dodajte ovaj stil main.css:

    .svojstva .form-control, .unosi značajke { obrub granice: 0; } .značajke .btn { pozadinska boja: # 589b37; obrub: 1px krutina # 589b37; boja: #fff; margina-top: 20px; } .značajke .btn: lebdeći { pozadinska boja: # 333; obrub: 1px kruta # 333; }

    Kada to učinite, dobivate takav obrazac:

    tutorial za pokretanje programa uključuje obrazac za kontakt

    10. Izradite podnožje s dva stupca

    U redu, sada se približavamo kraju udžbenika Bootstrap. Posljednje što želite dodati svojoj odredišnoj stranici je odjeljak podnožja s dva stupca. Do sada, to vam više ne bi trebalo predstavljati problem.

    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
    [E zaštićeni]
    + 01 234 567 88
    + 01 234 567 89

    Osim uobičajenog markiranja rešetke, ovaj odjeljak ističe nekoliko mogućnosti izmjene tipografije pomoću Bootstrapa:

    • teksta velikim slovima
    • font-težine podebljano
    • text-centar

    Trebalo bi biti poprilično jasno iz naziva nastave koje obavljaju. Možete pronaći više informacija o Bootstrapu i tipografiji ovdje.

    Pored navedenog, možete koristiti i ovakav styling:

    .footer stranice { pozadinska boja: # 222; boja: #ccc; padding: 60px 0 30px; } .footer-copyright { boja: # 666; padding: 40px 0; }

    To rezultira prekrasnim podnožjem koji izgleda ovako:

    Vodič za pokretanje programa uključuje podnožje stranice

    11. Dodajte medijske upite

    Stranica je već pripremljena. Također je u potpunosti odgovoran. Međutim, u prikazu mobilnog preglednika gornji odjeljak još nije ispravan.

    Pogreška vodiča za pokretanje pokretanja na mobilnom dizajnu

    Međutim, bez brige, to možete ispraviti jednostavnim medijskim upitom. Ako za izradu stranice Bootstrap ne koristite SASS, oni funkcioniraju na isti način kao u drugim slučajevima. Samo morate imati na umu unaprijed postavljene točke prekida uključeno u Bootstrap.

    Kao posljedicu, za uklanjanje gornjeg problema, možete jednostavno uključiti dio koda poput ovog:

    @media (maksimalna širina: 575.98 piksela) { .opis { lijevo: 0; padding: 0 15px; položaj: apsolutni; vrh: 10%; preobrazba: nijedna; poravnavanje teksta: središte; } .opis h1 { veličina slova: 2em; } .opis p { veličina slova: 1.2rem; } .mogućnosti { marža: 0; } }

    Nakon toga sve je kako treba biti:

    tutorial za pokretanje sustava dodavanje upita medija

    12. Otpremite svoju web stranicu u web-domaćina

    Ako pratite, sada biste trebali postaviti gotovu web stranicu koja je također mobilna i koja u potpunosti reagira.

    Međutim, za sada to nitko ne može vidjeti. Da biste to promijenili, potreban vam je web domaćin i domena. Na taj način ljudi mogu unijeti adresu vaše web stranice u traku preglednika, a zatim internetsko pristupati vašoj novootkrivenoj web lokaciji Bootstrap.

    Da biste im omogućili to, morate učitati web mjesto na svoj poslužitelj. To možete učiniti s FTP klijentom FileZilla. Prikupite svoju FTP adresu, korisničko ime i lozinku svog davatelja hostinga za daljinsko povezivanje s vašim poslužiteljem. Kad to učinite, trebali biste moći vidjeti datoteke i mape koje su trenutno tamo.

    učitajte web mjesto za pokretanje sustava na server putem ftp-a

    Dođite do direktorija na koji je ukazana vaša domena (obično korijenskog direktorija). Nakon što to učinite, jednostavno pronađite mapu s datotekama Bootstrap na tvrdom disku, označite sve datoteke unutra, a zatim ih povucite na poslužitelj da biste započeli prijenos. Postupak će potrajati neko vrijeme ovisno o brzini vaše veze kao i broju i veličini datoteka.

    Međutim, kad to učinite, kada pristupite svojoj domeni, trebali biste moći vidjeti gotovu web lokaciju u prozoru preglednika.

    gotova podučavanja dovršene odredišne ​​stranice

    Nije loše za nekoliko redaka koda, točno?

    Kada govorimo o tome, ako želite imati čitav kôd za stranicu, uključujući prilagođeni CSS i JavaScript, sve ih možete preuzeti ovdje. S ovim imate sve što je potrebno za stvaranje odredišne ​​stranice s programom Bootstrap.

    Zaključak

    Bootstrap je otvoreni razvojni i razvojni okvir koji svako može besplatno koristiti. Omogućuje vam brzi prototip dizajna, izradu web stranica i općenito trčanje po zemlji.

    Kao što ste vidjeli u ovom Bootstrap vodiču za početnike, potrebna su samo osnovna znanja o HTML-u, CSS-u i neke neobavezne jQuery. Iako nije ugodno kao korištenje WordPress-a, Bootstrap je još uvijek valjana alternativa za stvaranje web stranice.

    Do sad znate kako postaviti i instalirati Bootstrap i njegove komponente, stvoriti jednostavnu odredišnu stranicu, uključiti neki osnovni sadržaj i oblikovati ga. Možete stvoriti navigacijske menije, postaviti pozadinske slike, uključiti gumbe, stupce i kontaktne obrasce.

    Naravno, ima se što više naučiti.

    Zahvaljujući ovom osnovnom vodiču za pokretanje programa, sada znate dovoljno da sami idete dalje. Ako želite zaroniti dublje u okvir, dobro je polazište W3Schools. Osim toga, nadamo se da vam se svidio ovaj početni tutorial i da želite čuti vaša razmišljanja i iskustva o njemu.

    Ažuriranje: Također smo kreirali bootstrap varalice za početnike u .pdf i .png verzijama.

    Imate li kakvih razmišljanja o udžbeniku Bootstrap gore? Pitanja, komentari, zahtjevi? Javite nam se u odjeljku s komentarima u nastavku!

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