Bootstrap xs visible: File not found · Bootstrap v5.1

Содержание

Почему не работает класс 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 3 — Сетка — ИТ Шеф

В этой статье познакомимся с классами фреймворка Bootstrap 3, предназначенными для создания адаптивного «скелета» (макета) сайта.

«Строительные» элементы сетки Bootstrap 3

Сетка Bootstrap состоит из «строительных» элементов. Основные — это обёрточные контейнеры, ряды, адаптивные блоки и отзывчивые служебные классы.

По существу сетка — это просто список предопределённых классов, с помощью которых можно задать необходимое поведение блокам (HTML элементам) и построить с их помощью определённый адаптивный макет сайта.

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

Обёрточный контейнер — это «строительный» элемент сетки, с которого начинается создание макета для всей страницы или её части (например, шапки, основного меню, основной области, футера) в зависимости от стратегии разработки.

Контейнер в Bootstrap бывает адаптивно-фиксированным или адаптивно-резиновым.

Первый (адаптивно-фиксированный контейнер) характеризуется тем, что он имеет постоянную ширину в пределах некоторого диапазона ширины viewport (области просмотра).

В следующей таблице приведено то, какую ширину имеет адаптивно-фиксированный контейнер при той или иной ширине области просмотра (viewport) браузера:






Ширина viewportШирина контейнера (container)
<768pxШирина контейнера равна ширине viewport
>= 768px и <992px750px
>= 992px и <1200px970px
<=1200px1170px

Кроме установки ширины адаптивно-фиксированный контейнер Bootstrap ещё центрирует себя в горизонтальном направлении относительно краёв страницы. Выполняет это он с помощью CSS свойств margin-left:auto и margin-right:auto. Ещё адаптивно-фиксированный контейнер задает внутренние отступы слева и справа по 15рх (с помощью CSS свойств padding-left:15px и padding-right:15px) для содержимого, которое в него помещено.


<!-- HTML-код адаптивно-фиксированного контейнера -->
<div>
  ...
</div>

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


<!-- HTML-код адаптивно-резинового контейнера -->
<div>
  ...
</div>

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

Итак, первый «строительный» элемент сетки Bootstrap – это обёрточный контейнер. Он определяет ширину макета на различных viewport, а также выполняет его центрирование (только адаптивно-фиксированный контейнер) относительно левого и правого края рабочей области вкладки или окна браузера.

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

Bootstrap — ряд, расположенный внутри адаптивно-фиксированного контейнера

Пример формирования внутренних отступов:


container (+15px) -> row (-15px) -> col (+15px) -> контент
container (+15px) -> row (-15px) -> col (+15px) -> row (-15px) -> col (+15px) -> контент
*col - это адаптивный блок

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

Следующий «строительный» элемент сетки Bootstrap – это адаптивный блок (div с классом col-?-?).

Адаптивный блок Bootstrap

Адаптивные блоки — это элементы сетки Bootstrap, которым установлен один или несколько классов col-?-?. Данные блоки являются основными «строительными» кирпичиками, именно они и формируют необходимую структуру.

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

Как же осуществляется установка ширины адаптивному блоку? Установка ширины адаптивному блоку, которую он должен иметь на определённом устройстве, задаётся по умолчанию числом от 1 до 12 (количеством колонок Bootstrap). Данное число указывается вместо второго знака ? в классе col-?-?.

Данное число (по умолчанию от 1 до 12) определеяет какой процент от ширины родительского элемента должен иметь адаптивный блок.

Например, число 1 — устанавливает адаптивному блоку ширину, равную 8,3% (1/12) от ширины родительского блока. Число 12 — ширину, равную 100% (12/12) от ширины родительского блока.

Как задаётся ширина адаптивного блока в Bootstrap

Кроме указания ширины адаптивному блоку необходимо ещё указать и тип устройства (вместо 1 вопроса). Класс устройства будет определять то, на каком viewport будет действовать эта ширина. В Bootstrap 3 различают 4 основных класса. Это xs (ширина viewport >0) , sm (ширина viewport >= 768px), md (ширина viewport >= 992px) и lg (ширина области просмотра браузера >=1200px).

Например, адаптивный блок с классом col-xs-12 col-sm-6 col-md-4 col-lg-3 будет иметь на устройстве xs ширину 100% (12/12), на sm — 50% (6/12), на md — 33,3% (4/12), на lg — 25% (3/12).

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

Например, адаптивный блок с классом col-xs-6 col-lg-3 будет иметь на устройствах xs, sm и md ширину 50% (6/12), на lg — 25% (3/12).

Адаптивный блок, также как и контейнер, задаёт положительные отступы слева и справа по 15px для контента, который в него будет помещён.

В правильном макете, построенном на основе сетки Bootstrap, адаптивный блок должен всегда иметь в качестве своего родителя ряд.

Например, разобьём блок на 3 равные колонки, которые на xs будут отображаться вертикально, а на sm и выше горизонтально:


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

Если необходимо рассчитать ширину колонок в пикселях, то это правильно делать на границах контрольных точек (т.е. когда одно действие класса сменяется другим).

Например, расчитаем, доступную ширину под контент для первого и второго блока:


