de SaidHayani @

Aflați Bootstrap 4 în 30 de minute construind un site de pagină de destinație

Aflati Bootstrap 4 in 30 de minute construind un site
din templatetoaster
Aflati Bootstrap 4 in 30 de minute construind un site

Un ghid pentru începători

„Bootstrap este o bibliotecă front-end gratuită, open-source, pentru proiectarea de site-uri web și aplicații web. Conține șabloane de proiectare bazate pe HTML și CSS pentru orice, de la tipografie, formulare, butoane, navigare și alte componente ale interfeței, precum și extensii JavaScript. Spre deosebire de multe alte cadre web, Bootstrap se preocupă doar de dezvoltarea front-end. ” – Wikipedia

Bună, înainte să începem să verificăm întreaga mea clasă pentru a învăța Bootstrap 4, unde veți afla noi caracteristici ale bootstrap-ului și cum să le folosiți pentru a crea experiențe mai bune de utilizator .

Există multe versiuni ale Bootstrap, versiunea 4 fiind cea mai recentă. În acest articol, vom construi un site web folosind Bootstrap 4.

Condiții prealabile

Înainte de a începe, există câteva abilități pe care va trebui să le cunoașteți pentru a învăța și utiliza cadrul Bootstrap:

  • Fundamentele HTML
  • cunoștințe de bază despre CSS
  • și câteva JQuery de bază

Cuprins

Vom acoperi subiectele de mai jos în timp ce construim site-ul:

  • Descărcarea și instalarea Bootstrap 4
  • Noile caracteristici ale Bootstrap 4
  • Sistemul Bootstrap Grid
  • Navbar
  • Antet
  • Butoane
  • Despre secțiune
  • Secțiunea Portofoliu
  • Secțiunea Blog
  • Carduri
  • Secțiunea echipei
  • Formular de contact
  • Fonturi
  • Efect de derulare
  • Încheierea și concluzia

Descărcarea și instalarea Bootstrap 4

Există trei moduri de a instala și include Bootstrap 4 pentru proiectul dvs.:

ad-banner
  1. Utilizați npm

Puteți instala Bootstrap 4 executând această comandă npm install bootstrap

2. Utilizați o rețea de livrare a conținutului (CDN)

Prin includerea acestui link în proiectul dvs. între etichetele de cap:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

3. Descărcați fișierul Bootstrap 4 bibliotecă și utilizați-o local.

Structura proiectului nostru ar trebui să arate astfel:

Aflati Bootstrap 4 in 30 de minute construind un site

Noile caracteristici ale Bootstrap 4

Ce este nou în Bootstrap 4? Și ce este diferit între Bootstrap 3 și 4?

Bootstrap 4 vine acum cu câteva funcții minunate care nu existau în ultima versiune:

  • Bootstrap 4 este scris folosind Flexbox Grid, în timp ce Bootstrap 3 a fost scris folosind metoda float.
    Dacă sunteți nou în Flexbox, verificați acest tutorial.
  • Bootstrap 4 utilizează rem Unități CSS în timp ce Bootstrap 3 folosește px.
    Vedeți cum diferă aceste două unități.
  • Panourile, miniaturile și puțurile au fost abandonate în întregime.
    Puteți citi în detaliu mai multe despre modificările globale și caracteristicile eliminate ale Bootstrap 4 aici.

Fără a sări prea adânc în detalii aici, să trecem la alte lucruri importante.

Sistemul Bootstrap Grid

Sistemul Bootstrap Grid vă ajută să vă creați aspectul și să creați cu ușurință un site web receptiv. Nu au existat modificări în numele clasei, cu excepția .xs class, care nu mai există în Bootstrap 4.

Grila este împărțită în 12 coloane, deci aspectul dvs. se va baza pe aceasta.

Pentru a utiliza sistemul de rețea va trebui să adăugați un .row clasa la principal div.

col-lg-2 // class used for large devices like laptops
col-md-2 // class used for medium devices like tablets
col-sm-2// class used for small devices like mobile phones
1611706210 903 Aflati Bootstrap 4 in 30 de minute construind un site

Navbar wrapper este destul de cool în Bootstrap 4. Este atât de util atunci când vine vorba de construirea unei bare de navigare responsive.

Pentru ao obține, vom adăuga fișierul navbar clasa noastră index.html fişier:

<!-- navbar -->  
 <nav class="navbar navbar-expand-lg fixed-top ">  
 <a class="navbar-brand" href="https://www.freecodecamp.org/news/learn-bootstrap-4-in-30-minute-by-building-a-landing-page-website-guide-for-beginners-f64e03833f33/#">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">  
 <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarSupportedContent">     <ul class="navbar-nav mr-4">
 <li class="nav-item">
     <a class="nav-link" data-value="about" href="https://www.freecodecamp.org/news/learn-bootstrap-4-in-30-minute-by-building-a-landing-page-website-guide-for-beginners-f64e03833f33/#">About</a>        </li>  
<li class="nav-item">
    <a class="nav-link " data-value="portfolio"href="https://www.freecodecamp.org/news/learn-bootstrap-4-in-30-minute-by-building-a-landing-page-website-guide-for-beginners-f64e03833f33/#">Portfolio</a>    
 </li>
 <li class="nav-item"> 
    <a class="nav-link " data-value="blog" href="https://www.freecodecamp.org/news/learn-bootstrap-4-in-30-minute-by-building-a-landing-page-website-guide-for-beginners-f64e03833f33/#">Blog</a>         </li>   
<li class="nav-item">  
   <a class="nav-link " data-value="team" href="https://www.freecodecamp.org/news/learn-bootstrap-4-in-30-minute-by-building-a-landing-page-website-guide-for-beginners-f64e03833f33/#">         Team</a>       </li>  
<li class="nav-item"> 
 <a class="nav-link " data-value="contact" href="https://www.freecodecamp.org/news/learn-bootstrap-4-in-30-minute-by-building-a-landing-page-website-guide-for-beginners-f64e03833f33/#">Contact</a>       </li> 
</ul> 
</div></nav>

Creați și includeți un main.css fișier, astfel încât să puteți personaliza stilul CSS.

Puneți acest lucru în head eticheta în index.html fişier:

<link rel="stylesheet" type="text/css" href="https://www.freecodecamp.org/news/learn-bootstrap-4-in-30-minute-by-building-a-landing-page-website-guide-for-beginners-f64e03833f33/css/main.css">

Să adăugăm câteva culori la bara noastră de navigație:

.navbar{ background:#F97300;}

.nav-link , .navbar-brand{ color: #f4f4f4; cursor: pointer;}

.nav-link{ margin-right: 1em !important;}

.nav-link:hover{ background: #f4f4f4; color: #f97300; }

.navbar-collapse{ justify-content: flex-end;}

.navbar-toggler{  background:#fff !important;}

Noua rețea Bootstrap este construită cu sistemul Flexbox, deci pentru aliniere trebuie să utilizați o proprietate Flexbox. De exemplu, pentru a plasa meniul navbar în dreapta, trebuie să adăugăm un justify-content proprietate și setați-o la flex-end.

.navbar-collapse{
 justify-content: flex-end;
}

Adaugă .fixed-top clasa la bara de navă pentru a-i oferi o poziție fixă.

Pentru a face culoarea de fundal a barei de navigare deschise, adăugați .bg-light. Pentru un fundal întunecat, adăugați .bg-darkși, pentru un fundal albastru deschis, adăugați
.bg-primary.

Iată cum ar trebui să arate:

.bg-dark{
background-color:#343a40!important
}
.bg-primary{
background-color:#007bff!important
}
<header class="header">
  
</header>

Să încercăm să creăm un aspect pentru antet.

Aici, vrem să ne asigurăm că antetul ocupă înălțimea ferestrei, așa că vom folosi puțin JQuery cod.

Mai întâi, creați un fișier numit main.js și includeți-l în index.html fişier înainte de închidere body etichetă:

<script type="text/javascript" src="https://www.freecodecamp.org/news/learn-bootstrap-4-in-30-minute-by-building-a-landing-page-website-guide-for-beginners-f64e03833f33/js/main.js"></script>

În main.js fișier introduceți acest cod mic de JQuery:

$(document).ready(function(){
 $('.header').height($(window).height());
 
})

Ar fi destul de interesant dacă am seta o imagine de fundal frumoasă la antet:

/*header style*/
.header{
 background-image: url('../images/headerback.jpg');
 background-attachment: fixed;
 background-size: cover;
 background-position: center;
}
1611706210 790 Aflati Bootstrap 4 in 30 de minute construind un site

Să adăugăm o suprapunere pentru a face antetul să pară ceva mai profesional:

Adăugați acest lucru la index.html fişier:

<header class="header">
  <div class="overlay"></div>
</header>

Apoi, adăugați acest lucru la main.css fişier:

.overlay{
 position: absolute;
 min-height: 100%;
 min-width: 100%;
 left: 0;
 top: 0;
 background: rgba(244, 244, 244, 0.79);
}

Acum trebuie să adăugăm o descriere în antet.

Pentru a încheia descrierea noastră, vom crea mai întâi un div și dă-i o clasă .container.

.container este o clasă Bootstrap care vă va ajuta să vă înfășurați conținutul și să vă faceți aspectul mai receptiv:

<header class="header">
  <div class="overlay"></div>
   <div class="container">
    
   </div>
  
</header>

Apoi, adăugați altul div care va conține descrierea.

<div class="description ">
   <h1>    Hello ,Welcome To My official Website
    <p>    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>   
 <button class="btn btn-outline-secondary btn-lg">See more</button>   </h1>  
</div>

Îi vom da o clasă de .description și adăugați .text-center pentru a vă asigura că conținutul este plasat în centrul paginii.

Butoane

Adăugați clasa .btn btn-outline-secondary la button element. există multe alte clase Bootstrap pentru butoane.

Consultați câteva exemple:

CodePen Embed – butoane din Bootstrap 4
Butoane Buton buton primar Buton implicit Buton pericol Informații buton Buton avertisment Buton buton întunecat Buton succes Butoane …codepen.io

Iată cum stilul pentru .description se uită în main.css fişier:

.description{
    position: absolute;
    top: 30%;
    margin: auto;
    padding: 2em;
    
}
.description h1{
 color:#F97300 ;
}
.description p{
 color:#666;
 font-size: 20px;
 width: 50%;
 line-height: 1.5;
}
.description button{
 border:1px  solid #F97300;
 background:#F97300;
 color:#fff;
}

După toate acestea, antetul nostru va arăta astfel:

1611706210 494 Aflati Bootstrap 4 in 30 de minute construind un site

Cool nu este :).

Despre secțiune

1611706210 247 Aflati Bootstrap 4 in 30 de minute construind un site

În această secțiune, vom folosi unele Bootstrap Grid pentru a împărți secțiunea în două părți.

Pentru a începe grila noastră, trebuie să atribuim .row clasa către părinte div.

<div class="row"></div>

Prima secțiune va fi în stânga și va conține o imagine, a doua secțiune va fi în dreapta și va conține o descriere.

Fiecare div va ocupa 6 coloane – asta înseamnă jumătate din secțiune. Amintiți-vă că o grilă este împărțită în 12 coloane.

In primul div pe partea stângă a:

<div class="row"> 
 // left side
<div class="col-lg-4 col-md-4 col-sm-12">
    <img src="https://www.freecodecamp.org/news/learn-bootstrap-4-in-30-minute-by-building-a-landing-page-website-guide-for-beginners-f64e03833f33/images/team-3.jpg" class="img-fluid">
    <span class="text-justify">S.Web Developer</span>
 </div>
 
</div>

După adăugarea elementelor HTML din partea dreaptă, structura codului va arăta astfel:

<div class="row">
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="https://www.freecodecamp.org/news/learn-bootstrap-4-in-30-minute-by-building-a-landing-page-website-guide-for-beginners-f64e03833f33/images/team-3.jpg" class="img-fluid">
    <span class="text-justify">S.Web Developer</span>
   </div>
   <div class="col-lg-8 col-md-8 col-sm-12 desc">
     
    <h3>D.John</h3>
    <p>
       ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
     quis nostrud exercitation 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 in culpa qui officia deserunt mollit anim id est laborum.
    </p>
   </div>
  </div>

Iată cum am făcut-o să arate:

.about{
 margin: 4em 0;
 padding: 1em;
 position: relative;
}
.about h1{
 color:#F97300;
 margin: 2em;
}
.about img{
 height: 100%;
    width: 100%;
    border-radius: 50%
}
.about span{
 display: block;
 color: #888;
 position: absolute;
 left: 115px;
}
.about .desc{
 padding: 2em;
 border-left:4px solid #10828C;
}
.about .desc h3{
 color: #10828C;
}
.about .desc p{
 line-height:2;
 color:#888;
}

Secțiunea Portofoliu

Acum, să trecem la următorul bit și să realizăm o secțiune de portofoliu care va conține o galerie.

1611706211 993 Aflati Bootstrap 4 in 30 de minute construind un site

Structura codului nostru HTML pentru secțiunea Portofoliu arată astfel:

<!-- portfolio -->
<div class="portfolio">
     <h1 class="text-center">Portfolio</h1>
 <div class="container">
  <div class="row">
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="https://www.freecodecamp.org/news/learn-bootstrap-4-in-30-minute-by-building-a-landing-page-website-guide-for-beginners-f64e03833f33/images/portfolio/port13.png" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/port1.png" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/port6.png" class="img-fluid">
   </div>
      
<div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/port3.png" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/port11.png" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/electric.png" class="img-fluid">
   </div>
      
<div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/Classic.jpg" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/port1.png" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/port8.png" class="img-fluid">
   </div>
  </div>
 </div>
</div>

Se adaugă .img-fluid la fiecare imagine pentru a o face receptivă.

Fiecare articol din galeria noastră va ocupa 4 coloane (amintiți-vă, col-md-4 pentru dispozitive medii, col-lg-4 pentru dispozitive mari). Este egal cu 33,33333% pe dispozitive mari, cum ar fi desktopuri și tablete mari, și 12 coloane pe un dispozitiv mic (cum ar fi iPhone, dispozitive mobile) vor ocupa 100% din container.

Să adăugăm câteva stiluri la Galeria noastră:

/*Portfolio*/
.portfolio{
 margin: 4em 0;
    position: relative; 
}
.portfolio h1{
 color:#F97300;
 margin: 2em; 
}
.portfolio img{
  height: 15rem;
  width: 100%;
  margin: 1em;
  
}

Secțiunea Blog

1611706211 251 Aflati Bootstrap 4 in 30 de minute construind un site

Carduri

Cardurile din Bootstrap 4 facilitează mult designul blogului. Cardurile sunt potrivite pentru articole și postări.

Pentru a crea un card, folosim clasa .card și atribuiți-o unui div element,

Clasa cardului conține multe caracteristici:

  • .card-header: definiți antetul cardului
  • .card-body: pentru corpul cardului
  • .card-title: titlul cardului
  • card-footer: definiți subsolul cardului.
  • .card-image: pentru imaginea cardului

Deci, HTML-ul site-ului nostru web ar trebui să arate acum așa:

<!-- Posts section -->
<div class="blog">
 <div class="container">
 <h1 class="text-center">Blog</h1>
  <div class="row">
   <div class="col-md-4 col-lg-4 col-sm-12">
    <div class="card">
     <div class="card-img">
      <img src="https://www.freecodecamp.org/news/learn-bootstrap-4-in-30-minute-by-building-a-landing-page-website-guide-for-beginners-f64e03833f33/images/posts/polit.jpg" class="img-fluid">
     </div>
     
     <div class="card-body">
     <h4 class="card-title">Post Title</h4>
      <p class="card-text">
       
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
     </div>
     <div class="card-footer">
      <a href="" class="card-link">Read more</a>
     </div>
    </div>
   </div>
   <div class="col-md-4 col-lg-4 col-sm-12">
    <div class="card">
     <div class="card-img">
      <img src="images/posts/images.jpg" class="img-fluid">
     </div>
     
     <div class="card-body">
        <h4 class="card-title">Post Title</h4>
      <p class="card-text">
       
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
     </div>
     <div class="card-footer">
      <a href="" class="card-link">Read more</a>
     </div>
    </div>
   </div>
   <div class="col-md-4 col-lg-4 col-sm-12">
    <div class="card">
     <div class="card-img">
      <img src="images/posts/imag2.jpg" class="img-fluid">
     </div>
     
     <div class="card-body">
     <h4 class="card-title">Post Title</h4>
      <p class="card-text">
       
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
     </div>
     <div class="card-footer">
      <a href="" class="card-link">Read more</a>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>

Trebuie să adăugăm un stil CSS cărților:

.blog{
 margin: 4em 0;
 position: relative; 
}
.blog h1{
 color:#F97300;
 margin: 2em; 
}
.blog .card{
 box-shadow: 0 0 20px #ccc;
}
.blog .card img{
 width: 100%;
 height: 12em;
}
.blog .card-title{
 color:#F97300;
  
}
.blog .card-body{
 padding: 1em;
}

După adăugarea secțiunii Blog pe site-ul nostru, designul ar trebui să arate acum așa:

1611706211 294 Aflati Bootstrap 4 in 30 de minute construind un site

Mișto nu-i așa? ?

Secțiunea echipei

1611706211 655 Aflati Bootstrap 4 in 30 de minute construind un site

În această secțiune vom folosi sistemul de rețea pentru a distribui spațiu uniform între imagini. Fiecare imagine ocupă 3 coloane (.col-md-3) a containerului – care este egal cu 25% din spațiul total.

Structura noastră HTML:

<!-- Team section -->
<div class="team">
 <div class="container">
    <h1 class="text-center">Our Team</h1>
  <div class="row">
   <div class="col-lg-3 col-md-3 col-sm-12 item">
    <img src="https://www.freecodecamp.org/news/learn-bootstrap-4-in-30-minute-by-building-a-landing-page-website-guide-for-beginners-f64e03833f33/images/team-2.jpg" class="img-fluid" alt="team">
    <div class="des">
      Sara
     </div>
    <span class="text-muted">Manager</span>
   </div>
   <div class="col-lg-3 col-md-3 col-sm-12 item">
    <img src="https://www.freecodecamp.org/news/learn-bootstrap-4-in-30-minute-by-building-a-landing-page-website-guide-for-beginners-f64e03833f33/images/team-3.jpg" class="img-fluid" alt="team">
    <div class="des">
       Chris
     </div>
    <span class="text-muted">S.enginner</span>
   </div>
   <div class="col-lg-3 col-md-3 col-sm-12 item">
    <img src="https://www.freecodecamp.org/news/learn-bootstrap-4-in-30-minute-by-building-a-landing-page-website-guide-for-beginners-f64e03833f33/images/team-2.jpg" class="img-fluid" alt="team">
    <div class="des">
      Layla 
     </div>
    <span class="text-muted">Front End Developer</span>
   </div>
   <div class="col-lg-3 col-md-3 col-sm-12 item">
    <img src="https://www.freecodecamp.org/news/learn-bootstrap-4-in-30-minute-by-building-a-landing-page-website-guide-for-beginners-f64e03833f33/images/team-3.jpg" class="img-fluid" alt="team">
     <div class="des">
      J.Jirard
     </div>
    <span class="text-muted">Team Manger</span>
   </div>
  </div>
 </div>
</div>

Și să adăugăm un stil:

.team{
 margin: 4em 0;
 position: relative;  
}
.team h1{
 color:#F97300;
 margin: 2em; 
}
.team .item{
 position: relative;
}
.team .des{
 background: #F97300;
 color: #fff;
 text-align: center;
 border-bottom-left-radius: 93%;
 transition:.3s ease-in-out;
 
}

Adăugarea unei suprapuneri la imaginea on-hover folosind animația ar fi bine?.

1611706212 351 Aflati Bootstrap 4 in 30 de minute construind un site

Pentru a face acest efect, adăugați stilurile de mai jos la main.css fişier:

.team .item:hover .des{
 height: 100%;
 background:#f973007d;
 position: absolute;
 width: 89%;
 padding: 5em;
 top: 0;
 border-bottom-left-radius: 0;
}

Super-misto! ?

Formular de contact

1611706212 925 Aflati Bootstrap 4 in 30 de minute construind un site

Formularul de contact este ultima secțiune de adăugat, atunci am terminat?.

Secțiunea Formular de contact va conține un formular prin care vizitatorii pot trimite un e-mail sau pot da feedback. Vom folosi câteva clase Bootstrap pentru a face designul frumos și receptiv.

La fel ca Bootstrap 3, Bootstrap 4 folosește și fișierul .form-control clasă pentru câmpurile de intrare, dar există câteva caracteristici noi adăugate – cum ar fi trecerea de la .input-group-addon (depreciat) la .input-group-prepend (pentru a utiliza pictograme ca etichete).

Vedea Document Bootstrap 4 pentru mai multe informatii. În formularul nostru de contact vom înfășura fiecare intrare între a div care are clasa .form-group.

index.html fișierul arată acum cam așa:

<!-- Contact form -->
<div class="contact-form">
 <div class="container">
  <form>
   <div class="row">
    <div class="col-lg-4 col-md-4 col-sm-12">
      <h1>Get in Touch</h1> 
    </div>
    <div class="col-lg-8 col-md-8 col-sm-12 right">
       <div class="form-group">
         <input type="text" class="form-control form-control-lg" placeholder="Your Name" name="">
       </div>
       <div class="form-group">
         <input type="email" class="form-control form-control-lg" placeholder="YourEmail@email.com" name="email">
       </div>
       <div class="form-group">
         <textarea class="form-control form-control-lg">
          
         </textarea>
       </div>
       <input type="submit" class="btn btn-secondary btn-block" value="Send" name="">
    </div>
   </div>
  </form>
 </div>
</div>

Stilurile secțiunii de contact:

main.css

.contact-form{
 margin: 6em 0;
 position: relative;  
}

.contact-form h1{
 padding:2em 1px;
 color: #F97300; 
}
.contact-form .right{
 max-width: 600px;
}
.contact-form .right .btn-secondary{
 background:  #F97300;
 color: #fff;
 border:0;
}
.contact-form .right .form-control::placeholder{
 color: #888;
 font-size: 16px;
}

Fonturi

Cred că fonturile implicite sunt urâte, așa că vom folosi Google Font API și vom alege Raleway care este un font frumos și adecvat șablonului nostru.

Adăugați acest link în main.css fişier:

@import url('https://fonts.googleapis.com/css?family=Raleway');

și setați stilul global la HTML și etichete de titlu:

html,h1,h2,h3,h4,h5,h6,a{
 font-family: "Raleway";
}

Efect de derulare

Aflati Bootstrap 4 in 30 de minute construind un site

Ultimul lucru care lipsește este efectul de derulare. Aici va trebui să folosim câteva JQuery. Nu vă faceți griji, dacă nu sunteți familiarizați cu acesta, adăugați acest cod în main.js fişier:

$(".navbar a").click(function(){
  $("body,html").animate({
   scrollTop:$("https://www.freecodecamp.org/news/learn-bootstrap-4-in-30-minute-by-building-a-landing-page-website-guide-for-beginners-f64e03833f33/#" + $(this).data('value')).offset().top
  },1000)
  
 })

și adăugați un data-value atribut fiecărui link de navbar:

<li class="nav-item">
         <a class="nav-link" data-value="about" href="https://www.freecodecamp.org/news/learn-bootstrap-4-in-30-minute-by-building-a-landing-page-website-guide-for-beginners-f64e03833f33/#">About</a>
       </li>
       <li class="nav-item">
         <a class="nav-link " data-value="portfolio" href="https://www.freecodecamp.org/news/learn-bootstrap-4-in-30-minute-by-building-a-landing-page-website-guide-for-beginners-f64e03833f33/#">Portfolio</a>
       </li>
       <li class="nav-item">
         <a class="nav-link " data-value="blog" href="https://www.freecodecamp.org/news/learn-bootstrap-4-in-30-minute-by-building-a-landing-page-website-guide-for-beginners-f64e03833f33/#">Blog</a>
       </li>
       <li class="nav-item">
         <a class="nav-link " data-value="team" href="https://www.freecodecamp.org/news/learn-bootstrap-4-in-30-minute-by-building-a-landing-page-website-guide-for-beginners-f64e03833f33/#">
         Team</a>
       </li>
       <li class="nav-item">
         <a class="nav-link " data-value="contact" href="https://www.freecodecamp.org/news/learn-bootstrap-4-in-30-minute-by-building-a-landing-page-website-guide-for-beginners-f64e03833f33/#">Contact</a>
       </li>

Setați un id atribut fiecărei secțiuni.

Notă: id trebuie să fie identic cu data-value atribut în linkul barei de navigare pentru derulare pentru a funcționa:

<div class="about" id="about"></div>

Încheierea și concluzia

Bootstrap 4 este o opțiune excelentă pentru construirea aplicației dvs. web. Oferă o înaltă calitate a elementelor UI și este ușor de personalizat, integrat și utilizat. De asemenea, vă va ajuta să includeți receptivitatea pe site-ul dvs. web, oferind astfel o experiență premium utilizatorilor.

Veți găsi fișierele proiectului pe GitHub.

Dacă aveți nevoie de câteva teme și șabloane Bootstrap, puteți verifica BootstrapBay, au câteva produse minunate

Consultați Clasa mea Bootstrap pentru a afla Bootstrap 4:

Bootstrap 4 accident de curs: de bază pentru a avansa | A spus Hayani | Skillshare
În această clasă veți învăța bootstrap versiunea 4, cadrul CSS pentru a construi șabloane flexibile și …skl.sh