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

Hvordan lage Bootstrap -tema fra bunnen av?

27

Det er mange online og offline statiske nettstedbyggere som hjelper deg med å bygge et nettsted på få minutter. De fleste av disse nettstedbyggerne bruker i utgangspunktet en av de eksisterende frontend -rammene. Oppriktig, du trenger ikke å stole på disse nettstedbyggerne og begynne å bygge ditt eget nettsted og temaer direkte med rammer som Bootstrap. I denne artikkelen la oss utforske mer om hvordan du lager Bootstrap -tema fra bunnen av ved hjelp av versjon 4.

Trinn for å lage Bootstrap -tema fra bunnen av

  1. Forbered temaets trådrammeskisse
  2. Forstå Bootstrap 4 startmalen
  3. Sett inn navigasjonsmeny
  4. Legg til topplideshow
  5. Inkluder helteoverskriftsseksjon
  6. Showcase omtalt seksjon
  7. Legg til vanlige spørsmål og kontaktskjema
  8. Sett inn bunntekstseksjonen
  9. Tilpass med CSS
  10. Få den endelige malen

Ytterligere deler er forklart med dummyinnhold og bilder, sørg for å erstatte dem med ditt eget innhold.

1 Tegne skjelettet til temaet ditt

Før vi fortsetter, la oss først tegne hvordan temaet vårt skal se ut med fokus på bruk av standard Bootstrap -komponenter. I utgangspunktet bør et tema ha følgende komponenter:

  • Navigasjonslinje for å vise menyelementer.
  • Topp lysbildefremvisning for å rotere bilder med bildetekst
  • Hero header seksjon for å vise iøynefallende overskrift
  • Utvalgt seksjon for å vise produktene eller høydepunktene dine
  • Vanlige spørsmål og noen kontaktdetaljer
  • Bunntekst for opphavsrettsmelding

Så temaet bør se omtrent slik ut:

Hvordan lage Bootstrap -tema fra bunnen av?

La oss bygge vårt tema fra bunnen av nå.

2 Bootstrap 4 startmal

Det er en god idé å ha litt kunnskap om hva som er Bootstrap. Vi har egen kategori om Bootstrap -opplæringsprogrammer, som du kan referere til for mer informasjon. Ellers bare anta at Bootstrap er et frontend -rammeverk som tilbyr forhåndskompilerte CSS- og JavaScript -filer. Disse filene har nettstedblokker som kan brukes som de er eller tilpasses dine behov.

I vårt eksempel starter vi med Bootstrap -startmalen. Dette er en skjelettmal inkludert CSS- og scriptfiler som vist nedenfor:

<!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>

Du kan også være vert for Bootstrap -filene på serveren din og erstatte CDN -koblingene med dine egne. Vi bruker Bootstrap versjon 4 for å bygge temaet vårt. Lagre startmalen som "bootstrap-theme.html" på din lokale datamaskin og åpne filen ved hjelp av din favoritt tekstredigerer. Vi anbefaler å bruke Notisblokk ++, Brackets eller lignende tekstredigerere for enkel redigering.

3 Legge til navigasjon i startmalen

Første trinn er å legge til navigasjonslinje ved hjelp av navbar -komponenten. Nedenfor er koden for standard Bootstrap 4 navbar -komponent:

<!-- Navbar --> <nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-primary"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#"> <img src="assets/images/logo.png" width="30" height="30" class="d-inline-block align-top" alt="logo"> Bootstrap 4 Theme</a> <div class="collapse navbar-collapse" id="navbar"> <ul class="navbar-nav mr-auto ml-auto"> <li class="nav-item outframe"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item outframe"> <a class="nav-link" href="#">Menu</a> </li> <li class="nav-item dropdown outframe"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Dropdown 1</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown 2</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown 3</a> </div> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search"> <button class="btn btn-outline-success btn-spl my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <br><br>

Navigasjonsfeltet inneholder følgende elementer:

  • Favicon
  • Merkenavn
  • Menyelementer – enkelt- og rullegardinmenyelementer
  • Eksempel på søkeboks

Denne menyen bør endres til et hamburgerikon på mindre enheter. Sett inn standard navbar -komponentkode ved å endre dummy -innholdet med din egen like nedenfor tag. Husk at dette er vår første komponent på temaet, derfor sørg for å legge til koden like under koden som et første element.

4 Legge til lysbildefremvisning eller karusell

La oss sette inn standard karusellkomponent med navigeringslinje med bildetekst og beskrivelse. Vi laget bildene i full bredde ved å legge til innebygd stil “bredde =" 100%”;”. Ellers må du bruke de større bildene som vil passe til enhetens bredde.

<!-- Carousel --> <div id="slidercaption" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#slidercaption" data-slide-to="0" class="active"></li> <li data-target="#slidercaption" data-slide-to="1"></li> <li data-target="#slidercaption" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide1.jpg" alt="Slide1" width="100%"> <div class="carousel-caption d-none d-md-block"> <h3>Here is a caption for slide 1</h3> <p>Here is short description for slide 1</p> </div> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide2.jpg" alt="Slide2" width="100%"> <div class="carousel-caption d-none d-md-block"> <h3>Here is a caption for slide 2</h3> <p>Here is short description for slide 2</p> </div> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide3.jpg" alt="Slide3" width="100%"> <div class="carousel-caption d-none d-md-block"> <h3>Here is a caption for slide 3</h3> <p>Here is short description for slide 3</p> </div> </div> </div> <a class="carousel-control-prev" href="#slidercaption" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#slidercaption" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>

Vær forsiktig med at navstangen og karusellen kan overlappe hverandre. Du bør bruke riktig bildehøyde eller bruke tilpasset CSS for å justere overlappingen. I dette eksemplet legger vi ganske enkelt til to linjeskift

under navstangen for å justere gapet med karusellen.

5 Legge til Hero Section eller Jumbotron

La oss deretter legge til en jumbotron -komponent i full bredde for å vise frem en heltseksjon med overskrift, beskrivelse og en knapp. Koden for header hero -delen er gitt nedenfor, som skal legges til like under karusellkoden:

<!-- Hero Header Jumbotron --> <div class="jumbotron"> <h1 class="display-3">Bootstrap 4 Template</h1> <p class="lead">This is a demo theme created with Bootstrap 4. Add some attractive heading for your page here.</p> <hr class="my-4"> <p>Add your subtitle here to explain more about this page in detail.</p> <a class="btn btn-primary btn-lg btn-spl" href="#" role="button">View Facebook Page</a> </div>

Vi gjør bakgrunnen hvit og justerte egenskapene til standard jumbotron med tilpasset CSS som nedenfor. Legg til tilpasset CSS mellom…. tagger.

