Что такое bootstrap?
Bootstrap — это фрэймворк, библиотека готовых стилей, скриптов, которые в разы упрощает и ускоряет процесс разработки сайта.
К примеру вам надо сделать простой одностраничный сайт, адаптированный под мобильную версию, где будет шапка, пару блоков с сеточной системой и подвал.
Сеточная система — это когда в ряду есть несколько колонок.
Пример:
Как начать пользоваться bootstrap?
Первым делом нужно перейти на сайт bootstrap. Там можно скачать и ознакомиться со всеми возможностями boostrap в документации.
Bootstrap состоит из 2-ух файлов, CSS и JS, но чтобы все функции bootstrap работали, нужно подключить перед ним jQuery и Popper.js
Вот так правильно подключать bootstrap:
<!doctype html>
<html lang= "en" >
<head>
<!-- Required meta tags -->
<meta charset= "utf-8" >
<meta name= "viewport" content= "width=device-width, initial-scale=1, shrink-to-fit=no" >
<!-- Bootstrap CSS -->
<link rel= "stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity= "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin= "anonymous" >
<title> Hello, world! </title>
</head>
<body>
<h1> Hello, world! </h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src= "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity= "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin= "anonymous" ></script>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity= "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin= "anonymous" ></script>
<script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity= "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin= "anonymous" ></script>
</body>
</html>
Стили мы подключаем сверху в теге head, а скрипты мы подключаем перед закрытием тега body
Теперь можно пользоваться возможности фрэймворка и первое что мы попробуем сверстать, это сетку из 3-х колонок
<div class="my-site"> <!--Общий блок-->
<div class="container"> <!--Блок с шириной 1140 px и выравнивается по центру-->
<div class="row"> <!--Ряд внутри которых нужно распологать колонки-->
<div class="col-md-4"> <h3>test</h3> </div> <!--Колонка-->
<div class="col-md-4"> <h3>test</h3> </div> <!--Колонка-->
<div class="col-md-4"> <h3>test</h3> </div> <!--Колонка-->
</div>
</div>
</div>
Колонок может быть разное количество и разной ширины, для того чтобы разделить ряд на 3 ровных части, нужно создать 3 блока с классом col-md-4
Есть и другие классы:
- col-md-6 — делит ряд на 2 части
- col-md-3 — делит ряд на 4 части
Всего можно разделить на 12 частей, все разделяющие классы имеют цифру на конце и в сумме в ряду, дожно получиться 12
А что, если нам надо разделить не на ровные части?
<div class="my-site"> <!--Общий блок-->
<div class="container"> <!--Блок с шириной 1140 px и выравнивается по центру-->
<div class="row"> <!--Ряд внутри которых нужно распологать колонки-->
<div class="col-md-4"> <h3>test</h3> </div> <!--Колонка-->
<div class="col-md-8"> <h3>test</h3> </div> <!--Колонка-->
</div>
</div>
</div>
Можно сделать вот так, тогда будет 33.333% на 66.666%
Попробуем добавить контента в наши колонки, чтобы получилось так же как на скриншоте сверху
<div class="my-site"> <!--Общий блок-->
<div class="container"> <!--Блок с шириной 1140 px и выравнивается по центру-->
<div class="row"> <!--Ряд внутри которых нужно распологать колонки-->
<div class="col-md-4">
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"> <h2>Heading</h2>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-md-4">
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"> <h2>Heading</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-md-4">
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"> <h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div><!-- /.col-lg-4 -->
</div>
</div>
</div>
Осталось выровнить контент по центру:
.my-site{
text-align: center;
}
Больше никаких стилей, поддержка всех популярных браузеров, мобильная версия и никакой головной боли.
Делаем шапку на bootstrap
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
В итоге получается красивая шапка и никаких дополнительных стилей
Это только малая часть что может boostrap, лучше всего перейти сразу в документацию и начать изучать. Там очень удобно все описано, с кодом и примерами. Все очень понятно и доступно!
Bootstrap это удобно и я лично часто пользуюсь им, но вы должны понимать, что это как не крути лишний вес сайта. Сейчас есть альтернативные возможности на чистом CSS и на некоторых проектах можно обойтись и без bootstrap