Все записи с тегом: верстка

В Bootstrap 4 имеется несколько классов, с помощью которых можно скрывать и показывать различные элементы страницы при изменении разрешения, или при управлять их показом на различных устройствах.

Содержание статьи:

  • Синтаксис использования display-классов Bootstrap 4;
  • Список всех display-классов Bootstrap 4;

1. Синтаксис использования display-классов Bootstrap 4

Синтаксис display-класса Bootstrap 4:

d-{breakpoint}-{?}

Где, {breakpoint} — это название контрольной точки (sm, md, lg, xl), начиная с которой будет применяться указанное CSS свойство display к HTML элементу.

А, {?} — одно из значений показа блоков: none, inline, inline-block, block, table, table-cell, flex, inline-flex.

Примеры: d-none — элемент будет скрыт на любых разрешениях; d-sm-none — элемент будет скрыт на мальньких устройствах и выше (разрешениях начиная от 576px).

Допускается использование нескольких классов, например:d-sm-block d-md-inline — на маленьких экранах (разрешение от 576px до 768px) блок будет показан блочным, на средних (разрешение от 768px до 992px) будет строчным.


2. Список всех display-классов Bootstrap 4

  • d-none — скрытие элемента на любом разрешении;
  • d-inline — показывает элемент строчным;
  • d-inline-block — показывает элемент строчно-блочным;
  • d-block — показывает элемент блочным;
  • d-table — показывает элемент таблицей;
  • d-table-cell — показывает элемент ячейкой таблицы;
  • d-flex — показывает элемент блочным flex-контейнером;
  • d-inline-flex — показывает элемент строчным flex-контейнером;
  • d-sm-none — скрывает элемент на маленьких экранах и выше;
  • d-sm-inline — на маленьких экранах показывает элемент строчным;
  • d-sm-inline-block — на маленьких экранах показывает элемент строчно-блочным;
  • d-sm-block — на маленьких экранах показывает элемент блочным;
  • d-sm-table — на маленьких экранах показывает элемент таблицей;
  • d-sm-table-cell — на маленьких экранах показывает элемент ячейкой таблицы;
  • d-sm-flex — на маленьких экранах показывает элемент блочным flex-контейнером;
  • d-sm-inline-flex — на маленьких экранах показывает элемент строчным flex-контейнером;
  • d-md-none — скрывает элемент на средних экранах и выше;
  • d-md-inline — на средних экранах показывает элемент строчным;
  • d-md-inline-block — на средних экранах показывает элемент строчно-блочным;
  • d-md-block — на средних экранах показывает элемент блочным;
  • d-md-table — на средних экранах показывает элемент таблицей;
  • d-md-table-cell — на средних экранах показывает элемент ячейкой таблицы;
  • d-md-flex — на средних экранах показывает элемент блочным flex-контейнером;
  • d-md-inline-flex — на средних экранах показывает элемент строчным flex-контейнером;
  • d-lg-none — скрывает элемент на больших экранах и выше;
  • d-lg-inline — на больших экранах показывает элемент строчным;
  • d-lg-inline-block — на больших экранах показывает элемент строчно-блочным;
  • d-lg-block — на больших экранах показывает элемент блочным;
  • d-lg-table — на больших экранах показывает элемент таблицей;
  • d-lg-table-cell — на больших экранах показывает элемент ячейкой таблицы;
  • d-lg-flex — на больших экранах показывает элемент блочным flex-контейнером;
  • d-lg-inline-flex — на больших экранах показывает элемент строчным flex-контейнером;
  • d-xl-none — скрывает элемент на очень больших экранах и выше;
  • d-xl-inline — на очень больших экранах показывает элемент строчным;
  • d-xl-inline-block — на очень больших экранах показывает элемент строчно-блочным;
  • d-xl-block — на очень больших экранах показывает элемент блочным;
  • d-xl-table — на очень больших экранах показывает элемент таблицей;
  • d-xl-table-cell — на очень больших экранах показывает элемент ячейкой таблицы;
  • d-xl-flex — на очень больших экранах показывает элемент блочным flex-контейнером;
  • d-xl-inline-flex — на очень больших экранах показывает элемент строчным flex-контейнером;
04 июня

Верстка горизонтального меню - центрирование всплывающего элемента по центру родителя

Иногда крайне простые вещи забываешь, и потом долго повторно в этом разбираешься. Оставлю на заметку себе и другим.

Способ обладает существенным недостатком — всплывающее меню должно быть фиксированного размера (шучу, не должно).

Построим меню:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<ul class="nav">
    <li><a href="">Пункт меню 1</a></li>
    <li>
        <a href="">Пункт меню 2</a>
        <ul class="sub-menu">
            <li><a href="">Пункт меню 2.1</a></li>
            <li><a href="">Пункт меню 2.2 </a></li>
            <li><a href="">Пункт меню 2.3</a></li>
            <li><a href="">Пункт меню 2.4</a></li>
        </ul>
    </li>
    <li><a href="">Пункт меню 3</a></li>
    <li>
        <a href="">Пункт меню 4</a>
        <ul class="sub-menu">
            <li><a href="">Большой пункт меню 4.1</a></li>
            <li><a href="">Большой пункт меню 4.2 </a></li>
            <li><a href="">Большой пункт меню 4.3</a></li>
            <li><a href="">Большой пункт меню 4.4</a></li>
        </ul>
    </li>
</ul>

Пишем стили для горизонтального меню. Самое важное: родительский элемент должен иметь свойство position: relative;, а дочерний position: absolute; и white-space: nowrap;. Такой набор даст позиционирование относительно родителя и запретит перенос слов. Недостаток: большие названия в выпадающем меню переносится не будут.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
.nav {
    list-style: none;
    background: #000;
    text-align: center;
}
.nav>li {
    display: inline-block;
    position: relative;
    border-left: 1px #fff solid;
}
.nav>li:last-child {
    border-right: 1px #fff solid;
}
.nav>li>a {
    display: inline-block;
    padding: 20px 30px;
    color: #fff;
}
.nav li .sub-menu {
    display: inline-block;
    position: absolute;
    text-align: center;
    list-style: none;
    background: red;
    white-space: nowrap;
    margin-top: 20px;
    left: 50%;
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
}
.nav li .sub-menu li {
    display: list-item;
    padding: 5px 20px;
}
.nav li .sub-menu li a {
    color: #fff;
 
}
 
.nav li:hover .sub-menu {
    margin-top: 0px;
    opacity: 1;
    visibility: visible;
}

Скрипт, который пробегается по всем элементам .sub-menu, считывает их ширину, делит на 2 и добавляет обратно с отрицательным значением.

1
2
3
4
$('.nav .sub-menu').each(function() {
    var elemwidth = $(this).width();
    $(this).css({'margin-left' : -(elemwidth/2)});
});
31 декабря
Теги: , ,