TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Hvordan lage en parallell side i full bredde med Bootstrap?

4

Jumbotron er en av Bootstrap -komponentene som bidrar til å lage attraktive sideoverskrifter med oppfordringsknapp. Standard jumbotron -komponent har lysegrå fargebakgrunn og kan opprettes i full bredde eller passe inn i en beholder. Med mindre CSS -justering kan du legge til parallakse bakgrunnsbilde til jumbotron -komponenten og lage en parallaks sideoppsett i full bredde. I denne artikkelen la oss diskutere mer om hvordan du lager parallaks -side i full bredde med Bootstrap jumbotron -komponent. Vi bruker versjon 4 CSS, men du kan også bruke den nyeste versjonen.

Hvordan lage en parallell side i full bredde med Bootstrap?

  • CSS Parallax -side
    1. Demo av Bootstrap parallaks side
    2. Starter med startmalen
    3. CSS for parallakseffekt
    4. HTML for parallaksseksjoner
    5. Legger til navigasjon og bunntekst
    6. Komplett kode for parallaks side
  • JavaScript Parallax -side

CSS Parallax -side

La oss først forklare CSS -parallaksiden med fast bakgrunn.

1 Demo av Bootstrap Parallax -side ved hjelp av Jumbotron

Parallaksseksjonen på Bootstrap -siden vil se omtrent slik ut nedenfor.

Hvordan lage en parallell side i full bredde med Bootstrap?

Bootstrap 4 Parallax -side med Jumbotron

2 Starter med startmalen

Det første trinnet er å starte med skjelett Bootstrap startmalen. Du kan bruke CDN -koblinger for stilarket og skript eller være vert for dem på din egen server. La oss ta startmalen nedenfor med CDN -lenker som utgangspunkt for sideoppsettet.

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 4 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap 4 CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> Add Your Content Here... <!-- Bootstrap 4 Scripts --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>

3 CSS for Parallax Effect

Parallaksseksjonen vår har et bakgrunnsbilde med minimumshøyde som 600 piksler, en h1 -overskrift og et avsnitt for å legge til en kort beskrivelse.

La oss først lage parallakseksjon med fast bakgrunnsbilde, du kan sette minimumshøyden til ønsket høyde.

/* Header Parallax Element Style*/ .paral { min-height: 600px; background-attachment: fixed; background-size: cover; background-position: 50% 50%; }

La oss deretter legge til noen stiler til avsnittet og H1 -overskriften som nedenfor. Du kan endre verdiene som du ønsker.

/* Paragraph for Parallax Section */ .paral p { font-size: 24px; color:#f5f5f5; text-align: center; line-height: 60px; } /* Heading for Parallax Section */ .paral h1 { color: rgba(255, 255, 255, 0.8); font-size: 60px; text-align: center; padding-top: 60px; line-height: 100px; }

Deretter legger vi til bilde for den enkelte delenes bakgrunn, vi har vist her tre CSS -klasser for å legge til tre seksjoner. Du kan bare legge til ".paralsec3", ".paralsec4", etc. for å legge til forskjellige bilder for flere seksjoner.

/* Image for Parallax Section */ .paralsec { background-image: url("https://img.webnots.com/2017/05/parallax.jpg"); } .paralsec1 { background-image: url("https://img.webnots.com/2017/05/parallax1.jpg");} .paralsec2 { background-image: url("https://img.webnots.com/2015/11/parallax2.jpg"); } /* Add more images for more sections */

La oss til slutt fjerne den nederste marginen fra standard jumbotron -komponenten.

/* Remove Bottom Margin from Jumbotron */ .jumbotron{margin-bottom: 0;}

Du kan enten legge til alle CSS inne … -merkene i toppteksten i startmalen eller opprette et eksternt stilark og en kobling.

4 Opprette HTML for Parallax Seksjoner

Nedenfor er den komplette HTML -koden for parallakssiden med tre seksjoner. Vi har brukt standard knappkomponent på hver seksjon.

<!-- First Parallax Section --> <div class="jumbotron paral paralsec"> <h1 class="display-3">Here is a heading 1</h1> <p class="lead">Here is a short description 1</p> <p class="lead"> <a class="btn btn-info btn-lg btn-md" href="#" role="button">Here is a button 1</a> </p> </div> <!-- Second Parallax Section --> <div class="jumbotron paral paralsec1"> <h1 class="display-3">Here is a heading 2</h1> <p class="lead">Here is a short description 2</p> <p class="lead"> <a class="btn btn-warning btn-lg btn-md" href="widgets.html" role="button">Here is a button 2</a> </p> </div> <!-- Third Parallax Section --> <div class="jumbotron paral paralsec2"> <h1 class="display-3">Here is a heading 3</h1> <p class="lead">Here is a short description 2</p> <p class="lead"> <a class="btn btn-primary btn-lg btn-md" href="themes.html" role="button">Here is a button 3</a> </p> </div> <!-- Add More Parallax Sections Here -->

5 Legge til navigasjon og bunntekst

Ovennevnte CSS- og HTML -kodeblokker med startmalen vil gjøre parallaksiden i full bredde uten navigasjon og bunntekst. Legg til navigasjonslinjen ved hjelp av navbar -komponenten og bunnteksten ved hjelp av tilpasset CSS nedenfor. Navigasjon og bunntekst vil gjøre siden komplett som kan brukes hvor som helst uavhengig.

/* Footer */ .wn-footer { padding: 2.5rem 0; text-align: center; color: white; background-color: #607D8B; border-top: .05rem solid #e5e5e5; } .wn-footer a { color: yellow; }

6 Fullfør Jumbotron Parallax -side

Den komplette koden til Bootstrap 4 jumbotron parallaks side vil se ut som nedenfor. Du kan kopiere og bruke det ved å erstatte bildens URL -adresser og dummy -innhold med ditt eget.

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 4 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap 4 CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <style> /* Header Parallax Element Style*/ .paral { min-height: 600px; background-attachment: fixed; background-size: cover; background-position: 50% 50%; } /* Paragrapgh for Parallax Section */ .paral p { font-size: 24px; color:#f5f5f5; text-align: center; line-height: 60px; } /* Heading for Parallax Section */ .paral h1 { color: rgba(255, 255, 255, 0.8); font-size: 60px; text-align: center; padding-top: 60px; line-height: 100px; } /* Image for Parallax Section */ .paralsec { background-image: url("https://img.webnots.com/2017/05/parallax.jpg"); } .paralsec1 { background-image: url("https://img.webnots.com/2017/05/parallax1.jpg");} .paralsec2 { background-image: url("https://img.webnots.com/2015/11/parallax2.jpg"); } /* Add more images for more sections */ /* Remove Bottom Margin from Jumbotron */ .jumbotron{margin-bottom: 0;} /* Footer */ .wn-footer { padding: 2.5rem 0; text-align: center; color: white; background-color: #607D8B; border-top: .05rem solid #e5e5e5; } .wn-footer a { color: yellow; } </style> </head> <body> <!-- First Parallax Section --> <div class="jumbotron paral paralsec"> <h1 class="display-3">Here is a heading 1</h1> <p class="lead">Here is a short description 1</p> <p class="lead"> <a class="btn btn-info btn-lg btn-md" href="#" role="button">Here is a button 1</a> </p> </div> <!-- Second Parallax Section --> <div class="jumbotron paral paralsec1"> <h1 class="display-3">Here is a heading 2</h1> <p class="lead">Here is a short description 2</p> <p class="lead"> <a class="btn btn-warning btn-lg btn-md" href="widgets.html" role="button">Here is a button 2</a> </p> </div> <!-- Third Parallax Section --> <div class="jumbotron paral paralsec2"> <h1 class="display-3">Here is a heading 3</h1> <p class="lead">Here is a short description 2</p> <p class="lead"> <a class="btn btn-primary btn-lg btn-md" href="themes.html" role="button">Here is a button 3</a> </p> </div> <!-- Add More Parallax Sections Here --> <!-- Footer Section --> <footer class="wn-footer"> <p>This is a Bootstrap 4 parallax page with jumbotron created by <a href="https://www.webnots.com/">WebNots Web Consulting Services</a></p> <p> <a href="#">Back to top</a> </p> </footer> <!-- Bootstrap 4 Scripts --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html> </body> </html>

JavaScript Parallax -side

Selv om det ovennevnte CSS -faste bildet ser ut som en parallaks, er det egentlig ikke en parallakseeffekt. I parallaks bør bakgrunnsbildet også bevege seg relativt til innholdsbevegelsen. Det kan bare gjøres ved hjelp av JavaScript. Det er ferdige JavaScript -biblioteker som jarallax.js du kan bruke til å lage parallakseksjoner i full bredde. Dessverre vil forklaringen av hele prosessen være mer kompleks her. Du kan sjekke ut følgende demoer og laste ned temaer laget med Bootstrap.

Opptakskilde: www.webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon