Lær Bootstrap 4 på 30 minutter ved at oprette et websted for destinationsside

fra templatetoaster

En guide til begyndere

”Bootstrap er et gratis open source front-end bibliotek til design af websteder og webapplikationer. Det indeholder HTML- og CSS-baserede designskabeloner til alt fra typografi, formularer, knapper, navigation og andre interfacekomponenter samt JavaScript-udvidelser. I modsætning til mange andre webrammer, beskæftiger Bootstrap sig kun med front-end-udvikling. ”- Wikipedia
Hej, før vi begynder at tjekke min fulde klasse til at lære Bootstrap 4, hvor du lærer nye funktioner i bootstrap, og hvordan du bruger dem til at opbygge bedre brugeroplevelser.

Der er mange versioner af Bootstrap med version 4 som den nyeste. I denne artikel skal vi oprette et websted ved hjælp af Bootstrap 4.

Forudsætninger

Før du starter, er der nogle færdigheder, som du bliver nødt til at kende for at lære og bruge Bootstrap-rammen:

  • HTML-fundament
  • grundlæggende viden om CSS
  • og nogle grundlæggende JQuery

Indholdsfortegnelse

Vi vil dække emnerne nedenfor, mens vi bygger hjemmesiden:

  • Download og installation af Bootstrap 4
  • De nye funktioner i Bootstrap 4
  • Bootstrap Grid-system
  • Navbar
  • Header
  • Knapper
  • Om afsnit
  • Porteføljesektion
  • Blogsektion
  • Kort
  • Holdafdeling
  • Kontaktformular
  • Skrifttyper
  • Rulleeffekt
  • Afvikling og konklusion

Download og installation af Bootstrap 4

Der er tre måder at installere og inkludere Bootstrap 4 til dit projekt:

  1. Brug npm

Du kan installere Bootstrap 4 ved at køre denne kommando npm install bootstrap

2. Brug et Content Delivery Network (CDN)

Ved at inkludere dette link i dit projekt mellem head tags:

3. Download Bootstrap 4-biblioteket, og brug det lokalt.

Strukturen i vores projekt skal se sådan ud:

De nye funktioner i Bootstrap 4

Hvad er nyt i Bootstrap 4? Og hvad er der forskelligt mellem Bootstrap 3 og 4?

Bootstrap 4 kommer nu med nogle fantastiske funktioner, der ikke eksisterede i den sidste version:

  • Bootstrap 4 er skrevet ved hjælp af Flexbox Grid, mens Bootstrap 3 blev skrevet ved hjælp af float-metoden.
    Hvis du er ny på Flexbox, så tjek denne tutorial.
  • Bootstrap 4 bruger rem CSS-enheder, mens Bootstrap 3 bruger px.
    Se, hvordan disse to enheder adskiller sig.
  • Paneler, miniaturer og brønde er blevet droppet helt.
    Du kan læse mere detaljeret om de globale ændringer og fjernede funktioner i Bootstrap 4 her.

Uden at hoppe for dybt i detaljer her, lad os gå videre til nogle andre vigtige ting.

Bootstrap Grid-systemet

Bootstrap Grid-systemet hjælper dig med at oprette dit layout og nemt opbygge et responsivt websted. Der har ikke været nogen ændringer i klassens navne undtagen .xs-klassen, som ikke længere findes i Bootstrap 4.

Risten er opdelt i 12 kolonner, så dit layout vil være baseret på dette.

For at bruge ridsystemet skal du tilføje en .row-klasse til hoveddivisionen.

col-lg-2 // klasse bruges til store enheder som laptops
col-md-2 // klasse bruges til mellemstore enheder som tabletter
col-sm-2 // klasse bruges til små enheder som mobiltelefoner

Navbar

Navbar-indpakningen er temmelig cool i Bootstrap 4. Det er så nyttigt, når det kommer til at opbygge en responsiv navbar.

For at få det til, vil vi tilføje navbarklassen til vores index.html-fil:


 

Opret og inkluder en main.css-fil, så du kan tilpasse CSS-stilen.

Sæt dette inden for hovedmærket i din index.html-fil:

Lad os tilføje nogle farver til vores navbar:

.navbar {baggrund: # F97300;}
.nav-link, .navbar-brand {color: # f4f4f4; markør: markør;}
.nav-link {margin-right: 1em! vigtig;}
.nav-link: hover {baggrund: # f4f4f4; farve: # f97300; }
.navbar-kollaps {justify-content: flex-end;}
.navbar-toggler {baggrund: #fff! vigtig;}

Det nye Bootstrap Grid er bygget med Flexbox-systemet, så til justering skal du bruge en Flexbox-egenskab. For at placere navbar-menuen til højre skal vi f.eks. Tilføje en egenskab med retfærdiggørelse af indhold og indstille den til flex-end.

.navbar-kollaps {
 begrunde-indhold: flex-end;
}

Tilføj .fixed-top-klassen til navlen for at give den en fast position.

Tilføj .bg-lys for at gøre navbar-baggrundsfarve lys. For en mørk baggrund skal du tilføje .bg-mørk, og for en lyseblå baggrund, tilføj
.bg-primære.

Sådan skal det se ud:

.bg-dark {
background-color: # 343a40 vigtigt!
}
.bg-primær {
background-color: # 007bff vigtigt!
}

Header

  

Lad os prøve at oprette et layout til overskriften.

Her vil vi sørge for, at header øger vinduets højde, så vi vil bruge en lille JQuery-kode.

Opret først en fil, der hedder main.js, og inkluder den i filen index.html før koden til det lukkende organ:

I filen main.js indsættes dette en lille kode af JQuery:

$ (Dokument) .ready (function () {
 . $ ( 'Header') højde ($ (vindue) .height ());
})

Det ville være temmelig cool, hvis vi sætter et pænt baggrundsbillede til overskriften:

/ * overskriftstil * /
.header{
 baggrund-billede: url ('../ images / headerback.jpg');
 baggrund-vedhæftet fil: fast;
 baggrund-størrelse: dækning;
 baggrundsposition: centrum;
}

Lad os tilføje et overlay for at få overskriften til at se lidt mere professionel ud:

Føj dette til din index.html-fil:

  

Føj derefter dette til din main.css-fil:

.overlay {
 position: absolut;
 min-højde: 100%;
 min. bredde: 100%;
 venstre: 0;
 top: 0;
 baggrund: rgba (244, 244, 244, 0,79);
}

Nu skal vi tilføje en beskrivelse inde i overskriften.

For at indpakke vores beskrivelse skal vi først oprette en div og give den en klasse .container.

.container er en Bootstrap-klasse, der hjælper dig med at pakke dit indhold og gøre dit layout mere lydhør:

  
   
           

Tilføj derefter en anden div, der indeholder beskrivelsen.

   

Hej, velkommen til mit officielle websted     

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  

Vi giver den en klasse .beskrivelse og tilføjer klassen .text-center for at sikre, at indholdet er placeret i midten af ​​siden.

Knapper

Tilføj klassen .btn btn-outline-sekundær til knapelementet. der er mange andre Bootstrap klasser til knapper.

Tjek nogle eksempler:

Sådan ser stylingen af ​​.descript ud i main.css-filen:

.beskrivelse{
    position: absolut;
    top: 30%;
    margin: auto;
    polstring: 2em;
}
.beskrivelse h1 {
 farve: # F97300;
}
.beskrivelse p {
 color: # 666;
 skriftstørrelse: 20px;
 bredde: 50%;
 linjehøjde: 1,5;
}
.beskrivelsesknap {
 kant: 1px solid # F97300;
 baggrund: # F97300;
 farve: #fff;
}

Efter alt dette ser vores header således ud:

Cool er ikke :).

Om afsnit

I dette afsnit vil vi bruge noget Bootstrap Grid til at opdele sektionen i to dele.

For at starte vores gitter skal vi tildele .row-klassen til forældredivisionen.

Den første sektion vil være til venstre og vil indeholde et billede, den anden sektion vil være til højre og indeholder en beskrivelse.

Hver div vil tage 6 kolonner op - det betyder halvdelen af ​​sektionen. Husk, at et gitter er opdelt i 12 kolonner.

I den første div i venstre side:

 // venstre side
          S.Web Developer  

Når du har tilføjet HTML-elementerne til højre, ser strukturen af ​​koden sådan ud:

   
          S.Web Developer        
          

D.John     

       ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod      midlertidig incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,      quis nostrud træning ullamco laboris nisi ut aliquip ex ea commodo      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non      proident, sunt i culpa qui officia deserunt mollit anim id est laborum.            

Således har jeg fået det til at se ud:

.om{
 margen: 4em 0;
 polstring: 1em;
 position: relativ;
}
.om h1 {
 color: # F97300;
 margen: 2em;
}
.om img {
 højde: 100%;
    bredde: 100%;
    grænseradius: 50%
}
.om span {
 display: blokering;
 farve: # 888;
 position: absolut;
 venstre: 115px;
}
.about .desc {
 polstring: 2em;
 kant-venstre: 4px solid # 10828C;
}
.about .desc h3 {
 farve: # 10828C;
}
.about .desc p {
 line-height: 2;
 color: # 888;
}

Porteføljesektion

Lad os nu gå videre til den næste bit og oprette en porteføljesektion, der indeholder et galleri.

Strukturen af ​​vores HTML-kode til Portfolio-sektionen ser sådan ud:


     

Portefølje

 
  
   
            
            
        
            
            
        
            
            
             

Tilføjelse af .img-fluid til hvert billede for at gøre det lydhør.

Hver vare i vores galleri optager 4 kolonner (husk, col-md-4 for mellemstore enheder, col-lg-4 for store enheder). Det svarer til 33.33333% på store enheder som desktops og store tabletter og 12 kolonner på en lille enhed (som iPhone, mobile enheder) vil optage 100% af containeren.

Lad os tilføje noget styling til vores galleri:

/ * Portefølje * /
.portfolio {
 margen: 4em 0;
    position: relativ;
}
.portefølje h1 {
 color: # F97300;
 margen: 2em;
}
.portefølje img {
  højde: 15rem;
  bredde: 100%;
  margen: 1em;
}

Blogsektion

Kort

Kort i Bootstrap 4 gør blogdesign så meget lettere. Kortene er passende til artikler og indlæg.

For at oprette et kort bruger vi klassen .card og tildeler det til et div-element,

Kortklassen indeholder mange funktioner:

  • .card-header: definerer korthovedet
  • .kort-krop: til kortlegemet
  • .card-title: kortets titel
  • kort-sidefod: definerer sidefoden på kortet.
  • .kortbillede: til kortets billede

Så vores websteds HTML skal nu se sådan ud:


 
 

Blog

  
   
    
     
                        
     

Posttitel

      

               proident, sunt i culpa qui officia deserunt mollit anim id est laborum.                   

Vi er nødt til at tilføje nogle CSS-stil til kortene:

.blog{
 margen: 4em 0;
 position: relativ;
}
.blog h1 {
 color: # F97300;
 margen: 2em;
}
.blog .card {
 kasseskygge: 0 0 20px #ccc;
}
.blog .card img {
 bredde: 100%;
 højde: 12em;
}
.blog .card-title {
 color: # F97300;
  
}
.blog .card-body {
 polstring: 1em;
}

Efter at have tilføjet Blog-sektionen til vores websted, skal designet nu se sådan ud:

Sej er det ikke?

Holdafdeling

I dette afsnit vil vi bruge gittersystemet til at fordele jævnt mellemrum mellem billeder. Hvert billede optager 3 kolonner (.col-md-3) af containeren - det svarer til 25% af den samlede plads.

Vores HTML-struktur:


 
    

Vores team

  
   
    team     
      Sara            Manager        
    team     
       Chris            S.enginner        
    team     
      Layla            Front End Developer        
    team      
      J.Jirard            Team Manger         

Og lad os tilføje noget stil:

.hold{
 margen: 4em 0;
 position: relativ;
}
.team h1 {
 color: # F97300;
 margen: 2em;
}
.team .item {
 position: relativ;
}
.team .des {
 baggrund: # F97300;
 farve: #fff;
 tekstjustering: center;
 grænse-nederst til venstre-radius: 93%;
 overgang: .3s let-ind-ud;
}

Det ville være rart at tilføje et overlay til billedet på-hover ved hjælp af animation .

For at gøre denne effekt skal du tilføje typografierne nedenfor til main.css-filen:

.team .item: hover .des {
 højde: 100%;
 baggrund: # f973007d;
 position: absolut;
 bredde: 89%;
 polstring: 5em;
 top: 0;
 grænse-nederste-venstre-radius: 0;
}

Super sejt!

Kontaktformular

Kontaktformularen er det sidste afsnit, der skal tilføjes, så er vi færdige .

Afsnittet Kontaktformular vil indeholde en formular, gennem hvilken besøgende kan sende en e-mail eller give feedback. Vi vil bruge nogle Bootstrap klasser til at gøre designet smukt og lydhør.

Som Bootstrap 3 bruger Bootstrap 4 også .form-kontrolklassen til inputfelter, men der er nogle nye funktioner tilføjet - som at skifte fra .input-gruppe-addon (udgået) til .input-group-prepend (for at bruge ikoner som etiketter).

Se Bootstrap 4-dokument for mere information. I vores kontaktformular vil vi indpakke hvert input mellem en div, der har klassen .form-gruppe.

Filen index.html ser nu sådan ud:


 
  
   
    
      

Kom i kontakt