Блокировка адаптивности

Блокировка адаптивности

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

Шаги для блокировки адаптивного просмотра

  1. Не создавайте <meta> с именем viewport как об этом сказано в описании CSS
  2. Отмените width, .container для каждого уровня разметки определенной ширины, например так :width: 970px !important; Убедитесь, что этот код идет после включения основного кода Bootstrap CSS. При желании можно избежать !important с медиа-запросами или со специальным селектором.
  3. Если вы используете навигационное меню, удалите все меню, которые могут сворачиваться/разворачиваться.
  4. Для макета разметки используйте классы .col-xs-* как дополнение или вместо классов medium/large. Разметка с классом xs (extra small) масштабируется для всех размеров мониторов.

Вам понадобится Respond.js для IE8 (поскольку существуют медиа-запросы и они должны обрабатываться). Это заблокирует свойство "мобильность сайта" Bootstrap.

Шаблон Bootstrap с заблокированной адаптивностью

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

Просмотреть пример неадаптивного шаблона

Переход с v2.x на v3.x

Посмотрите документацию о переходе со старой версии Bootstrap на v3.x? Ознакомьтесь с руководством по переходу.

Translate »