<div>  
  <div>
    <div>1 блок...</div>
    <div>2 блок...</div> 
  </div>
</div>






Контрольные точкиДоступная ширина 1 блокаДоступная ширина 2 блока
320px — 749.98pxот 290px (320px — padding (30px)) до 719.98px (749.98px — padding (30px))от 290px (320px — padding (30px)) до 719.98px (749.98px — padding (30px))
750px — 969.98px720px (750px — padding (30px))720px (750px — padding (30px))
970px — 1169.98px616,7px (970px*8/12 — padding (30px))293,3px (70px*4/12 — padding (30px))
1170px и больше750px (1170px*8/12 — padding (30px))360px (1170px*4/12 — padding (30px))

Расположение адаптивных блоков в родительском элементе

Адаптивные блоки располагаются в родительском элементе один за другим строчками. В одну строчку помещаются адаптивные блоки с суммарным количеством колонок не больше 12 (по умолчанию). Т.е. блоки, которые не помещаются в первую строку, располагаются в следующей строке и т.д.

Как располагаются адаптивные блоки?

В Bootstrap 3 адаптивные блоки являются плавающими (float:left). Это необходимо учитывать при создании макета веб-страницы.

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

Ещё у плавающих блоков есть одна особенность. Например, если в вышеприведённом примере высота 1 блока будет выше, чем 2 блока. То 3 блок будет располагаться не на новой строчке, а «прилипнет» к правой стороне 1 блока.

Особенности float блоков

Чтобы этого не допустить, необходимо добавить блок с классом clearfix и сделать его видимым для необходимых устройств (например, на md и lg):


<div>
  <div>1 блок...</div>
  <div>2 блок...</div>
  <div></div>     
  <div>3 блок...</div>
</div>

Основной принцип создания макета

Основной принцип создания макета заключается во вкладывании одних адаптивных блоков в другие. При этом их ширина — это всегда относительный параметр, который задаётся в процентном отношении (количеством колонок) от ширины родительского блока. Т.е. на любом уровне вложенности, например, ширина адаптивного блока в 6 колонок — это всегда 50% (6/12*100%) от ширины родительского элемента.

Например, разобьём некоторый блок (основной) на 4 блока (2 в первой строке и 2 во второй). Для простоты, макет создадим не адаптивный:


<div>
  <div>1 блок...</div>
  <div>2 блок...</div>
  <div></div>     
  <div>3 блок...</div>
  <div>4 блок...</div>
</div>

Создадим макет 3 блока (3 x 2):


<div>
  <div>1 блок...</div>
  <div>2 блок...</div>
  <div></div>     
  <div>
    <div>
      <div>3-1 блок...</div>
      <div>3-2 блок...</div>
      <div></div>
      <div>3-3 блок...</div>
      <div>3-4 блок...</div>  
      <div></div>
      <div>3-5 блок...</div>
      <div>3-6 блок...</div>
    </div>
  </div>
  <div>4 блок...</div>
</div>

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

Классы для адаптивного смещения блоков

В Bootstrap имеются адаптивные классы (col-?-offset-?), с помощью которых вы можете сдвинуть блок на определённое количество колонок вправо. Первый ? необходимо заменить на тип устройства (xs, sm, md или lg). Второй ? на количество колонок.

Например, зададим блоку на md устройствах ширину 8 колонок и расположим его в строке по центру (т.е. сдвинем его на 2 колонки вправо):


<div>
  <div>1 блок...</div>
</div>

Кроме инструментов для адаптивного смещения блоков, в Bootstrap 3 есть ещё специальные классы, с помощью которых можно изменить порядок следования элементов в пределах одной строки.

Отзывчивые служебные классы Bootstrap 3

Bootstrap 3 содержит адаптивные (служебные) классы, которые позволяют управлять видимостью отображения элементов в зависимости от типа устройства.

Кроме указания устройства (xs, sm, md, lg), на котором будет виден блок, необходимо ещё указать то, как на этом устройстве он должен отображаться. Возможные варианты: inline, block и inline-block.






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

Вместо знака ? необходимо указать block, inline или inline-block. Т.е. указать, как данный элемент должен отображаться.

Например, добавление к элементу класса visible-md-block будет означать то, что он будет отображаться только на устройствах, имеющим viewport md (width viewport >=992px и <1200px). Выглядеть данный элемент на странице будет как блок (CSS: display:block;).

Примечание: Эти классы также можно использовать совместно для того, чтобы элементы были видны на нескольких устройствах. Например, если вы примените к элементу классы visible-xs-inline и visible-md-inline, то это сделает его видимым на устройствах, имеющих как маленький экран, так и средний. Отображаться данный элемент будет как строчный (CSS: display:inline;).

Кроме этих Bootstrap 3 имеет ещё классы с противоположным действием. С их помощью можно скрыть элементы на определенных устройствах.






КлассОписание
hidden-xsСкрывает элемент на устройствах xs (ширина viewport <768px).
hidden-smСкрывает элемент на устройствах sm (ширина viewport >=768px и <992px).
hidden-mdСкрывает элемент на устройствах md (ширина viewport >=992px и <1200px).
hidden-lgСкрывает элемент на устройствах lg (ширина viewport >=1200px).

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

Например, элемент с классами hidden-xs и hidden-sm будет не виден сразу на 2 устройствах (xs и sm).

Кроме вышеприведённых отзывчивых классов, фреймворк Bootstrap 3 ещё содержит и такие, которые позволяют управлять видимостью элементов при печати.






КлассОписание
visible-print-blockЭлемент, имеющий указанный класс не будет отображаться на странице. При печати этот элемент будет виден, и иметь в качестве CSS-свойства display значение block.
visible-print-inlineЭлемент, имеющий указанный класс не будет отображаться на странице. При печати этот элемент будет виден, и иметь в качестве CSS-свойства display значение inline.
visible-print-inline-blockЭлемент, имеющий указанный класс не будет отображаться на странице. При печати этот элемент будет виден, и иметь в качестве CSS-свойства display значение inline-block.
hidden-printЭлемент, имеющий указанный класс не будет отображаться при печати. На странице (в браузере) данный элемент будет виден.

Пример создания макета с помощью сетки Bootstrap 3

В этом разделе статьи рассмотрим процесс создания адаптивного макета для блока с использованием сетки Bootstrap 3.

Макет состоит из трёх блоков. Эти блоки должны располагаться на устройствах так, как это показано на изображении.

Разрабатывать макет обычно начинают с крохотных устройств (xs). На данном устройстве блоки имеют одинаковую ширину, равную 12 колонкам Bootstrap.


<div>
  <div>Контент блока 1...</div>
  <div>Контент блока 2...</div>
  <div>Контент блока 3...</div>
</div>

На sm блоки располагаются следующим образом:

  • 1 — занимает всю ширину родительского блока;

  • 2 и 3 (каждый из них) — ширину, равную 6 колонкам Bootstrap.


<div>
  <div>Контент блока 1...</div>
  <div>Контент блока 2...</div>
  <div>Контент блока 3...</div>
</div>

На md блоки 1 и 2 расположены на первой строке, а 3 блок — на 2 строке. 1 блок имеет ширину, равную 8 колонкам Bootstrap (col-md-8), 2 блок — 4 колонки (col-md-4).

3 блок должен всегда располагаться на 2 строке. Чтобы это гарантировать, перед этим блоком необходимо поместить дополнительный пустой блок с классом clearfix. Данный блок не позволит 3 блоку обтекать предыдущие блоки. Кроме этого необходимо иметь в виду, что блок с классом clearfix необходимо отображать только на md, т.к. данное действие на других устройствах не нужно.


<div>
  <div>Контент блока 1...</div>
  <div>Контент блока 2...</div>
  <div></div>  
  <div>Контент блока 3...</div>
</div>

На lg адаптивные блоки расположены горизонтально и занимают вместе всю ширину. 1 блок имеет ширину равную половине ширины родительского элемента (col-lg-6), 2 блок — одну четвертую ширины (col-lg-3), и 3 блок — тоже должен занимать одну четвертую ширину родительского элемента (col-lg-3).


<div>
  <div>Контент блока 1...</div>
  <div>Контент блока 2...</div>
  <div></div>  
  <div>Контент блока 3...</div>
</div>

Ещё интересные темы:

Bootstrap Бутстрап Вспомогательные классы справка

Текст

Добавьте значение через Text-Colors с классами ниже. Ссылки будут затемнены при наведении:

КлассОписание
.text-mutedТекст, стилизованный под класс «текст-приглушенный»
.text-primaryТекст, стилизованный под класс «Text-Primary»
.text-successТекстовый стиль с классом «Text-Success»
.text-infoТекст, стилизованный под класс «Text-info»
.text-warningТекст в стиле с классом «текст-предупреждение»
.text-dangerТекст, стилизованный под класс «Text-опасность»

Фон

Добавить значение через фон-цвета с классами ниже. Ссылки затемнить на Hover так же, как текстовые классы:

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

Другие

КлассОписание
.pull-leftПоплавок элемента влево
.pull-rightПоплавок элемента вправо
.center-blockЗадает отображаемый элемент: блок с полями справа: авто и поле слева: Авто
.clearfixОчищает поплавки
.showВынуждает элемент быть показанным (дисплей: блок)
.hiddenЗаставляет элемент быть скрытым (отображение: нет)
.invisibleЗаставляет элемент быть невидимым (видимость: скрытый). Займет место на странице, даже если она невидима
.sr-onlyСкрытие элемента для всех устройств, Кроме программ чтения с экрана
.sr-only-focusableОбъедините с. SR-только для отображения элемента снова, когда он сфокусирован (например, пользователь с клавиатурой)
.text-hideПомогает заменить текстовое содержимое элемента фоновым изображением
.closeУказывает значок закрытия
.caretУказывает функциональность раскрывающегося списка (будет автоматически отменено в дропуп меню)

Отзывчивые утилиты

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

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

Classes Extra small devices
Phones (<768px)		 Small devices
Tablets (≥768px)		 Medium devices
Desktops (≥992px)		 Large devices
Desktops (≥1200px)
.visible-xs-*VisibleHiddenHiddenHidden
.visible-sm-*HiddenVisibleHiddenHidden
.visible-md-*HiddenHiddenVisibleHidden
.visible-lg-*HiddenHiddenHiddenVisible
.hidden-xsHiddenVisibleVisibleVisible
.hidden-smVisibleHiddenVisibleVisible
.hidden-mdVisibleVisibleHiddenVisible
.hidden-lgVisibleVisibleVisibleHidden