<style> /* Header Jumbotron */ .jumbotron{ color: #990000; background-color: #fafafa; margin-bottom: -20px; background: #fff; text-align: center; border-radius: 0; } </style>

Nå bør Bootstrap 4 -temaet vårt se omtrent slik ut:

Hvordan lage Bootstrap -tema fra bunnen av?

6 Legge til utvalgte seksjoner med kortoppsett

Bootstrap har en vakker kortkomponent for å vise frem utvalgte deler med bilde, tittel, beskrivelse og en knapp. La oss vise frem tre produkter ved hjelp av kortkortoppsett som nedenfor.

Hvordan lage Bootstrap -tema fra bunnen av?

Nedenfor er koden for kortoppsett som skal legges til like under hero jumbotron -komponenten. Du kan legge til knappen "Legg i handlevogn" eller "Kjøp nå" fra PayPal eller en annen betalingsprosessor på knappelementet for å samle inn betalinger fra brukere.

<!-- Card Deck --> <div class="card-deck"> <div class="card btn-spl"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Product 1</h4> <p class="card-text">Here is a longer description of the card and the height will be auto aligned with flex box.</p> <button class="btn btn-primary btn-spl" href="#" role="button">Buy Now</button> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> <div class="card btn-spl"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Product 2</h4> <p class="card-text">Here is a shorter description of the card.</p> <button class="btn btn-danger btn-spl" href="#" role="button">Buy Now</button> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> <div class="card btn-spl"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Product 3</h4> <p class="card-text">Here is a longer description of the card and the height will be auto aligned with flex box.</p> <button class="btn btn-secondary btn-spl" href="#" role="button">Buy Now</button> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> </div>

7 Inndeling i to kolonner

Den neste delen har to kolonner – en for å legge til en FAQ -seksjon og en annen for å legge til et kontaktskjema som vist nedenfor:

Hvordan lage Bootstrap -tema fra bunnen av?

Bootstrap to kolonner seksjon

De to kolonnene opprettes ved å bruke en div med radklasse og deretter ytterligere to div med "col-md-6" -klassen som nedenfor:

<div class="row"> <div class="col-md-6" style="padding:30px 50px;"> <div class="container" style="padding:30px;border:1px solid gray;"> <!-- FAQ Collapse --> </div> </div> <div class="col-md-6" style="padding:30px 50px;"> <div class="container" style="padding:30px;border:1px solid gray;"> <!-- Contact Form --> </div> </div> </div>

7.1 Legge til vanlige spørsmål i første kolonne med skjul

Vanlige spørsmål -delen er opprettet ved å bruke standard sammenbruddskomponent som nedenfor:

<!-- Collapse --> <div id="accordion" role="tablist" aria-multiselectable="true"> <div class="card"> <div class="card-header btn-spl" role="tab" id="firstheading"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1"> Heading 1 </a> </h5> </div> <div id="collapse1" class="collapse" role="tabpanel" aria-labelledby="firstheading"> <div class="card-block"> Here is the content for the first section. </div> </div> </div> <div class="card"> <div class="card-header btn-spl" role="tab" id="secondheading"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2"> Heading 2 </a> </h5> </div> <div id="collapse2" class="collapse" role="tabpanel" aria-labelledby="secondheading"> <div class="card-block"> Here is the content for the second section. </div> </div> </div> <div class="card"> <div class="card-header btn-spl" role="tab" id="headingThree"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3"> Heading 3 </a> </h5> </div> <div id="collapse3" class="collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="card-block"> Here is the content for the third section. </div> </div> </div> <div class="card"> <div class="card-header btn-spl" role="tab" id="headingFour"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse4" aria-expanded="false" aria-controls="collapse3"> Heading 4 </a> </h5> </div> <div id="collapse4" class="collapse" role="tabpanel" aria-labelledby="headingFour"> <div class="card-block"> Here is the content for the third section. </div> </div> </div> </div>

7.2 Legge til kontaktskjema i andre kolonne ved hjelp av skjema

Kontaktskjema opprettes med standard Bootstrap 4 -skjemakomponent med navn, alternativ for å velge fra rullegardinmenyen, et tekstområde for å skrive inn kommentar og send -knapp.

<!-- Form --> <div class="col-md-6" style="padding:30px 50px;"> <div class="container" style="padding:30px;border:1px solid gray;"> <h3 class="title"><span>Contact Us</span></h3> <form> <!-- Text Input --> <div class="form-group"> <label for="username">Enter Username:</label> <input type="text" class="form-control" id="username" aria-describedby="Username" placeholder="Enter Username"> </div> <!-- Single Select --> <div class="form-group"> <label for="singleselect">Choose Option:</label> <select class="form-control" id="singleselect"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> <option>Option 5</option> </select> </div> <!-- Textarea --> <div class="form-group"> <label for="textarea">Enter Your Comment:</label> <textarea class="form-control" id="textarea" rows="5"></textarea> </div> <!-- Submit Button --> <button type="submit" class="btn btn-success btn-spl btn-md">Submit</button> </form> </div> </div>

La oss til slutt legge til en bunntekst i full bredde ved hjelp av flytende jumbotron.

<!-- Footer --> <div class="jumbotron-fluid"> <div class="container"> <h2 style="padding-bottom: 30px">This is a footer section of your page.</h2> <p class="lead">© All Rights Reserved <a href="https://www.webnots.com/">WebNots</a></p> </div> </div>

Bunnteksten trenger litt tilpasning med følgende CSS:

/* Footer Jumbotron */ .jumbotron-fluid { background: lightgrey; padding: 50px; text-align: center; }

Nå er Bootstrap 4 -malen din klar, la oss krydre med litt tilpasset CSS.

9 Legge til tilpasset CSS

Du kan tilpasse hvilken som helst komponent ved å legge til din egen CSS. I vårt eksempel, la oss legge til følgende tilpasninger:

  • Legg til skyggeeffekt til knapp, skjul og kort med en ekstra CSS-klasse “.btn-spl”.
  • Bruk ".outframe" -klassen for å legge til noen marginer på menyelementene.
  • Legg divider til overskrifter ved hjelp av ".title" og ".title span" klasser.
  • Juster overløpet av kroppen og margen på kortene for bedre justering på mindre enheter.

10 Endelig temamal

Når du setter sammen alle de egendefinerte CSS -ene og komponentene, skal den siste enkeltsides Bootstrap 4 -malen se ut som vist i demoen her. Denne malen reagerer fullt ut, og du kan laste ned hele koden nedenfor. Vi har lagt til en favicon -lenke, metabeskrivelse og tittel for siden din i toppteksten. Du kan videre legge til Google Analytics og annonsekode på siden som på demosiden.

<!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"> <link rel="shortcut icon" type="image/png" href="Your Favicon Image Link" /> <meta name="description" content="Meta Description for your Page."> <title>Enter Title for Your Page</title> <!-- 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> /* Hide Overflow */ body { overflow-x: hidden; } /* Card Alignment */ .card { margin: 30px; text-align: center; } /* Header Jumbotron */ .jumbotron{ color: #990000; background-color: #fafafa; margin-bottom: -20px; background: #fff; text-align: center; border-radius: 0; } /* Footer Jumbotron */ .jumbotron-fluid { background: lightgrey; padding: 50px; text-align: center; } /* Margin for Menu */ .outframe { padding: 0 20px; } /* Shadow Effect for Button, Collapse & Cards */ .btn-spl { box-shadow: 0 1px 4px rgba(100, 20, 100, .6); border-radius: 0px; } /* Heading with Divider */ .title { line-height: 2.5; text-align: center; } .title span { display: inline-block; position: relative; } .title span:before, .title span:after { content: ""; position: absolute; height: 5px; border-bottom: 1px solid lightgray; border-top: 1px solid lightgray; top: 0; width: 75%; margin-top:35px; } .title span:before { right: 100%; margin-right: 15px; } .title span:after { left: 100%; margin-left: 15px; } </style> </head> <body> <!-- Navbar --> <nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-primary"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#"> <img src="assets/images/logo.png" width="30" height="30" class="d-inline-block align-top" alt="logo"> Bootstrap 4 Theme</a> <div class="collapse navbar-collapse" id="navbar"> <ul class="navbar-nav mr-auto ml-auto"> <li class="nav-item outframe"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item outframe"> <a class="nav-link" href="#">Menu</a> </li> <li class="nav-item dropdown outframe"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Dropdown 1</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown 2</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown 3</a> </div> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search"> <button class="btn btn-outline-success btn-spl my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <br><br> <!-- Carousel --> <div id="slidercaption" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#slidercaption" data-slide-to="0" class="active"></li> <li data-target="#slidercaption" data-slide-to="1"></li> <li data-target="#slidercaption" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide1.jpg" alt="Slide1" width="100%"> <div class="carousel-caption d-none d-md-block"> <h3>Here is a caption for slide 1</h3> <p>Here is short description for slide 1</p> </div> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide2.jpg" alt="Slide2" width="100%"> <div class="carousel-caption d-none d-md-block"> <h3>Here is a caption for slide 2</h3> <p>Here is short description for slide 2</p> </div> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide3.jpg" alt="Slide3" width="100%"> <div class="carousel-caption d-none d-md-block"> <h3>Here is a caption for slide 3</h3> <p>Here is short description for slide 3</p> </div> </div> </div> <a class="carousel-control-prev" href="#slidercaption" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#slidercaption" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!-- Hero Header Jumbotron --> <div class="jumbotron"> <h1 class="display-3">Bootstrap 4 Template</h1> <p class="lead">This is a demo theme created with Bootstrap 4. Add some attractive heading for your page here.</p> <hr class="my-4"> <p>Add your subtitle here to explain more about this page in detail.</p> <a class="btn btn-primary btn-lg btn-spl" href="#" role="button">View Facebook Page</a> </div> <h3 class="title"><span>Order Products</span></h3> <!-- Card Deck --> <div class="card-deck"> <div class="card btn-spl"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Product 1</h4> <p class="card-text">Here is a longer description of the card and the height will be auto aligned with flex box.</p> <button class="btn btn-primary btn-spl" href="#" role="button">Buy Now</button> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> <div class="card btn-spl"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Product 2</h4> <p class="card-text">Here is a shorter description of the card.</p> <button class="btn btn-danger btn-spl" href="#" role="button">Buy Now</button> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> <div class="card btn-spl"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Product 3</h4> <p class="card-text">Here is a longer description of the card and the height will be auto aligned with flex box.</p> <button class="btn btn-secondary btn-spl" href="#" role="button">Buy Now</button> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> </div> <hr class="my-5"> <div class="row"> <div class="col-md-6" style="padding:30px 50px;"> <div class="container" style="padding:30px;border:1px solid gray;"> <h3 class="title"><span>Read FAQ</span></h3> <!-- Collapse --> <div id="accordion" role="tablist" aria-multiselectable="true"> <div class="card"> <div class="card-header btn-spl" role="tab" id="firstheading"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1"> Heading 1 </a> </h5> </div> <div id="collapse1" class="collapse" role="tabpanel" aria-labelledby="firstheading"> <div class="card-block"> Here is the content for the first section. </div> </div> </div> <div class="card"> <div class="card-header btn-spl" role="tab" id="secondheading"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2"> Heading 2 </a> </h5> </div> <div id="collapse2" class="collapse" role="tabpanel" aria-labelledby="secondheading"> <div class="card-block"> Here is the content for the second section. </div> </div> </div> <div class="card"> <div class="card-header btn-spl" role="tab" id="headingThree"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3"> Heading 3 </a> </h5> </div> <div id="collapse3" class="collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="card-block"> Here is the content for the third section. </div> </div> </div> <div class="card"> <div class="card-header btn-spl" role="tab" id="headingFour"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse4" aria-expanded="false" aria-controls="collapse3"> Heading 4 </a> </h5> </div> <div id="collapse4" class="collapse" role="tabpanel" aria-labelledby="headingFour"> <div class="card-block"> Here is the content for the third section. </div> </div> </div> </div> </div> </div> <!-- Form --> <div class="col-md-6" style="padding:30px 50px;"> <div class="container" style="padding:30px;border:1px solid gray;"> <h3 class="title"><span>Contact Us</span></h3> <form> <!-- Text Input --> <div class="form-group"> <label for="username">Enter Username:</label> <input type="text" class="form-control" id="username" aria-describedby="Username" placeholder="Enter Username"> </div> <!-- Single Select --> <div class="form-group"> <label for="singleselect">Choose Option:</label> <select class="form-control" id="singleselect"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> <option>Option 5</option> </select> </div> <!-- Textarea --> <div class="form-group"> <label for="textarea">Enter Your Comment:</label> <textarea class="form-control" id="textarea" rows="5"></textarea> </div> <!-- Submit Button --> <button type="submit" class="btn btn-success btn-spl btn-md">Submit</button> </form> </div> </div> </div> <!-- Footer --> <div class="jumbotron-fluid"> <div class="container"> <h2 style="padding-bottom: 30px">This is a footer section of your page.</h2> <p class="lead">© All Rights Reserved <a href="https://www.webnots.com/">WebNots</a></p> </div> </div> <!-- 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>

Nå kan du legge til flere sider ved hjelp av standardkomponenter som fremdriftslinjer, varsler, merker, tabeller, etc. og lenke på navigasjonsmenyen tilsvarende. Når du planlegger å ha flere sider, anbefaler vi at du laster ned Bootstrap -filene på datamaskinen din og ordner filstrukturen som nedenfor:

Hvordan lage Bootstrap -tema fra bunnen av?

Bootstrap 4 temafilstruktur

Lagre alle dine egendefinerte CSS -koder under "style.css" -filen og koble filen til alle sidene dine. I utgangspunktet kan du endre startmalen med de hostede nettadressene dine med relative lenker som nedenfor (vi er vert for bilder på et eget nettsted, du kan inkludere de relative bildeadressene i HTML -koden):

<!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="assets/css/bootstrap.min.css"> <!-- Custom CSS --> <link rel="stylesheet" href="assets/css/style.css"> </head> <body> Add Your Content Here <!-- Bootstrap 4 Scripts --> <script src="assets/js/jquery.min.js"></script> <script src="assets/js/bootstrap.bundle.min.js"></script> </body> </html>

Du kan fortsette å legge til så mange sider som du kan og endre koblingene på navbar -komponenten. Når alle sidene er klare, kan du bare laste dem opp i ønsket mappe på serveren din. Vær oppmerksom på at når du hoster forhåndskompilerte filer på serveren din, bruk "bootstrap.bundle.min.js". Denne medfølgende versjonen inneholder popper -skript, derfor trenger du ikke å inkludere “popper.js” i malen. Mulighetene er uendelige, og du trenger bare å bruke noen dager på å bygge ditt eget tema eller nettsted.

Konklusjon

Bootstrap 4 -rammeverket er kraftigere enn den forrige versjonen 3. Når du planlegger å bygge uavhengige temaer, er det på tide å lære triksene og starte din egen temavirksomhet. Selv for tilpasningene trenger du ikke bruke for mye tid. Det er hundrevis av gratis brukergrensesnitt tilgjengelig på nettet for å tilpasse komponenter for å legge til et profesjonelt utseende for temaet ditt.

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