Погружаемся в bootstrap

Как использовать Bootstrap?

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

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

com документация представлена на английском языке, если вам нужна на русском, то перейдите в раздел Getting Started, спуститесь вниз и найдите там русский перевод.

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

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

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

Фреймворк Bootstrap — верстаем адаптивно, просто, быстро!

Освойте наиболее простой, быстрый и гибкий способ создавать адаптивные веб-сайты

Узнать подробнее

Во вкладке “Примеры” вы и можете взять код, а также увидеть результат. Давайте я прямо сейчас возьму 1 пример из документации и на его примере объясню вам, как все работает:

   Star

Это вдвойне хороший пример, потому что тут используется не только иконка, но и кнопка. Итак, внутри кнопки помещаем иконку, вот такой результат получился:

Чтобы вставить иконку на веб-страницу, используйте тег span, ему нужно задать 2 класса. Первый – это общий стилевой класс glyphicon, который задает общие стили для всех иконок. Второй класс – glyphicon-название-иконки. Название вы можете посмотреть в документации.

Давайте на основе этого примера сделаем свою кнопку, кнопку скачивания файлов. Внимательно посмотрите, чем будет отличаться этот код:

   Скачать

Во-первых, поменялось имя иконки. Во-вторых, цвет кнопки. В-третьих, ее размер, он стал немного меньше. Заметьте, что вместо btn-default я прописал в данном случае класс btn-info, а вместо btn-lg – btn-md. Вот такая милая кнопка получилась в итоге:

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

Для формирования кнопки, нужен класс btn. Это общий класс, как вы уже поняли. Все остальные классы добавляются по желанию. Например, btn-success красит кнопку в зеленый цвет, info – в голубой, danger – в красный. Давайте изменим в коде название класса на danger:

То есть вот так это все работает. Соответственно, помимо этих классов есть другие, отвечающие за размер кнопки. Это классы btn-lg –md –sm –xs. Вот так меняются размеры кнопок в зависимости от класса:

Естественно, lg (large) это самый большой размер, а xs – самый маленький. Опять же, все эти примеры есть в документации.

Давайте рассмотрим еще пару примеров. Например, как сделать всплывающее меню. В документации все очень хорошо описано. Перейдите в пункт Выпадающие меню – всплывающее. Опять же, вы можете просто скопировать код и изменить его под свои нужды:

Например, я изменил его следующим образом:

  Выберите ссылку          Toggle Dropdown      Ссылка 1    Ссылка 2    Ссылка 3

Класс dropdown у главного контейнера для такого меню отвечает за то, в каком направлении будет раскрываться меню – вверх или вниз. В примере из документации оно раскрывается вверх, потому что там указан класс dropup. Мы же в нашем примере изменили всего несколько букв в названии класса и уже изменили направление раскрытия.

Фреймворк Bootstrap — верстаем адаптивно, просто, быстро!

Освойте наиболее простой, быстрый и гибкий способ создавать адаптивные веб-сайты

Узнать подробнее

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

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

  Главная  Bootstrap  Как работать с фреймворком

Как видите, тут ничего сложного. Всего лишь нумерованный список, которому нужно задать класс breadcumb. Далее просто перечисляем наши пункты, активному нужно задать дополнительный класс active, чтобы он отличался по стилевому оформлению.

Как изменить внешний вид элементов?

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

Соответственно, я создал отдельный css-файл, также подключил его к веб-странице и прописал в нем некоторые стили:

Остается добавить класс custom нашим хлебным крошкам:

Вот они, хлебные крошки, которые стилизовали мы, но создал нам Bootstrap, поэтому мы экономим немало времени, так как css-код не нужно писать полностью с нуля.

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

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

Естественно, по умолчанию bootstrap такую вам не нарисует, вам самим нужно прописать этот градиент. Мы созданм кнопку штатными средствами bootstrap, прописывая ей класс btn, ну также можно указать размер.

При этом дописываем свой собственный класс:

Кнопка

В этой случае наш класс – это custom-btn, такого в фреймворке попросту нет, мы его опишем сами с отдельном файле стилей:

background: linear-gradient(to bottom, #30918B, #2B5882);

Надеюсь, алгоритм действий вам понятен.

Что ж, сегодня мы рассмотрели с вами, как начать работать с boostrap. Как видите, особо ничего и не пришлось брать от себя, так как очень хорошие примеры уже есть в документации.

Ну а если вы хотите научиться использовать bootstrap для адаптивной верстки сайтов, то я предлагаю вам пройти кратчайший и очень эффективный путь, который состоит из двух этапов:

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

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

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

Фреймворк Bootstrap — верстаем адаптивно, просто, быстро!

Освойте наиболее простой, быстрый и гибкий способ создавать адаптивные веб-сайты

Узнать подробнее

Источник: https://webformyself.com/kak-ispolzovat-bootstrap/

Что нового и как это работает в Bootstrap 4

Hello, world!

Глядя внутрь , у нас есть элемент «title», который достаточно легко понять: он дает название странице.

Также у нас есть элемент «meta», который очень важно понимать при использовании Bootstrap. Поскольку эта версия Bootstrap построена для совместимости с различными типами устройств (мобильные телефоны, планшеты, настольные компьютеры, дисплеи Retina и т. д.), вы должны сообщить браузеру, что он должен масштабировать вашу веб-страницу соответствующим образом на каждом устройстве.

Мета элемент «viewport» делает это: здесь мы установили начальную ширину устройства «content-width» и масштабировали его только один раз.

После установки мета-элемента «viewport» мы импортировали версию разработки файла bootstrap.css.

Перейдем к разделу «body» приведенного выше фрагмента HTML. Чтобы что-то вывести, мы написали «Hello, world» внутри тега «h1». Затем мы подлючили необходимые файлы JavaScript из папки «js». Убедитесь, что эти файлы JavaScript подлючены на каждой странице. Документация Bootstrap рекомендует включать все JavaScript в конце страницы.

Погружение в Bootstrap

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

Раздел меню

Проектирование меню в Bootstrap — это самая простая вещь, которая может произойти в мире веб-дизайна. Давайте начнем создавать меню для нашей веб-страницы.

Меню реагирует по умолчанию и получает новый вид на более мелких устройствах. Поскольку у нас есть весь CSS, готовый в нашем файле «bootstrap.css», нам просто нужно добавить правильную разметку и правильные классы для каждого элемента.

Начнем с элемента:

/* navbar code here */

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

  • «navbar» является классом обертки для «navbars».
  • «navbar-expand-lg» добавляет гибкую функциональность, беря на себя ответственность за расширение или свертывание навигации в зависимости от размера экрана. Вместо -lg, чтобы быть большим, вы также можете выбрать -md(средние экраны), -sm(маленькие экраны) и -xl(очень большие).
  • «navbar-light» — это класс цвета для навигации со светлым фоном.
  • «bg-light» далее настраивает цвет фона навигации. В этом случае навигация имеет светлый цвет. Если мы заменим «bg-light» на «bg-dark», цвет фона навигационной панели будет темным а цвет текста будет светлым.

Далее добавьте следующий фрагмент внутри элемента :

Vacation Rentals

Класс «navbar-brand» используется для брендинга целей. В нашем случае отображается имя веб-сайта.

Затем обратите внимание на классы в элементе . Эта кнопка видна только на маленьких экранах, и она используется для включения и выключения видимости меню data-target=»#navbarSupportedContent», что является ссылкой на значение идентификатора элемента «div», содержащего это меню. Давайте добавим этот элемент сейчас, чуть ниже предыдущего кода:

  • Home (current)
  • Trip Description
  • About Us
  • Book Travels
  • Reservations

Search

Вышеприведенный код является основным содержанием нашего меню. «navbar-collapse» применяется, чтобы сделать меню сенсорным, а также изменить его форму для небольших устройств. Содержимое внутри довольно легко понять.

Мы использовали базовые элементы ul и li для перечисления пунктов меню. Также есть форма, которая классифицируется «form-inline» так, чтобы она отображалась правильно внутри панели навигации.

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

Здесь важны две вещи:

  • Использование utility classes, таких как mr-sm-2, mr-auto и т. д. Это довольно ново для Bootstrap, и их много.
  • Внимание к доступности с помощью класса «sr-only», который обрабатывает контент, предназначенный для чтения с экрана, и такие атрибуты, как «aria-controls» и «aria-expanded».

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

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

Область заголовка

Bootstrap предлагает класс полезного использования «jumbotron», который можно использовать для отображения больших заголовков и содержимого. Это в основном используется на веб-сайтах, основанных на продуктах. Для этого нам нужно добавить следующую разметку:

Мы поставили «jumbotron» внутри div с классом «row» и дали самому «jumbotron» дополнительный класс «col». Это классы, которые использует Bootstrap для построения своей 12-колонной сетки.

Также обратите внимание на использование классов «container-fluid» и «jumbotron-fluid». Эти классы гарантируют, что «container» и «jumbotron» принимают 100% ширину родительского элемента контейнера или браузера, если родительский элемент отсутствует.

Внутри элемента div c классом «jumbotron» мы поместили элементы: h1, p и, наконец, причудливую кнопку.

Класс «display-4» является одним из последних дополнений в Bootstrap. Это класс отображения заголовка, который вы можете использовать, когда вам нужны заголовки, чтобы он действительно выделялся.

Класс «text-light» также является новым дополнением в Bootstrap. Это один из классов полезности цвета, позволяющий быстро контролировать цвет и цвет фона элементов.

Обновите браузер и посмотрите на область заголовка. Потрясающие!

Область содержимого

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

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

Давайте сначала посмотрим на разметку.

Во-первых, есть три элемента div, которые содержатся внутри одной строки. Итак, мы начинаем новую строку, добавляя новый класс «row».

Строка теперь содержит еще три тега div с классом «col-sm». Перед выпуском Bootstrap 4 достижение этого результата потребовало бы добавления класса «col-md-4» к каждому из этих элементов. Число 4 в классе означало, что сетка состояла из четырех столбцов. Таким образом, три div с четырьмя столбцами занимали 12 столбцов.

Новая сетка Bootstrap использует силу Flexbox, чтобы сделать вещи способом менее сложным. Класс «col-sm» в каждой колонке div само по себе гарантирует, что содержание равномерно делится между тремя div-ами, пока размер экрана не станет 576px, это точка, где столбцы начнут складываться друг на друга.

Класс «pb-4» один из новых служебных классов, которые приходят с Bootstrap 4. Это создает некоторый отступ снизу внутри элемента на основе значения.

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

Type 1

Lorem Ipsum…<\p> Book Now @ $599>

Добавленное изображение имеет класс «img-fluid», который позволяет соответствовать размеру родителя независимо от его собственного размера.

Изображение реагирует на размер каждого div. Также у нас есть нормальные теги h3 и p. Вы можете заполнить тег p любым контентом. На моей демо-странице я использовал автоматически генерируемый текст Lorem Ipsum.

Затем, в конце, я добавил кнопку.

Класс «btn-success» используется, чтобы сделать кнопку зеленой. Есть другие классы как «btn-info», «btn-default», «btn-warning» и «btn-danger». Вы можете просмотреть страницу документации для всех цветов.

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

Футер (подвал сайта)

Область футера соответствует тем же принципам, что и область содержимого. Вот разметка:

© 2018

  • About Us
  • Support 24×7
  • Privacy Policy

Vacation Rentals

Я использовал элемент HTML5 «footer» и создал еще одну строку одновременно. Затем я разделил всю область на три равные части, так же, как и в основной области содержимого выше. Затем я заполнил каждый столбец.

Некоторые дополнительные классы

Классы таблиц: если вы используете элемент

, вы можете использовать этот класс «.table», чтобы таблица выглядела немного более привлекательной, как это обозначено в стилях Bootstrap.

Обтекания (floats): вы можете использовать «.float-left» — помещает содержимое слева, а контент обтекает блок справа, «.float-right» — чтобы поместить содержимое справа, а контент обтекал блок слева и «float-none» — удаляет float из этого элемента.

Класс «clearfix»: этот класс используется для очистки float в любом элементе.

И в завершении

Итак, это было мое маленькое руководство «Как мне начать» для последней версии Bootstrap. Основной мотив состоял в том, чтобы вы поняли, как работает Bootstrap. Как вы могли видеть, я не написал больше нескольких строк кода CSS. Bootstrap обрабатывает все самостоятельно с помощью своего предопределенного набора файлов CSS и JS.

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

Вы также можете добавить свой CSS на сайт. Создайте свой собственный файл CSS с любым именем — например: customstyles.css — и импортируйте в него Bootstrap CSS. Затем определите свой собственный стиль, используя соответствующий класс элемента или идентификатор. В этой демонстрации я использовал бы свой файл customstyle.css, чтобы изменить фон элемента «jumbotron».

Вот демонстрационная страница того, что у нас с вами получилось.

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

Но на сегодня это все. Не забывайте подписываться на обновления моего блога и до скорых встреч!

Вам понравилась статья?

(Пока оценок нет)
Загрузка…

Юрич:

Занимаюсь созданием сайтов на ВордПресс более 5 лет. Работал в нескольких веб-студиях, да и сейчас работаю. Иногда подрабатываю на фрилансе, как на нашем так и на зарубежном. Везде зарекомендовал себя очень хорошо. Если нужен сайт на вордресс, шаблон для сайта или лендинг — не стесняйтесь — пишите. Рад буду помочь!

Источник: https://zacompom.ru/verstka/ponimanie-bootstrap-kak-yeto-rabotaet-i-chto-nov.html

Bootstrap 3 — Сетка

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

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

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

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

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

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

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

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

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

Ширина viewportШирина контейнера (container)
= 768px и = 992px и … При разработке макета сайта обычно не применяют вкладывание одних обёрточных контейнеров 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 и выше горизонтально: … … … Если необходимо рассчитать ширину колонок в пикселях, то это правильно делать на границах контрольных точек (т.е. когда одно действие класса сменяется другим).Например, расчитаем, доступную ширину под контент для первого и второго блока: 1 блок… 2 блок…

Контрольные точкиДоступная ширина 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.98px 720px (750px — padding (30px)) 720px (750px — padding (30px))
970px — 1169.98px 616,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):

1 блок… 2 блок… 3 блок…

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

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

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

1 блок… 2 блок… 3 блок… 4 блок…

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

1 блок… 2 блок… 3-1 блок… 3-2 блок… 3-3 блок… 3-4 блок… 3-5 блок… 3-6 блок… 4 блок…

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

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

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

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

1 блок…

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

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

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

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

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

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

Например, добавление к элементу класса visible-md-block будет означать то, что он будет отображаться только на устройствах, имеющим viewport md (width viewport >=992px и<\p>

Источник: https://itchief.ru/bootstrap/grid-v3

Bootstrap 3 · Основы Bootstrap, как загрузить Bootstrap, поддерживаемые браузеры и устройства

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

Текущая версия v3.3.2.

Bootstrap CDN

Сайт MaxCDN любезно предоставил Bootstrap возможность пользоваться услугами CDN для распространения файлов CSS и JavaScript. Чтобы воспользоваться этой возможностью, поменяйте локальные настройки на ссылки для Bootstrap CDN приведенные ниже:

Установка с помощью Bower

Для управления исходными файлами Bootstrap's Less, CSS, JavaScript, шрифтов и локальными копиями документов используйте Bower.

$ bower install bootstrap

Bootstrap доступен в двух версиях. Одна из них содержит скомпилированный вариант, а другая минимизированный (уменьшенный по объему). В обоих случаях каталоги и файлы логически сгруппировны.

Обратите внимание, что всем JavaScript плагинам необходима библиотека jQuery. jQuery необходимо подключить как показано в базовом шаблоне. Чтобы посмотреть какие версии jQuery поддерживаются обратитесь к bower.json.

Файловая структура Bootstrap 3

После загрузки, разархивируйте файлы. Вы увидите нечто похожее на это:

bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff

Это основная форма Bootstrap: скомпилированные файлы готовы для быстрого использования в любом веб-проекте. Предоставлены сборки CSS и JS (bootstrap.*) и минимизированный вариант (bootstrap.min.*). В качестве дополнительной опции для Bootstrap включены шрифты Glyphicons.

Исходный код Bootstrap 3

Исходный код Bootstrap включает прекомпелированные CSS, JavaScript и шрифты, вместе с исходным Less, JavaScript и документацией. Для наглядности посмотрите приведенный пример ниже.

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/ └── examples/

less/, js/, шрифты/ с иконками . Папкаdist/ включает в себя все перечисленные скомпилированные файлы, указанные в разделе выше. Папка docs/ содержит документацию и примеры/ использования Bootstrap. Кроме того, находится информация о лицензиях и развитии предыдущих версий.

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

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

  1. Не создавайте с именем 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 с заблокированной адаптивностью

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

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

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

Поддержка браузерами

В частности, мы поддерживаем последние версии из следующих браузеров и платформ. На платформе Windows, мы поддерживаем Internet Explorer 8-11. Более конкретная информация поддержки предоставлена ниже.

ChromeFirefoxInternet ExplorerOperaSafariAndroid

iOS

Mac OS X

Windows

Поддерживается Не поддерживается N/A Не поддерживается N/A
Поддерживается N/A Не поддерживается Поддерживается
Поддерживается Поддерживается Поддерживается Поддерживается
Поддерживается Поддерживается Поддерживается Поддерживается Не поддерживается

Bootstrap должен достаточно хорошо выглядеть и вести себя в Chromium и Chrome для Linux, Firefox для Linux, и Internet Explorer 7, хотя они официально не поддерживаются.

Internet Explorer 8 и 9

Internet Explorer 8 и 9 также поддерживается, однако помните, что некоторые свойства CSS3 и элементы HTML5 не в полной мере поддерживаются данным браузерами. Кроме того, Internet Explorer 8 требует использования Respond.js, чтобы разрешить поддержку медиа запросов.

СвойствоInternet Explorer 8Internet Explorer 9border-radius

box-shadow

transform

transition

placeholder

Не поддерживается Поддерживается
Не поддерживается Поддерживается
Не поддерживается Поддерживается с префиксом -ms
Не поддерживается
Не поддерживается

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

Примите во внимание следующие оговорки, при использовании Respond.js в вашей среде разработки, в рабочей среде Internet Explorer 8.

Respond.js и кросс-доменный CSS

Если вы храните Respond.js и CSS на разных (суб)доменах (например, на CDN) — это требует некоторых дополнительных установок. Ознакомьтесь с документацией Respond.js для уточнений.

Через правила безопасности браузера, Respond.js не работает при просмотре через протокол file:// (например, когда вы открываете HTML файл локально). Чтобы протестировать настройки чувствительности в IE8, просматривайте ваши страницы через HTTP(S). Ознакомьтесь с документацией Respond.js для уточнений.

Respond.js не работает с CSS, на которые ссылаются как @import. В частности, некоторые конфигурации Drupal, как известно, используют @import. Ознакомьтесь с документацией Respond.js для уточнений.

Internet Explorer 8 и box-sizing

IE8 не в полной мере поддерживает box-sizing: border-box; при комбинировании с min-width, max-width, min-heightили max-height. По этой причине, начиная с v3.0.1, мы больше не поддерживаем max-width, .container.

Режим совместимости с IE

Bootstrap не поддерживает режим совместимости в старых версиях Internet Explorer. Чтобы быть уверенным, что вы используете последнюю версию такого режима для IE, просмотрите включен соответствующий тег на вашей странице:

Подтвердите режим документа, открыв средства отладки: нажмите F12 и проверьте «Document Mode».

Этот тег входит в состав всех Bootstrap документациий и примеров для обеспечения лучшей визуализации возможных в каждой поддерживаемой версии Internet Explorer.

Просмотрите эти вопросы на StackOverflow для уточнений.

Internet Explorer 10 на Windows 8 и Windows Phone 8

Internet Explorer 10 не отличает ширину устройства ширины окна просмотра, и таким образом не правильно применяет медіазапити в Bootstrap CSS. Как правило, это можно быстро починить добавив следующий код CSS:

@-ms-viewport { width: device-width; }

Однако, это не работает для устройств, работающих под управлением Windows Phone 8 версий старше, чем Update 3 (a.k.a. GDR3), поскольку это вызывает такие устройства, чтобы главным образом показать основной рабочий стол вместо узкого «phone» view. Для решения этой проблемы вам необходимо включать следующие CSS и JavaScript, чтобы обойти ошибку.

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
if (navigator.userAgent.match(/IEMobile/10.0/)) { var msViewportStyle = document.createElement('style') msViewportStyle.appendChild( document.createTextNode( '@-ms-viewport{width:auto!important}' ) ) document.querySelector('head').appendChild(msViewportStyle)
}

Для получения дополнительной информации и руководства по использованию, просмотрите Windows Phone 8 и Device-Width.

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

Процентное округления в Safari

В версиях Safari v6.1 для OS X и Safari для iOS v7.0.1, при использовании класса разметки .col-*-1, движок Safari имеет некоторые проблемы с количеством десятичных знаков.

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

Здесь можно немного изменить (просмотрите #9282), но у вас есть несколько вариантов:

  • Добавить .pull-right в вашей последней колонки в разметке, чтобы получить жесткое выравнивание по правому краю.
  • Изменить проценты вручную, чтобы получить идеальное округления для Safari (более сложно, чем в первом варианте)

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

Модаль, navbars, и виртуальные клавиатуры

Переполнение и прокрутка

Поддержка overflow: hidden для элемента достаточно ограничена в iOS и Android. В браузере этих устройств, при прокруткі за пределы верхней или нижней модальной части, начинает прокручиваться содержание в .

Виртуальная клавиатура

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

Существуют некоторые обходные пути для этого, в том числе — трансформирующие элементы position: absolute, или при выявлении фокуса на элементе вызывают таймер и пробуют исправить это вручную.

Bootstrap не обрабатывает такие ошибки, так что вам нужно самим это решить.

Navbar Dropdowns

Элемент .dropdown-backdrop не используется на iOS в навигации из-за сложности с z-index. Таким образом, чтобы закрыть выпадающие меню, необходимо просто нажать элемент выпадающего (или любой другой элемент, который будет генерировать событие нажатия в iOS).

Браузерное масштабирование

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

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

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

Выводы на принтер

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

В частности, по состоянию на Chrome v32 и независимо от настройки полей, Chrome значительно использует ширину окна просмотра уже, чем физический размер бумаги при разрешении запросов СМИ во время печати веб-страницы.

Это может привести к неожиданно активирующейся при печати экстра-малых разметки Bootstrap. Смотрите #12078. Предлагаемые методы обхода:

  • Примените extra-small разметку и убедитесь, что ваша страница выглядит приемлемо.
  • Настройка значения @screen-* Less переменных, чтобы ваш бумага для принтера рассматривалась больше, чем extra-small.
  • Добавте пользовательские запросы, чтобы изменить размер разметки точек останова только для печатных СМИ.

Android stock браузер

Источник: http://bootstrap-3.ru/getting-started.php

Bootstrap 3: как скачать, как подключить и как пользоваться

Подготовительный процесс закончен, Bootstrap подключен, можно идти дальше и заняться наполнением нашей WEB-страницы компонентами фреймворка.

Как пользоваться документацией

Документация у фреймворка очень хорошая, что делает его простым в использовании. В главном меню официального сайта несколько разделов: «Getting started», «CSS», «Components», «JavaScript» и «Custimize», на странице каждого раздела в правой колонке находятся названия разных компонентов, кликнув по которым показывается их описание и варианты использования в виде готового кода.

Если сложности с английским языком, то в сети есть несколько ресурсов с переведенной документацией, вот адрес одного из таких сайтов www.oneskyapp.com/ru/docs/bootstrap. Также можно воспользоваться каким-нибудь переводчиком для браузера, перевод будет, конечно, кривоватый, но суть написанного будет ясна. В общем, просто нужно читать документацию, брать примеры кода и практиковаться.

Работа с сеткой Bootstrap

Как я говорил в прошлой статье, сетка работает по принципу таблицы, включая в себя ряды .row и колонки .col, колонок может быть максимум двенадцать. К классу .col добавляются префиксы (lg, md, sm, xs), которые указывают ширину данного столбца на конкретном разрешении экрана.

Оборачиваются ряды со столбцами в блок с классом .container или классом .container-fluid. Различие между ними в том, что у класса  .container максимальная ширина 1170 пикселей, а у класса.container-fluid — ширина не ограничена, то есть на всю ширину экрана, даже если разрешение экрана очень большое. Полную информацию о сетке Bootstrap смотрите в документации раздела «CSS».

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

HEADER

CONTENT

SIDEBAR

FOOTER

Для разделения блоков я прописал два дополнительных класса: .block, .block2 и добавил в них по паре правил в созданном файле style.css.

block{ background: #eee; border: 1px solid #000; } .block2{ background: #ccc; border: 1px solid #000; }

Добавим иконочный шрифт к нашим заголовкам. В разделе «Components» выбираем понравившиеся иконки, копируем текст под изображением, этот текст является классом. Создаем внутри тега заголовка тег и вставляем скопированный класс.

HEADER

Теперь не мешало добавить какое-то меню. Для этого в разделе «Components» переходим в «Navbar», выбираем понравившееся меню, копируем код и после открывающего тега , вставляем.

Осталось заполнить «content» и «sidebar». Все делаем по той же схеме: выбираем компонент в документации, читаем описание, копируем и вставляем в нужное место. Я добавлю форму и кнопку, кликнув по которой будет вызываться модальное окно с таблицей.

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

На этом я буду заканчивать статью. Мы рассмотрели лишь крохотную часть из функционала фреймворка, но как работать с Bootstrap, думаю, Вы поняли. Следующий шаг — это изменение стилей фреймворка под свои нужды и скачивание только тех компонентов, которые нужны. Все это разберем в статье «Кастомизация Bootstrap».

Источник: https://zyubin.ru/frameworks/bootstrap/kak-rabotat-s-bootstrap.html

Советы по разработке адаптивного дизайна на Bootstrap

С релизом версии 3, Bootstrap добавил к своей адаптивной базе еще и возможность создания проектов mobile first.

Какие элементы, включенные в CSS Bootstrap, помогают в этом? Давайте рассмотрим несколько вещей и получим некоторое представление о том, как они могут помочь нам в наших проектах.

Определение надлежащих медиа запросов

Bootstrap имеет четко определенные контрольные точки для различных видов устройств, указываемые с помощью медиа запросов CSS.

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

  • Сверхмалые устройства (например, мобильные телефоны) определяются по умолчанию при разработке «mobile first» концепции Bootstrap. К ним относятся устройства, имеющие ширину экрана меньше, чем 768 пикселей;
  • Малые устройства (например, планшеты), определяются с помощью @media (min-width: 768px) and (max-width: 991px) { … };
  • Средние устройства (например, мониторы) имеют ширину экрана меньше, чем 1200 пикселей, но больше, чем 991 пиксель, определяются с помощью @media (min-width: 992px) and (max-width: 1199px) { … };
  • Большие устройства (например, широкоформатные мониторы) с шириной больше, чем 1200 пикселей, определяются с помощью @media (min-width: 1200px) { … }.

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

Например, если вы используете смартфон Samsung Galaxy Note III, альбомная ориентация попадает в категорию «Малые устройства», в то время как портретный режим подпадает под определение «Сверхмалые устройства».

Этот вид классификации применяется большинством адаптивных фреймворков.

Подробное рассмотрение системы сеток

Если вы знакомы с системой сеток Bootstrap, вы, возможно, знаете, что для корректной настройки сетки требуется соответствующая HTML-структура. Давайте рассмотрим ее.

Давайте сначала рассмотрим HTML-структуру Bootstrap для установки двух столбцов:

Столбец 1

Столбец 2

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

С помощью медиа запросов Bootstrap задает для .container разную ширину, в зависимости от размера устройства:

  • Сверхмалые устройства (меньше 768 пикселей): width: auto (или ширина не задается);
  • Малые устройства (больше или равно 768 пикселей): width: 750px;
  • Средние устройства (больше или равно 992 пикселей): width: 970px;
  • Более крупные устройства (больше или равно 1200 пикселей): width: 1170px.

.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }

Как видно из приведенного выше изображения, .container предотвращает соприкосновение контента внутри элемента с краями окна браузера, используя поле в 15 пикселей с каждой стороны. Это также гарантирует, размещение контейнера по центру с помощью использования значения auto для левого и правого отступов.

Строки являются еще одним важным элементом системы сетки Bootstrap. Прежде чем создавать столбцы, вы можете определить строку, используя класс .row. Вот фрагмент CSS-кода Bootstrap для класса .row:

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

Как видим, наша строка имеет отрицательное значение правого и левого полей -15 пикселей, чтобы края строки касались края элемента контейнера. Это действует как оболочка для столбцов, куда вы можете добавить до 12 столбцов:

Строка Bootstrap

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

Вот фрагмент CSS-кода Bootstrap для класса .col-xs-6:

.col-xs-6 { padding-right: 15px; padding-left: 15px; }

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

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

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

Если вы хотите создать собственный фреймворк, вы, возможно, захотите рассмотреть использование метода поля / отступы.

Определение правильной ширины столбцов

Bootstrap использует проценты (%) в качестве единицы для определения ширины столбцов, что помогает создавать адаптивные конструкции. Как было сказано выше, в нем существует 4 различных категории устройств для различных контрольных точек.

Каждая категория имеет свой собственный набор классов для столбцов разных размеров:

  • Сверхмалые устройства используют .col-xs-*;
  • Малые устройства используют .col-sm-*;
  • Средние устройства используют .col-md-*;
  • Большие устройства используют .col-lg-*.

Символ звездочки (*) заменяется на число. Например, .col-xs-6 6 раз создает столбец размера .col-xs-1; .col-xs-4 четыре раза создает столбец размера .col-xs-1 и так далее.

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

Вот фрагмент из CSS-кода Bootstrap для классов столбцов, где звездочками для краткости заменены размеры (xs, sm, md и т.д.):

.col-*-12 { width: 100%; } .col-*-11 { width: 91.66666667%; } .col-*-10 { width: 83.33333333%; } .col-*-9 { width: 75%; } .col-*-8 { width: 66.66666667%; } .col-*-7 { width: 58.33333333%; } .col-*-6 { width: 50%; } .col-*-5 { width: 41.66666667%; } .col-*-4 { width: 33.33333333%; } .col-*-3 { width: 25%; } .col-*-2 { width: 16.66666667%; } .col-*-1 { width: 8.33333333%; }

Давайте проанализируем этот код. Класс .col-lg-6 будет иметь ширину в 50% на больших устройствах, но для средних, малых и сверхмалых устройств, используется ширина по умолчанию width: auto. Это обеспечивает то, что столбцы преобразуются в общей структуре (а не бок о бок) на небольших устройствах.

Адаптивные таблицы

Таблицы, используемые для отображения данных, также адаптивны в Bootstrap.
Для использования стилей таблиц Bootstrap мы используем класс .table, которому соответствует следующий CSS-код:

.table { width: 100%; max-width: 100%; margin-bottom: 20px; }

Применяя ширину в 100%, Bootstrap обеспечивает заполнение таблицами всей ширины родительского элемента. Но есть одна проблема. Таблицы с несколькими столбцами сжимаются на небольших устройствах, и могут не читаться.
Чтобы исправить это, Bootstrap содержит другой класс .table-responsive. Вот его CSS-код:

.table-responsive { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; border: 1px solid #ddd; }

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

Адаптивные изображения

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

.img-responsive { display: block; max-width: 100%; height: auto; }

Комбинация объявлений max-width: 100% и height: auto обеспечивает то, что изображения пропорционально уменьшаются на небольших устройствах, оставаясь в рамках ограничений родительского элемента на больших устройствах.

Заключение

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

Перевод статьи «Responsive Web Design Tips from Bootstrap’s CSS» был подготовлен дружной командой проекта Сайтостроение от А до Я.

Источник: http://www.internet-technologies.ru/articles/sovety-po-razrabotke-adaptivnogo-dizayna-na-bootstrap.html

Ссылка на основную публикацию