twitter-bootstrap — вопросы с ответами

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

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

Для тех, кто начинает новый проект, Bootstrap поставляется с несколькими полезными элементами. К примеру, вам просто нужно включить CSS-файл bootstrap.css и JavaScript-файл bootstrap.js (необязательно) на ваш сайт, и вы готовы к работе.

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

Загрузка Bootstrap включает три папки: css, js и img. Для простоты добавьте их в корень вашего проекта. Миниатюрные версии CSS и JavaScript также включены. Нет необходимости включать как несжатую, так и минимизированную версии. Для краткости можно использовать несжатую версию во время разработки, а затем переключаюсь на сжатую версию в продакшене.

Стандартный HTML шаблон

Обычно веб-проект выглядит примерно так:

В Bootstrap мы включаем ссылку на таблицу стилей CSS и JavaScript:

Важно: Не забудьте про HTML5 Doctype. Включая <!DOCTYPE html>, все современные браузеры переводятся в режим стандартов.

Глобальные стили

С Bootstrap, несколько важных элементов поставляются заранее. Вместо того, чтобы использовать старый блок сброса, который был частью дерева Bootstrap 1.0, Bootstrap 2.0 использует Normalize.css, проект Николаса Галлахера, который является частью HTML5 Boilerplate. Все это включено в файл bootstrap.css.

В частности, следующие стили по умолчанию обеспечивают особую обработку типографики и ссылок:

  • Поле было удалено из тела, и содержимое будет прилегать к краям окна браузера;
  • Цвет фона: белый; применяется к телу;
  • Bootstrap использует атрибуты @baseFontFamily, @baseFontSize и @baseLineHeight в качестве типографской базы. Это позволяет высоте заголовков и другого контента вокруг сайта поддерживать одинаковую высоту строки;
  • Bootstrap устанавливает глобальный цвет ссылки через @linkColor и применяет подчеркивание ссылки только на :hover.

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

Стандартная система таблиц

Система таблицы Bootstrap по умолчанию (как на изображении ниже) использует 12 столбцов, что делает контейнер шириной 940 пикселей без включенных гибких функций. С добавлением гибкого CSS-файла сетка адаптируется к ширине 724 или 1170 пикселей, в зависимости от области просмотра. Под окнами просмотра размером 767 пикселей, такими как на планшетах и небольших устройствах, столбцы становятся резиновыми и располагаются вертикально. При ширине по умолчанию каждый столбец имеет ширину в 60 пикселей и смещение на 20 пикселей влево. Пример из 12 возможных столбцов приведен на данном изображении:

Основная сетка HTML

Чтобы создать простой макет, создайте контейнер с <div>, который имеет класс .row, и добавьте соответствующее количество столбцов .span*. Поскольку у нас есть сетка из 12 столбцов, нам просто нужно, чтобы количество столбцов .span* было равно 12. Мы могли бы использовать макет 3-6-3, 4-8, 3-5-4, 2-8-2… и продолжать, и продолжать, но суть вы и так уже наверное поняли.

Следующий код показывает .span8 и .span4, что в сумме составляет 12:

Система резиновой сетки

Резиновая сетка использует проценты вместо пикселей для ширины столбца. Она обладает теми же возможностями реагирования, что и наша система с фиксированной сеткой, обеспечивая надлежащие пропорции для ключевых разрешений экрана и устройств. Вы можете сделать любой ряд «резиновым», изменив .row на .row-liquid. Классы столбцов остаются одинаковыми, благодаря чему можно легко переходить от фиксированных к резиновым сеткам. Для получения смещения вы действуете так же, как и с системой с фиксированной сетки – добавьте .offset* к любому столбцу, чтобы сместить его на желаемое количество столбцов:

Поскольку мы используем проценты, каждый .row сбрасывает количество столбцов до 12. Например, если вы были в .span8, то вместо двух экземпляров .span4, вы бы использовали два div .span6 для разделения содержимого пополам. Это касается гибкого контента, так как мы хотим, чтобы контент заполнял все 100% контейнера:

Макеты контейнеров

Чтобы добавить на страницу макет с фиксированной шириной по центру, просто оберните содержимое в <div class="container">...</div>. Если вы хотите использовать разметку Fluid, но хотите обернуть все в контейнере, используйте следующее: <div class="container-fluid">...</div>. Использование гибкой компоновки удобно при создании приложений, экранов администрирования и других связанных проектов.

