Создаем одностраничник на Bootstrap 4 (код шаблона)

Здравствуйте, давайте с “нуля” создадим отзывчивый одностраничник на 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;
}

}

На этом всё! Красивых Вам сайтов!