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

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

21.10.2016

Всем привет!
В сегодняшнем уроке я расскажу,  как отобразить нужные или скрыть ненужные элементы (блоки <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>

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

Пример:

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

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

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

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

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

Как сделать Bootstrap 3 форму для Joomla

Рассмотрим один из вариантов создания формы для CMS Joomla 3 с помощью css-фреймворка Bootstrap 3 на примере формы для обратной связи. Созданная форма будет соответствовать самым современным требованиям, предъявляемым к разработке сайтов.

В качестве подопытного, на котором мы будем проводить этот эксперимент, возьмем уже подготовленную с помощью Bootstrap тему для Joomla из репозитория GitHub: https://github.com/sbogdanov108/example_joomla

Обратите внимание, что Bootstrap и другие необходимые файлы уже подключены в файле темы joomlabootstrap3/index.php.

Подготовка

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

Для этого, в админке сайта, перейдем в Расширения -> Менеджер Шаблонов -> Шаблоны -> Параметры Joomla Bootstrap 3.

Теперь создадим переопределение шаблона, нажав Создать переопределение и в секции Компоненты выберем com_contact -> contact.

Создание формы

Откроем в редакторе директорию с темой и приведем файл joomlabootstrap3/html/com_contact/contact/default. php к такому состоянию:

<?php defined( '_JEXEC' ) or die; ?>

<div itemscope itemtype="http://schema.org/Person">
  <div>
    <h2>Обратная связь</h2>
  </div>

  <? /* Загрузка вложенного шаблона с формой */ ?>
  <?= $this->loadTemplate( 'form' ) ?>
</div>

Теперь перейдем к созданию самой формы. Для этого откроем файл default_form.php в папке joomlabootstrap3/html/com_contact/contact. Полностью всё удалим из него и добавим следующий код:

<?php defined( '_JEXEC' ) or die; ?>

<? if ( isset( $this->error ) ) : ?>
  <div>
    <?= $this->error ?>
  </div>
<? endif ?>

<form action="<?= JRoute::_( 'index.php' ) ?>" method="post">
  <!-- Поле ввода "Имя" -->
  <div>
    <label for="jform_contact_name"> Имя
      <span>*</span>
    </label>

    <div>
      <? $this->form->setFieldAttribute( 'contact_name', 'class', 'form-control' ) ?>
      <?= $this->form->getInput( 'contact_name' ) ?>
    </div>
  </div>

  <!-- Поле ввода "E-mail" -->
  <div>gt;
    <label for="jform_contact_email"> E-mail
      <span>*</span>
    </label>

    <div>
      <? $this->form->setFieldAttribute( 'contact_email', 'class', 'form-control' ) ?>
      <?= $this->form->getInput( 'contact_email' ) ?>
    </div>
  </div>

  <!-- Поле ввода "Тема" -->
  <div>
    <label for="jform_contact_emailmsg"> Тема
      <span>*</span>
    </label>

    <div>
      <? $this->form->setFieldAttribute( 'contact_subject', 'class', 'form-control' ) ?>
      <?= $this->form->getInput( 'contact_subject' ) ?>
    </div>
  </div>

  <!-- Поле ввода "Сообщение" -->
  <div>
    <div>
      <label for="jform_contact_message"> Сообщение
        <span>*</span>
      </label>

      <? $this->form->setFieldAttribute( 'contact_message', 'class', 'form-control' ) ?>
      <?= $this->form->getInput( 'contact_message' ) ?>

      <!-- Чекбокс -->
      <div>
        <span>*</span> Обязательно к заполнению
      </div>
    </div>
  </div>

  <div>
    <!-- Кнопка отправки -->
    <div>
      <button type="submit">Отправить</button>
    </div>

    <!-- Чекбокс -->
    <? if ( $this->params->get( 'show_email_copy' ) ) : ?>
      <div>
        <div>
          <label>
            <?= $this->form->getInput( 'contact_email_copy' ) ?>
            Отправить копию этого сообщения на ваш адрес
          </label>
        </div>
      </div>
    <? endif ?>

    <!-- Генерация служебной информации, необходимой для работы движка Joomla -->
    <input type="hidden" name="option" value="com_contact"/>
    <input type="hidden" name="task" value="contact.
 
 
   submit"/>
    <input type="hidden" name="return" value="<?= $this->return_page ?>"/>
    <input type="hidden" name="id" value="<?= $this->contact->slug ?>"/>
    <?= JHtml::_( 'form.token' ) ?>
  </div>
</form>

И добавим немного стилей к этой форме для более наглядного отображения. Откроем файл styles.css, затем добавим к нему следующий код:

.form-feedback { margin-bottom: 59px; }

.my-form .form-group { margin-bottom: 20px; }

.my-form input.form-control { height: 40px; }

.my-form input,
.my-form textarea { transition: all 250ms linear; border: none; background-color: #e5e6e6; box-shadow: inset 3px 2px 0 #d8dada; border-radius: 3px; }

.my-form .control-label,
.my-form input,
.my-form textarea { font-size: 16px; font-weight: normal; }

.my-form .control-label { color: #7f8c8c; }

.my-form textarea.form-control { font-size: 16px; height: 240px; margin-bottom: 5px; resize: vertical; }

. my-form label.control-label { text-align: center; padding-top: 7px; padding-right: 0; }

.my-form .asterisk { color : #e95d3c; }

.my-form .help-required { color: #7f8c8c; float: right; margin-top: 0; margin-bottom: 13px; }

.my-form .help-required.help-feedback { float: none; }

.my-form input[type="checkbox"] { box-shadow: none; }

.my-form .email-copy-checkbox { padding-top: 15px; }

.my-form .btn-red { border: none; border-radius: 40px; background-color: #e95d3c; color: #fff; font-size: 18px; padding: 13px 26px; text-transform: uppercase; }

.my-form .btn-red:hover { background: #de3d27; }

.my-form input:hover,
.my-form input:focus,
.my-form textarea:hover,
.my-form textarea:focus { box-shadow: inset 3px 2px 0 #bec1c1; }

#contact-form label[for="jform_contact_message"] { padding: 0 0 10px; }

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

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

Исходные коды для данной статьи доступны по ссылке:
https://github.com/sbogdanov108/example_joomla

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

• Как это работает
• Обозначение
• Примеры
• Скрывающие элементы
• Показать в печати

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

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

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

Обозначение

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

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

• .d-{значение} для xs
• .d-{точка останова}-{значение} для sm , md , lg и xl .

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

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

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

Примеры

D-рядный

D-рядный

 
d-inline
d-inline
 

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

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

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

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

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

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

Размер экрана	Класс
Скрыто на всех	.d-нет
Скрыто только на xs	.d-нет .d-sm-блок
Скрыт только на sm	.d-sm-none .d-md-block
Скрыто только на мд	.d-md-none .d-lg-блок
Скрыто только на LG	.d-lg-нет .d-xl-блок
Скрыто только на xl	.d-xl-нет
Видно на всех	.d-блок
Видно только на xs	.d-блок .d-sm-нет
Видно только на 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-нет .d-xl-блок

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

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

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

Отображение в печати

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

• .d-print-нет
• .d-print-inline
• .d-print-inline-block
• . d-принт-блок
• .d-стол для печати
• .d-print-table-row
• .d-print-table-cell
• .d-print-flex
• .d-print-inline-flex

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

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

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

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

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

html — Bootstrap 3 hidden-xs делает строку уже

спросил 9 лет, 4 месяца назад

Изменено 4 года, 11 месяцев назад

Просмотрено 222к раз

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

Вот мой код, который меня огорчает:

 

 <дел>
  

   Кол1
  
  

   Кол2
  
  

   Кол3
  
  

   Кол4
  
  

   Кол5