TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur skapar jag Bootstrap -tema från början?

3

Det finns många online och offline statiska webbplatsbyggare som hjälper dig att bygga en webbplats på några minuter. De flesta av dessa webbplatsbyggare använder i princip en av de befintliga frontend -ramarna. Uppriktigt sagt behöver du inte lita på dessa webbplatsbyggare och börja bygga din egen webbplats och teman direkt med ramar som Bootstrap. I den här artikeln låt oss utforska mer om hur du skapar Bootstrap -tema från början med version 4.

Steg för att skapa Bootstrap -tema från början

  1. Förbered ditt temas trådramskiss
  2. Förstå Bootstrap 4 startmall
  3. Infoga navigeringsmeny
  4. Lägg till bildspel i rubriken
  5. Inkludera hjältehuvudavsnitt
  6. Showcase presenterat avsnitt
  7. Lägg till vanliga frågor och kontaktformulär
  8. Sätt i sidfotsdelen
  9. Anpassa med CSS
  10. Skaffa den sista mallen

Ytterligare avsnitt förklaras med dummyinnehåll och bilder, se till att ersätta dem med ditt eget innehåll.

1 Rita skelettet för ditt tema

Innan vi fortsätter, låt oss först rita hur vårt tema ska se ut med fokus på att använda standard Bootstrap -komponenter. I grund och botten bör ett tema ha följande komponenter:

  • Navigationsfält för att visa menyalternativ.
  • Bildspel i rubriken för att rotera bilder med bildtext
  • Hjältehuvudavsnitt för att visa uppseendeväckande rubrik
  • Utvalda avsnitt för att visa dina produkter eller höjdpunkter
  • Vanliga frågor och några kontaktuppgifter
  • Sidfot för upphovsrättsmeddelande

Så temat bör se ut ungefär så här:

Hur skapar jag Bootstrap -tema från början?

Låt oss bygga vårt tema från början nu.

2 Bootstrap 4 startmall

Det är en bra idé att ha lite kunskap om vad som är Bootstrap. Vi har en separat kategori om Bootstrap -självstudier som du kan hänvisa till för mer information. Annars antar du bara att Bootstrap är ett frontend -ramverk som erbjuder förkompilerade CSS- och JavaScript -filer. Dessa filer har webbplatsblock som kan användas som det är eller anpassas efter dina behov.

I vårt exempel börjar vi med Bootstrap -startmallen. Detta är en skelettmall inklusive CSS- och scriptfiler enligt nedan:

<!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 också vara värd för Bootstrap -filerna på din server och ersätta CDN -länkarna med dina egna. Vi använder Bootstrap version 4 för att bygga vårt tema. Spara startmallen som "bootstrap-theme.html" på din lokala dator och öppna filen med din favorittextredigerare. Vi rekommenderar att du använder Notepad ++, Brackets eller liknande textredigerare för enkel redigering.

3 Lägga till navigering i startmallen

Första steget är att lägga till navigeringsfält med navbar -komponenten. Nedan är koden för 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>

Navigationsfältet innehåller följande objekt:

  • Favicon
  • Varumärke
  • Menyalternativ – enkla och rullgardinsmenyalternativ
  • Exempel på sökruta

Denna meny bör ändras till en hamburgerikon på mindre enheter. Infoga standard navbar -komponentkoden genom att ändra dummyinnehållet med din egen strax under taggen. Kom ihåg att detta är vår första komponent i temat, se därför till att lägga till koden strax under taggen som ett första objekt.

4 Lägga till bildspel eller karusell

Nedanför navbar låt oss sätta standarden karusellen komponent med bild bildtext och beskrivning. Vi gjorde bilderna i full bredd genom att lägga till infogad stil “width =" 100%”;”. Se annars till att använda de större bilderna som passar enhetens bredd.

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

Var försiktig så att navstång och karusell kan överlappa varandra. Du bör använda rätt bildhöjd eller använda anpassad CSS för att justera överlappningen. I det här exemplet lägger vi helt enkelt till två radbrytningar

under navstången för att justera gapet med karusellen.

5 Lägga till hjältsektion eller Jumbotron

Låt oss sedan lägga till en jumbotron -komponent i full bredd för att visa upp en hjältesektion med rubrik, beskrivning och en knapp. Koden för rubrikhjälte avsnittet ges nedan som bör läggas till strax 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 gör bakgrunden vit och justerade egenskaperna för standard jumbotron med anpassad CSS som nedan. Lägg till den anpassade CSS mellan…. taggar.

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

Nu borde vårt Bootstrap 4 -tema se ut ungefär så här:

Hur skapar jag Bootstrap -tema från början?

6 Lägga till utvalt avsnitt med kortlayout

Bootstrap har en vacker kortkomponent för att visa upp utvalda avsnitt med bild, titel, beskrivning och en knapp. Låt oss visa upp tre produkter med kortkortslayout som nedan.

Hur skapar jag Bootstrap -tema från början?

Nedan finns koden för kortlayout som ska läggas till strax under hjälten jumbotron -komponenten. Du kan lägga till knappen "Lägg till i kundvagn" eller "Köp nu" från PayPal eller någon annan betalningsprocessor på knappelementet för att samla in betalningar från användare.

<!-- 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 Dela upp i två kolumner

Nästa avsnitt har två kolumner – en för att lägga till en FAQ -sektion och en annan för att lägga till ett kontaktformulär enligt nedan:

Hur skapar jag Bootstrap -tema från början?

Bootstrap två kolumner avsnitt

De två kolumnerna skapas med hjälp av en div med radklass och sedan ytterligare två div med "col-md-6" -klassen som nedan:

<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 Lägga till vanliga frågor i första kolumnen med Collapse

FAQ -sektionen skapas med hjälp av standardkollaps -komponenten som nedan:

<!-- 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 Lägga till kontaktformulär i andra kolumnen med hjälp av formulär

Kontaktformulär skapas med standard Bootstrap 4 -formulärkomponent med namn, alternativ att välja från rullgardinsmenyn, ett textområde för att skriva kommentar och skicka -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>

Låt oss slutligen lägga till en sidfot i full bredd med hjälp av flytande 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>

Sidfoten behöver lite anpassning med följande CSS:

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

Nu är din Bootstrap 4 -mall klar, låt oss krydda med lite anpassad CSS.

9 Lägga till anpassad CSS

Du kan anpassa vilken komponent som helst genom att lägga till din egen CSS. Låt oss i vårt exempel lägga till följande anpassningar:

  • Lägg till skuggeffekt till knapp, kollaps och kort med en ytterligare CSS-klass ".btn-spl".
  • Använd ".outframe" -klassen för att lägga till några marginaler till menyalternativen.
  • Lägg till avdelare till rubriker med klasserna ".title" och ".title span".
  • Justera kroppens överflöd och kortmarginal för bättre anpassning på mindre enheter.

10 Sista temamallen

Att sätta ihop alla anpassade CSS och komponenterna ska den sista enda sidan Bootstrap 4 -mallen se ut som visas i demoen här. Den här mallen är fullt responsiv och du kan ladda ner hela koden nedan. Vi har lagt till en favicon -länk, metabeskrivning och titel för din sida i rubriken. Du kan ytterligare lägga till Google Analytics och annonskod på sidan som på demosidan.

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

Nu kan du lägga till fler sidor med standardkomponenter som statusfält, varningar, märken, tabeller etc. och länka på navigeringsmenyn i enlighet därmed. När du planerar att ha flera sidor rekommenderar vi att du laddar ner Bootstrap -filerna till din dator och ordnar filstrukturen enligt nedan:

Hur skapar jag Bootstrap -tema från början?

Bootstrap 4 -temafilstruktur

Spara alla dina anpassade CSS -koder under filen “style.css” och länka filen på alla dina sidor. I grund och botten kan du ändra startmallen med dina värdadresser med relativa länkar som nedan (vi värdar bilder på en separat webbplats, du kan inkludera de relativa bildadresserna i HTML):

<!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 fortsätta lägga till så många som sidor och ändra länkarna på navbar -komponenten. När alla sidor är klara laddar du bara upp dem i önskad mapp på din webbserver. Observera att när du är värd för förkompilerade filer på din server använder du "bootstrap.bundle.min.js". Den här medföljande versionen innehåller popper script, därför behöver du inte inkludera “popper.js” i mallen. Möjligheterna är oändliga och du behöver bara lägga några dagar på att bygga ditt eget tema eller din webbplats.

Slutsats

Bootstrap 4 -ramverket är kraftfullare än föregående version 3. När du planerar att bygga oberoende teman är det dags att lära sig knepen och starta ditt eget temaföretag. Även för anpassningarna behöver du inte spendera för mycket tid. Det finns hundratals gratis UI -kit tillgängliga på nätet för att kunna anpassa komponenter för att lägga till ett professionellt utseende för ditt tema.

Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer