Создать landing page bootstrap не так уж и сложно, если вы обладаете определенными знаниями и опытом. Время от времени мне звонят мои друзья с подобными вопросами - ты же программист, объясни как сделать landing page на bootstrap. Я отвечаю - открывай блокнот, пиши

Ну, во-первых, не корректно говорить “сделать сайт на bootstrap”. Bootsrap это всего лишь CSS фреймворк, который можно применить при разработке веб-сайта.

Twitter Bootstrap — свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML и CSS шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейсов, включая JavaScript расширения.

Честно говоря, я не понимаю почему люди, которые не умеют программировать, никогда этим не занимались тратят свое время на подобные вещи, ведь гораздо проще заказать посадочную страницу. Да, сейчас есть множество инструментов для самостоятельного создания bootstrap лендинга, такие как Adobe Muse, например, однако, до сих пор проблема генерации мусорного кода не может решить до конца ни один WYSIWYG редактор, в следствии чего веб сайт с мусорным кодом загружается гораздо медленнее, чем если бы вы верстали его в блокноте. Лично я никогда не пользовался ни одним из WYSIWYG редакторов и все сайты верстал только в блокноте. К тому же возникают проблемы с совместимостью javascript кода.

В этой статье я покажу вам что ничего страшного в блокноте с HTML кодом нет. Расскажу и покажу как создать landing page bootstrap. Если вы относитесь к тем кто хочет потратить свое время, создав шаблон landing page bootstrap, которая будет грузиться быстрее, чем если бы вы создали свой сайт с помощью Adobe Muse, то это статья для вас.

Итак, приступим к созданию адаптивного landing page bootstrap пошагово Для начала, как всегда, необходимо определиться со структурой вашего будущего сайта. Я не стал придумывать велосипед, просто нагуглил структуру для примера. Вот стандартный шаблон лендинг пейдж bootstrap. Вы так же можете придумать свои шаблоны лендинга и воспользоваться прототипом, который приведен в этой статье.

Шаблон лендинга

Далее создаем директорию в любом месте вашего рабочего компьютера и в этой директории создаем файл index.html. В этом файле создаем разделы, которые указаны в нашей структуре: Дескрипт, форма захвата, акция, тригеры, отзывы.

<html>
<head>
	<title>Лендинг, созданный в блокноте за 5 минут</title>
	<meta name="description" content="Закажите разработку лендинга здесь - http://vsemlp.ru">
</head>
<body>
<div class="container">
	<!-- Дескрипт -->
	<div class="header-descript"></div>

	<!-- Форма захвата -->
	<div class="image-form-container"></div>

	<!-- Акция -->
	<div class="sale"></div>

	<!-- Тригеры -->
	<div class="triggers"></div>

	<!-- Отзывы -->
	<div class="responses"></div>

	<!-- Футер -->
	<div class="footer"></div>
</div>
</body>
</html>

Далее скачиваем bootstrap с официального сайта или по этой ссылке. И повторяем такую структуру каталогов как показано на картинке ниже.

Структура каталога лендинга

В директории styles будут находится стили для сайта, в директории images - изображения. Далее в файл index.html добавляем несколько строк, которые будут отвечать за использование bootstrap, эти строки нужно вставить между тегами head.

	<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap-theme.min.css">
	<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>	

И начинаем верстать уже сами блоки. Для этого создаем файл styles.css в директории styles нашего проекта, в котором задаем начальные настройки отображения страницы.

html, body {
	margin: 0px; /** Отступы со всех сторон равны 0px **/
	padding: 0px; /** Отступы со всех сторон равны 0px **/
	font-family: Arial, Helvetica, 'sans-serif'; /** Шрифты по умолчанию **/
}

.container {
	width: 1000px;
}

И включаем файл styles.css в наш index.html, следующей строкой, которую нужно вставить между тегами head.

<link rel="stylesheet" href="styles/styles.css">

Для того, чтобы bootstrap корректно работал в вашем проекте, необходимо создать блок с классом .container. Это обязательный элемент, без этого стили будут применяться не корректно.

Далее начинаем задавать стили уже самим блокам, и начнем с самого верхнего - дескрипт. В моем примере я сильно заморачиваться не буду, только лишь расскажу принципы. Если вы захотите улучшить стилистическое оформления, то вы сможете это сделать уже намного быстрее. В этом примере блок дескрипта у меня будет с фиолетовым фоном и белым текстом. Это делается вот так:

.header-descript {
	background: #563d7c;
	color: white;
}