Скрытые

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

Пример

<h3>Example</h3>
<p>Resize this page to see how the text below changes:</p>
<h2>This text is hidden on an EXTRA SMALL screen.</h2>
<h2>This text is hidden on a SMALL screen.</h2>
<h2>This is text hidden on a MEDIUM screen.</h2>
<h2>This is text hidden on a LARGE screen.</h2>

Result:

Пример

Resize this page to see how the text below changes:

По состоянию на v 3.2.0, .visible-*-* классы для поставляются в трех вариациях, по одному для каждого display значения свойства CSS:

Группа классовCSS дисплей
visible-*-blockdisplay: block;
.visible-*-inlinedisplay: inline;
.visible-*-inline-blockdisplay: inline-block;

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

Классы .visible-xs ,, .visible-sm и являются устаревшими по состоянию на .visible-md .visible-lg v 3.2.0.

Пример

<h3>Example</h3>
<p>Resize this page to see how the text below changes:</p>
<h2>This text is shown only on an EXTRA SMALL screen.</h2>
<h2>This text is shown only on a SMALL screen.</h2>
<h2>This text is shown only on a MEDIUM screen.</h2>
<h2>This text is shown only on a LARGE screen.</h2>

Result:

Пример

Resize this page to see how the text below changes:

This text is shown only on an EXTRA SMALL screen.
This text is shown only on a SMALL screen.
This text is shown only on a MEDIUM screen.
This text is shown only on a LARGE screen.

Bootstrap — Отзывчивые утилиты

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

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

КлассыУстройства
.visible-xsОчень мелкий (менее 768px) видно
.visible-smМалые (до 768px) видно
.visible-mdСредний (от 768px до 991px) видно
.visible-lgИзображение большего размера (992px и выше) видно
.hidden-xsОчень мелкий (менее 768px) скрыт
.hidden-smМалые (до 768px) скрыт
.hidden-mdСредний (от 768px до 991px) скрыт
.hidden-lgИзображение большего размера (992px и выше) скрыт

Печать Классы

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

КлассыРаспечатать
.visible-printДа, Видимый
.hidden-printВиден только браузер, не печатать.

Пример

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

<div class = "container" style = "padding: 40px;">
   <div class = "row visible-on">
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-xs">Очень маленький</span>
         <span class = "visible-xs"> Видно на x-small</span>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-sm">Маленький</span>
         <span class = "visible-sm"> Видно на small</span>
      </div>
      
      <div class = "clearfix visible-xs"></div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-md">Средний</span>
         <span class = "visible-md"> Видно на medium</span>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-lg">Большой</span>
         <span class = "visible-lg"> Видно на large</span>
      </div>
      
   </div>  
</div>

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Bootstrap Grid System . Bootstrap: Быстрое создание современных сайтов

Bootstrap табличная система позволяет создать до 12 столбцов на странице.

Если вы хотите использовать меньшее количество столбцов, можно группировать столбцы вместе, чтобы создавать более широкие столбцы:

Столбцы Bootstrap Grid System будут перестраиваться автоматически в зависимости от размера экрана.

Для создания строки со столбцами нужно создать контейнер с классом. row, например, <div class=«row»>, в который включить столбцы:

<div class=«row»>

<div class=«col-*-*»> </div>

<div class=«col-*-*»> </div>

<div class=«col-*-*»> </div>

</div>

Выглядеть это будет следующим образом:

Вместо первой звездочки можно поставить один из четырех классов:

xs – для телефонов

sm – для планшетов

md – для настольных компьютеров

lg – для больших мониторов

Вместо второй звездочки указывается, сколько столбцов из 12 данный столбец объединяет.

Например, если указать col-md-6:

<div class=«row»>

<div class=«col-md-6»> col-md-6 </div>


<div class=«col-md-6»> col-md-6 </div>


</div>

Тогда для настольных компьютеров и больше это будет строка из двух столбцов, а для планшетов и телефонов это будут две строки:

Или если вы хотите сделать:

1 колонка для небольших устройств

2 колонки для малых и средних устройств

4 колонки для больших устройств

Тогда укажите:

<div class=«row»>

<div class=«col-sm-6 col-lg-3»>

This is part of our grid.

</div>

<div class=«col-sm-6 col-lg-3»>

This is part of our grid.

</div>

<div class=«col-sm-6 col-lg-3»>

This is part of our grid.

</div>

<div class=«col-sm-6 col-lg-3»>

This is part of our grid.

</div>

</div>

Если у вас есть четыре столбца разной высоты:

Тогда при уменьшении размера экрана, четыре столбца в одной строке не будут преобразовываться в две строки по два столбца:

Чтобы достичь этого, нужно применить блок:

<div class=«clearfix visible-xs-block»> </div>

<div class=«clearfix visible-sm-block»> </div>

<section class=«row»>

<section class=«col-xs-6 col-sm-6 col-md-3 col-lg-3»>

<div class=«alert alert-danger»> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </div>

</section>

<section class=«col-xs-6 col-sm-6 col-md-3 col-lg-3»>

<div class=«alert alert-info»> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div>

</section>

<div class=«clearfix visible-xs-block»> </div>

<div class=«clearfix visible-sm-block»> </div>

<section class=«col-xs-6 col-sm-6 col-md-3 col-lg-3»>

<div class=«alert alert-info»> Lorem ipsum dolor sit amet. </div>

</section>

<section class=«col-xs-6 col-sm-6 col-md-3 col-lg-3»>

<div class=«alert alert-info»> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros. </div>

</section>

</section>

Здесь для управления видимостью элемента используется класс visible. Для сокрытия элемента используется класс hidden:

Таким образом, если применить класс visible-sm-block, элемент будет виден только на планшете, если применить класс hidden-sm, элемент будет скрыт на планшетах.

Для увеличения отступа между столбцами, можно использовать класс col-*-offset-*, где первая звездочка это классы xs, sm, md, lg (обычно используют только md), а вторая звездочка это значение от 1 до 11. При использовании этого класса, за сценой применяется свойство margin-left.

Перемещать столбцы вправо или влево можно с помощью классов col-md-push-* и col-md-pull-* соответственно, где звездочка это значение от 1 до 11. При этом за сценой используется CSS свойство left: и right:.

<div class=«col-md-4 col-md-push-4»> <p> green pushed 4 </p> </div>

<div class=«col-md-4 col-md-pull-4»> <p> red pulled 4 </p> </div>

Данный текст является ознакомительным фрагментом.




Продолжение на ЛитРес








Адаптивный дизайн | WebReference

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

В Bootstrap уже заложены возможности адаптивного дизайна. Если вы сделаете простой многоколоночный макет, а затем начнёте уменьшать ширину окна браузера, то заметите, что изменяется и сам макет. Но этим всё не ограничивается, гораздо интереснее немного менять сам макет чтобы он наилучшим образом соответствовал устройству. Для этого введены ключевые слова, которые встречаются в именах классов, они представлены в табл. 1.







Табл. 1. Ключевые слова
УстройствоИмяШирина макета
СмартфонxsМенее 768px
Планшетsm768px и больше
Мониторmd992px и больше
Монитор с высоким разрешениемlg1200px и больше

Чтобы задать ширину колонок для смартфонов достаточно в код включить класс col-xs-N, для мониторов он уже будет именоваться col-md-N. Любые классы можно комбинировать между собой, если класс для выбранного устройства не указан, то он наследуется снизу вверх. Это значит, что макет для смартфона будет выглядеть так же, как и макет для монитора. Но не наоборот. Именно поэтому вёрстка всегда начинается с макета для смартфона, затем уже идёт планшет и монитор.

Поскольку мы теперь ориентируемся на мобильные устройства, то внутрь <head> надо добавить следующую строку.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

С учётом этой строки и новых классов сделаем простой макет с двумя колонками (пример 1).

Пример 1. Адаптивный макет

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Адаптивный макет</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <style>
   [class*="col-"] {
    background-color: #eee;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    font-size: 2rem;
   }
  </style>
 </head>
 <body>
  <div>
   <div>
    <div>Заголовок</div>
    <div>Колонка 1</div>
    <div>Колонка 2</div>
   </div>
  </div>
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
 </body>
</html>

Для тестирования макета не обязательно смотреть его на каком-то заданном устройстве, достаточно уменьшить ширину окна браузера и мы сразу же увидим изменения. На рис. 1-3 показан результат данного примера при разной ширине окна.

Рис. 1. Вид на смартфоне

Рис. 2. Вид на планшете

Рис. 3. Вид на мониторе

Мы рассмотрели самый простой случай, когда расположение элементов практически не меняется относительно друг друга. Как быть, если потребуется переставить элементы местами или кое-что убрать для маленьких экранов? Напрямую это сделать не получится, поэтому пойдём на небольшую хитрость — добавим два одинаковых элемента в разных местах и будем один прятать, а другой отображать. Bootstrap предлагает два набора классов для сокрытия и показа элементов в зависимости от ширины окна — hidden-xs и visible-xs-block. Принцип тот же, что и при работе с колонками, вместо xs подставляем нужное ключевое слово. В примере 2 показано как «перемещать» таким образом заголовок.

Пример 2. Изменение положения заголовка

<div>
 <div>
  <div>Заголовок</div>
  <div>Колонка 1</div>
  <div>Колонка 2</div>
  <div>Заголовок</div>
 </div>
</div>

Результат данного примера показан на рис. 4.

Рис. 4. Заголовок внизу колонок при узкой ширине окна

В данном примере класс hidden-xs означает, что колонку для смартфонов следует прятать, а visible-xs-block — наоборот, показывать. При просмотре на широком экране заголовок будет всегда вверху, а на узком внизу.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 11.08.2018

Редакторы: Влад Мержевич

Bootstrap | | О жизни, работе, людях…

Свободный набор инструментов (библиотека) для создания сайтов, включает в себя html- и css-шаблоны оформления. Разработан компанией Twitter, доступен с 19.08.2011.

