TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka luoda Bootstrap -teema Scratchista?

2

On monia online- ja offline -staattisten sivustojen rakentajia, jotka auttavat sinua rakentamaan sivuston muutamassa minuutissa. Useimmat näistä sivuston rakentajista käyttävät pohjimmiltaan yhtä olemassa olevista käyttöliittymäkehyksistä. Rehellisesti sanottuna sinun ei tarvitse luottaa näihin sivuston rakentajiin ja aloittaa oman sivustosi ja teemojen rakentaminen suoraan Bootstrapin kaltaisilla kehyksillä. Tässä artikkelissa kerromme lisää Bootstrap -teeman luomisesta tyhjästä version 4 avulla.

Vaiheet Bootstrap -teeman luomiseksi tyhjästä

  1. Valmista teemasi lankakehyksen luonnos
  2. Bootstrap 4 -aloitusmallin ymmärtäminen
  3. Lisää navigointivalikko
  4. Lisää otsikon diaesitys
  5. Sisällytä sankariotsikko -osio
  6. Esittelykohde -osio
  7. Lisää usein kysytyt kysymykset ja yhteydenottolomake
  8. Aseta alatunnisteosa
  9. Mukauttaminen CSS: n avulla
  10. Hanki lopullinen malli

Muita osia selitetään nukkisisällöllä ja -kuvilla, muista korvata ne omalla sisällölläsi.

1 Teeman luuranon piirtäminen

Ennen kuin jatkat, piirrämme ensin, miltä teemamme pitäisi näyttää Bootstrap -oletuskomponenttien käyttämiselle. Periaatteessa teeman tulisi sisältää seuraavat osat:

  • Navigointipalkki valikkokohtien näyttämiseksi.
  • Otsikon diaesitys kääntääksesi kuvia tekstityksen kanssa
  • Sankariotsikko näyttää katseenvangitsevan otsikon
  • Suositellut osiot tuotteidesi tai kohokohtiesi näyttämiseksi
  • Usein kysytyt kysymykset ja joitakin yhteystietoja
  • Tekijänoikeusviestin alatunniste

Teeman pitäisi siis näyttää seuraavanlaiselta:

Kuinka luoda Bootstrap -teema Scratchista?

Rakennetaan teemamme nyt alusta.

2 Bootstrap 4 -käynnistysmalli

On hyvä idea saada jonkin verran tietoa Bootstrapista. Meillä on erillinen Bootstrap -opetusohjelmien luokka, josta voit katsoa lisätietoja. Muussa tapauksessa oletetaan, että Bootstrap on käyttöliittymä, joka tarjoaa valmiiksi koottuja CSS- ja JavaScript -tiedostoja. Näissä tiedostoissa on verkkosivustolohkot, joita voidaan käyttää sellaisenaan tai muokata tarpeidesi mukaan.

Esimerkissämme aloitamme Bootstrap -käynnistysmallilla. Tämä on luontomalli, joka sisältää CSS- ja komentotiedostot alla esitetyllä tavalla:

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

Voit myös isännöidä Bootstrap -tiedostoja palvelimellasi ja korvata CDN -linkit omilla. Käytämme Bootstrap -versiota 4 teemamme rakentamiseen. Tallenna aloitusmalli nimellä “bootstrap-theme.html" paikalliselle tietokoneellesi ja avaa tiedosto suosikkitekstieditorillasi. Suosittelemme Notepad ++: n, sulkeiden tai vastaavien tekstieditorien käyttöä muokkaamisen helpottamiseksi.

3 Navigoinnin lisääminen aloitusmalliin

Ensimmäinen askel on lisätä navigointipalkin avulla navbar komponenttia. Alla on Bootstrap 4: n oletuspalkkikomponentin koodi:

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

Navigointipalkki sisältää seuraavat kohteet:

  • Favicon
  • Tuotenimi
  • Valikkokohteet – yksittäiset ja avattavat valikkokohdat
  • Esimerkki hakukentästä

Tämä valikko on muutettava hampurilaiskuvakkeeksi pienemmillä laitteilla. Lisää navigointipalkin oletuskomponenttikoodi muokkaamalla nuken sisältöä omalla juuri tunnisteesi alapuolella. Muista, että tämä on ensimmäinen komponentti teemassa, joten varmista, että lisäät koodin heti tunnisteen alle ensimmäiseksi kohteeksi.

4 Diaesityksen tai karusellin lisääminen

Lisäämme navigointipalkin alle vakio -karusellikomponentin, jossa on kuvateksti ja kuvaus. Teimme kuvista koko leveyden lisäämällä inline -tyylin “width =” 100%”;”. Muussa tapauksessa käytä suurempia kuvia, jotka sopivat laitteen leveyteen.

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

Ole varovainen, että navigointipalkki ja karuselli voivat olla päällekkäisiä. Sinun on käytettävä oikeaa kuvan korkeutta tai mukautettua CSS: ää päällekkäisyyden säätämiseen. Tässä esimerkissä yksinkertaisesti lisätään kaksi rivinvaihtoa

navigointipalkin alapuolella, jotta voit säätää rakoa karusellin kanssa.

5 Sankariosan tai Jumbotronin lisääminen

Lisätään seuraavaksi täysleveä jumbotron -komponentti, joka esittelee sankariosan otsikolla, kuvauksella ja painikkeella. Otsikon sankariosan koodi on annettu alla, joka tulisi lisätä juuri karusellikoodin alle:

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

Teemme taustasta valkoisen ja säätimme oletusjumbotronin ominaisuuksia mukautetulla CSS: llä, kuten alla. Lisää mukautettu CSS välille…. tunnisteita.

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

Nyt Bootstrap 4 -teemamme pitäisi näyttää seuraavanlaiselta:

Kuinka luoda Bootstrap -teema Scratchista?

6 Suositellun osion lisääminen kortin asetteluun

Bootstrapissa on kaunis korttikomponentti esittelemään esillä olevia osia, joissa on kuva, otsikko, kuvaus ja painike. Esitelkäämme kolme tuotetta käyttämällä kannen kortin asettelua, kuten alla.

Kuinka luoda Bootstrap -teema Scratchista?

Alla on kortin asettelukoodi, joka tulisi lisätä juuri sankarijumbotron -komponentin alle. Voit lisätä painikkeeseen "Lisää ostoskoriin" tai "Osta nyt" -koodin PayPalilta tai muulta maksuprosessorilta kerätäksesi maksuja käyttäjiltä.

<!-- 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 Jakautuminen kahteen sarakkeeseen

Seuraavassa osassa on kaksi saraketta – yksi usein kysyttyjen kysymysten osion lisäämiseksi ja toinen yhteydenottolomakkeen lisäämiseksi alla olevan kuvan mukaisesti:

Kuinka luoda Bootstrap -teema Scratchista?

Bootstrap kaksi saraketta -osio

Kaksi saraketta luodaan käyttämällä divia, jossa on riviluokka, ja sitten kahta muuta divia, joissa on luokka "col-md-6", kuten alla:

<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 Usein kysyttyjen kysymysten lisääminen ensimmäiseen sarakkeeseen tiivistämällä

Usein kysytyt kysymykset -osio luodaan käyttämällä tiivistämisen oletuskomponenttia, kuten alla:

<!-- 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 Yhteydenottolomakkeen lisääminen toiseen sarakkeeseen lomakkeen avulla

Yhteydenottolomake luodaan Bootstrap 4 -lomakkeen oletuslomakomponentilla, jolla on nimi, mahdollisuus valita avattavasta valikosta ja tekstialue, jolla voit kirjoittaa kommentti Lähetä -painikkeen.

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

Lopuksi lisätään täysleveä alatunniste nestemäisellä jumbotronilla.

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

Alatunnistetta on hieman muokattava seuraavan CSS: n avulla:

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

Nyt Bootstrap 4 -malli on valmis, anna meidän maustaa mukautetulla CSS: llä.

9 Mukautetun CSS: n lisääminen

Voit muokata mitä tahansa komponenttia lisäämällä oman CSS: n. Esimerkissämme lisätään seuraavat mukautukset:

  • Lisää varjotehosteita painikkeeseen, tiivistämiseen ja kortteihin ylimääräisellä CSS-luokalla “.btn-spl”.
  • Käytä ".outframe" -luokkaa lisätäksesi marginaaleja valikkokohteisiin.
  • Lisää jakaja otsikoihin käyttämällä .title- ja .title span -luokkia.
  • Säädä korttien rungon ja marginaalin ylivuotoa parempaa kohdistusta varten pienemmillä laitteilla.

10 Lopullinen teemamalli

Yhdistämällä kaikki mukautetut CSS -tiedostot ja komponentit viimeisen yksisivuisen Bootstrap 4 -mallin pitäisi näyttää tässä olevan esittelyn mukaiselta. Tämä malli on täysin reagoiva ja voit ladata koko koodin alla. Olemme lisänneet sivullesi favicon -linkin, sisällönkuvauksen ja otsikon otsikko -osioon. Voit myös lisätä Google Analyticsin ja mainoskoodin sivulle kuten esittelysivulla.

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

Nyt voit lisätä lisää sivuja käyttämällä oletuskomponentteja, kuten edistymispalkkeja, hälytyksiä, merkkejä, taulukoita jne., Ja linkittää navigointivalikossa vastaavasti. Kun aiot käyttää useita sivuja, suosittelemme lataamaan Bootstrap -tiedostot tietokoneellesi ja järjestämään tiedostorakenteen seuraavasti:

Kuinka luoda Bootstrap -teema Scratchista?

Bootstrap 4 -teematiedoston rakenne

Tallenna kaikki mukautetut CSS -koodisi "style.css" -tiedostoon ja linkitä tiedosto kaikille sivuillesi. Pohjimmiltaan voit muuttaa aloitusmallia isännöidyillä URL -osoitteillasi suhteellisilla linkeillä, kuten alla (isännöimme kuvia eri sivustolla, voit sisällyttää suhteelliset kuvien URL -osoitteet HTML -koodiin):

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

Voit jatkaa sivujen lisäämistä ja muokata navigointilaitteen linkkejä. Kun kaikki sivut ovat valmiita, lataa ne vain haluttuun kansioon isäntäpalvelimellasi. Huomaa, että kun isännöit esipakattuja tiedostoja palvelimellasi, käytä "bootstrap.bundle.min.js". Tämä niputettu versio sisältää popper -komentosarjan, joten sinun ei tarvitse sisällyttää “popper.js” -mallia. Mahdollisuudet ovat rajattomat, ja sinun tarvitsee vain viettää muutaman päivän aikaa oman teeman tai sivuston rakentamiseen.

Johtopäätös

Bootstrap 4 -kehys on tehokkaampi kuin edellinen versio 3. Kun aiot rakentaa itsenäisiä teemoja, on aika oppia temppuja ja aloittaa oma teemayritys. Jopa mukautusten osalta sinun ei tarvitse viettää liikaa aikaa. Netistä on saatavana satoja ilmaisia ​​käyttöliittymäpaketteja, joiden avulla voit muokata komponentteja ja lisätä teemasi ammattimaista ulkoasua.

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja