Bootstrap visible xs: Display property · Bootstrap

Содержание

Bootstrap 4: hidden, visible

Как известно в Bootstrap 4 удалили семейство классов hidden-* и visible-*. На смену пришли классы семейства Display. Под катом, памятка о соответствии старых hidden/visible классов новым.

Показать/скрыть от размера и ниже:

hidden-xs-down (hidden-xs) = d-none d-sm-block
hidden-sm-down (hidden-sm hidden-xs) = d-none d-md-block
hidden-md-down (hidden-md hidden-sm hidden-xs) = d-none d-lg-block
hidden-lg-down = d-none d-xl-block
hidden-xl-down (нет в 3.x) = d-none (тоже самое, что hidden)

Показать/скрыть от размера и выше:

hidden-xs-up = d-none (тоже самое, что hidden)
hidden-sm-up = d-sm-none
hidden-md-up = d-md-none
hidden-lg-up = d-lg-none
hidden-xl-up (нет в 3. x) = d-xl-none

Показать/скрыть:

hidden-xs = d-none d-sm-block (тоже самое, что hidden-xs-down)
hidden-sm = d-block d-sm-none d-md-block
hidden-md = d-block d-md-none d-lg-block
hidden-lg = d-block d-lg-none d-xl-block
hidden-xl (нет в 3.x) = d-block d-xl-none
visible-xs = d-block d-sm-none
visible-sm = d-none d-sm-block d-md-none
visible-md = d-none d-md-block d-lg-none
visible-lg = d-none d-lg-block d-xl-none
visible-xl (нет в 3.x) = d-none d-xl-block

Почему не работает класс visible-xs?

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Ширина = ширине девайса, и маштаб = 1  -->
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Киномонстр Bootstrap</title>

    <!-- Bootstrap -->
    <link href="assets/css/bootstrap. min.css" rel="stylesheet">
    
    <!-- Main Style Css -->
    <link href="assets/css/style.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    

    <div>
      <div>
        
       <nav role="navigation">  <!-- крч, это вроде изменение вида меню, дефолт это серый, а это чёрный  -->
          <div> 
            
          <div> <!--navbar-header это если <768 пикселей то например появится кнопка, а header вроде это шапка сайта-->
            <div>
              <div> <!-- нужно убрать отступы, т. к. col-lg-12 имеет свои отступы  -->
                  
                <div>
                    <h2><a href="">КиноМонстр</a></h2>
                    <p>Кино - наша страсть!</p>
                </div>

              </div>

            </div>

            <button type="button" data-target="#navbarCollapse" data-toggle="collapse"> <!-- data-target - при нажатии на кнопку, мы перейдём к navbarCollapse, и вроде data-toggle="collapse" нужна чтобы впринцепи появилась эта кнопка -->
              <span>Toggle navigation</span> <!-- крч sr-only это класс который скрывает надпись  для читателей экрана  -->
              <span></span> <!-- вроде icon-bar нужен для обозначения кнопки знаком ≡ , чтобы кнопка была заметной -->
              <span></span>
              <span></span>
            </button>
              
          </div>



            <div> <!-- navbar-right - это прижать навигацию к правому краю -->
              <ul>     <!-- nav-pills Меню становится горизонтальное, -->
                <li> <a href="#">Главная</a> </li>  <!-- класс active означает что эта кнопка будет подсвечиваться  -->
                <li><a href="#">Фильмы</a></li>
                <li><a href="#">Сериалы</a></li>
                <li><a href="#">Рейтинг фильмов</a></li>
                <li><a href="#">Контакты</a></li>
              </ul>
            </div>
          </div>
       </nav> 
      </div>
    </div>


    <div> <!-- all content  -->
      
      <div>
        
        <div>
          
          <div> 

            <form role="search" сlass="visible-xs"> <!-- Вот это то -->
              <div> 
                <div> 
                  <input type="search" placeholder="Ваш запрос"> 

                  <div> 
                    <button type="submit"><i></i></button>  
                  </div>
                </div>
              </div>
            </form>



            <h3>Новые фильмы</h3>
            <hr>  <!-- Он уже стилизован  -->
             <div>

            <div>
              <img src="assets/img/inter. png" alt="интерстеллар">
              <div>Интерстеллар</div>
            </div>

            <div>
              <img src="assets/img/matrix.png" alt="матрица">
              <div>Матрица</div>
            </div>            

            <div>
              <img src="assets/img/cloud.png" alt="облачный атлас">
              <div>Облачный атлас</div>
            </div>            

            <div>
              <img src="assets/img/max.png" alt="безумный макс">
              <div>Безумный макс</div>
            </div>


          </div>

          <div></div>

         <h3>Новые сериалы</h3>
         <hr>
          <div>

            <div>
              <img src="assets/img/xfiles.png" alt="">
              <div>Секретные материалы</div>
            </div>

            <div>
              <img src="assets/img/silicon. png" alt="">
              <div>Кремневая долина</div>
            </div>

            <div>
              <img src="assets/img/dead.png" alt="">
              <div>Ходячие мертвецы</div>
            </div>

            <div>
              <img src="assets/img/breakingbad.png" alt="">
              <div>Во все тяжкие</div>
            </div>

          </div>


            <div></div>  <!-- это чтобы был пустой отсутп -->
              
            <a href="#"><h4>Как снимали Интерстеллар</h4></a>
            <hr>
            <p>
              45 лет исполнилось Кристоферу Нолану — одному из самых успешных режиссеров нашего времени, чьи работы одинаково любимы как взыскательными критиками, так и простыми зрителями. Фильмом изначально занималась студия Paramount. Когда Кристофер Нолан занял место режиссера, студия Warner Bros., которая выпускала его последние фильмы, добилась участия в проекте. 

            </p>
            <a href="#">читать</a> <!-- pull-right - прижать кнопку вправо, а btn-warning говорит следует проявлять осторожность с этим действием -->
            
             <div></div> 
              
              <a href="#"><h4>Актёр Том Хенкс поделился впечатлением о фестивале</h4></a>
            <hr>
            <p>
               16 февраля в Лондоне состоялась 67-я церемония вручения наград Британской киноакадемии. Леонардо ДиКаприо, Брэд Питт, Анджелина Джоли, Кейт Бланшетт, Хелен Миррен, Эми Адамс, Кристиан Бэйл, Альфонсо Куарон и другие гости и победители премии — в нашем репортаже.
            </p>
            <a href="#">читать</a>
            
            <div></div> 

          </div>



        
          
          <div>
            <!-- первая панель -->
            <div> <!-- panel - это основной класс для поиска, а panel-info это её тип(будет голубоватый), hidden-xs - если маленький экран то пропадёт-->
              
              <div><div>Поиск</div></div> <!--panel-heading - для заголовка  -->
              
              <div> <!--вроде тут весь контент панели -->
                <form role="search">
                  <div> <!-- там уже указаны нужные стили -->
                    <div> <!-- типо маленький контейнер, чтобы туда можно было вместить несколько элементов -->
                      <input type="search" placeholder="Ваш запрос"> <!-- form-control для стилей автоматических, input-lg - большая кнопка, placeholder - подсказка -->

                      <div> <!-- для переноса кнопки -->
                        <button type="submit"><i></i></button>  <!--glyphicon glyphicon-search - это просто картинка -->
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </div>

            <!-- вторая панель -->
            <div> 
              <div><div>Вход</div></div>
              <div>

                <form role="form">
                  <div>
                    <input type="text" placeholder=Логин>
                  </div>
                  <div>
                    <input type="password" placeholder="Пароль">                   
                  </div>  

                  <button type="submit">вход</button> 
                </form>
              </div>
            </div>
            
            <!-- третья панель -->
             <div>
             <div><div>Новости</div></div>
             <div>
               <p>31. 02.2017</p>
               <p>Мы запустили новый сервис</p>
             </div>
             </div> 
              
              <!-- четвёртая панель -->
              <div> 
              <div><div>Рейтинг фильмов</div></div>
              <div>

                <ul><!-- list-group - Для обычных списков -->

                  <li><!-- list-group-item - Для обычных списков -->
                    <span>8.9</span> <!-- крч badge - это значёк, (текст пишет в такой овальчик) -->
                    <a href="#">Интерстеллар</a>
                  </li>
                  <li>
                    <span>8.7</span>
                    <a href="#">Безумный макс</a>
                  </li>
                  <li> 
                    <span>8.3</span>
                    <a href="#">Матрица</a>
                  </li>
                  <li>
                    <span>8. 1</span>
                    <a href="#">Облачный атлас</a>
                  </li>
                  <li>
                    <span>8.9</span>
                    <a href="#">Интерстеллар</a>
                  </li>
                  <li>
                    <span>8.7</span>
                    <a href="#">Безумный макс</a>
                  </li>
                  <li>
                    <span>8.3</span>
                    <a href="#">Матрица</a>
                  </li>
                  <li>
                    <span>8.1</span>
                    <a href="#">Облачный атлас</a>
                  </li>
                </ul> 

              </div>
            </div>



          </div>

        </div>


      </div>

    </div>






        <div> <!-- этот класс настраивает оптикание объекта  -->
        
      </div>

    

    <footer>
      
      <div>
        <p> <a href="http://ru. wh-db.com">WH-DB.COM</a> </p>
      </div>

    </footer>


      
      
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="assets/js/bootstrap.min.js"></script>
  </body>
</html>

<div> 

            <form role="search" сlass="visible-xs"> <!-- visible-xs при маленьких экранах появится, а при больших пропадёт -->
              <div> 
                <div> 
                  <input type="search" placeholder="Ваш запрос"> 

                  <div> 
                    <button type="submit"><i></i></button>  
                  </div>
                </div>
              </div>
            </form>
</div>

student_1ooZAJS1

Bootstrap 4: скрытые видимые колы?

Добавляем этот ответ, потому что комментарии в принятом ответе становятся слишком длинными и не завершены. Как уже объяснялось, hidden-* классы больше не существуют в бета-версии Bootstrap 4.

«Что именно скрыто-см-вниз?»

Он больше не существует в бета-версии, но в предыдущих версиях он означал «спрятанный на малом и низком» Значение скрыто на xs а также sm, но в остальном видно.

Если вы хотите скрыть элемент на определенных уровнях (контрольных точках) в Bootstrap 4, используйте d-* отображать классы соответственно. Помните xs является точкой останова по умолчанию (всегда подразумеваемой), если она не переопределена большей точкой останова. поскольку xs подразумевается, вы больше не используете -xs- инфикс. Например, это не d-xs-noneэто просто d-none,

https://www.codeply.com/go/bRlHp8MxtJ

hidden-xs-down знак равно d-none d-sm-block
hidden-sm-down знак равно d-none d-md-block
hidden-md-down знак равно d-none d-lg-block
hidden-lg-down знак равно d-none d-xl-block
hidden-xl-down знак равно d-none (такой же как hidden)
hidden-xs-up знак равно d-none (такой же как hidden)
hidden-sm-up знак равно d-sm-none
hidden-md-up знак равно d-md-none
hidden-lg-up знак равно d-lg-none
hidden-xl-up знак равно d-xl-none
hidden-xs (только) = d-none d-sm-block (такой же как hidden-xs-down)
hidden-sm (только) = d-block d-sm-none d-md-block
hidden-md (только) = d-block d-md-none d-lg-block
hidden-lg (только) = d-block d-lg-none d-xl-block
hidden-xl (только) = d-block d-xl-none
visible-xs (только) = d-block d-sm-none
visible-sm (только) = d-none d-sm-block d-md-none
visible-md (только) = d-none d-md-block d-lg-none
visible-lg (только) = d-none d-lg-block d-xl-none
visible-xl (только) = d-none d-xl-block

Демонстрация всех скрытых / видимых классов в бета-версии Bootstrap 4

