Bootstrap

Официальный сайт Сниппеты Bootstrap Категория:Bootstrap

Цвета Bootstrap Размеры разрешений экранов Размеры картинок

• Bootstrap + Material Design
• Bootstrap Collapse

Установка Bootstrap

• Bootstrap + SASS + Gulp (также есть старый вариант)
• Drupal + Bootstrap + SASS + Gulp
• Hugo + Bootstrap
• Hugo Minimal Bootstrap · GitLab

Размеры модульной сетки Bootstrap

Стандартные размеры container

Ширина container, в который помещается содержимое сайта (обычно именно этой ширины делается макет дизайна):

Макет	Ширина container Bootstrap 3	Ширина container Bootstrap 4	Для каких экранов	Подходящие устройства
основной макет	1170 px lg	1140 px xl	от 1200 px и больше
небольшие ноутбуки	970 px   md	960 px   lg	от 992 до 1199 px
планшеты	750 px   sm	720 px   md	от 768 до 991 px	768 px — iPad
телефоны горизонтально		576 px   sm	от 576 до 767 px
телефоны	320 px   xs	320 px   xs	«резиновый» макет: Bootstrap 3 — от 305 до 767 px Bootstrap 4 — от 305 до 575 px	320 px — iPhone 5 360 px — Galaxy S5 375 px — iPhone 6 412 px — Nexus 5Х, Nexus 6P, iPhone 6 Plus

Отступы

Внутри container можно поместить или что-нибудь на всю его ширину, или от 1 до 12 колонок с отступами справа и слева по 15 пикселей.

Суммарный отступ между двумя колонками — 30 px или 1.875 rem.

Размеры всех вариантов колонок Bootstrap 3 для container 1170 px: http://bootstrap.zina.com.ua/grid.html

Viewport

Viewport — это область просмотра внутри окна браузера.

На мобильных устройствах viewport равен разрешению экрана устройства. Размеры viewpoprt популярных стройств.

На десктопе размер viewport окна браузера можно посмотреть здесь: http://viewportsizes.com/mine/

Как переключаться между viewports

Для наглядности можно открыть http://bootstrap.zina.com.ua (или любой сайт на Bootstrap) и потестировать его с расширениями для Google Chrome:

• Bootstrap Viewport ­— показывает в правом верхнем углу viewport и префикс Bootstrap (lg, md, sm или sx)
• Bootstrap 3 Resize Tool — переключает размер окна браузера по префиксам Bootstrap
• Bootstrap Overlay — накладывает на сайт сетку Bootstrap

Полезное

• Bootstrap Snippets Library & Layout Examples
• Список переменных: http://getbootstrap.com/customize/
• Список переменных variables.less
• Differences Between Bootstrap 3 and Bootstrap 4
• http://bootbites.com/ — блог со статьями про Bootstrap (eng)
• http://www.bootstrap-tutorials.com/ (eng)
• PSD элементов Bootstrap 3 (также доступен на NAS/Design/Bootstrap/material/bootstrapv3-by-designshock.psd, источник)
• Bootstrap 3 Vector UI Kit
• Bootstrap starter template
• Как сверстать веб-страницу на Bootstrap
• Пособие по Twitter Bootstrap – Дизайн сайта от и до — перевод статьи Twitter Bootstrap Tutorial – Handling Complex Designs
• Примеры на TutorialRepublic.com
• 5 Useful Sass Mixins in Bootstrap

Полезные сервисы

• Grid displayer bookmarklet for Twitter Bootstrap and ZURB Foundation
• http://bootsnipp.com/
• Генератор сетки
• Генератор кнопок
• Генератор NavBar
• Подборка полезного для Twitter Bootstrap 3

Семантическая разметка

• Bootstrap: Advanced Grid Tricks | Blank Page Tech
• welcome | index | Bootstrap Sass Examples
• Advanced Techniques | Bootstrap-sass on Rails
• Директива @extend | Документация по Sass на русском языке

Axure

• From Adaptive to Responsive with Axure RP
• Bootstrap3 Template Library for Axure 7
• Free Axure Widgets Library for Twitter Bootstrap 3.0
• MitreBox Axure BootStrap Stencil
• A hand-drawn Axure widget library based on Twitter Bootstrap
• Bootstrap widget library

Плагины

• Bootbox.js — простое модально окно
• Плагин для повышения accessibility интерфейса
• 50 Must-have plugins for extending Twitter Bootstrap

BEM + Bootstrap

• BEM, SASS and Bootstrap: how to mix everything up in a smart way?
• Использование Bootstrap в методологии BEM

См. также

• Bootstrap Viewports extension
• Hugo Zina
• BEM