Далее пишем пишем дескрипт. Предположим мы делаем лендинг по аренде мультимедийного оборудования.

	<!-- Дескрипт -->
	<div class="header-descript row">
		<div class="header-title">
			<span>Аренда мультимедийного оборудования для организации видео игр</span>
		</div>
		<div class="header-description">
			<span>Xbox 360, kineckt, проектор и профессиональный экран. <br />И день рождения вашего ребенка станет еще интереснее.</span>
		</div>
	</div>

И делаем дескрипт большим и красивым, по центру.

.header-descript .header-title {
	margin-top: 10px;
	font-size: 42px;
	text-align: center;
}

.header-descript .header-description {
	font-size: 20px;
	text-align: center;
	font-style: italic;
}

Далее по плану фотография и форма захвата, верстаем следующим образом:

	<!-- Форма захвата -->
	<div class="image-form-container row">
		<div class="left-photo col-md-6"></div>
		<div class="right-form col-md-6">
			<form action="">
				<form class="form-horizontal">
				  <div class="form-group">
					<label for="inputName" class="col-sm-2 control-label">Имя</label>
					<div class="col-sm-10">
					  <input type="name" class="form-control" id="inputName" placeholder="Введите ваше имя">
					</div>
				  </div>
				  <div class="form-group">
					<label for="inputPhone" class="col-sm-2 control-label">Телефон</label>
					<div class="col-sm-10">
					  <input type="name" class="form-control" id="inputPhone" placeholder="Введите телефон для связи">
					</div>
				  </div>
				  <div class="form-group">
					<div class="col-sm-offset-2 col-sm-10">
					  <button type="submit" class="btn btn-default">Заказать</button>
					</div>
				  </div>
				</form>			
			</form>
		</div>
	</div>

и применяем к этому ко всему стили

.image-form-container {
	margin-top: 10px;
}
.image-form-container .left-photo {
	background: #eee;
	height: 300px;
}

Далее верстаем блок с акцией

	<!-- Акция -->
	<div class="sale row">
		<div class="title">
			<span>Успейте сделать до 31 октября и получить дополнительные 10 видео игр бесплатно</span>
		</div>
	</div>

и применяем к нему стили

.sale {
	background: #563d7c;
	margin-top: 10px;
	color: white;
}

.sale .title {
	font-size: 28px;
	text-align: center;
}

Далее верстаем блок с триггерами доверия.

	<!-- Тригеры -->
	<div class="triggers row">
		<div class="triggers-title col-md-12">
			<span>Почему с нами выгодно работать</span>
		</div>
		<div class="col-md-12">
			<div class="row">
				<div class="col-md-3 trigger">C нами выгодно работать</div>
				<div class="col-md-3 trigger">C нами выгодно работать</div>
				<div class="col-md-3 trigger">C нами выгодно работать</div>
				<div class="col-md-3 trigger">C нами выгодно работать</div>
			</div>
		</div>
	</div>

И применяем к этому стили.

.triggers {
	margin-top: 10px;
}

.triggers .triggers-title {
	font-size: 24px;
	text-align: center;
}

.trigger, .response {
	text-align: center;
	height: 50px;
	border: 1px solid #eee;
}

Отзывы реализуем по такому же принципу как и триггеры доверия.

	<!-- Отзывы -->
	<div class="responses row">
		<div class="responses-title col-md-12">
			<span>Отзывы</span>
		</div>
		<div class="col-md-12">
			<div class="row">
				<div class="col-md-3 response">Отзыв</div>
				<div class="col-md-3 response">Отзыв</div>
				<div class="col-md-3 response">Отзыв</div>
				<div class="col-md-3 response">Отзыв</div>
			</div>
		</div>		
	</div>

и стили

.responses {
	margin-top: 10px;
}

.responses .responses-title {
	font-size: 24px;
	text-align: center;
}

Полная версия index.html.

<html>
<head>
	<title>Лендинг, созданный в блокноте за 5 минут</title>
	<meta name="description" content="Закажите разработку лендинга здесь - http://vsemlp.ru">
	<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap-theme.min.css">
	<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>	
	<link rel="stylesheet" href="styles/styles.css">	