Также обратите внимание, что d-*-block можно заменить на d-*-inline, d-*-flexи т. д. в зависимости от типа отображения элемента. Подробнее о показе классов в бета-версии

Также см:
Bootstrap 4 скрытый-X-(вниз / вверх) класс не работает
Отсутствует видимый -** и скрытый -** в Bootstrap v4

Отображение и скрытие элементов. Основы bootstrap3 для начинающих. Урок №24

Всем привет!
В сегодняшнем уроке я расскажу, как отобразить нужные или скрыть ненужные элементы (блоки <div>, картинки, текст и т.д.) в зависимости от размера экрана или же от дисплея пользователя.
Я частенько пользуюсь скрытием блоков для мобильных устройств, так как не всегда они нужны для мобильных версий сайта.

В Bootstrap 3 есть специальные классы, с помощью которых можно скрыть или отобразить элемент.

Отображение элементов

Класс	Описание
visible-xs	Делает элемент видимым только на устройствах с очень маленьким экраном, у которых ширина экрана меньше 768px. На других устройствах эти элементы не видимы.
visible-sm	Делает элемент видимым только на устройствах, имеющих экран шириной больше или равно 768px (т.е. ≥768px), и меньше чем 992px. На других устройствах эти элементы не видимы.
visible-md	Делает элемент видимым лишь на устройствах, имеющих экран шириной больше или равно 992px (т.е. ≥992px), и меньше 1200px. На других устройствах эти элементы не видимы.
visible-lg	Делает элемент видимым только на устройствах, имеющих экран шириной больше или равно 1200px (т.е. ≥1200px). На других устройствах эти элементы не видимы.

Пример:


<p>
этот текст виден только на смартфонах.
</p>
<p>
этот текст виден только на планшетах.
</p>
<p>
этот текст виден только на устройствах со средним размером экрана.
</p>
<p>
этот текст виден только на устройствах с большим экраном. 
</p>

Скрытие элементов

Класс	Описание
hidden-xs	Скрыть эти элементы только для устройств, имеющих экран шириной менее 768px. На других устройствах эти элементы видимы.
hidden-sm	Скрыть эти элементы только для устройств, имеющих экран шириной больше или равно 768px (т.е. ≥768px), и меньше 992px. На других устройствах эти элементы видимы.
hidden-md	Скрыть эти элементы только для устройств, имеющих экран с шириной больше или равно 992px (т.е. ≥992px), и меньше 1200px. На других устройствах эти элементы видимы.
hidden-lg	Скрыть эти элементы только для устройств, имеющих экран с шириной больше или равно 1200px (т.е. ≥1200px). На других устройствах эти элементы видимы.

Пример:


<p>
Этот текст будет виден только на смартфонах. 
</p>
<p>
Этот текст будет виден только на планшетах.
</p>
<p>
Этот текст будет виден только на устройствах со средним размером экрана.
</p>
<p>
Этот текст будет виден только на устройствах с большим экраном.
</p>

Скрытие и отображение элементов для печати

Класс	Описание
visible-print	Позволяет скрыть отображение блочного элемента в браузере. При печати этот элемент будет виден.
hidden-print	Скрыть элемент при печати страницы. При отображении в браузере этот элемент будет виден.

Пример:


<p>
Этот текст будет виден только для печати.
</p>
<p>
Этот текст будет виден только в браузере, а для печати будет скрыт. 
</p>

Попробуйте. Я думаю, вы частенько будете пользоваться этой фишкой.
Удачи, жду на следующих уроках.

Для шпаргалки можете сохранить вот эту картинку себе:

Изображение можно увеличить

Предыдущая запись
Создание дополнительных классов. Основы bootstrap 3 для начинающих. Урок №23
Следующая запись
Миниатюры. Основы bootstrap 3 для начинающих. Урок №25

Web-разработка • HTML и CSS

Bootstrap — это открытый и бесплатный HTML, CSS и JS фреймворк, который используется веб-разработчиками для быстрого создания адаптивных дизайнов сайтов. В сущности — это просто набор сss- и js-файлов. После подключения этих файлов к странице станут доступны большое количество готовых классов и компонентов.

Сетка

Сетка — это набор предопределённых css-классов, с помощью которых можно задать необходимое поведение блокам и построить с их помощью адаптивный макет сайта.

Оберточный контейнер

Оберточный контейнер — это элемент сетки, с которого начинается создание макета для всей страницы или её части (шапка, основной области, подвал). Контейнер может быть адаптивно-фиксированным (класс container) или адаптивно-резиновым (класс container-fluid).

Адаптивно-фиксированный контейнер имеет постоянную ширину в пределах некоторого диапазона ширины окна браузера. Кроме того, контейнер центрирует себя в горизонтальном направлении и задает внутренние отступы (padding) слева и справа по 15рх.

Адаптивно-резиновый контейнер занимает всю ширину окна браузера. Кроме этого, он также как и адаптивно-фиксированный контейнер, задает внутренние отступы (padding) слева и справа по 15рх.

.container { /* адаптивно-фиксированный контейнер */
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
. container-fluid { /* адаптивно-резиновый контейнер */
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

Ряды и адаптивные блоки

Следующий элемент сетки — это ряд (блок div с классом row), который применяется только для оборачивания других элементов (адаптивных блоков). Его основное назначение — это нейтрализация положительного внутреннего отступа (15px слева и справа) контейнера.

.row {
    margin-right: -15px;
    margin-left: -15px;
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
/* .......... */
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    padding-right: 15px;
    padding-left: 15px;
}

Последний элемент сетки — адаптивные блоки (div с классом col-?-?). Эти блоки являются основными «строительными» кирпичиками, именно они и формируют необходимую структуру. Адаптивный блок на разных устройствах может иметь разную ширину.

Медиа-запросы

/* Очень маленькие устройства (телефоны, менее чем 768px) */  
/* Без медиа запросов, так как в Bootstrap это по умолчанию */  

/* Небольшие устройства (планшеты, 768px и выше) */  
@media (min-width: @screen-sm-min) { ... }

/* Средние устройства (ноутбуки, 992px и выше) */  
@media (min-width: @screen-md-min) { ... }

/* Большие устройства (компьютеры, 1200px и выше) */  
@media (min-width: @screen-lg-min) { ... }

	Телефоны (	Планшеты (≥768px)	Ноутбуки (≥992px)	Настольные (≥1200px)
Ширина контейнера	auto	750px	970px	1170px
Класс префикса	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
Ширина колонки	auto	~62px	~81px	~97px

Заготовка страницы

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap</title>
    <link href="css/bootstrap. css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
</head>
<body>
    ..........
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

/*
Стили для самых маленьких устройств, концепция «Mobile First». Эти стили будут применяться
и для всех других экранов (sm, md, lg), если не будут переопределены в media-запросах.
*/
body {
    font-family: 'Open Sans', sans-serif;
}
img {
    max-width: 100%;
}

/* Небольшие устройства (планшеты, 768px и выше) */  
@media only screen and (min-width: 768px) {
    .....
}

/* Средние устройства (ноутбуки, 992px и выше) */
@media only screen and (min-width: 992px) {
    .....
}

/* Большие устройства (компьютеры, 1200px и выше) */
@media only screen and (min-width: 1200px) {
    .....
}

Сброс обтекания

<div>
    <div>...</div>
    <div>. ..</div>
    <div>...</div>

    <!-- Сброс обтекания для md и lg устройств -->
    <div></div>

    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

Смещение блоков

<div>
    <div>...</div>
    <!-- Смещение вправо на 4 колонки для md-устройств-->
    <div>...</div>
</div>

<div>
    <div>...</div>
    <div>...</div>
    <!-- Смещение на 3 колонки для xs-устройств, отмена смещения для sm-устройств -->
    <div>...</div>
</div>

Изменение порядка следования

Вот так можно поменять местами блоки main и aside для md-устройств:

<div>
    <!-- Смещаем блок main шириной 9 колонок вправо на 3 колонки -->
    <main>...</main>
    <!-- Смещаем блок aside шириной 3 колонки влево на 9 колонок -->
    <aside>. ..</aside>
</div>

Служебные классы

	Телефоны (	Планшеты (≥768px)	Ноутбуки (≥992px)	Настольные (≥1200px)
`.visible-xs-*`	Visible	Hidden	Hidden	Hidden
`.visible-sm-*`	Hidden	Visible	Hidden	Hidden
`.visible-md-*`	Hidden	Hidden	Visible	Hidden
`.visible-lg-*`	Hidden	Hidden	Hidden	Visible

Группа классов	Свойство `display`
`.visible-*-block`	`display: block;`
`. visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

	Телефоны (	Планшеты (≥768px)	Ноутбуки (≥992px)	Настольные (≥1200px)
`.hidden-xs`	Hidden	Visible	Visible	Visible
`.hidden-sm`	Visible	Hidden	Visible	Visible
`.hidden-md`	Visible	Visible	Hidden	Visible
`.hidden-lg`	Visible	Visible	Visible	Hidden

Быстрое выравнивание

<div>
    <div>. ="col-"], .row > [class*=" col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

Стили, чтобы сразу видеть, какая сейчас ширина окна браузера:

.container > .row > *:not(.clearfix) {
    background: #eee;
    border: 1px solid #93f;
}
@media (min-width: 768px) {
    .container > .row > *:not(.clearfix) {
        border: 1px solid #09f;
    }
}
@media (min-width: 992px) {
    .container > .row > *:not(.clearfix) {
        border: 1px solid #6c6;
    }
}
@media (min-width: 1200px) {
    .container > .row > *:not(.clearfix) {
        border: 1px solid #f99;
    }
}

Поиск:
CSS • HTML • Web-разработка • Верстка • Шаблон • Bootstrap • Сетка • Фреймворк • Шаблон сайта

Показать свойство · Bootstrap

Быстро и быстро переключайте отображаемое значение компонентов и многое другое с помощью наших утилит для отображения. Включает поддержку некоторых из наиболее распространенных значений, а также некоторые дополнительные функции для управления отображением при печати.

Как это работает

Измените значение свойства display с помощью наших служебных классов адаптивного отображения. Мы намеренно поддерживаем только подмножество всех возможных значений для display .Классы можно комбинировать для получения различных эффектов по мере необходимости.

Обозначение

Показать служебные классы, которые применяются ко всем точкам останова, от xs до xl , не имеют аббревиатуры точки останова в них. Это потому, что эти классы применяются от min-width: 0; и выше, и поэтому не связаны медиа-запросами. Остальные точки останова, однако, включают аббревиатуру точки останова.

Таким образом, классы именуются в формате:

.d- {value} для xs
. d- {breakpoint} - {value} для sm , md , lg и xl .

Где значение — одно из:

нет
рядный
рядный блок
блок
стол
таблица-ячейка
стол-ряд
гибкий
линейный гибкий

Медиа-запросы влияют на ширину экрана с заданной точкой останова или больше .Например, .d-lg-none устанавливает display: none; на экранах LG и xl .

Примеры

   d-inline 
 d-inline

d-блок
d-блок

   d-блок 
 d-block

Скрывающиеся элементы

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

Чтобы скрыть элементы, просто используйте класс .d-none или один из классов .d- {sm, md, lg, xl} -none для любого варианта адаптивного экрана.

Чтобы отображать элемент только в заданном интервале размеров экрана, вы можете объединить один класс .d - * - none с классом .d - * - * , например .d-none .d-md- block .d-xl-none скроет элемент для всех размеров экрана, кроме средних и больших устройств.

Размер экрана	Класс
Скрыто на всех	`.d-нет`
Скрыто только на xs	`.d-none .d-sm-block`
Скрыто только на sm	`.d-sm-none .d-md-block`
Скрыто только на мкр.	`.d-md-none .d-lg-block`
Скрыто только на LG	`.d-lg-none .d-xl-block`
Скрыто только на XL	`.d-xl-none`
Виден на всех	`.d-блок`
Отображается только на xs	`.d-блок .d-sm-none`
Виден только на sm	`.d-none .d-sm-block .d-md-none`
Виден только на md	`.d-none .d-md-block .d-lg-none`
Отображается только на LG	`.d-none .d-lg-block .d-xl-none`
Отображается только на xl	`.d-none .d-xl-block`

скрыть на экранах шире, чем LG

скрыть на экранах меньше LG

   скрыть на экранах шире lg 
 скрыть на экранах меньше lg

Показать в печати

Измените значение элементов display при печати с помощью наших служебных классов отображения печати. Включает поддержку тех же значений display , что и наши адаптивные утилиты .d- * .

.d-print-none
.d-print-inline
.d-print-inline-block
.d-print-block
.d-print-table
.d-print-table-row
.d-print-table-cell
.d-print-flex
.d-print-inline-flex

Классы печати и отображения можно комбинировать.

Только экран (Скрывать только при печати)

Только печать (Скрыть только на экране)

Скрыть до большого размера на экране, но всегда показывать на печати

   Только экран (Скрывать только при печати) 
 Только печать (Скрыть только на экране) 
 Скрыть до большого размера на экране, но всегда показывать при печати

Справочник по вспомогательным классам CSS для начальной загрузки

Текст

Добавьте смысл с помощью цветов текста с помощью классов ниже. Ссылки будут темнеть при наведении курсора:

Класс	Описание	Пример
. Без звука	Стиль текста с классом «без звука»	Попробуй
.text-primary	Текст, стилизованный под класс «text-primary»	Попробуй
.text-success	Текст с классом «text-success»	Попробуй
.текст-информация	Текст, стилизованный под класс «text-info»	Попробуй
. Текст-предупреждение	Текст, стилизованный под класс «text-warning»	Попробуй
.text-dangerous	Текст, стилизованный под класс «text-dangerous»	Попробуй

Фон

Добавьте смысл с помощью фоновых цветов с помощью классов ниже. Ссылки будут темнеть при наведении курсора, как и классы текста:

Класс	Описание	Пример
. bg-primary	Ячейка таблицы имеет стиль класса «bg-primary»	Попробуй
.bg-success	Ячейка таблицы имеет стиль класса «bg-success»	Попробуй
.bg-info	Ячейка таблицы имеет стиль класса «bg-info»	Попробуй
.bg-warning	Ячейка таблицы имеет стиль класса «bg-warning»	Попробуй
.BG-Опасность	Ячейка таблицы стилизована под класс «bg-dangerous»	Попробуй

Прочие

Класс	Описание	Пример
. Тягово-левый	Смещает элемент влево	Попробуй
. Тягово-правый	Смещает элемент вправо	Попробуй
. Центральный блок	Устанавливает элемент для отображения: block с margin-right: auto и margin-left: auto	Попробуй
. clearfix	Очищает поплавки	Попробуй
. Показать	Принудительно отображает элемент (отображение: блок)	Попробуй
. Скрытый	Заставляет элемент быть скрытым (отображение: нет)	Попробуй
. Невидимый	Заставляет элемент быть невидимым (видимость: скрыта). Занимает место на странице, даже если она невидима	Попробуй
.sr-only	Скрывает элемент для всех устройств, кроме программ чтения с экрана	Попробуй
.sr-only-focusable	Объедините с .sr-only, чтобы снова показать элемент, когда он находится в фокусе (например, пользователем, работающим только с клавиатурой)	Попробуй
.text-hide	Помогает заменить текстовое содержимое элемента фоновым изображением	Попробуй
. Закрыть	Обозначает значок закрытия	Попробуй
.каретка	Указывает на функциональность раскрывающегося списка (автоматически меняет направление в раскрывающемся меню)	Попробуй

Адаптивные утилиты

Эти классы используются для отображения и / или скрытия содержимого устройством с помощью медиа-запросов.

Используйте один или комбинацию доступных классов для переключения содержимого между точками останова области просмотра:

Классы	Очень маленькие устройства Телефоны (<768 пикселей)	Маленькие устройства Таблетки (≥768 пикселей)	Средние устройства Настольные компьютеры (≥992 пикселей)	Большие устройства Настольные компьютеры (≥1200 пикселей)
. видимый-XS- *	видимый	Скрытый	Скрытый	Скрытый
.visible-sm- *	Скрытый	видимый	Скрытый	Скрытый
.visible-md- *	Скрытый	Скрытый	видимый	Скрытый
.видимый-LG- *	Скрытый	Скрытый	Скрытый	видимый
.hidden-xs	Скрытый	видимый	видимый	видимый
.hidden-sm	видимый	Скрытый	видимый	видимый
. скрытый-MD	видимый	видимый	Скрытый	видимый
.hidden-LG	видимый	видимый	видимый	Скрытый

Скрытый

Скрыть элементы в зависимости от размера экрана:

Пример

Измените размер этой страницы, чтобы увидеть, как изменится текст ниже:

Этот текст скрыт на ДОПОЛНИТЕЛЬНО МАЛЕНЬКОМ экране.

Этот текст скрыт на МАЛЕНЬКОМ экране.

Это текст, скрытый на СРЕДНЕМ экране.

Это текст, скрытый на БОЛЬШОМ экране. .

Результат:

Пример

Измените размер этой страницы, чтобы увидеть, как изменится текст ниже:

Попробуй сам »

Начиная с версии 3.2.0 классы .visible - * - * для поставляются в трех вариантах, по одному для каждого дисплея CSS
Стоимость недвижимости:

Группа классов	Дисплей CSS
видимый — * — блок	дисплей: блочный;
. видимый — * — встроенный	дисплей: встроенный;
.visible — * — встроенный блок	дисплей: встроенный блок;

Например, для небольших ( см ) экранов доступны классы .visible - * - * : .visible-sm-block , .visible-sm-inline и .visible-sm-inline-block .

Классы .visible-xs , .visible-sm , .visible-md и .visible-lg являются устаревшими с версии v3.2.0 .

Пример

Измените размер этой страницы, чтобы увидеть, как изменится текст ниже:

Этот текст отображается только на ДОПОЛНИТЕЛЬНО МАЛЕНЬКОМ экране.

Этот текст отображается только на МАЛЕНЬКОМ экране.

Этот текст отображается только на СРЕДНЕМ экране.

Этот текст отображается только на БОЛЬШОМ экране.

Результат:

Пример

Измените размер этой страницы, чтобы увидеть, как изменится текст ниже:

Этот текст отображается только на МАЛЕНЬКОМ экране.

Этот текст отображается только на СРЕДНЕМ экране.

Этот текст отображается только на БОЛЬШОМ экране.

Попробуй сам »

bootstrap 4 отзывчивые утилиты видимые / скрытые xs sm lg не работают

Решение:

With Bootstrap 4 .hidden- * классы были полностью удалены (да, они были заменены на hidden - * - * , но эти классы также исчезли из альфа-версии v4).

Начиная с v4-beta, вы можете комбинировать классы .d - * - none и .d - * - block для достижения того же результата.

visible- * также был удален ; вместо использования явных классов . visible- * сделайте элемент видимым, не скрывая его (опять же, используйте комбинации .d-none.д-мд-блок). Вот рабочий пример:

class = "hidden-xs" становится class = "d-none d-sm-block" (или d-none d-sm-inline-block ) …

   hidden-xs 

 скрытый-xs

Пример отзывчивых утилит Bootstrap 4 :

   скрытый-xs
   visible-md и вверх (скрытый-sm и вниз)
     visible-lg и вверх (скрытый-md и вниз)
       visible-xl 
    
  


 eXtra Small <576px 
 SMall ≥576px 
 МЕДИУМ ≥768px 
 БОЛЬШОЙ ≥992px 
 eXtra Large ≥1200px 

 hidden-xl (visible-lg и вниз)
   visible-md и вниз (скрытый-lg и вверх)
     visible-sm и вниз (или hidden-md и вверх)
       visible-xs

код. io / _yatko / pen / ZJXQxy

Документация

Размер экрана Класс

–

Скрыто на всех .d-none
Скрыт только на xs .d-none .d-sm-block
Скрыт только на sm .d-sm-none .d-md-block
Скрыт только на md .d-md-none .d-lg-block
Скрыто только на LG .d-lg-none .d-xl-block
Скрыто только на xl .d-xl-none
Виден на всех .d-блоке
Отображается только на xs .d-block .d-sm-none
Виден только на sm .d-none .d-sm-block .d-md-none
Виден только на md .d-none .d-md-block .d-lg-none

Отображается только на LG .beta) изменил классы для гибкого скрытия / отображения элементов. См. Эту ссылку, чтобы узнать, какие классы использовать: http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

Адаптивные служебные программы — Bootstrap — Хьюстонский университет

Для более быстрой разработки, удобной для мобильных устройств, используйте эти служебные классы для отображения и скрытия содержимого по устройствам с помощью медиа-запросов. Также включены служебные классы для переключения содержимого при печати.

Попробуйте использовать их на ограниченной основе и избегайте создания совершенно разных версий одного и того же сайта.Вместо этого используйте их для дополнения презентации каждого устройства.

Доступные классы

Используйте один или комбинацию доступных классов для переключения содержимого между точками останова области просмотра.

	Сверхмалые устройства Телефоны (<768 пикселей)	Маленькие устройства Планшеты (≥768 пикселей)	Средние устройства Настольные ПК (≥992 пикселей)	Большие устройства Настольные компьютеры (≥461200 пикселей)
`. visible-xs- *`	видимый	Скрытый	Скрытый	Скрытый
`.visible-sm- *`	Скрытый	видимый	Скрытый	Скрытый
`.visible-md- *`	Скрытый	Скрытый	видимый	Скрытый
`.visible-LG- *`	Скрытый	Скрытый	Скрытый	видимый
`.скрытый-xs`	Скрытый	видимый	видимый	видимый
`.hidden-sm`	видимый	Скрытый	видимый	видимый
`.hidden-md`	видимый	видимый	Скрытый	видимый
`. hidden-LG`	видимый	видимый	видимый	Скрытый

Начиная с версии v3.2.0 классы .visible - * - * для каждой точки останова представлены в трех вариантах, по одному для каждого значения свойства отображения CSS , указанного ниже.

Группа классов	CSS `дисплей`
`.visible - * - блок`	`дисплей: блок;`
`.visible - * - встроенный`	`дисплей: встроенный;`
`.видимый - * - встроенный блок`	`дисплей: строчно-блочный;`

Итак, для очень маленьких ( xs ) экранов, например, доступны классы .visible - * - * : .visible-xs-block , . visible-xs-inline и .visible. -xs-встроенный-блок .

Классы .visible-xs , .visible-sm , .visible-md и .visible-lg также существуют, но в версии 3.2.0 . Они приблизительно эквивалентны блоку .visible - * - , за исключением дополнительных особых случаев для переключения элементов, связанных с

Классы печати

Подобно обычным адаптивным классам, используйте их для переключения содержимого для печати.

Классы	Браузер	Печать
`.visible-print-block` `.visible-print-inline` `.видимая печать встроенного блока`	Скрытый	видимый
`. Скрытая печать`	видимый	Скрытый

Класс . visible-print также существует, но устарел начиная с версии 3.2.0. Это примерно эквивалентно .visible-print-block , за исключением дополнительных особых случаев для элементов, связанных с

Тестовые примеры

Измените размер браузера или загрузите его на разных устройствах, чтобы протестировать отзывчивые служебные классы.

Виден на …

Зеленые галочки указывают на то, что элемент виден в текущем окне просмотра.

Extra small ✔ Виден на x-small

Маленький ✔ Виден на маленьком

Средний ✔ Виден на среднем

Большой ✔ Виден на большом

Очень маленький и маленький ✔ Виден на x-small и small

Среднее и большое ✔ Видно на средних и больших

Очень маленькие и средние ✔ Видны на x-маленьких и средних

Маленькие и большие ✔ Видны на маленьких и больших

Очень маленькие и большие ✔ Видно на x-маленьких и больших

Малые и средние ✔ Видны на малых и средних

Скрыто на.

Здесь зеленые галочки также указывают на то, что элемент скрыт в вашем текущем окне просмотра.

Очень маленький ✔ Скрыто на x-small

Маленький ✔ Скрытый на маленьком

Средний ✔ Скрыт на среднем

Большой ✔ Скрытый на большом

Очень маленькие и маленькие ✔ Скрытые на x-small и small

Средний и большой ✔ Скрытый на средних и больших

Очень маленькие и средние ✔ Скрытые на x-маленьких и средних

Маленькие и большие ✔ Скрытые на малых и больших

Очень маленькие и большие ✔ Скрытые на x-маленьких и больших

Малые и средние ✔ Скрытые на малых и средних

Отсутствует видимое — и скрытое — в Bootstrap v4 · GitHub

Отсутствует видимое — ** и скрыто — ** в Bootstrap v4 · GitHub

Мгновенно делитесь кодом, заметками и фрагментами.

Отсутствует видимый — ** и скрытый — ** в Bootstrap v4

	// Восстанавливаем «скрытые» служебные классы Bootstrap 4 alpha.
	@each $ bp в ключах карты ($ grid-breakpoints) {
	.hidden — # {$ bp} -up {
	@include media-breakpoint-up ($ bp) {
	дисплей: нет! Важно;
	}
	}
	.скрыто — # {$ bp} -down {
	@include media-breakpoint-down ($ bp) {
	дисплей: нет! Важно;
	}
	}
	. hidden — # {$ bp} -only {
	@include media-breakpoint-only ($ bp) {
	дисплей: нет! Важно;
	}
	}
	}

Классы hidden- * и visible- * больше не существуют в Bootstrap 4 Beta.Если вы хотите скрыть элемент на определенных уровнях
или точки останова в Bootstrap 4, используйте классы отображения d- * соответственно. Помните, что xs — это точка останова по умолчанию (подразумеваемая),
если не переопределено большей точкой останова.

Старый класс	Новый класс
`скрытый xs-вниз`	`d-none d-sm-блок`
`скрытые узлы`	`d-none d-md-block`
`скрытый-md-down`	`d-none d-lg-блок`
`скрытый LG-вниз`	`d-none d-xl-блок`
`скрытый-XL-вниз`	`d-none` (то же, что и `, скрытый` )
`скрытый-xs-up`	`d-none` (то же, что и `, скрытый` )
`скрытый sm-up`	`d-sm-нет`
`скрытый-md-up`	`d-md-none`
`скрытый lg-up`	`d-lg-none`
`скрытый xl-up`	`d-xl-none`
`hidden-xs` (только)	`d-none d-sm-block` (аналогично `hidden-xs-down` )
`hidden-sm` (только)	`d-блок d-sm-none d-md-block`
`hidden-md` (только)	`d-блок d-md-none d-lg-block`
`скрытый LG` (только)	`d-блок d-lg-none d-xl-block`
`hidden-xl` (только)	`d-блок d-xl-none`
`visible-xs` (только)	`d-блок d-sm-none`
`видимый свет` (только)	`d-none d-sm-block d-md-none`
`visible-md` (только)	`d-none d-md-block d-lg-none`
`visible-lg` (только)	`d-none d-lg-block d-xl-none`
`visible-xl` (только)	`d-none d-xl-блок`

Вы не можете выполнить это действие в настоящее время. Вы вошли в систему с другой вкладкой или окном. Перезагрузите, чтобы обновить сеанс.
Вы вышли из системы на другой вкладке или в другом окне. Перезагрузите, чтобы обновить сеанс.

Bootstrap 4 — Адаптивные утилиты

Адаптивные утилиты — это группа классов на основе медиа-запросов, которые определяют, когда элемент должен быть скрыт или показан в зависимости от области просмотра. Один из популярных вариантов использования для этого — управление навигацией по дисплею. Например, страница может иметь панель навигации на больших дисплеях и скрытую навигацию на маленьких дисплеях, которая отображается только тогда, когда пользователь решает открыть навигацию.

Давайте посмотрим на быстрый пример с нашей страницей Размер печати . Добавьте классы d-none и d-sm-block к элементам img :

  
     Наши размеры для печати 
    
        
             jpg">
             Маленький 
            ...
        
        
            
             Средний 
            ...
        
        
            
             Большой 
            ...
        
        
            
             Очень большой 
            ...

Класс d-done , как следует из его названия, устанавливает свойство отображения элемента, к которому он применяется, на none .Это делает элемент невидимым для всех, независимо от ширины области просмотра. С другой стороны, класс d-sm-block устанавливает свойство display элемента block , делая его видимым. Комбинация этих двух классов гарантирует, что рассматриваемый элемент станет видимым для небольших дисплеев и выше. Это эквивалент использования класса hidden-xs в Bootstrap 3:

Рисунок 2.18: Скрытие элементов в зависимости от размера области просмотра с использованием комбинации классов d-sm-block и d-none (example16.html)

Следует отметить, что, опять же, Bootstrap предлагает различные варианты этих классов в зависимости от требуемой точки останова и значения свойства. Например, d-sm-none , d-md-block , d-sm-block-inline , d-md-inline и т. Д.

Скрытие в Bootstrap 3
Bootstrap 3 предлагает только hidden- * (где * относится к размеру области просмотра. Например, hidden-xs ). Таким образом, чтобы скрыть элемент только тогда, когда дисплей очень маленький, мы добавим класс hidden-xs к нашему элементу при использовании Bootstrap 3.Класс hidden- * был удален из Bootstrap 4.

То есть классы d- * придерживаются соглашений, найденных в системе сеток. В сетке col-md нацелен на все дисплеи Medium и ниже. Аналогично, d-md — none будет нацелен только на Medium дисплеи или дисплеи меньше Medium (то есть маленькие).

Точки останова и правила мультимедиа с использованием Internet Explorer 10 на Windows Phone 8
Телефоны с Windows 8 до обновления 3 (выпущенного 14 октября 2013 г.) не будут правильно применять медиа-запросы Bootstrap, что означает, что страницы, использующие адаптивные классы, могут сломаться.Проблема вместе с (коротким) исправлением подробно описана в документации Bootstrap 4.

Вопрос Bootstrap 3.1 visible-xs и visible-sm не работают вместе

Вопрос

Bootstrap 3.1 visible-xs и visible-sm не работают вместе

93030 видимость

0 arrow_circle_up

0
arrow_circle_down

У меня есть div, который я хочу показать на устройствах sm и xs, он выглядит так:

  
    Элемент 1 
    Пункт 2 
    Пункт 3

Моя программа начальной загрузки загружается с компакт-диска без каких-либо настроек.

Предполагается, что этот div будет отображаться на xs и sm, как указано в классах, но результатом является отображение sm class : none! Important переопределяет отображение xs : block! Important , когда вы переходите к размеру xs в браузере .

Я попытался найти информацию в документации по начальной загрузке, но у них есть только таблица, в которой не объясняется, как использовать несколько параметров видимости в одном и том же div.

Ответ — 1

проверено

0 arrow_circle_up

0
arrow_circle_down

Если вы хотите показать его в нескольких размерах, не используйте visible- * , а вместо этого скройте другие размеры, которые вам не нужны, с помощью hidden- * .В данном случае: hidden-md hidden-lg

Ответ — 2

0 arrow_circle_up

0
arrow_circle_down

Вы должны добавить одно значение из:

 `.visible - * - block для `display: block;`
`.visible - * - inline` для` display: inline; `
`.visible - * - inline-block` для` display: inline-block; `

В этом случае у вас будет что-то вроде этого:

Продолжайте в том же духе 🙂

Ответ — 3

0 arrow_circle_up

0
arrow_circle_down

Когда я сталкиваюсь с подобными проблемами, я просто предпочитаю использовать собственный настраиваемый медиа-запрос для управления видимостью элемента.

  .someclass {
    дисплей: нет;
}

@media (max-width: 992px) {
   .someclass {
      дисплей: нормальный! важный;
   }
}

Или, если вы хотите использовать это повторно, определите собственный класс, например:

  .visible-tablet-mobile {
    дисплей: нет;
}

@media (max-width: 992px) {
   .visible-tablet-mobile {
        дисплей: нормальный! важный;
   }
}

и повторно используйте его вместо того, чтобы давать вашему div два класса видимости одновременно.

Ответ — 4

0 arrow_circle_up

0
arrow_circle_down

Bootstraps работает с классами, начиная с указанного класса ширины и выше.Например, если вы поместите col-sm-4 , это просто заставит его иметь ширину 4 столбца для sm-width и шире.

В вашем случае простого class = "col-xs-4 hidden-md hidden-lg" должно быть достаточно, чтобы получить желаемое решение.

Причина, по которой ваше первое решение не сработало, заключается в том, что вы указали visible-xs перед visible-sm . Это навязывает ему класс sm, делая его невидимым на ширине xs. Поскольку это указано в стандартном загрузочном файле css.

Edit: для тех, кто использует Bootstrap 4, это может быть достигнуто с помощью всего class = "col-4 d-md-none"

Источник:
https://stackoverflow.com/questions/21667100

Bootstrap visible xs: Display property · Bootstrap

Bootstrap 4: hidden, visible

Похожие статьи

Почему не работает класс visible-xs?

Bootstrap 4: скрытые видимые колы?

Отображение и скрытие элементов. Основы bootstrap3 для начинающих. Урок №24

Отображение и скрытие элементов. Основы bootstrap3 для начинающих. Урок №24

Web-разработка • HTML и CSS

Сетка

Оберточный контейнер

Ряды и адаптивные блоки

Медиа-запросы

Заготовка страницы

Сброс обтекания

Смещение блоков

Изменение порядка следования

Служебные классы

Быстрое выравнивание

Показать свойство · Bootstrap

Как это работает

Обозначение

Примеры

Скрывающиеся элементы

Показать в печати

Справочник по вспомогательным классам CSS для начальной загрузки

Текст

Фон

Прочие

Адаптивные утилиты

Скрытый

Пример

Пример

Этот текст скрыт на ДОПОЛНИТЕЛЬНО МАЛЕНЬКОМ экране.

Этот текст скрыт на МАЛЕНЬКОМ экране.

Это текст, скрытый на СРЕДНЕМ экране.

Это текст, скрытый на БОЛЬШОМ экране. .

Пример

Пример

Пример

Этот текст отображается только на ДОПОЛНИТЕЛЬНО МАЛЕНЬКОМ экране.

Этот текст отображается только на МАЛЕНЬКОМ экране.

Этот текст отображается только на СРЕДНЕМ экране.

Этот текст отображается только на БОЛЬШОМ экране.

Пример

Этот текст отображается только на МАЛЕНЬКОМ экране.

Этот текст отображается только на МАЛЕНЬКОМ экране.

Этот текст отображается только на СРЕДНЕМ экране.

Этот текст отображается только на БОЛЬШОМ экране.

bootstrap 4 отзывчивые утилиты видимые / скрытые xs sm lg не работают

Адаптивные служебные программы — Bootstrap — Хьюстонский университет

Доступные классы

Классы печати

Тестовые примеры

Виден на …

Скрыто на.

Отсутствует видимое — ** и скрытое — ** в Bootstrap v4 · GitHub

Bootstrap 4 — Адаптивные утилиты

Наши размеры для печати

Маленький

Средний

Большой

Очень большой

Вопрос Bootstrap 3.1 visible-xs и visible-sm не работают вместе

Вопрос

Bootstrap 3.1 visible-xs и visible-sm не работают вместе

Ответ — 1

Ответ — 2

Ответ — 3

Ответ — 4

Добавить комментарий Отменить ответ

Отсутствует видимое — и скрытое — в Bootstrap v4 · GitHub