Установка Bootstrap

Прежде чем использовать, необходимо установить, скачав с сайта http://getbootstrap.com/

Для этого последовательно выбираем  Download -> Compiled CSS and JS -> Download

После скачивания распакуйте архив в свою папку.

Подключение

Между тегами <head>  и </head> добавьте следующие строки:

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

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

В Bootstrap используются некоторые элементы HTML и свойства CSS, которые требуют использования HTML5 doctype. Включайте его в начале всех проектов.

<!DOCTYPE html>

Верстка страницы

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

  • .containerдля фиксированной ширины контейнера.
  • .container-fluid для контейнера, охватывающего всю ширину вашего просмотра.

В свою очередь контейнеры состоят из блоков .row – строки.

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

При этом возможны 4 типа колонок

.col-xs- – для очень маленьких экранов (<768px)

.col-sm- – для маленьких экранов (>=768px)

.col-md- – для средних экранов (>=992px)

.col-lg- – для больших  экранов (>=1200px)

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

Пример 1. Разбивка страниц на 4 колонки разного размера

<!DOCTYPE html>
<html>
<head>
<title>Эксперимент с версткой</title>
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

</head>
<body>

<div>
  <div>
<h2>Заголовок</h2>
</div>
  <div>
    <div>
      Первая узкая колонка
    </div>
    <div>
      Вторая колонка побольше
    </div>
    <div>
      Третья колонка больше, чем вторая
    </div>
    <div>
      Четвертая колонка самая большая
    </div>
  </div>
</div>
<body>
</html>

Пример 2. Разбивка страницы на три колонки в зависимости от ширины окна

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>Эксперимент с версткой</title>
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

</head>
<body>
<div>
  <div>
<h2>Заголовок</h2>
</div>
<div>
        <div>
        	<span>.col-lg-4</span>
            <span>.col-md-1</span>
            <span>.col-sm-5</span>
            <span>.col-xs-5</span>
        </div>
        <div>
        	<span>.col-lg-4</span>
            <span>.col-md-5</span>
            <span>.col-sm-1</span>
            <span>.col-xs-6</span>
        </div>
        <div>
        	<span>.col-lg-4</span>
            <span>.col-md-6</span>
            <span>.col-sm-6</span>
            <span>.col-xs-1</span>
       </div>
      </div>

</div>
<body>
</html>

Ссылки
http://bootstrap.imazin.ru/css/

Связанные статьи

Вопрос 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, он выглядит так:

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

Предполагается, что этот 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 3 класса адаптивных утилит

Предлагаемые видеоуроки
Часть 5 — Смещение столбца сетки Bootstrap
Часть 6 — Вложенные строки и столбцы Bootstrap

Часть 7. Галерея изображений Bootstrap

В этом видео мы обсудим загрузочных классов адаптивных утилит.

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

Ниже приведены некоторые из гибких служебных классов, доступных в начальной загрузке 3

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

Ниже приведен HTML-код, который я использовал для создания этих 4 столбцов

ВСЕ экраны
Средний, Большой и Маленький
Средний и Большой
Большой

Вот CSS для customDiv class

цвет фона: серебристый;

выравнивание текста: центр;

отступ: 10 пикселей;

Вот что мы хотим сделать
1.Столбец, отображающий «ВСЕ экраны», должен быть виден на экранах всех размеров
2. Столбец, отображающий «Средний, Большой и Маленький», должен быть виден только на экранах среднего, большого и маленького размеров. Его следует скрыть на очень маленьком экране.
3. Столбец, в котором отображается «Средний и Большой», должен быть виден только на экранах среднего и большого размера. Его следует скрывать на экранах малых и очень маленьких размеров.
4. Столбец с надписью «Большой» должен быть виден только на большом экране.Он должен быть скрыт на всех других размерах экрана.

Этого очень легко добиться с помощью адаптивных служебных классов.
1. Столбец «ВСЕ экраны» должен быть виден на экранах всех размеров, поэтому никаких изменений здесь не требуется.

2. Столбец «Средний, Большой и Маленький» должен быть виден только на экранах средних, больших и малых размеров. Его следует скрыть на очень маленьком экране. Таким образом, применение класса «hidden-xs» к этому столбцу скроет этот столбец на очень маленьком устройстве, но будет виден на всех других устройствах.

Средний, большой и маленький

Мы также можем добиться того же, используя классы visible-lg, visible-md и visible-sm вместо класса hidden-xs. Поскольку с «hidden-xs» нам нужно использовать только один класс, тогда как, как и с видимыми классами, мы должны использовать 3 из них, поэтому я решил использовать hidden-xs.

Средний, большой и маленький

3. Столбец «Средний и большой» должен быть виден только на экранах среднего и большого размера.Его следует скрывать на экранах малых и очень маленьких размеров. Для этого примените к этому столбцу классы visible-lg и visible-md.

Средний и большой

Мы также можем добиться того же, используя классы hidden-sm и hidden-xs вместо классов visible-lg и visible-md.

Средний и большой

4. Столбец «Большой» должен быть виден только на экранах большого размера. Он должен быть скрыт на всех других размерах экрана.Для этого примените к этому столбцу класс visible-lg.

Большой

Как вы, возможно, уже догадались, вы также можете добиться того же, используя скрытые классы (hidden-xs, hidden-sm и hidden-md), но при таком подходе вы должны использовать 3 класса, где, как и в случае с visible классы мы должны использовать только один класс (visible-lg)

Большой

Начиная с версии загрузчика 3.2.0, расширение.visible — * — * классы для каждого размера экрана бывают трех вариантов, по одному для каждого значения свойства отображения CSS, показанного ниже.

В следующей статье объясняется разница между display: inline, display: inline-block и display: block
http://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and -display-inline-block

Следующие классы также существуют, но не рекомендуются с версии v3.2.0.

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

Пример: Столбец с классом «скрытая печать» виден только в браузере, но не при печати.Столбец с классом visible-print виден только во время печати, но не в браузере.

Отображается в браузере НЕ при печати
Виден при печати

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

Класс visible-print также существует, но не рекомендуется в версии 3 начальной загрузки.2.0.

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

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

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

  

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

    

        

            
            
 Маленький 

            ...
        

        

            
            
 Средний 

            ...
        

        

            
            
 Большой 

            ...
        

        

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

            ...

Класс 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

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

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

Содержание

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

  • Классы .hidden - * - up скрывают элемент, когда область просмотра находится на заданной точке останова или шире. Например, .hidden-md-up скрывает элемент в средних, больших и очень больших окнах просмотра.
  • Классы .hidden - * - down скрывают элемент, когда область просмотра находится на заданной точке останова или меньше. Например, .hidden-md-down скрывает элемент в очень малых, малых и средних окнах просмотра.
  • Нет явных «видимых» / «показывающих» вспомогательных классов; вы делаете элемент видимым, просто не скрывая его при этом размере точки останова.
  • Вы можете объединить один класс .hidden - * - up с одним классом .hidden - * - down , чтобы отображать элемент только на заданном интервале размеров экрана. Например, .hidden-sm-down.hidden-xl-up показывает элемент только в средних и больших окнах просмотра. Использование нескольких классов .hidden - * - до или нескольких классов .hidden - * - вниз классов избыточно и бессмысленно.
  • Эти классы не пытаются приспособиться к менее распространенным случаям, когда видимость элемента не может быть выражена как единый непрерывный диапазон размеров точек останова области просмотра; вместо этого вам нужно будет использовать собственный CSS в таких случаях.
хз
Телефон с книжной ориентацией (<480 пикселей) (целевое разрешение экрана 320) 		см
Горизонтальные телефоны (≥480– <768 пикселей) (целевое разрешение экрана 480) 		мкр
Планшет (≥768px — <960px) (целевое разрешение экрана 768) 		LG
Рабочий стол (≥960 пикселей — <1120 пикселей) (целевое разрешение экрана 1024) 		xl
Desktop (≥1220px — <1380px) (целевое разрешение экрана 1280) 		xxl
Рабочий стол (≥1380 пикселей) (целевое разрешение экрана 1440)
.скрытый-XS-вниз Скрытый видимый видимый видимый видимый видимый
. Скрытый-sm-вниз Скрытый Скрытый видимый видимый видимый видимый
.скрытый-md-вниз Скрытый Скрытый Скрытый видимый видимый видимый
.hidden-LG-вниз Скрытый Скрытый Скрытый Скрытый видимый видимый
.скрытый-XL-вниз Скрытый Скрытый Скрытый Скрытый Скрытый видимый
.hidden-xxl-down Скрытый Скрытый Скрытый Скрытый Скрытый Скрытый
.скрытый-xs-up видимый Скрытый Скрытый Скрытый Скрытый Скрытый
.hidden-sm-up видимый видимый Скрытый Скрытый Скрытый Скрытый
.скрытый-md-up видимый видимый видимый Скрытый Скрытый Скрытый
.hidden-lg-up видимый видимый видимый видимый Скрытый Скрытый
.скрытый-XL-вверх видимый видимый видимый видимый видимый Скрытый
.hidden-xxl-up видимый видимый видимый видимый видимый видимый

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

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

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

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

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

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

✔ Видно на очень маленьких
Очень маленький

✔ Видно на маленьких или более узких
Маленький или уже

✔ Видно на средних или более узких
Средний или более узкий

✔ Видно на больших или более узких
Большой или уже

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

✔ Видно на среднем или широком
Средний или более широкий

✔ Видно на больших или широких
Большой или более широкий

✔ Видно на очень больших
Очень большой

✔ Ваше окно просмотра очень маленькое
Ваше окно просмотра НЕ совсем маленькое

✔ Ваше окно просмотра очень маленькое
Ваше окно просмотра НЕ совсем маленькое

✔ Ваше окно просмотра точно среднее
Ваше окно просмотра НЕ совсем среднее

✔ Ваше окно просмотра очень велико
Ваше окно просмотра НЕ совсем большое

✔ Ваше окно просмотра очень велико
Ваше окно просмотра НЕ очень велико

Bootstrap 响应 式 实用 工具 |菜鸟 教程

Bootstrap 了 一些 辅助 类 以便 实现 对 移动 设备 友好 的 开发。 这些 通过 体 查询 结合 大型 、 小型 和 中型 设备 ， 实现 的 隐藏

谨慎 使用 这些 工具 避免 同 创建 完全 不同 的 本 式 实用 工具 目前 只 适用 于 块 和。

超 小 屏幕
手机 (<768 пикселей)		 小 屏幕
平板 (≥768 пикселей)		 中等 屏幕
桌面 (≥992 пикселей)		 大 屏幕
桌面 (≥1200 пикселей)
.видимый-XS- * 可见 隐藏 隐藏 隐藏
.visible-sm- * 隐藏 可见 隐藏 隐藏
.visible-md- * 隐藏 隐藏 可见 隐藏
.видимый-LG- * 隐藏 隐藏 隐藏 可见
.hidden-xs 隐藏 可见 可见 可见
.hidden-sm 可见 隐藏 可见 可见
.скрытый-MD 可见 可见 隐藏 可见
.hidden-LG 可见 可见 可见 隐藏

v3.2.0 如 .visible — * — * 的 类 针对 每种 大小 都有 了 三种 变 体 ， 每个 CSS 中 不同 的 display 列表 如下 ：

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

因此 ， 以 超 小 屏幕 （xs） 为例 ， 可用 的 .visible — * — * 类 是 ： .visible-xs-block 、 .visible-xs-inline 和 .visible-xs-inline-block。

.visible-xs 、 .visible-sm 、 .visible-md 和 .visible-lg 类 也 同时 存在 但是 从 v3.2.0 Версия для печати

相关 的 元素 的 特殊 情况 外 ， 它们 与 .visible — * — block 大体相同。

打印 类

下 表 列出 了 打印 类。 使用 这些。

класс 浏览 器 打印机
.visible-print-block
.visible-print-inline
.visible-print-inline-block.		 隐藏 可见
.скрытая печать 可见 隐藏

实例

的 实例 演示 了 上面 所 列举 的 帮助 器 类 的 用法。 调整 浏览 器 的 窗口 大小 ， 或者 在 不同 的 设备 上 式 实用 工具。

实例

特别 小型
✔ 在 特别 小型 设备 上 可见
小型
✔ 在 小型 设备 上 可见
中型
✔ 在 中型 设备 上 可见
大型
✔ 在 大型 设备 上 可见

尝试 一下 »

结果 如下 所示 ：

勾 号 （✔） 表示 元素 在 当前 视 口中 可见。

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

Вам необходимо использовать свойство отображения, в основном d - * - none (скрыть) и d - * - block или d - * - inline-block (show).

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

xs (<576 пикселей) см (≥576 пикселей) мкр (≥768px) lg (≥992 пикселей) xl (≥1200 пикселей)
d-none d-sm-блок скрыть показать показать показать показать
d-none d-md-block скрыть скрыть показать показать показать
d-none d-lg-block скрыть скрыть скрыть показать показать
d-none d-xl-block скрыть скрыть скрыть скрыть показать
d-блок d-xl-none показать показать показать показать скрыть
d-блок d-lg-none показать показать показать скрыть скрыть
d-блок d-md-none показать показать скрыть скрыть скрыть
d-блок d-sm-none показать скрыть скрыть скрыть скрыть

Показать только при определенном размере окна просмотра

Если вы хотите отображать на sm только , но скрывать на других размерах, используйте d-none d-sm-block d-md-none .

xs (<576 пикселей) см (≥576 пикселей) мкр (≥768px) lg (≥992 пикселей) xl (≥1200 пикселей)
d-блок d-sm-none показать скрыть скрыть скрыть скрыть
d-none d-sm-block d-md-none скрыть показать скрыть скрыть скрыть
d-none d-md-block d-lg-none скрыть скрыть показать скрыть скрыть
d-none d-lg-block d-xl-none скрыть скрыть скрыть показать скрыть
d-none d-xl-block скрыть скрыть скрыть скрыть показать

Скрыть только при определенном размере окна просмотра

Если вы хотите скрыть на sm только , но отображать на других размерах, используйте d-block d-sm-none d-md-block .

xs (<576 пикселей) см (≥576 пикселей) мкр (≥768px) lg (≥992 пикселей) xl (≥1200 пикселей)
d-none d-sm-блок скрыть показать показать показать показать
d-блок d-sm-none d-md-block показать скрыть показать показать показать
d-блок d-md-none d-lg-block показать показать скрыть показать показать
d-блок d-lg-none d-xl-block показать показать показать скрыть показать
d-блок d-xl-none показать показать показать показать скрыть

❤️ Эта статья полезна?

Купите мне кофе☕ или поддержите мою работу, чтобы это место 🖖 оставалось без рекламы.
Если вы не можете, отправьте 💖 на @d_luaz или помогите поделиться этой статьей.

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

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

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

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

Обозначение

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

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

  • .d- {значение} для xs
  • .d- {breakpoint} - {value} для sm , md , lg и xl .

Где значение является одним из:

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

Отображаемые значения можно изменить, изменив переменную $ Display и перекомпилировав SCSS.

Медиа-запросы влияют на ширину экрана с заданной точкой останова или больше . Например, .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
Виден только на мкр. .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

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

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

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

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

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


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


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

.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *