Bootstrap mobile: Bootstrap · The world’s most popular mobile-first and responsive front-end framework.

Содержание

Адаптивность — Bootstrap: Основы

Bootstrap: Основы

Создание адаптивных сайтов — неотъемлемая часть любого современного сайта. Со многими концепциями адаптивности вы познакомились в курсе CSS: Адаптивность. Теперь эти знания помогут быстро понять то, как работает Bootstrap.

В своей основе Bootstrap использует подход Mobile First. Это означает, что вначале указывается код для мобильных устройств, а потом код для десктопа. Возникает вопрос: «А причём тут Mobile First, если необходимо только использовать нужные классы?». Ответ на данный вопрос кроется в том, с какими разрешениями экрана работает Bootstrap. Таких разрешений в последней версии пять:

  • Extra small. Ширина viewport меньше 576px. Внутри Bootstrap такое разрешение никак не маркируется. Данный тип является значением по умолчанию. Ширина .container: 100%.

  • Small. Ширина viewport больше или равна 576px. Внутри Bootstrap такое разрешение маркируется как -sm-. Ширина .container: 540px.

  • Medium. Ширина viewport больше или равна 768px. Внутри Bootstrap такое разрешение маркируется как -md-. Ширина .container: 720px.

  • Large. Ширина viewport больше или равна 992px. Внутри Bootstrap такое разрешение маркируется как -lg-. Ширина .container: 960px.

  • Extra large. Ширина viewport больше или равна 1200px. Внутри Bootstrap такое разрешение маркируется как -xl-. Ширина .container: 1140px.

ПрефиксШирина viewportШирина container
-sm->=576px540px
-md->=768px720px
-lg->=992px960px
-xl->=1200px1140px

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

Важно: используя данные префиксы важно помнить о подходе Mobile First. Это значит, что префиксы влияют на свою и более ширину viewport. Например, классы с префиксом -md- не будут использоваться при разрешении менее 768px.

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

<div>
  <div>
    <aside>
      <!-- Боковая панель -->
    </aside>
    <main>
      <!-- Основной контент -->

Классы visible-** и hidden-** в Bootstrap 4 / Тяпк

Классы hidden-* и visible-* убраны в Bootstrap 4.

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

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

Размер экранаКлассы
Скрыть на всех.d-none
Скрыть только на xs.d-none .d-sm-block
Скрыть только на sm.d-sm-none .d-md-block
Скрыть только на md.d-md-none .d-lg-block
Скрыть только на lg.d-lg-none .d-xl-block
Скрыть только на xl.d-xl-none
Показать на всех.d-block
Показать только на xs.d-block .d-sm-none
Показать только на sm. d-none .d-sm-block .d-md-none
Показать только на md.d-none .d-md-block .d-lg-none
Показать только на lg.d-none .d-lg-block .d-xl-none
Показать только на xl.d-none .d-xl-block

Соответствие классам из Bootstrap 3

Show/hide for breakpoint and down:

hidden-xs-down = d-none d-sm-block
hidden-sm-down = d-none d-md-block
hidden-md-down = d-none d-lg-block
hidden-lg-down = d-none d-xl-block

Show/hide for breakpoint and up:

hidden-xl-down = d-none (same as hidden)
hidden-xs-up = d-none (same as hidden)
hidden-sm-up = d-sm-none
hidden-md-up = d-md-none
hidden-lg-up = d-lg-none
hidden-xl-up = d-xl-none

Show/hide only for a single breakpoint:

hidden-xs (only) = d-none d-sm-block (same as hidden-xs-down)
hidden-sm (only) = d-block d-sm-none d-md-block
hidden-md (only) = d-block d-md-none d-lg-block
hidden-lg (only) = d-block d-lg-none d-xl-block
hidden-xl (only) = d-block d-xl-none
visible-xs (only) = d-block d-sm-none
visible-sm (only) = d-none d-sm-block d-md-none
visible-md (only) = d-none d-md-block d-lg-none
visible-lg (only) = d-none d-lg-block d-xl-none
visible-xl (only) = d-none d-xl-block

Bootstrap или JQuery mobile — CodeRoad

я начинаю приложение phonegap, но сомневаюсь, какой фреймворк CSS и JS я буду использовать : Bootstrap от twitter, который дает довольно хороший рендер, но использует LESS или Jquery mobile , которые очень легко реализовать.
что вы о них думаете ?
спасибо 🙂

cordova

jquery-mobile

twitter-bootstrap

Поделиться

Источник


Unknown    

10 сентября 2012 в 00:42

2 ответа

  • Мобильное веб-приложение, Jquery Mobile или Icenium или Bootstrap?

    Я реализовал удобное приложение для расходов с Jquery mobile, и оно хорошо работает на Android, BB, Iphone. Jquery mobile прост в использовании, с открытым исходным кодом, с низкой кривой обучения.. Я также работал с bootstrap, и это замечательно. Единственная небольшая проблема — это…

  • Как использовать Jquery mobile панелей в twitter bootstrap

    Я создаю веб-сайт с помощью twitter bootstrap v3.0.0 и хочу добавить боковую панель (панель с правой стороны экрана), и я обнаружил, что могу сделать это с помощью jquery mobile. Проблема в том, что jquery mobile ruins all my css , поэтому мой вопрос таков: can i import just a part of jquery. ..


7

Начальная загрузка

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

jQuery мобильный телефон

  • Хорошо подходит для быстрого прототипирования, если вы не слишком заботитесь о производительности или внешнем виде и поведении iOS-like
  • Listview jQuery мобильного телефона будет
    сэкономьте много времени, если вы строите мобильную компанию в интернет-магазин или что-то еще с большим количеством списков или поднавигаций.

Существует сравнение мобильных фреймворков, которое может быть полезно, чтобы дать вам представление о наилучшем варианте для ваших нужд: http://www. markus-falk.com/mobile-frameworks-comparison-chart/

Поделиться


Alastair    

15 марта 2013 в 15:57


4

Вы можете использовать Bootstrap с обычным CSS:

http://www.initializr.com/

Кроме того, он лучше подходит для начала игры с адаптивным дизайном.

Поделиться


AFD    

10 сентября 2012 в 00:59

Похожие вопросы:

Использование Bootstrap с jQuery Mobile

И Bootstrap (v2), и jQuery Mobile (v1.1 RC1) предоставляют строительные блоки, которые я хочу использовать для своего приложения. Bootstrap чист, прост и прекрасен. Однако ему не хватает чрезвычайно…

JQuery Mobile, Bootstrap и CSS3 Media запросов, какую комбинацию выбрать

JQuery мобильный, Bootstrap и CSS3 Media запросов Какую комбинацию использовать Чтобы иметь фреймворк пользовательского интерфейса, мы все должны использовать что-то вроде Bootstrap. Для разработки…

twitter-загрузочный против jquery-mobile

Мне интересно, может ли кто-нибудь дать какой-нибудь совет относительно того, что такое ‘better’. Twitter-bootstrap или JQuery mobile? Спасибо, — Питер

Мобильное веб-приложение, Jquery Mobile или Icenium или Bootstrap?

Я реализовал удобное приложение для расходов с Jquery mobile, и оно хорошо работает на Android, BB, Iphone. Jquery mobile прост в использовании, с открытым исходным кодом, с низкой кривой обучения…..

Как использовать Jquery mobile панелей в twitter bootstrap

Я создаю веб-сайт с помощью twitter bootstrap v3.0.0 и хочу добавить боковую панель (панель с правой стороны экрана), и я обнаружил, что могу сделать это с помощью jquery mobile. Проблема в том, что…

Могу ли я использовать bootstrap 3 вместе с jQuery Mobile?

Я прочитал много статей bootstrap vs. jQuery mobile. Совершенно ясно, что у них обоих разные цели. Так как насчет их объединения? Помимо прочего, мне нравятся адаптивные функции макета bootstrap. С…

Jquery Mobile или адаптивный дизайн?

Я провел много исследований по созданию адаптивного дизайна. Поэтому я наткнулся на эту статью отсюда: Является ли это избыточным при использовании jQuery мобильных и адаптивных макетов /CSS media…

PhoneGap, Bootstrap или JQuery Mobile?

У меня есть веб-приложение, которое закодировано в HTML,CSS и JavaScript. Моя цель с этим приложением-в конечном итоге заставить его работать на всех мобильных устройствах и сохранить веб-приложение…

Twitter bootstrap или JQuery Mobile

Мы собираемся начать разработку нового веб-сайта, который мы хотим правильно отображать на настольных компьютерах, а также на мобильных устройствах(планшетах и телефонах). Должны ли мы использовать…

В любом случае, чтобы создать эффект jquery mobile checkbox в bootstrap?

Я переключаюсь на bootstrap с Jquery Mobile. Что мне действительно нравится в jQuery mobile, так это то, как их радио и флажки стилизованы на мобильных устройствах. Есть ли вообще место, где я могу…

Обзор. Разметка · Bootstrap. Версия v4.0.0

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



Контейнеры


Это базовый элемент в Bootstrap и они необходимы при использовании нашей стандартной сеточной системы. Выбирайте отзывчивый, с фиксированной шириной (что значит, что его max-width изменяется на каждом брейкпойнте) или контейнер с плавающей шириной (width ==100% всегда).


Контейнеры могут иметь вложенные элементы, но в большинстве случаев можно обойтись без них.




<div>
  <!-- Content here -->
</div>

Используйте . container-fluid для создания контейнера полной ширины, занимающий 100% зоны просмотра.




<div>
  ...
</div>

Отзывчивые брейкпойнты


Поскольку Bootstrap разработан как mobile-first, тут используются медиа-запросы @media для создания брейкпойнтов контента и интерфейсов. Эти брейкпойнты в основном сделаны на минимальных широтах зоны просмотра и позволяют масштабировать элементы по мере изменения размера зоны просмотра.


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


// Экстрамалые девайсы («телефоны», 
// Малые девайсы («ландшафтные телефоны», >= 576px)
@media (min-width: 576px) { ... }

// Средние девайсы («таблетки», >= 768px)
@media (min-width: 768px) { ... }

// Большие девайсы (десктопы, >= 992px)
@media (min-width: 992px) { . .. }

// Экстрабольшие девайсы (большие десктопы, >= 1200px)
@media (min-width: 1200px) { ... }

Так как все эти параметры записаны в исходниках как Sass, все @media доступны через миксины:


@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

По случаю можно использовать и другие размеры (max-width: 575px == «данный размер или меньше»):


// Экстрамалые девайсы («телефоны», @media (max-width: 575.98px) { ... }

// Малые девайсы («ландшафтные», @media (max-width: 767.98px) { ... }

// Средние девайсы («таблетки», @media (max-width: 991. 98px) { ... }

// Большие девайсы (большие десктопы, @media (max-width: 1199.98px) { ... }

// Экстрабольшие девайсы (большие десктопы)
// Тут нет @media, т.к. такие брейпкойнты не имеют верхней границы по ширине width

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



Опять же, эти @media доступны через Sass миксины:


@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }

Также в наличии @media и миксины размеров экрана, использующие минимальные и максимальные ширины брейкпойнтов.


// Экстрамалые девайсы («портретные телефоны», @media (max-width: 575.98px) { ... }

// Малые девайсы («ландшафтные», >= 575px)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Средние девайсы («таблетки», >= 768px) 
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Большие девайсы (большие десктопы, >= 992px)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Большие девайсы (большие десктопы, >= 1200px)
@media (min-width: 1200px) { ... }

Эти @media также доступны из миксинов Sass:


@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

Также, @media могут занимать несколько значений ширин брейкпойнта:


// Пример
// Здесь стили применятся от средних девайсов до XL-девайсов
@media (min-width: 768px) and (max-width: 1199. 98px) { ... }

Миксины Sass для захвата таких же параметров (выше) выглядели бы так:


@include media-breakpoint-between(md, xl) { ... }

Z-индекс


Несколько компонентов Bootstrap используют данный индекс z-index, т.е. свойство CSS, которое помогает контролировать расположение контента с помощью третьей оси. В Bootstrap используется «стандартный» Z-индекс, спроектированный для правильного расположения навигации, всплывающих подсказок, всплывающих окон и т.н. “modals” (pop-up окно наверху страницы).


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


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


$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;




Для того, чтобы эффективно обращаться с перекрывающимися границами внутри компонентов (например, кнопки и формы ввода в группах форм ввода), мы используем по умолчанию значения z-index 1,2,3, а также hover и «активные состояния». В hover/focus/active мы подводим частный элемент к «переднему краю» использованием более высокого z-индекса, для показа его границы над вложенными элементами.



компонентов · Bootstrap

Доступные символы

Включает более 250 глифов в формате шрифта из набора Glyphicon Halflings. Глификоны Халфлинги обычно не доступны бесплатно, но их создатель сделал их доступными для Bootstrap бесплатно. В качестве благодарности мы просим вас по возможности указывать обратную ссылку на Glyphicons.

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

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

Не смешивать с другими компонентами

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

Только для пустых элементов

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

Изменение расположения шрифта значка

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

  • Измените переменные @ icon-font-path и / или @ icon-font-name в исходных файлах Less.
  • Используйте параметр относительных URL-адресов, предоставляемый компилятором Less.
  • Измените url () пути в скомпилированном CSS.

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

Доступные значки

Современные версии вспомогательных технологий анонсируют контент, созданный с помощью CSS, а также определенные символы Unicode. Чтобы избежать непреднамеренного и сбивающего с толку вывода в программах чтения с экрана (особенно когда значки используются исключительно для украшения), мы скрываем их с помощью атрибута aria-hidden = "true" .

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

Если вы создаете элементы управления без другого текста (например,

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

Ошибка:
Введите действительный адрес электронной почты

  

  
   Ошибка: 
  Введите действительный адрес электронной почты

Переключаемое контекстное меню для отображения списков ссылок. Сделано интерактивным с помощью выпадающего плагина JavaScript.

Пример

Оберните триггер раскрывающегося списка и раскрывающееся меню в .раскрывающийся список или другой элемент, объявляющий position: relative; . Затем добавьте HTML-код меню.

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

Выравнивание

По умолчанию раскрывающееся меню автоматически располагается на 100% сверху и слева от своего родителя.Добавьте .dropdown-menu-right к .dropdown-menu , чтобы выровнять раскрывающееся меню по правому краю.

Может потребоваться дополнительное позиционирование

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

Устарело

. Выравнивание вправо

Начиная с v3.1.0, мы устарели .pull-right в раскрывающихся меню. Чтобы выровнять меню по правому краю, используйте .dropdown-menu-right . Компоненты навигации с выравниванием по правому краю на панели навигации используют версию этого класса для автоматического выравнивания меню. Чтобы переопределить его, используйте .dropdown-menu-left .

  
    
  ...

Добавьте заголовок для обозначения разделов действий в любом раскрывающемся меню.

  
    
  ...
  
  •  Раскрывающийся заголовок 
    • 
  ...

Разделитель

Добавьте разделитель для разделения серии ссылок в раскрывающемся меню.

  
    
  . ..
  
  •  
    • 
  ...

Отключенные пункты меню

Добавьте .disabled к

  • в раскрывающемся списке, чтобы отключить ссылку.

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

    Проверьте правильность роли

    и предоставьте этикетку

    Чтобы вспомогательные технологии, такие как программы чтения с экрана, передавали, что последовательность кнопок сгруппирована, необходимо предоставить соответствующий атрибут role . Для групп кнопок это будет role = "group" , а на панелях инструментов должно быть role = "toolbar" .

    Единственным исключением являются группы, которые содержат только один элемент управления (например, группы кнопок с выравниванием по ширине с элементами

    • Объедините наборы

    в

    для более сложных компонентов.

      
    
  
     ... 
    
  
     ... 
    
  
     ...

    Калибровка

    Вместо применения классов размеров кнопок к каждой кнопке в группе просто добавьте .btn-group- * к каждой .btn-group , в том числе при вложении нескольких групп.

    Оставил
    Середина
    Верно

    Оставил
    Середина
    Верно

    Оставил
    Середина
    Верно

    Оставил
    Середина
    Верно

      
     ... 
    

     ... 
    

     ... 
    

     ...

    Вложенность

    Поместите . btn-group в другую .btn-group , если вы хотите, чтобы выпадающие меню были смешаны с рядом кнопок.

    Вертикальное отклонение

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

    Кнопка
    Кнопка

    Кнопка
    Кнопка

      
    
  ...

    Обоснованные группы кнопок

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

    Обработка бордюров

    Из-за специфического HTML и CSS, используемых для выравнивания кнопок (а именно: display: table-cell ), границы между ними удваиваются.В обычных группах кнопок margin-left: -1px используется для наложения границ вместо их удаления. Однако поле не работает с display: table-cell . В результате, в зависимости от ваших настроек Bootstrap, вы можете удалить или перекрасить границы.

    IE8 и границы

    Internet Explorer 8 не отображает границы кнопок в группе кнопок по ширине, будь то элементы или

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

    Зависимость плагина

    Для раскрывающихся списков кнопок

    требуется, чтобы в вашу версию Bootstrap был включен плагин раскрывающегося списка.

    Раскрывающееся меню с одной кнопкой

    Превратите кнопку в раскрывающийся список с некоторыми базовыми изменениями разметки.

    Раскрывающиеся списки кнопок

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

    Калибровка

    Выпадающие кнопки работают с кнопками любого размера.

      

    
  
  
      
    ...
  
    

    



    
  
  
      
    . ..
  
    

    



    
  
  
      
    ...

    Выпадающий вариант

    Запуск раскрывающихся меню над элементами путем добавления .dropup к родительскому элементу.

    Расширьте элементы управления формой, добавив текст или кнопки до, после или с обеих сторон любого текстового .Используйте .input-group с добавлением .input-group-addon или . input-group-btn для добавления или добавления элементов к одному .form-control .

    Текстовый

    только с

    Избегайте использования здесь элементов