Контейнеры Bootstrap 4

В HTML, один container (контейнер) это элемент, который может содержать другие элементы, например <div>, <span>.
Класс .container или .container-fluid могут использоваться для данных элементов.
Bootstrap требует элемента контейнера, который будет содержать сетку . Классы контейнеров были созданы специально для этой цели и они могут быть фиксированными или гибкими.

Гибкий контейнер - Class .container-fluid

Гибкий контейнер занимает всю ширину области просмотра.

<div class="container-fluid">
...
</div>

Он будет плавно расширяться и сжиматься по мере изменения размера браузера. Это работает противоположно контейнеру фиксированной шириной, который будет «прыгать» на новый размер при прохождении заданной точки останова.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Container Example</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <h4>.container-fluid Example</h4>
       
      <div class="container-fluid" style="background: #cdd;">
           .container-fluid
      </div>
 
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

Класс .container-fluid при применении к элементу придаст данному элементу ширину 100%.

Вы можете создавать страницы Bootstrap без контейнеров, но они необходимы при использовании системы сетки.

Фиксированный контейнер - Class .container

Фиксированный контейнер— это адаптивный контейнер фиксированной ширины. Когда вы изменяете размер своего браузера, ширина контейнера остаётся неизменной, пока она не пройдёт определённую точку останова указанную вами, и в этот момент изменится на новую ширину для этой точки останова.

<div class="container">
...
</div>

Основываясь на размере ширины устройств, Bootstrap делит их на 5 видов:

Устройства с шириной менее 567px называются Extra Small (очень маленькие).
Устройства с шириной более или равные 567px называются Small (Маленькие), или называются устройства sm.
Устройства с шириной более или равные 768px называются Medium (Средние), или называются устройства md.
Устройства с шириной более или равные 992px называются Large (Большие), или называются устройства lg.
Устройства с шириной более или равные 1200px называются Extra Large (Очень большие), или называются устройства xl.

Теперь давайте взглянем на пример к которому применяется класс .container

<h4 style="color:#ff9249">.container Example:</h4>
 <div class="container" style="background: #cdd;">
   .container
</div>

Пример 1: Если ширина устройства меньше 567px, элемент будет иметь ширину 100%.

Пример 2: Если ширина устройства больше или равна 567px и меньше 768px, то элемент будет отображаться в центре (center) и будет иметь ширину в 567px.

Пример 3: Если ширина устройства больше или равна 768px и меньше 992px, то элемент будет отображаться в центре (center) и будет иметь ширину в 768px

Пример 4: Если ширина устройства больше или равна 992px и меньше 1200px, то элемент будет отображаться в центре (center) и будет иметь ширину в 992px.

Пример 5: Если ширина устройства больше или равна 1200px, то элемент будет отображаться в центре (center) и будет иметь ширину в 1200px.

У данной публикации нет комментариев.

admin

Автор

5-01-2020, 21:21

Дата пуликации

Учебник Bootstrap

Категория

Комментариев: 0
Просмотров: 447

Учебник Bootstrap

Начало работы с Bootstrap 4

Bootstrap шаблоны

Шаблон начальной загрузки на Bootstrap 4

Украшения для сайта

Новогодние украшения от яндекса

Bootstrap сниппеты

Bootstrap Tour. Делаем красивый тур на сайте

Иконки , Кнопки

Красивые кнопки на чистом CSS в плоском стиле FLAT

DLE хаки

Задаем CSS классы ссылкам выводимые тегами DLE

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Перебей баннер

Советы

Семь раз проверь - один спроси!

Лучший букс

Ваша реклама

Купить ссылку здесь за руб.

Поставить к себе на сайт

Комментарии

Pafnuti, В любом похожем шаблоне вытащить код. На счёт 14 версии незнаю , не тестироал

6 мая 2020 06:00

admin

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

2. И очень прошу рассказать подробнее . Как можно снять ограничение в DLE v14 Установка видео в новость через гугл диск по html коду. Устанавливаю код. Отправляю новость. Но видео исчезает. В редакторе код уже не отображается (

28 апреля 2020 18:48

Pafnuti

&nbsp;

delete all because this site with some bugs and showing this code but need show just space

22 апреля 2020 17:07

mondolfo

users_search.tpl


<div class="panel panel-info">
&nbsp; <div class="panel-heading"><i class="fa fa-users" aria-hidden="true"></i> Paieška tarp vartotojų</div>
&nbsp; <div class="panel-body">

<div class="users_search">
&nbsp;&nbsp; &nbsp;<form action="" method="get">
<div class="input-group">
&nbsp;&nbsp;&nbsp; <input type="hidden" name="do" value="users" />
&nbsp; <span class="input-group-addon"><i class="fa fa-angle-right" aria-hidden="true"></i></span>
&nbsp; <input type="text" name="login" class="form-control"&nbsp; value="{login}" placeholder="Vartotojo vardas" aria-describedby="sizing-addon2">
</div>
<div class =&nbsp; "row&nbsp; row-flex row-flex-wrap my">
&nbsp; <div class="col-xs-6 col-sm-3 my">
&nbsp; <div class="well well-sm" style="width: 100%;">
&nbsp; Kiekis <select name="count" class="form-control">
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<option value="">Pasirinkti</option>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;{count}
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</select>
&nbsp; </div>
&nbsp; </div>
&nbsp; <div class="col-xs-6 col-sm-3 my">
&nbsp; <div class="well well-sm" style="width: 100%;">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Ieškoti pagal
&nbsp; <select name="order" class="form-control">
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<option value="">Pasirinkti</option>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;{order}
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</select>
&nbsp; </div>
&nbsp; </div>

&nbsp; <div class="clearfix visible-xs-block"></div>

&nbsp; <div class="col-xs-6 col-sm-3 my">
&nbsp; <div class="well well-sm" style="width: 100%;">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Rodyti
&nbsp; <select name="sort" class="form-control">
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<option value="">Pasirinkti</option>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;{sort}
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</select>
&nbsp; </div>
&nbsp; </div>
&nbsp; <div class="col-xs-6 col-sm-3 my">
&nbsp; <div class="well well-sm" style="width: 100%;">
&nbsp; Rodyti tik
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<select name="usergroups" class="form-control">
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<option value="">Pasirinkti</option>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;{usergroups}
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</select>
&nbsp; </div>
&nbsp; </div>
</div>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</div>
&nbsp;&nbsp; &nbsp;</form>
</div>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </div>
&nbsp;&nbsp;&nbsp; <div class="panel-footer">{numbers} <input type="submit" class="btn btn-sm btn-primary pull-right" value="Paieška" style="margin: -3px -8px 0 0;"></div>
</div>

22 апреля 2020 17:02

mondolfo

Not uploaded users.tpl and users_search.tpl files

here is code:

users.tpl


<div class="panel panel-default">
&nbsp; <div class="panel-heading linka"><a {profile_m} href="{profile}">{usertitle}</a>[online]<span class="label label-success pull-right">Online</span>[/online][offline]<span class="label label-danger pull-right">Offline</span>[/offline]</div>
&nbsp; <div class="panel-body">
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;
<div class="row">
&nbsp; <div class="col-md-2">
&nbsp; <center><a {profile_m} href="{profile}"><img class="user_ava" src="{foto}" title="{usertitle}" alt="{usertitle}" style="width: 118px;
&nbsp;&nbsp;&nbsp; height: 118px;
&nbsp;&nbsp;&nbsp; border-radius: 6%;
&nbsp;&nbsp;&nbsp; object-fit: cover;"></a> </center>
&nbsp; </div>
&nbsp; <div class="col-md-7">
&nbsp; <ul class="list-unstyled">
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<li><span class="grey">Vardas:</span> <b>[fullname]{fullname}[/fullname][not-fullname]---[/not-fullname]</b></li>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<li><span class="grey">Registracijos data:</span> <b>{registration}</b></li>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<li><span class="grey">Paskutinis apsilankymas:</span> <b>{lastdate}</b></li>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</ul>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<ul class="list-unstyled">
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<li><span class="grey">Naujienos:</span> <b>{news-num}</b></li>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<li><span class="grey">Komentarai:</span> <b>{comm-num}</b></li>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</ul> &nbsp;
&nbsp; </div>
&nbsp; <div class="col-md-3">
&nbsp; <div class="list-group">
&nbsp; <a href="{profile}" class=" btn btn-default btn-block">Profilis</a>
&nbsp; [pm]<a href="{pm}" class="btn btn-default btn-block">Siųsti pranešimą</a>[/pm]
&nbsp; [email]<a href="{email}" class="btn btn-default btn-block">Rašyti E-mail</a>[/email]
</div>
&nbsp; </div>
</div>
&nbsp;&nbsp;&nbsp; &nbsp;
&nbsp; </div>
</div>

22 апреля 2020 17:01

mondolfo

Как в HTML пишется верхний индекс

Контейнеры Bootstrap 4

Гибкий контейнер - Class .container-fluid

Фиксированный контейнер - Class .container

admin

5-01-2020, 21:21

Учебник Bootstrap

Авторизация