</head>
<body>
<div class="container">
	<!-- Дескрипт -->
	<div class="header-descript row">
		<div class="header-title">
			<span>Аренда мультимедийного оборудования для организации видео игр</span>
		</div>
		<div class="header-description">
			<span>Xbox 360, kineckt, проектор и профессиональный экран. <br />И день рождения вашего ребенка станет еще интереснее.</span>
		</div>
	</div>

	<!-- Форма захвата -->
	<div class="image-form-container row">
		<div class="left-photo col-md-6"></div>
		<div class="right-form col-md-6">
			<form action="">
				<form class="form-horizontal">
				  <div class="form-group">
					<label for="inputName" class="col-sm-2 control-label">Имя</label>
					<div class="col-sm-10">
					  <input type="name" class="form-control" id="inputName" placeholder="Введите ваше имя">
					</div>
				  </div>
				  <div class="form-group">
					<label for="inputPhone" class="col-sm-2 control-label">Телефон</label>
					<div class="col-sm-10">
					  <input type="name" class="form-control" id="inputPhone" placeholder="Введите телефон для связи">
					</div>
				  </div>
				  <div class="form-group">
					<div class="col-sm-offset-2 col-sm-10">
					  <button type="submit" class="btn btn-default">Заказать</button>
					</div>
				  </div>
				</form>			
			</form>
		</div>
	</div>

	<!-- Акция -->
	<div class="sale row">
		<div class="title">
			<span>Успейте сделать до 31 октября и получить дополнительные 10 видео игр бесплатно</span>
		</div>
	</div>

	<!-- Тригеры -->
	<div class="triggers row">
		<div class="triggers-title col-md-12">
			<span>Почему с нами выгодно работать</span>
		</div>
		<div class="col-md-12">
			<div class="row">
				<div class="col-md-3 trigger">C нами выгодно работать</div>
				<div class="col-md-3 trigger">C нами выгодно работать</div>
				<div class="col-md-3 trigger">C нами выгодно работать</div>
				<div class="col-md-3 trigger">C нами выгодно работать</div>
			</div>
		</div>
	</div>

	<!-- Отзывы -->
	<div class="responses row">
		<div class="responses-title col-md-12">
			<span>Отзывы</span>
		</div>
		<div class="col-md-12">
			<div class="row">
				<div class="col-md-3 response">Отзыв</div>
				<div class="col-md-3 response">Отзыв</div>
				<div class="col-md-3 response">Отзыв</div>
				<div class="col-md-3 response">Отзыв</div>
			</div>
		</div>		
	</div>

	<!-- Футер -->
	<div class="footer row">
	Footer
	</div>
</div>
</body>
</html>

Полная версия файла styles.css

html, body {
	margin: 0px; /** ќтступы со всех сторон равны 0px **/
	padding: 0px; /** ќтступы со всех сторон равны 0px **/
	font-family: Arial, Helvetica, 'sans-serif'; /** Ўрифты по умолчанию **/
}

.container {
	width: 1000px;
}

.header-descript {
	background: #563d7c;
	color: white;
}

.header-descript .header-title {
	margin-top: 10px;
	font-size: 42px;
	text-align: center;
}

.header-descript .header-description {
	font-size: 20px;
	text-align: center;
	font-style: italic;
}

.image-form-container {
	margin-top: 10px;
}
.image-form-container .left-photo {
	background: #eee;
	height: 300px;
}

.sale {
	background: #563d7c;
	margin-top: 10px;
	color: white;
}

.sale .title {
	font-size: 28px;
	text-align: center;
}

.triggers {
	margin-top: 10px;
}

.triggers .triggers-title {
	font-size: 24px;
	text-align: center;
}

.trigger, .response {
	text-align: center;
	height: 50px;
	border: 1px solid #eee;
}

.responses {
	margin-top: 10px;
}

.responses .responses-title {
	font-size: 24px;
	text-align: center;
}

.footer {
	margin-top: 10px;
	height: 50px;
	text-align: center;
	background: #eee;
}

Вот что должно получиться. Для отображения на компьютерах

Результат лендинга

Для отображения на телефонах

Результат лендинга телефон

Заключение

В этом примере мы практически не использовали возможности Bootstrap, за исключением формы захвата. Даже можно было обойтись без этого фреймворка, но вы можете использовать этот шаблон для проектирования своих страниц и уже использовать возможности bootstrap на полную. О возможностях Bootstrap вы можете прочитать в моей другой статье.

В этом примере многое можно оптимизировать, объединить стили, например, но я ориентировался на людей, которые плохо знакомы с HTML и CSS и поэтапно показал какие блоки и как верстать, какие стили применять.

Если вы предприниматель, менеджер проекта, или любое другое лицо, которое не имеет отношение к веб программированию, и вы хотите самостоятельно сделать страницу, то, мое мнение такое - “Лучше всего доверить работу профессионалу, который сверстает вам страницу быстро и качественно, чем тратить свое время на изучение тонкостей HTML и CSS, тем более что ваша цель не является стать верстальщиком”.

Как всегда исходники на GitHub по этой ссылке