Основной курс Bootstrap

Bootstrap плагины

Создание веб-страницы Bootstrap

Далее мы создадим простую адаптивную веб-страницу с помощью Bootstrap3.

Прежде чем начать обучение, давайте сначала посмотрим на результат:https://ru.oldtoolbag.com/run/html/bootstrap-first-website-demo.html

HTML код

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap пример - простая веб-страница</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<style>
　　　　.fakeimg {
　　　　　　　　height: 200px;
　　　　　　　　　background: #aaa;
　　　　}
　　</style>
</head>
<body>
<div class="jumbotron text-center" style="margin-bottom:0">
　　<h1>Моя первая Bootstrap страница</h1>
　　<p>Измените размер окна браузера, чтобы увидеть эффект!</p>　
</div>
<nav class="navbar navbar-inverse">
　　<div class="container-fluid">
　　　　<div class="navbar-header">
　　　　　　<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
　　　　　　　　<span class="icon-bar"></span>
　　　　　　　　<span class="icon-bar"></span>
　　　　　　　　<span class="icon-bar"></span>　　　　　　　　　　　　　　　　　　　　　　　　
　　　　　　</button>
　　　　　　<a class="navbar-brand" href="#">Название сайта</a>
　　　　</div>
　　　　<div class="collapse navbar-collapse" id="myNavbar">
　　　　　　<ul class="nav navbar-nav">
　　　　　　　　<li class="active"><a href="#">Главная</a></li>
　　　　　　　　<li><a href="#">Страница 2</a></li>
　　　　　　　　<li><a href="#">Страница 3</a></li>
　　　　　　</ul>
　　　　</div>
　　</div>
</nav>
<div class="container">
　　<div class="row">
　　　　<div class="col-sm-4">
　　　　　　<h2>Обо мне</h2>
　　　　　　<h5>Мои фотографии:</h5>
　　　　　　<div class="fakeimg">Здесь вставить изображение</div>
　　　　　　<p>Обо мне...</p>
　　　　　　<h2>Ссылка</h2>
　　　　　　<p>Описание текста.</p>
　　　　　　<ul class="nav nav-pills nav-stacked">
　　　　　　　　<li class="active"><a href="#">Ссылка 1</a></li>
　　　　　　　　<li><a href="#">Ссылка 2</a></li>
　　　　　　　　<li><a href="#">Ссылка 3</a></li>
　　　　　　</ul>
　　　　　　<hr class="hidden-sm hidden-md hidden-lg">
　　　　</div>
　　　　<div class="col-sm-8">
　　　　　　<h2>Заголовок</h2>
　　　　　　<h5>Подзаголовок</h5>
　　　　　　<div class="fakeimg">Изображение</div>
　　　　　　<p>Некоторые текст...</p>
　　　　　　<p>Сайт основного учебника, выучите основы, чтобы идти дальше!!! Сайт основного учебника, выучите основы, чтобы идти дальше!!! Сайт основного учебника, выучите основы, чтобы идти дальше!!!</p>
　　　　　　<br>
　　　　　　<h2>Заголовок</h2>
　　　　　　<h5>Подзаголовок</h5>
　　　　　　<div class="fakeimg">Изображение</div>
　　　　　　<p>Некоторые текст...</p>
　　　　　　<p>Сайт основного учебника, выучите основы, чтобы идти дальше!!! Сайт основного учебника, выучите основы, чтобы идти дальше!!! Сайт основного учебника, выучите основы, чтобы идти дальше!!!</p>
　　　　</div>
　　</div>
</div>
<div class="jumbotron text-center" style="margin-bottom:0">
　　<p>Содержание нижней части</p>
</div>
</body>
</html>

Проверьте, посмотрите ‹/›

Обзор плагинов Bootstrap Well Bootstrap