Гибкий дизайн

Чтобы включить гибкие функции Bootstrap, вам нужно добавить тег <meta> в <head> вашей веб-страницы. Если вы не загрузили скомпилированный исходный код, вам также необходимо добавить адаптивный файл CSS. Пример необходимых файлов выглядит следующим образом:

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

Что такое гибкий дизайн?

Гибкий дизайн (адаптивный, отзывчивый) – это метод сбора всего существующего контента на странице и его оптимизации для устройства, которое его просматривает. Например, рабочий стол не только получает обычную версию веб-сайта, но также может иметь широкоэкранный макет, оптимизированный для больших дисплеев, которые многие люди подключают к своим компьютерам. Планшеты получают оптимизированную компоновку, используя их книжную или альбомную ориентацию. И затем с телефонами, вы можете ориентироваться на их гораздо более узкую ширину. Чтобы настроить таргетинг на эту ширину, Bootstrap использует медиазапросы CSS для измерения ширины области просмотра браузера, а затем, используя условные выражения, изменяет загружаемые части таблиц стилей. Используя ширину окна просмотра браузера, Bootstrap может затем оптимизировать контент, используя комбинацию соотношений или ширин, но в основном он опирается на свойства min-width и max-width.

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

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

Для более крупного сайта вы можете разделить каждый медиазапрос на отдельный файл CSS. В файле HTML вы можете вызывать их с тегом <link> в заголовке вашего документа. Это полезно для уменьшения размера файлов, но потенциально увеличивает количество HTTP-запросов, если сайт отзывчивый. Если вы используете LESS для компиляции CSS, вы можете обработать их все в один файл:

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

Есть два основных подхода к разработке веб-дизайна. Мантра, которую сейчас кричат многие, заключается в том, что вы должны начать с мобильных стандартов, перейти на эту платформу и подстраивать стандартны персональных компьютеров под нее. Twitter Bootstrap почти полностью противоположен: вы создадите полнофункциональный рабочий стол, который «просто работает».

Но Bootstrap прекрасно подойдет и в качестве чисто мобильного фреймворка.

JavaScrpit плагины для Bootstrap

Bootstrap может быть интегрирован в ваш сайт в двух формах: скомпилированных или необработанных. В Bootstrap размер несжатого файла составляет 59 КБ, а минимизированной версии – всего 32 КБ. Все плагины Bootstrap можно вызывать с помощью встроенного Data API. При этом вам не нужно включать какую-то конкретную строку JavaScript, чтобы вызвать какие-либо функции плагина.

Как правило, JavaScript находится в отдельном файле или в нижней части страницы перед закрывающим тегом </body>. Вы можете использовать атрибут src для ссылки на другой файл или записать содержимое файла между открывающим и закрывающим тегами:

Как правило, лучше включить все вызовы JavaScript в проверку, которая гарантирует, что DOM был загружен на страницу. Если у вас есть JavaScript, пытающийся запуститься ранее, он может пропустить элементы, когда браузер анализирует страницу. С помощью jQuery легко добавить проверку, выбрав документ или все содержимое страницы, а затем применив метод .ready():

Как упоминалось выше, Bootstrap имеет Data API, где вы можете записывать атрибуты данных в HTML-страницы. Если будет необходимость выключить Data API, вы можете отменить привязку атрибутов, добавив следующую строку JavaScript:

Если вам нужно отключить один плагин, вы можете сделать это программно, используя пространство имен плагина вместе с пространством имен data-api:

17 ответов
Что делает ... в этом реакторе (с использованием JSX) и что он называется? <Modal {...this.props} title='Modal heading' animation={false}>
25 июнь 2015, в 11:59
22 ответа
Я использую Twitter Bootstrap 3, и у меня проблемы, когда я хочу выровнять по вертикали две div, например - ссылка JSFiddle: <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-- Optional...
twitter-bootstrap-3
12 дек. 2013, в 13:55
6 ответов
Для чего используется класс sr-only? Это важно или я могу удалить его? Прекрасно работает. Вот мой пример: <div class="btn-group"> <button type="button" class="btn btn-info btn-md">Departments</button> <button type="button" class="btn btn-info dropdown-toggle btn-md" dat...
twitter-bootstrap-3
03 нояб. 2013, в 21:06
32 ответа
Я использую Bootstrap. Как я могу сделать три столбца одинаковой высоты? Вот скриншот проблемы. Я хочу, чтобы синие и красные столбцы были одинаковой высоты, как желтая колонна. [IMG_OUR_ID=104.png] Вот код: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" re...
30 окт. 2013, в 22:59
13 ответов
Как мне изменить CSS, чтобы изменить цвет панели навигации в Twitter Bootstrap?
bootstrap-4
twitter-bootstrap-3
navbar
30 авг. 2013, в 10:16
23 ответа
Когда я использую select2 (ввод) в bootstrap modal, я не могу ничего вводить в него. Это как инвалид? Вне мода мода select2 отлично работает. [IMG_OUR_ID=101.jpg] рабочий пример: http://jsfiddle.net/byJy8/1/ код: <!-- Modal --> <div id="myModal" class="modal hide fade" tabindex="-1" role="...
jquery-select2
28 авг. 2013, в 12:54
34 ответа
Как центрировать делитель одного размера столбца в контейнере (12 столбцов) в Twitter Bootstrap 3. Пожалуйста, смотрите стартовую скрипку. <body class="container"> <div class="col-lg-1 col-offset-6 centered"> <img data-src="holder.js/100x100" alt="" /> </div>...
twitter-bootstrap-3
centering
09 авг. 2013, в 17:56
15 ответов
Иногда я использую якоря в виде кнопок, а иногда я просто использую кнопки. Я хочу отключить определенные клики, чтобы: Они выглядят отключенными. Они перестают быть нажатыми Как я могу это сделать?
27 май 2013, в 17:54
10 ответов
Я использую функцию модного окна Twitter Bootstrap. Когда кто-то нажимает кнопку отправки на мою форму, я хочу показать модальное окно, нажав кнопку "отправить" в форме. <form id="myform" class="form-wizard"> <h2 class="form-wizard-heading">BootStap Wizzard Form</h2> <in...
01 нояб. 2012, в 18:14
19 ответов
Есть ли набор классов в Twitters Bootstrap Framework, который выравнивает текст? например. У меня есть таблицы с $ итогами, которые я хочу выровнять вправо... <th class="align-right">Total</th> и <td class="align-right">$1,000,000.00</td> ...
10 окт. 2012, в 23:28
26 ответов
Почему в загрузчике Twitter нет красивой кнопки загрузки элемента? Было бы здорово, если бы для кнопки загрузки была реализована синяя основная кнопка. Можно ли даже отточить кнопку загрузки с помощью CSS? (похоже на нативный элемент браузера, которым нельзя манипулировать)...
forms
input-type-file
27 июнь 2012, в 23:35
5 ответов
У меня есть несколько гиперссылок, в которых каждый имеет прикрепленный идентификатор. Когда я нажимаю на эту ссылку, я хочу открыть модальный (http://twitter.github.com/bootstrap/javascript.html#modals) и передать этот идентификатор модальному. Я искал в Google, но я не мог найти ничего, что могло ...
16 май 2012, в 21:02
18 ответов
Я создаю модальное окно, используя Twitter Bootstrap. Поведение по умолчанию - если вы нажмете вне модальной области, модальный будет автоматически закрываться. Я хотел бы отключить это, то есть не закрывать модальное окно при нажатии вне модального. Может ли кто-то использовать код jQuery для этого...
modal-dialog
mouseclick-event
27 март 2012, в 17:08
37 ответов
Я хочу, чтобы мое меню Bootstrap автоматически выпадало при наведении курсора, вместо того, чтобы щелкнуть по названию меню. Я также хотел бы потерять маленькие стрелки рядом с названиями меню.
drop-down-menu
16 янв. 2012, в 07:54
10 ответов
Я использую Twitter Bootstrap lib для нового проекта, и я хочу, чтобы часть страницы обновляла и извлекала последние json-данные о модальном закрытии. Я не вижу этого нигде в документации, может кто-нибудь указать мне на это или предложить решение. Две проблемы с использованием документированных мет...
modal-dialog
03 дек. 2011, в 00:04
Наверх
Меню