Naučite Bootstrap 4 za 30 minuta izgradnjom web stranice odredišne ​​stranice

od predloška

Vodič za početnike

"Bootstrap je besplatna knjižnica s otvorenim kodom za dizajn web stranica i web aplikacija. Sadrži predloške dizajna temeljene na HTML-u i CSS-u za sve od tipografije, obrazaca, gumba, navigacije i ostalih komponenti sučelja kao i za proširenja JavaScripta. Za razliku od mnogih drugih mrežnih okvira, Bootstrap se bavi samo naprednim razvojem. "- Wikipedija
Pozdrav, prije nego što započnemo provjeriti moju punu klasu za učenje Bootstrap-a 4, gdje ćete naučiti nove značajke pokretanja i kako ih koristiti za izgradnju boljeg korisničkog iskustva.

Postoje mnoge verzije Bootstrapa s najnovijom verzijom 4. U ovom ćemo članku izgraditi web stranicu pomoću Bootstrapa 4.

Preduvjeti

Prije početka, trebate znati nekoliko vještina da biste naučili i koristili okvir Bootstrap:

  • HTML osnove
  • osnovno znanje o CSS-u
  • i neki osnovni JQuery

Sadržaj

Prilikom izrade web stranice obrađivat ćemo teme u nastavku:

  • Preuzimanje i instaliranje Bootstrapa 4
  • Nove značajke Bootstrapa 4
  • Grid sustav za pokretanje sustava
  • Navbara
  • Zaglavlje
  • tipke
  • O odjeljku
  • Sekcija za portfelje
  • Odjeljak za blogove
  • Kartice
  • Timski odjeljak
  • Kontakt obrazac
  • fontovi
  • Pomaknite se efekt pomicanja
  • Završni zaključak i zaključak

Preuzimanje i instaliranje Bootstrapa 4

Postoje tri načina za instaliranje i uključivanje Bootstrap 4 za svoj projekt:

  1. Koristite npm

Možete instalirati Bootstrap 4 tako da pokrenete ovu naredbu npm install bootstrap

2. Koristite mrežu za dostavu sadržaja (CDN)

Uključivanjem ove veze u vaš projekt između glavnih oznaka:

3. Preuzmite knjižnicu Bootstrap 4 i koristite je lokalno.

Struktura našeg projekta trebala bi izgledati ovako:

Nove značajke Bootstrapa 4

Što je novo u programu Bootstrap 4? A što se razlikuje između Bootstrapa 3 i 4?

Bootstrap 4 sada sadrži neke fantastične značajke koje nisu postojale u posljednjoj verziji:

  • Bootstrap 4 piše se Flexbox Grid, dok je Bootstrap 3 napisan float metodom.
    Ako vam nije novost u Flexbox-u, pogledajte ovaj vodič.
  • Bootstrap 4 koristi rem CSS jedinice dok Bootstrap 3 koristi px.
    Pogledajte kako se ove dvije jedinice razlikuju.
  • Ploče, sličice i jažice u potpunosti su odbačene.
    Više o globalnim promjenama i uklonjenim značajkama Bootstrapa 4 možete pročitati ovdje.

Bez ovdje da pretjeramo previše u detalje, prijeđimo na neke druge važne stvari.

Sustav Bootstrap Grid

Sustav Bootstrap Grid pomaže vam da stvorite svoj izgled i lako napravite responzivno web mjesto. Nije bilo promjena u imenima klase, osim klase .xs koja više ne postoji u programu Bootstrap 4.

Rešetka je podijeljena u 12 stupaca, tako da će se vaš izgled temeljiti na tome.

Za korištenje mrežnog sustava morat ćete dodati .row klasu u glavni div.

col-lg-2 // klasa koja se koristi za velike uređaje poput prijenosnih računala
col-md-2 // klasa koja se koristi za srednje uređaje poput tableta
col-sm-2 // klasa koja se koristi za male uređaje poput mobilnih telefona

Navbara

Omotač za navigaciju je prilično cool u Bootstrap-u 4. To je tako korisno kada je u pitanju izrada odzivnog navbar-a.

Da bismo ga dobili, dodaćemo klasu navbar u našu datoteku index.html:


 

Napravite i uključite datoteku main.css kako biste mogli prilagoditi CSS stil.

Stavite ovo unutar glavne oznake u svoju datoteku index.html:

Dodajmo neke boje našem navbaru:

.navbar {pozadina: # F97300;}
.nav-link, .navbar-marka {color: # f4f4f4; pokazivač: pointer;}
.nav-link {margin-right: 1em! važno;}
.nav-link: lebdeći {background: # f4f4f4; boja: # f97300; }
.navbar-kolaps {justify-content: flex-end;}
.navbar-toggler {background: #fff! važno;}

Nova Bootstrap Grid izgrađena je s Flexbox sustavom, tako da za poravnavanje morate koristiti svojstvo Flexbox. Na primjer, da bismo postavili navigacijski izbornik s desne strane, moramo dodati svojstvo opravdanog sadržaja i postaviti ga na flex-end.

.navbar-slom {
 opravdati-sadržaj: flex-end;
}

Dodajte .fixed-top klasu u navbar da biste joj postavili fiksni položaj.

Da biste pozadinsku boju pozadine navirali, dodajte .bg-light. Za tamnu pozadinu dodajte .bg-dark, a za svijetlo plavu pozadinu dodajte
.bg-primarna.

Evo kako bi to trebalo izgledati:

.bg mraku {
background-color: # 343a40 važno!
}
.bg-{primarni
background-color: # 007bff važno!
}

Zaglavlje

  

Pokušajmo stvoriti izgled zaglavlja.

Ovdje želimo osigurati da zaglavlje zauzima visinu prozora pa ćemo koristiti malo JQuery koda.

Prvo izradite datoteku s imenom main.js i uključite je u datoteku index.html prije završne oznake tijela:

U datoteku main.js umetnite ovaj mali kod JQueryja:

$ (Dokument) .ready (funkcija () {
 . $ ( 'Zaglavlje') visina ($ (prozora) .height ());
})

Bilo bi prilično u redu ako zaglavlju postavimo lijepu pozadinsku sliku:

/ * stil zaglavlja * /
.Zaglavlje{
 pozadinska slika: url ('../ slike / headerback.jpg');
 pozadinski prilog: fiksna;
 pozadina: poklopac;
 pozadinski položaj: centar;
}

Dodajmo sloj da bi zaglavlje izgledalo profesionalnije:

Dodajte to u svoju datoteku index.html:

  

Zatim dodajte ovo u svoju datoteku main.css:

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

Sada moramo dodati opis unutar zaglavlja.

Da biste završili svoj opis, prvo ćemo stvoriti div i dodijeliti mu klasu .container.

.container je klasa Bootstrap koja će vam pomoći da omatate svoj sadržaj i učinite vaš izgled prilagodljivijim:

  
   
           

Zatim dodajte još jedan div koji će sadržavati opis.

   

Pozdrav, dobrodošli na moju službenu web stranicu     

cillum dolore eu fugiat nulla pariatur. Izvrsni sint occaecat cupidatat non proident, sunt in culpa qui officiala deserunt mollit anim id est Laborum.  

Dat ćemo mu klasu opisa. Dodati ćemo .text-center klasu kako bismo osigurali da se sadržaj nalazi u središtu stranice.

tipke

Elementu gumba dodajte klasu .btn btn-obris-sekundarni. postoje mnoge druge klase Bootstrap za gumbe.

Pogledajte nekoliko primjera:

Evo kako izgleda stil za .description u datoteci main.css:

.opis{
    položaj: apsolutni;
    vrh: 30%;
    marža: auto;
    obloga: 2em;
}
. opis h1 {
 boja: # F97300;
}
. opis p {
 color: # 666;
 veličina fonta: 20px;
 širina: 50%;
 linija visina: 1,5;
}
. gumb za opis {
 obrub: 1px kruta # F97300;
 Pozadina: # F97300;
 boja: #fff;
}

Nakon svega toga, naše će zaglavlje izgledati ovako:

Super nije :).

O odjeljku

U ovom ćemo dijelu upotrijebiti neki program za pokretanje sustava kako bismo podijelili odjeljak na dva dijela.

Da bismo pokrenuli našu mrežu, moramo dodijeliti .row klasu roditeljskom divu.

Prvi odjeljak će biti s lijeve strane i sadržavat će sliku, drugi dio s desne strane i sadrži opis.

Svaki će div zauzeti 6 stupaca - to znači polovicu odjeljka. Upamtite da je rešetka podijeljena u 12 stupaca.

U prvom divu na lijevoj strani:

 // lijeva strana
          S.Web Developer  

Nakon dodavanja HTML elemenata s desne strane struktura koda izgledat će ovako:

   
          S.Web Developer        
          

D.John     

       ipsum dolor sit amet, consectetur adipisicer elit, sed do eiusmod      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad min veniam,      quis nostrud naprezanje ullamco Laboris nisi ut aliquip ex ea commodo      consequat. Duis aute irure dolor u reprehenderit u voluptate velit esse      cillum dolore eu fugiat nulla pariatur. Izvrsni sint occaecat cupidatat non      proident, sunt in culpa qui officiala deserunt mollit anim id est Laborum.            

Evo kako sam to učinio:

.oko{
 marža: 4em 0;
 obloga: 1em;
 položaj: relativan;
}
.o h1 {
 color: # F97300;
 marža: 2em;
}
.ag img {
 visina: 100%;
    širina: 100%;
    polumjer granice: 50%
}
.okolo raspona {
 prikaz: blok;
 boja: # 888;
 položaj: apsolutni;
 lijevo: 115 px;
}
.about .desc {
 obloga: 2em;
 obrub lijevo: 4px kruto # 10828C;
}
. o .desc h3 {
 boja: # 10828C;
}
.about .desc p {
 visina linija: 2;
 color: # 888;
}

Sekcija za portfelje

Sada, prijeđite na sljedeći dio i napravite odjeljak s portfeljem koji će sadržavati galeriju.

Struktura našeg HTML koda za odjeljak Portfolio izgleda ovako:


     

Portfelj

 
  
   
            
            
        
            
            
        
            
            
             

Dodavanje .img-tekućine u svaku sliku kako bi postala reaktivna.

Svaki artikal u našoj galeriji zauzet će 4 stupca (zapamtite, col-md-4 za srednje uređaje, col-lg-4 za velike uređaje). To iznosi 33,33333% na velikim uređajima, kao što su stolni stol i veliki tableti, a 12 stupaca na malom uređaju (poput iPhonea, mobilnih uređaja) zauzet će 100% spremnika.

Dodajmo nešto u našu galeriju:

/*Portfelj*/
.portfelj{
 marža: 4em 0;
    položaj: relativan;
}
.portfolio h1 {
 color: # F97300;
 marža: 2em;
}
.portfolio img {
  visina: 15rem;
  širina: 100%;
  marža: 1em;
}

Odjeljak za blogove

Kartice

Kartice u programu Bootstrap 4 znatno olakšavaju dizajn bloga. Kartice su prikladne za članke i postove.

Da bismo stvorili karticu, koristimo klasu .card i dodijelili je elementu div,

Klasa kartice sadrži mnoge značajke:

  • .card-header: odredite zaglavlje kartice
  • .card-body: za tijelo kartice
  • .card-title: naslov kartice
  • podnožje kartice: definirajte podnožje kartice.
  • .card-image: za sliku kartice

Dakle, HTML naše web stranice trebao bi izgledati ovako:


 
 

Blog

  
   
    
     
                        
     

Naslov posta

      

               proident, sunt in culpa qui officiala deserunt mollit anim id est Laborum.                   

       Pročitajte više                   
    
     
                        
        

Naslov posta

      

               proident, sunt in culpa qui officiala deserunt mollit anim id est Laborum.                   

       Pročitajte više                   
    
     
                        
     

Naslov posta

      

               proident, sunt in culpa qui officiala deserunt mollit anim id est Laborum.                   

       Pročitajte više                    

Karticama moramo dodati neki CSS stil:

.blog{
 marža: 4em 0;
 položaj: relativan;
}
.blog h1 {
 color: # F97300;
 marža: 2em;
}
.blog .card {
 okvir-sjena: 0 0 20px #ccc;
}
.blog .card img {
 širina: 100%;
 visina: 12em;
}
.blog .card-title {
 color: # F97300;
  
}
.blog .card-body {
 obloga: 1em;
}

Nakon dodavanja odjeljka Blog na našu web stranicu, dizajn bi sada trebao izgledati ovako:

Kul zar ne?

Timski odjeljak

U ovom ćemo dijelu pomoću mrežnog sustava raspodijeliti ravnomjerni prostor između slika. Svaka slika zauzima 3 stupca (.col-md-3) spremnika - što iznosi 25% ukupnog prostora.

Naša HTML struktura:


 
    

Naš tim

  
   
    tim     
      Sara            Manager        
    tim     
       Chris            S.enginner        
    tim     
      Layla            Programer za krajnji kraj        
    tim      
      J.Jirard            Upravitelj tima         

I dodajmo neki stil:

.tim{
 marža: 4em 0;
 položaj: relativan;
}
.team h1 {
 color: # F97300;
 marža: 2em;
}
.team .item {
 položaj: relativan;
}
.team .des {
 pozadina: # F97300;
 boja: #fff;
 poravnavanje teksta: središte;
 rub-dno-lijevo-polumjer: 93%;
 prijelaz: .3s lakoća-izlazak;
}

Dodavanje prekrivača slici na levelu koristeći animaciju bilo bi lijepo .

Da biste postigli ovaj efekt, dodajte stilove u datoteku main.css u nastavku:

.team .item: hover .des {
 visina: 100%;
 Pozadina: # f973007d;
 položaj: apsolutni;
 širina: 89%;
 obloga: 5em;
 vrh: 0;
 obrub-granica, dno-lijevo: 0;
}

Super cool!

Kontakt obrazac

Obrazac za kontakt posljednji je odjeljak koji smo dodali, tada smo gotovi .

Odjeljak Kontakt obrazac sadrži obrazac putem kojeg posjetitelji mogu poslati e-poštu ili dati povratne informacije. Koristit ćemo neke razrede Bootstrapa kako bismo dizajn učinili lijepim i prilagodljivim.

Kao i Bootstrap 3, i Bootstrap 4 koristi klasu .form za kontrolu unosnih polja, ali dodane su neke nove značajke - poput prelaska s .input grupe-addon (zastarjelo) u .input-group-prepend (za korištenje ikona kao naljepnice).

Pogledajte dokument Bootstrap 4 za dodatne informacije. U našem kontakt obrascu umotat ćemo svaki ulaz između diva koji ima klasu .form-group.

Datoteka index.html sada izgleda ovako:


 
      
    
      

Javite se