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

Блочная компоновка Bootstrap4 Flex Слайдинг наблюдение Bootstrap4

Маленькие инструменты Bootstrap4

Bootstrap4 предоставляет了一些 маленькие инструменты, которые позволяют достичь желаемого эффекта без написания CSS-кода.

Рамка

Использование класса border позволяет добавить или удалить рамку:

Пример

<!DOCTYPE　html>
<html>
<head>
　　<title>Пример Bootstrap</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
　<style>
　　.border　{
　　　　display:　inline-block;
　　　　width:　70px;
　　　　height:　70px;
　　　　margin:　6px;
　　}
　　</style>
</head>
<body>
<div　class="container">
　　<h2>Рамка</h2>
　　<p>Использование класса border позволяет добавить или удалить рамку:</p>　
　　<span　class="border"></span>
　　<span　class="border　border-0"></span>
　　<span　class="border　border-top-0"></span>
　　<span　class="border　border-right-0"></span>
　　<span　class="border　border-bottom-0"></span>
　　<span　class="border　border-left-0"></span>
</div>
</body>
</html>

Проверьте это ‹/›

Настройка цвета рамки

Bootstrap4 предоставляет некоторые классы для настройки цвета рамки:

Пример

<!DOCTYPE　html>
<html>
<head>
　　<title>Пример Bootstrap</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
　　<style>
　　.border　{
　　　　display:　inline-block;
　　　　width:　70px;
　　　　height:　70px;
　　　　margin:　6px;
　　}
　　</style>
</head>
<body>
<div　class="container">
　　<h2>Настройка цвета рамки</h2>
　　<p>Bootstrap4 предоставляет некоторые классы для настройки цвета рамки:</p>　
　　<span　class="border　border-primary"></span>
　　<span　class="border　border-secondary"></span>
　　<span　class="border　border-success"></span>
　　<span　class="border　border-danger"></span>
　　<span　class="border　border-warning"></span>
　　<span　class="border　border-info"></span>
　　<span　class="border　border-light"></span>
　　<span　class="border　border-dark"></span>
　　<span　class="border　border-white"></span>
</div>
</body>
</html>

Проверьте это ‹/›

Настройка закругленных краев рамки

Использование класса rounded позволяет добавить закругленные края:

Пример

<!DOCTYPE　html>
<html>
<head>
　　<title>Пример Bootstrap</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
　　<style>
　　span　{
　　　　display:　inline-block;
　　　　width:　70px;
　　　　height:　70px;
　　　　margin:　6px;
　　　　background-color:　#555;
　　}
　　</style>
</head>
<body>
<div　class="container">
　　<h2>Настройка закругленных краев рамки</h2>
　　<p>Использование класса rounded позволяет добавить закругленные края:</p>　
　　<span　class="rounded"></span>
　　<span　class="rounded-top"></span>
　　<span　class="rounded-right"></span>
　　<span　class="rounded-bottom"></span>
　　<span　class="rounded-left"></span>
　　<span　class="rounded-circle"></span>
　　<span　class="rounded-0"></span>
</div>
</body>
</html>

Проверьте это ‹/›

Плавание

.float-right класс используется для установки плавания элемента направо, .float-left устанавливает плавание влево, класс .clearfix используется для удаления плавания:

Пример

<!DOCTYPE　html>
<html>
<head>
　　<title>Пример Bootstrap</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Плавание</h2>
　　<p>Класс .float-right используется для установки плавания элемента направо, .float-left для установки плавания влево, класс .clearfix используется для удаления плавания:</p>　
　　<div class="clearfix">
　　　　<span class="float-left">Плавание влево</span>
　　　　<span class="float-right">Плавание направо</span>
　　</div>
</div>
</body>
</html>

Проверьте это ‹/›

Responsive floating

Мы можем установить направление плавания (.float-*-left|right - * для sm, md, lg или xl) в зависимости от размера экрана:

Пример

<!DOCTYPE　html>
<html>
<head>
　　<title>Пример Bootstrap</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Responsive floating</h2>
　　<p>Измените размер браузера, чтобы увидеть эффект.</p>
　　<p>Мы можем установить направление плавания (.float-*-left|right - * для sm, md, lg или xl) в зависимости от размера экрана:</p>　
　　<div class="float-sm-right">Плавание направо на экранах larger than small size</div><br>
　　<div class="float-md-right">Плавание направо на экранах larger than medium size</div><br>
　　<div class="float-lg-right">Плавание направо на экранах larger than large size</div><br>
　　<div class="float-xl-right">Плавание направо на экранах larger than extra-large size</div><br>
　　<div class="float-none">Нет плавания</div>
</div>
</body>
</html>

Проверьте это ‹/›

Центрирование по горизонтали

Используйте класс .mx-auto для установки центрального выравнивания:

Пример

<!DOCTYPE　html>
<html>
<head>
　　<title>Пример Bootstrap</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h1>Центрирование по горизонтали</h1>
　　<p>Используйте класс .mx-auto для установки центрального выравнивания::</p>
　　<div class="mx-auto bg-warning" style="width:150px">Центрирование</div>
</div>
</body>
</html>

Проверьте это ‹/›

Ширина

На элементах используется класс w-* (.w-25, .w-50, .w-75, .w-100, .mw-100) для установки ширины:

Пример

<!DOCTYPE　html>
<html>
<head>
　　<title>Пример Bootstrap</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h1>Инструмент для установки ширины</h1>
　　<p>На элементах используется класс w-* (.w-25, .w-50, .w-75, .w-100, .mw-100) для установки ширины:</p>
　　<div　class="w-25　bg-warning">Ширина 25%</div>
　　<div　class="w-50　bg-warning">Ширина 50%</div>
　　<div　class="w-75　bg-warning">Ширина 75%</div>
　　<div　class="w-100　bg-warning">Ширина 100%</div>
　　<div　class="mw-100　bg-warning">Максимальная ширина 100%</div>
</div>
</body>
</html>

Проверьте это ‹/›

Высота

Элементы используют классы h-* (.h-25, .h-50, .h-75, .h-100, .mh-100) для установки высоты:

Пример

<!DOCTYPE　html>
<html>
<head>
　　<title>Пример Bootstrap</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h1>Маленький инструмент высоты</h1>
　　<p>Элементы используют классы h-* (.h-25, .h-50, .h-75, .h-100, .mh-100) для установки высоты:</p>
　　<div　style="height:200px;background-color:#ddd">
　　　　<div class="h-25 d-inline-block p-2 bg-warning">Высота 25%</div>
　　　　<div class="h-50 d-inline-block p-2 bg-warning">Высота 50%</div>
　　　　<div class="h-75 d-inline-block p-2 bg-warning">Высота 75%</div>
　　　　<div class="h-100 d-inline-block p-2 bg-warning">Высота 100%</div>
　　　　<div class="mh-100 d-inline-block p-2 bg-warning" style="height:500px">Максимальная высота 100%</div>
　　</div>
</div>
</body>
</html>

Проверьте это ‹/›

Блочная компоновка Bootstrap4 Flex Слайдинг наблюдение Bootstrap4