TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Як створити тему Bootstrap з нуля?

3

Існує багато онлайн -та офлайн -конструкторів статичних сайтів, які допоможуть вам створити сайт за лічені хвилини. Більшість із цих конструкторів сайтів в основному використовують одну з існуючих фронтенд -фреймворків. Чесно кажучи, вам не потрібно покладатися на цих конструкторів сайтів і починати створення власного сайту та тем безпосередньо за допомогою таких фреймворків, як Bootstrap. У цій статті давайте детальніше вивчимо, як створити тему Bootstrap з нуля за допомогою версії 4.

Кроки для створення теми Bootstrap з нуля

  1. Підготуйте ескіз каркасної теми
  2. Розуміння початкового шаблону Bootstrap 4
  3. Вставити меню навігації
  4. Додати слайд -шоу заголовка
  5. Включити розділ заголовка героя
  6. Рекомендований розділ вітрини
  7. Додайте FAQ та контактну форму
  8. Вставити розділ нижнього колонтитула
  9. Налаштування за допомогою CSS
  10. Отримайте остаточний шаблон

Подальші розділи пояснюються фіктивним вмістом та зображеннями. Обов’язково замініть їх власним вмістом.

1 Малювання скелета вашої теми

Перш ніж продовжити, давайте спочатку намалюємо, як повинна виглядати наша тема, зосередившись на використанні компонентів Bootstrap за замовчуванням. В основному тема повинна мати такі компоненти:

  • Панель навігації для відображення пунктів меню.
  • Показ слайдів у заголовку, щоб повернути зображення з підписом
  • Розділ заголовка героя для показу привабливого заголовка
  • Пропонований розділ для показу ваших продуктів або основних моментів
  • FAQ та деякі контактні дані
  • Розділ нижнього колонтитула для повідомлення про авторські права

Тому тема має виглядати приблизно так:

Як створити тему Bootstrap з нуля?

Давайте зараз побудуємо нашу тему з нуля.

2 Bootstrap 4 Starter Template

Непогано знати, що таке Bootstrap. У нас є окрема категорія підручників Bootstrap, до яких ви можете звернутись для отримання більш детальної інформації. Інакше просто припустимо, що Bootstrap – це фронтенд -фреймворк, який пропонує попередньо скомпільовані файли CSS та JavaScript. Ці файли мають блоки веб -сайтів, які можна використовувати як є або налаштувати відповідно до ваших потреб.

У нашому прикладі ми починаємо зі шаблону початкового завантаження Bootstrap. Це шаблон скелета, що містить файли CSS та сценарії, як показано нижче:

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

Ви також можете розмістити файли Bootstrap на своєму сервері та замінити посилання CDN на власні. Ми використовуємо Bootstrap версії 4 для побудови нашої теми. Збережіть початковий шаблон як "bootstrap-theme.html" на своєму локальному комп’ютері та відкрийте файл за допомогою улюбленого текстового редактора. Ми рекомендуємо використовувати Notepad ++, Дужки або подібні текстові редактори для зручного редагування.

3 Додавання навігації до шаблону початківця

Перший крок – додати панель навігації за допомогою компонента навігаційної панелі. Нижче наведено код компонента навігаційної панелі Bootstrap 4 за замовчуванням:

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

Панель навігації містить такі елементи:

  • Favicon
  • Назва бренду
  • Пункти меню – одиничні та випадаючі пункти меню
  • Зразок вікна пошуку

На менших пристроях це меню слід змінити на значок гамбургера. Вставте код компонента навігаційної панелі за умовчанням, змінивши фіктивний вміст власним трохи нижче тега. Пам’ятайте, що це наш перший компонент у темі, тому не забудьте додати код безпосередньо під тегом як перший елемент.

4 Додавання слайд -шоу або каруселі

Під навігаційною панеллю вставимо стандартний компонент каруселі з підписом зображення та описом. Ми зробили зображення в повну ширину, додавши вбудований стиль "width =" 100%";". В іншому випадку переконайтеся, що ви використовуєте більші зображення, які будуть відповідати ширині пристрою.

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

Будьте обережні, що панель навігації та карусель можуть перекриватися. Ви повинні використовувати правильну висоту зображення або використовувати спеціальний CSS, щоб налаштувати перекриття. У цьому прикладі ми просто додаємо два розриви рядків

під панеллю навігації, щоб відрегулювати зазор з каруселлю.

5 Додавання розділу героя або Jumbotron

Далі додамо повнорозмірний компонент jumbotron, щоб продемонструвати розділ героя із заголовком, описом та кнопкою. Нижче наведено код розділу героя заголовка, який слід додати трохи нижче коду каруселі:

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

Ми робимо фон білим і коригуємо властивості стандартного jumbotron за допомогою користувацького CSS, як показано нижче. Додайте власний CSS між…. теги.

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

Тепер наша тема Bootstrap 4 має виглядати приблизно так:

Як створити тему Bootstrap з нуля?

6 Додавання рекомендованого розділу з макетом картки

Bootstrap має гарний компонент картки для демонстрації запропонованих розділів із зображенням, заголовком, описом та кнопкою. Давайте продемонструємо три продукти, використовуючи макет колоди, як показано нижче.

Як створити тему Bootstrap з нуля?

Нижче наведено код для розкладки картки, який слід додати трохи нижче компонента hero jumbotron. Ви можете додати код кнопки "Додати у кошик" або "Купити зараз" від PayPal або будь -якого іншого процесора платежів до елемента кнопки, щоб збирати платежі від користувачів.

<!-- 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 Розбиття на дві колонки

Наступний розділ містить два стовпці – один для додавання розділу FAQ та інший для додавання контактної форми, як показано нижче:

Як створити тему Bootstrap з нуля?

Розділ Bootstrap Two Columns

Два стовпці створюються за допомогою div з класом рядків, а потім ще двох div із класом “col-md-6", як показано нижче:

<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 Додавання поширених запитань до першої колонки з Collapse

Розділ FAQ задається за допомогою компонента згортання за замовчуванням, як показано нижче:

<!-- 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 Додавання контактної форми у другу колонку за допомогою форми

Форма контакту створюється з компонентом форми за замовчуванням Bootstrap 4 з назвою, можливістю вибору з випадаючого списку, текстовою областю для введення коментаря та кнопки надсилання.

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

Нарешті, додамо нижній колонтитул на всю ширину за допомогою текучого джамботрона.

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

Нижній колонтитул потребує трохи налаштування за допомогою такого CSS:

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

Тепер ваш шаблон Bootstrap 4 готовий, давайте прикрасимо спеціальний CSS.

9 Додавання користувацького CSS

Ви можете налаштувати будь -який компонент, додавши власний CSS. У нашому прикладі додамо такі налаштування:

  • Додайте ефект тіні до кнопки, згортання та карт з додатковим класом CSS “.btn-spl”.
  • Використовуйте клас “.outframe”, щоб додати деякі поля до пунктів меню.
  • Додайте роздільник до заголовків за допомогою класів “.title” та “.title span”.
  • Налаштуйте переповнення корпусу та поля карт для кращого вирівнювання на невеликих пристроях.

10 Остаточний шаблон теми

Зібравши всі власні CSS та компоненти, остаточний шаблон Bootstrap 4 для однієї сторінки має виглядати так, як показано у демонстраційній версії тут. Цей шаблон повністю адаптивний, і ви можете завантажити повний код нижче. Ми додали посилання на значок, мета -опис та назву для вашої сторінки у розділі заголовка. Ви також можете додати Google Analytics і код реклами на сторінці, як на демонстраційній сторінці.

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

Тепер ви можете додати більше сторінок, використовуючи компоненти за замовчуванням, такі як індикатори прогресу, сповіщення, значки, таблиці тощо та відповідно посилати в меню навігації. Якщо ви плануєте мати кілька сторінок, ми рекомендуємо завантажити файли Bootstrap на свій комп’ютер та упорядкувати структуру файлів, як показано нижче:

Як створити тему Bootstrap з нуля?

Структура файлу теми Bootstrap 4

Збережіть усі власні коди CSS у файлі “style.css” та зв’яжіть файл на всіх своїх сторінках. По суті, ви можете змінити початковий шаблон із розміщеними URL -адресами з відносними посиланнями, як показано нижче (ми розміщуємо зображення на окремому сайті, ви можете включити URL -адреси відносних зображень у 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>

Ви можете продовжувати додавати стільки сторінок і змінювати посилання на компоненті навігаційної панелі. Коли всі сторінки будуть готові, просто завантажте їх у потрібну папку на вашому сервері хостингу. Зауважте, що коли ви розміщуєте на своєму сервері попередньо скомпільовані файли, використовуйте “bootstrap.bundle.min.js”. Ця в комплекті версія містить сценарій popper, тому вам не потрібно включати “popper.js” у шаблон. Можливості нескінченні, і вам просто потрібно витратити кілька днів на створення власної теми або сайту.

Висновок

Фреймворк Bootstrap 4 є більш потужним, ніж попередня версія 3. Коли ви плануєте створювати незалежні теми, настав час навчитися хитрощів і розпочати власний бізнес з темами. Навіть для налаштувань вам не потрібно витрачати занадто багато часу. У мережі є сотні безкоштовних наборів інтерфейсу, які можна використовувати для налаштування компонентів, щоб додати професійного вигляду вашій темі.

Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі