Узнаем Bootstrap 4 за 30 минут, создавая лендинг
🥳 Подписывайтесь на мой Twitter! ↪️ @stassonmars — теперь там ещё больше из мира фронтенда, да и вообще поговорим. 🪀Подписывайтесь, скоро будет много нового и ещё больше интересного ✨
Есть много версий Bootstrap, но 4 пока что является самой последней. В этой статье будем делать сайт лендинг с использованием Bootstrap 4.
Перевод статьи Learn Bootstrap 4 in 30 minutes by building a landing page website
Что нужно знать?
Перед началом вам нужно убедиться в том, что вы владеете кое-какими умениями, для того, чтобы изучить и начать использовать такой фреймворк как Bootstrap:
Основы HTML
Простые знания CSS
И немного простого Jquery
Содержание
Мы заденем следующие темы, во время разработки сайта
Скачиваем и устанавливаем Bootstrap 4
Новый функционал в Bootstrap 4
Скачиваем и устанавливаем Bootstrap 4
Есть три способа установки и внедрения Bootstrap 4 в ваш проект.
1. Использование npm
Вы можете установить Bootstrap 4 запустив команду npm install bootstrap
2. Использование CDN
Вставьте эту ссылку в ваш проект между тегами <head></head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">3. Скачивание библиотеки Bootstrap 4 и ее локальное использование
Структура нашего проекта должна выглядеть так
Новый функционал в Bootstrap 4
Чего нового в Bootstrap 4? И в чем разница между Bootstrap 3 и 4?
Четвертая версия идет в поставке с некоторыми отличными функциями, которых нет в третьей. А именно:
Bootstrap 4 написан на Flexbox Grid, то есть на флексах, в то время как Bootstrap 3 был написан с использованием флоатов.
Если вы новичок во флексах, то вот подробное руководство об этом функционале.
Bootstrap 4 использует rem CSS единицы, в то время как Bootstrap 3 использует пиксели.
Панели, миниатюрки и велсы были полностью убраны.
Без углубления в детали, давайте перейдем к другим важным вещам.
Система сеток в Bootstrap
Система сеток в Bootstrap помогает вам создать шаблон и легко сделать адаптивный сайт. Тут нет каких-либо изменений в названиях классов, кроме .xs класса, который больше не существует в Bootstrap 4.
Советую почитать статью — Сетка в Bootstrap 4. Подробное руководство
Сетка разделена на 12 столбцов, следовательно, ваш шаблон будет основываться на этом факте.
Чтобы использовать систему сеток, вам придется добавить класс .row к главному диву.
col-lg-2 // класс используется для больших устройств, таких как ноутбукиcol-md-2 // класс используется для средних по размерам устройств, таких как планшетыcol-sm-2 // этот класс используется для маленьких устройств, таких как мобильные телефоны.
Панель навигации
Обертка для панели навигации в Bootstrap 4 довольно крута. Она очень удобна, когда надо сделать адаптивный navbar.
Для этого, мы добавим класс navbar нашему index.html файлу.
<!-- navbar -->
<nav class="navbar navbar-expand-lg fixed-top ">
<a class="navbar-brand" href="#">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarSupportedContent"> <ul class="navbar-nav mr-4">
<li class="nav-item">
<a class="nav-link" data-value="about" href="#">About</a> </li>
<li class="nav-item">
<a class="nav-link " data-value="portfolio"href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link " data-value="blog" href="#">Blog</a> </li>
<li class="nav-item">
<a class="nav-link " data-value="team" href="#"> Team</a> </li>
<li class="nav-item">
<a class="nav-link " data-value="contact" href="#">Contact</a> </li>
</ul>
</div></nav>Создайте и подключите main.css файл, чтобы вы могли кастомизировать CSS стиль.
Вставьте его в head тег вашего index.html файла:
<link rel="stylesheet" type="text/css" href="css/main.css">
Добавьте цветов панели навигации:
.navbar{ background:#F97300;}.nav-link , .navbar-brand{ color: #f4f4f4; cursor: pointer;}.nav-link{ margin-right: 1em !important;}.nav-link:hover{ background: #f4f4f4; color: #f97300; }.navbar-collapse{ justify-content: flex-end;}.navbar-toggler{ background:#fff !important;}
Новая сетка построена на флексах, так что выравнивание вам нужно уже делать с помощью Flexbox свойств. Для примера, чтобы разместить меню навигации справа, нам надо добавить свойство justify-content и выставить ему flex-end.
.navbar-collapse{
justify-content: flex-end;
}Добавьте .fixed-top класс в панель навигации, чтобы сделать её фиксированной.
Чтобы сделать фоновый цвет ярким, добавьте .bg-light. Для темного фона, добавьте .bg-dark, а для светло голубого фона, добавьте класс .bg-primary.
.bg-dark{
background-color:#343a40!important
}
.bg-primary{
background-color:#007bff!important
}Шапка
<header class="header">
</header>Давайте попробуем создать разметку для шапки.
Тут мы хотим сделать так, что шапка забирала всю высоту окна, следовательно нам понадобится немного JQuery.
Для начала создадим файл под названием main.js и вставим его в index.html перед закрывающим тегом body.
<script type="text/javascript" src='js/main.js'></script>
В main.js вставим немного кода JQuery.
$(document).ready(function(){
$('.header').height($(window).height());})
Было бы круто, если бы мы выставили фон для шапки.
/*Стиль хедера*/
.header{
background-image: url('../images/headerback.jpg');
background-attachment: fixed;
background-size: cover;
background-position: center;
}
Давайте добавим наложение, чтобы шапка выглядела покруче.
Добавьте этот код в ваш index.html файл.
<header class="header">
<div class="overlay"></div>
</header>Далее добавьте это в ваш main.css файл.
.overlay{
position: absolute;
min-height: 100%;
min-width: 100%;
left: 0;
top: 0;
background: rgba(244, 244, 244, 0.79);
}Теперь нам надо добавить описание в шапку.
Чтобы обернуть наше описание, нам сначала надо создать <div> и выдать ему класс .container.
.container это класс в Bootstrap, который поможет вам обернуть ваш контент и сделает ваш шаблон более адаптивным.
<header class="header">
<div class="overlay"></div>
<div class="container">
</div>
</header>Далее добавьте еще один div, который будет влючать в себя описание.
<div class="description">
<h1> Hello ,Welcome To My official Website
<p> cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<button class="btn btn-outline-secondary btn-lg">See more</button> </h1>
</div>Мы выставим ему класс .description и добавим .text-center, чтобы убедиться в том, что контент размещён в центре страницы.
Кнопки
Добавьте класс .btn btn-outline-secondary к элементу button. Вообще есть много других классов для кнопок. Вот несколько примеров.
Вот как выглядит стилизация для .description в main.css файле.
.description{
position: absolute;
top: 30%;
margin: auto;
padding: 2em;}
.description h1{
color:#F97300 ;
}
.description p{
color:#666;
font-size: 20px;
width: 50%;
line-height: 1.5;
}
.description button{
border:1px solid #F97300;
background:#F97300;
color:#fff;
}
После всего этого, наша шапка будет выглядеть таким образом.
Секция информации
В этой секции мы будем использовать сетку Bootstrap, что бы разделить секцию на две части.
Чтобы начать сетку, мы выставим класс .row родителю div.
<div class="row"></div>
Первая секция будет по левую сторону и будет содержать изображение, а вторая секция будет по правую сторону и будет включать в себя описание.
Каждый div будет брать по 6 колонок — это означает, что они возьмут по половине секции. Помните, что сетка делится на 12 колонок.
В первом div по левую сторону:
<div class="row">
// левая сторона
<div class="col-lg-4 col-md-4 col-sm-12">
<img src="images/team-3.jpg" class="img-fluid">
<span class="text-justify">S.Web Developer</span>
</div></div>
После добавления HTML элементов на правую сторону, структура нашего кода выглядеть следующим образом:
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<img src="images/team-3.jpg" class="img-fluid">
<span class="text-justify">S.Web Developer</span>
</div>
<div class="col-lg-8 col-md-8 col-sm-12 desc">
<h3>D.John</h3>
<p>
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>А вот и сам CSS:
.about{
margin: 4em 0;
padding: 1em;
position: relative;
}
.about h1{
color:#F97300;
margin: 2em;
}
.about img{
height: 100%;
width: 100%;
border-radius: 50%
}
.about span{
display: block;
color: #888;
position: absolute;
left: 115px;
}
.about .desc{
padding: 2em;
border-left:4px solid #10828C;
}
.about .desc h3{
color: #10828C;
}
.about .desc p{
line-height:2;
color:#888;
}Секция портфолио
Теперь давайте продвинемся дальше и сделаем секцию портфолио, которая будет включать в себя галерею.
Структура нашего HTML кода для секции порфолио выглядит так.
<!-- portfolio -->
<div class="portfolio">
<h1 class="text-center">Portfolio</h1>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<img src="images/portfolio/port13.png" class="img-fluid">
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<img src="images/portfolio/port1.png" class="img-fluid">
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<img src="images/portfolio/port6.png" class="img-fluid">
</div><div class="col-lg-4 col-md-4 col-sm-12">
<img src="images/portfolio/port3.png" class="img-fluid">
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<img src="images/portfolio/port11.png" class="img-fluid">
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<img src="images/portfolio/electric.png" class="img-fluid">
</div><div class="col-lg-4 col-md-4 col-sm-12">
<img src="images/portfolio/Classic.jpg" class="img-fluid">
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<img src="images/portfolio/port1.png" class="img-fluid">
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<img src="images/portfolio/port8.png" class="img-fluid">
</div>
</div>
</div>
</div>
Добавляя .img-fluid каждому изображению, мы делаем их адаптивными.
Каждый элемент в нашей галерее будет забирать себе четыре колонки, помните, что col-md-4 это для средних расширений экранов, а col-lg-4 для больших экранов. Это равносильно 33.33333% на больших экранах, таких как десктопы или большие планшеты. А маленькие девайсы получат 12 колонок, то есть iPhone и другие мобильные устройства будут забирать по 100% контейнера.
Давайте добавим немного стилизации нашей галерее.
/*Portfolio*/
.portfolio{
margin: 4em 0;
position: relative;
}
.portfolio h1{
color:#F97300;
margin: 2em;
}
.portfolio img{
height: 15rem;
width: 100%;
margin: 1em;}
Секция блога
Карточки
Карточки в Bootstrap 4 делают дизайн блога куда проще. В особенности, карточки хорошо подходят статей и постов.
Чтобы создать карточку, мы используем класс .card и назначаем его div элементу. Сам класс карточки содержит много функций:
.card-header определяет карточку шапки
.card-body для карточки основного контента
.card-title заголовок карточки
.card-footer определяет подвал карточки
.card-image для изображения карточки
Таким образом, HTML код нашего сайта должен сейчас выглядеть таким образом:
<!-- Posts section -->
<div class="blog">
<div class="container">
<h1 class="text-center">Blog</h1>
<div class="row">
<div class="col-md-4 col-lg-4 col-sm-12">
<div class="card">
<div class="card-img">
<img src="images/posts/polit.jpg" class="img-fluid">
</div>
<div class="card-body">
<h4 class="card-title">Post Title</h4>
<p class="card-text">
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="card-footer">
<a href="" class="card-link">Read more</a>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4 col-sm-12">
<div class="card">
<div class="card-img">
<img src="images/posts/images.jpg" class="img-fluid">
</div>
<div class="card-body">
<h4 class="card-title">Post Title</h4>
<p class="card-text">
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="card-footer">
<a href="" class="card-link">Read more</a>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4 col-sm-12">
<div class="card">
<div class="card-img">
<img src="images/posts/imag2.jpg" class="img-fluid">
</div>
<div class="card-body">
<h4 class="card-title">Post Title</h4>
<p class="card-text">
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="card-footer">
<a href="" class="card-link">Read more</a>
</div>
</div>
</div>
</div>
</div>
</div>Нам нужно добавить немного стилизации этим карточкам.
.blog{
margin: 4em 0;
position: relative;
}
.blog h1{
color:#F97300;
margin: 2em;
}
.blog .card{
box-shadow: 0 0 20px #ccc;
}
.blog .card img{
width: 100%;
height: 12em;
}
.blog .card-title{
color:#F97300;
}
.blog .card-body{
padding: 1em;
}После добавления секции блога на наш сайт, дизайн должен выглядеть примерно таким образом:
круто, да?
Секция команды
В этой секции мы будем применять систему сеток для равного распределения места между изображениями. Каждое наше изображение занимает .col-md-3 контейнера, что равно 25% общего места. Вот наша HTML структура:
<!-- Team section -->
<div class="team">
<div class="container">
<h1 class="text-center">Our Team</h1>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 item">
<img src="images/team-2.jpg" class="img-fluid" alt="team">
<div class="des">
Sara
</div>
<span class="text-muted">Manager</span>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 item">
<img src="images/team-3.jpg" class="img-fluid" alt="team">
<div class="des">
Chris
</div>
<span class="text-muted">S.enginner</span>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 item">
<img src="images/team-2.jpg" class="img-fluid" alt="team">
<div class="des">
Layla
</div>
<span class="text-muted">Front End Developer</span>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 item">
<img src="images/team-3.jpg" class="img-fluid" alt="team">
<div class="des">
J.Jirard
</div>
<span class="text-muted">Team Manger</span>
</div>
</div>
</div>
</div>И давайте добавим немного стилей:
.team{
margin: 4em 0;
position: relative;
}
.team h1{
color:#F97300;
margin: 2em;
}
.team .item{
position: relative;
}
.team .des{
background: #F97300;
color: #fff;
text-align: center;
border-bottom-left-radius: 93%;
transition:.3s ease-in-out;}
Было бы неплохо добавить анимированное наложение при наведении на изображение.
Чтобы применить этот эффект, добавим стили как показано ниже в наш main.css файл:
.team .item:hover .des{
height: 100%;
background:#f973007d;
position: absolute;
width: 89%;
padding: 5em;
top: 0;
border-bottom-left-radius: 0;
}Супер круто!
Форма связи
Форма обратной связи это последняя секция, которую нам надо добавить и затем мы закончим.
Эта секция будет содеражть форму, через которую посетители смогут отправить вам письмо или отзыв. И конечно же мы применим несколько классов Bootstrap, чтобы сделать дизайн красивым и адаптивным.
Как и Bootstrap 3, Bootstrap 4 также использует .form-control класс для полей input, но в 4-й версии появился новый функционал, такой как — переход с устаревшего .input-group-addon на .input-group-prepend, чтобы использовать иконки как лейблы.
Вообще посмотрите полную документацию на Bootstrap 4 по этому поводу. В нашей форме обратной связи мы обернем каждый input в div, который имеет класс .form-group.
Теперь наш index.html выглядит примерно так.
<!-- Contact form -->
<div class="contact-form">
<div class="container">
<form>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<h1>Get in Touch</h1>
</div>
<div class="col-lg-8 col-md-8 col-sm-12 right">
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="Your Name" name="">
</div>
<div class="form-group">
<input type="email" class="form-control form-control-lg" placeholder="YourEmail@email.com" name="email">
</div>
<div class="form-group">
<textarea class="form-control form-control-lg">
</textarea>
</div>
<input type="submit" class="btn btn-secondary btn-block" value="Send" name="">
</div>
</div>
</form>
</div>
</div>А вот стили для секции обратной связи:
main.css
.contact-form{
margin: 6em 0;
position: relative;
}.contact-form h1{
padding:2em 1px;
color: #F97300;
}
.contact-form .right{
max-width: 600px;
}
.contact-form .right .btn-secondary{
background: #F97300;
color: #fff;
border:0;
}
.contact-form .right .form-control::placeholder{
color: #888;
font-size: 16px;
}
Шрифты
Я считаю, что стандартные шрифты ужасны, по-этому нам надо подключить Google Font API и мы уже там выберем Raleway шрифт, который очень хорошо подойдет к нашему шаблону.
Давайте добавим ссылку в наш main.css файл:
@import url(‘https://fonts.googleapis.com/css?family=Raleway');
и выставите глобальный стиль для HTML тегов шапки:
html,h1,h2,h3,h4,h5,h6,a{
font-family: "Raleway";
}Эффект скролла
Последнее, что нам нужно сделать это добавить эффект скролла. Тут мы снова применим JQuery. Не переживайте, если вы незнакомы с ним, просто добавьте этот код в ваш main.js файл.
$(".navbar a").click(function(){
$("body,html").animate({
scrollTop:$("#" + $(this).data('value')).offset().top
},1000)
})И добавьте атрибут data-value каждой ссылке в панели навигации:
<li class="nav-item">
<a class="nav-link" data-value="about" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link " data-value="portfolio" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link " data-value="blog" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link " data-value="team" href="#">
Team</a>
</li>
<li class="nav-item">
<a class="nav-link " data-value="contact" href="#">Contact</a>
</li>Выставите id атрибут для каждой секции.
Примите во внимание, id должен быть идентичен data-value атрибуту в ссылке панели навигации. Это нужно, чтобы скролл работал должным образом.
<div class="about" id="about"></div>Завершение и выводы
Bootstrap 4 это отличный вариант для создания вашего веб приложения. Он предоставляет высококачественные элементы UI и его легко настраивать, интегрировать и использовать. Он также помогает вам внедрять адаптивность на сайт, следовательно с его помощью вы предоставите пользователям премиальный опыт взаимодействия с вашим сайтом.
