Здравствуйте, давайте с “нуля” создадим отзывчивый одностраничник на Bootstrap 4 с: паралакс эффектом в шапке сайта, с всплывающими подсказками, таблицами, плитками и контактной формой для отправки сообщений.
Как будет выглядеть наш одностраничник на Bootstrap 4:
Скачать полный его код можно здесь: Готовый код проекта по созданию одностраничника!
Для работы по созданию одностраничника Вам понадобится бесплатный редактор кода (например Notepad++, который можно скачать здесь: “notepad-plus-plus.org”).
Также для одностаничника Вам понадобится выбрать хостинг вот здесь –
– здесь Вы найдете лучшие из них.
Первое, что нужно сделать – это скачать Bootstrap по следующей ссылке: “github.com/twbs/bootstrap/”
Для данного проекта будем использовать версию bootstrap v4.0.0-alpha, скачать её можно по следующей ссылке: “github.com/twbs/bootstrap/archive/v4.0.0-alpha.zip”
Структура папок для одностраничника будет состоять из трех папок и одного файла HTML:
– файл index.html;
– папка IMG для изображений;
– папка CSS для таблиц стилей;
– папка JS для JavaScript скриптов.
Поэтому создаём папку проекта с приведенными выше тремя пустыми папками и файлом index.html (создаем его с помощью Notepad++, при сохранении выбирая тип html):
Распаковываем скаченный bootstrap. Здесь Вы найдете множество файлов и папок, но для нашего сайта понадобятся только некоторые из них.
Заходим в папку dist, далее в подпапку css, копируем здесь файл bootstrap.min.css и вставляем его в папку создаваемого нами одностраничника, в его подпапку css.
После опять заходим в папку dist, далее в подпапку js, копируем bootstrap.min.js и вставляем его в папку создаваемлго нами одностраничника, в его подпапку js.
Также в папку создаваемого нами одностраничника, в папку js, нужно закачать файл tether.min.js, который можно скачать:
с моего сайта – скачать tether.min.js
или здесь: “github.com/HubSpot/tether” жмем на зеленую кнопку “Clone or Download”
скачиваем zip проект, распаковываем, заходим в папку dist, подпапку js и находим в ней файл tether.min.js.
tether.min.js – это JavaSrcipt библиотека подсказок.
Папку img заполняем картинками, которые можно скачать – здесь.
Создадим ещё один файл custom.css в папке css нашего одностраничника, в нём будут храниться наши пользовательские CSS стили – для этого воспользуемся Notepad++, при сохранении файла выбираем тип css:
Теперь наполняем файлы кодом!
Так файл index.html будет иметь следующей код:
<!-- DOCTYPE -->
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Boostrap 4 - Tutorial</title>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="author" content="Mnogoblog">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Lato:400,700,900,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway:400,300,600,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<!---CONTENT HERE-->
<!--wrapper start-->
<div class="wrapper" id="wrapper">
<!--header-->
<header>
<div class="jumbotron jumbotron-fluid" id="banner">
<div class="parallax text-center" style="background-image: url(img/cover.jpg);">
<div class="parallax-pattern-overlay">
<div class="container text-center" id="size-banner">
<a href="#"><img id="site-title" src="img/logo.png" alt="logo"/></a>
<h2 class="display-2">Boostrap 4</h2>
<h3 class="learn">Как создать одностраничник?</h3>
</div>
</div>
</div>
</div>
</header>
<!--about us-->
<section class="aboutus" id="aboutus">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="heading text-center">
<img class="dividerline" src="img/sep.png" alt="">
<h2>About Boostrap 4</h2>
<img class="dividerline" src="img/sep.png" alt="">
<h3><mark>Bootstrap</mark> - это свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML- и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения. Bootstrap использует <mark>современные наработки</mark> в области CSS и HTML, поэтому необходимо быть внимательным при поддержке старых браузеров. </h3>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="card text-center">
<img class="card-img-top" src="img/card1.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Это карта #1</h4>
<p class="card-text">Простой пример карты с названием (титулом) и простым содержимым (контентом). </p>
<a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Подробнее...</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card card-inverse card-primary text-center">
<img class="card-img-top" src="img/card2.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Это карта #2</h4>
<p class="card-text">Простой пример карты с названием (титулом) и простым содержимым (контентом).</p>
<a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Подробнее...</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card card-inverse card-success text-center">
<img class="card-img-top" src="img/card3.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Это карта #3</h4>
<p class="card-text">Простой пример карты с названием (титулом) и простым содержимым (контентом).</p>
<a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Подробнее...</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card card-inverse card-info text-center">
<img class="card-img-top" src="img/card4.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Это карта #4</h4>
<p class="card-text">Простой пример карты с названием (титулом) и простым содержимым (контентом).</p>
<a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Подробнее...</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="features" id="features">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="heading text-center">
<img class="dividerline" src="img/sep.png" alt="">
<h2>Расширенные возможности</h2>
<img class="dividerline" src="img/sep.png" alt="">
<h3><a href="#" data-toggle="tooltip" title="This is a tooltip">Bootstrap 4 </a> имеет класс <a href="#" data-toggle="tooltip" title="Make all backgrounds black!">–inverse</a>, который задает фон самой таблице. Также благодаря подключению библиотеки <a href="#" data-toggle="tooltip" title="Tether is a JavaScript library for efficiently making an absolutely positioned element stay next to another element on the page. For example, you might want a tooltip or dialog to open, and remain, next to the relevant item on the page.">Tether</a> улучшена работа с подсказками. </h3>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<table class="table table-inverse">
<thead>
<tr><th colspan="3" class="text-center">Bootstrap 3</th> </tr>
<tr>
<th>Size</th>
<th>Device</th>
<th>Class</th>
</tr>
</thead>
<tbody>
<tr>
<td>Extra Small</td>
<td>Less than 768px</td>
<td>col-xs</td>
</tr>
<tr>
<td>Small</td>
<td>768px and up</td>
<td>col-sm</td>
</tr>
<tr>
<td>Medium</td>
<td>992px and up</td>
<td>col-md</td>
</tr>
<tr>
<td>Large</td>
<td>1200px and up</td>
<td>col-lg</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-6">
<table class="table table-inverse">
<thead>
<tr><th colspan="3" class="text-center">Bootstrap 4</th> </tr>
<tr>
<th>Size</th>
<th>Device</th>
<th>Class</th>
</tr>
</thead>
<tbody>
<tr>
<td>Extra Small</td>
<td>Less than 34em</td>
<td>col-xs</td>
</tr>
<tr>
<td>Small</td>
<td>34em and up</td>
<td>col-sm</td>
</tr>
<tr>
<td>Medium</td>
<td>48em and up</td>
<td>col-md</td>
</tr>
<tr>
<td>Large</td>
<td>62em and up</td>
<td>col-lg</td>
</tr>
<tr>
<td>Extra Large</td>
<td>75em and up</td>
<td>col-xl</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!--Contact Us-->
<section class="contact" id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="heading">
<img class="dividerline" src="img/sep.png" alt="">
<h2>Связаться с нами</h2>
<img class="dividerline" src="img/sep.png" alt="">
<h3>Задайте нам любой вопрос, мы объязательно на него ответим!
</h3>
</div>
</div>
</div>
</div>
<div class="container mx-width">
<div class="row">
<div class="done">
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">×</button>
Сообщение было успешно отправлено. Спасибо!
</div>
</div>
<div class="col-md-12">
<form>
<fieldset class="form-group">
<input type="text" class="form-control" id="Name" placeholder="ФИО">
</fieldset>
<fieldset class="form-group">
<input type="email" class="form-control" id="Email" placeholder="Email">
</fieldset>
<fieldset class="form-group">
<textarea class="form-control" rows="3" placeholder="Текст сообщения"></textarea>
</fieldset>
<button type="submit" class="contact submit">Отправить</button>
</form>
</div>
</div>
</div>
</section>
<!--footer-->
<section class="footer" id="footer">
<div class="container">
<div class="row">
<div class="col-lg-12">
<ul>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-pinterest"></i></a></li>
</ul>
<p>
Mnogoblog.ru<br>
</p>
</div>
</div>
</div>
</section>
</div><!--wrapper end-->
<!-- JavaScripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/tether.min.js"></script>
<script type="text/javascript">
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
</body>
</html>
Файл custom.css (который находится в папке css) будет иметь следующий код:
/*
Tutorial Name: Bootstrap 4 Tutorial
Author:
*/
/* GENERAL STYLES
-------------------------------------------------*/
body {
font-family:'Lato', sans-serif;
font-size:1em;
color:#777;
font-weight:300;
line-height:1.7;
overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6 {
color:#333;
line-height:1.4;
font-weight:700;
}
.mx-width {
max-width:960px;
margin:0 auto;
}
a,a:hover {
color:#563d7c;
text-decoration:none;
}
img{
width:100%;
max-width: 100%;
height:auto;
}
.card-img-top{
width:100%;
height:auto;
}
header {
padding-bottom:50px;
}
.display-2 {
font-family:'Lato';
font-size:60px;
line-height:1;
font-weight:300;
color:#fff
}
.learn {
font-family:'Lato';
font-size:27px;
line-height:1.4;
font-weight:300;
color:#fff;
}
.jumbotron-fluid {
padding:0;
}
/* PARALLAX
-------------------------------------------------*/
.parallax {
text-align:center;
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
background-attachment:fixed!important;
overflow:hidden;
}
.parallax-pattern-overlay {
background-image:url(../img/pattern.png);
background-repeat:repeat;
}
#size-banner{
height:580px;
padding-top:170px;
}
/* HEADING
-------------------------------------------------*/
.heading {
padding-bottom:15px;
text-align:center;
max-width:960px;
margin:0 auto;
padding-top:80px;
}
.heading h2 {
font-weight:600;
font-family:'Raleway';
font-size:40px;
color:#333;
margin:0;
padding:5px;
}
.heading h3 {
font-size:1em;
line-height:1.7;
}
#site-title {
max-width:150px;
}
/* CONTACT
-------------------------------------------------*/
input.form-control {
background:#fff;
border:solid 1px #ddd;
color:#000;
padding:15px 30px;
margin-right:3%;
margin-bottom:30px;
outline:none;
border-radius: 0;
}
textarea.form-control {
background:#fff;
color:#000;
border:solid 1px #ddd;
padding:15px 30px;
margin-bottom:40px;
outline:none;
height:200px;
border-radius: 0;
}
button.contact.submit {
background:#333;
font-family:'Lato',sans-serif;
color:#fff;
font-size:1em;
font-weight:400;
text-align:center;
margin:0;
border:none!important;
border-radius:3px;
padding:15px 45px;
}
button.contact.submit:hover {
background:#563d7c;
}
.form-control:focus{
border-color: #563d7c;
outline: 0;
}
.done {
display:none;
}
/* FOOTER
-------------------------------------------------*/
.footer {
background:#563d7c;
margin-top:120px;
position:relative
}
.footer .container {
padding:60px 0 20px;
}
.footer ul {
margin:0 auto;
margin-bottom:30px;
margin-top:10px;
text-align:center;
list-style-type:none;
padding-left:0;
}
.footer ul li {
text-align:center;
display:inline-block;
background:rgba(0,0,0,0.2);
color:#fff;
line-height:45px;
margin:0 4px;
width:45px!important;
height:45px!important;
-webkit-border-radius:3px;
border-radius:3px;
}
.footer ul li:hover {
background:#2a2a2a;
}
.footer ul li:hover a {
color:#fff;
}
.footer ul li a {
color:#fff;
width:42px!important;
height:42px!important;
}
.footer ul li a i {
line-height:45px;
color:#fff;
}
.footer p {
color:#fff;
font-size:.9em;
line-height:24px;
font-weight:300;
text-align:center;
text-transform:uppercase;
}
.footer a,.footer a:hover {
color:#fff;
}
/* MEDIA QUERIES
-------------------------------------------------*/
@media screen and (max-width:768px) {
input.contact.col-md-6{
width:40.5%;
margin: 15px 15px 0 58px;
}
textarea.contact.col-md-12 {
margin: 15px 15px 0 58px;
}
button#submit.contact.submit{
margin: 15px 15px 0 42px;
}
}
На этом всё! Красивых Вам сайтов!