Romych: /* Стандартные размеры container */

2020-10-19T16:20:44Z

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

Нова сторінка

{|
|-
|
* [http://getbootstrap.com/ Официальный сайт]
* [[Сниппеты Bootstrap]]
* [[:Категория:Bootstrap]]
||
* [[Цвета Bootstrap]]
* [[Размеры разрешений экранов]]
* [[Размеры картинок]]
|}

* [[Bootstrap + Material Design]]
* [[Bootstrap Collapse]]

== Установка Bootstrap ==

* [[Gulp | Bootstrap + SASS + Gulp]] (также есть [[Установка Bootstrap с Sass и Gulp | старый вариант]])
* [[Drupal с Bootstrap, Sass и Gulp | Drupal + Bootstrap + SASS + Gulp]]
* [[Hugo + Bootstrap]]
* [https://gitlab.com/romychvk/hugo-minimal-bootstrap Hugo Minimal Bootstrap · GitLab]

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

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

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

{| cellpadding="5" border="1" style="border-collapse:collapse"
|- align="center"
| Макет || Ширина <code>container</code> '''Bootstrap 3''' || Ширина <code>container</code> '''Bootstrap 4''' || Для каких экранов || Подходящие устройства
|-
| основной макет || 1170 px <code class="red">lg</code>|| 1140 px <code class="red">xl</code>|| от 1200 px и больше ||
|-
| небольшие ноутбуки || 970 px   <code class="red">md</code>|| 960 px   <code class="red">lg</code>|| от 992 до 1199 px ||
|-
| планшеты || 750 px   <code class="red">sm</code>|| 720 px   <code class="red">md</code>|| от 768 до 991 px ||
* 768 px — iPad
|-
| телефоны горизонтально || || 576 px   <code class="red">sm</code> || от 576 до 767 px ||
|-
| телефоны || 320 px   <code class="red">xs</code>|| 320 px   <code class="red">xs</code>|| «резиновый» макет: 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
|}

=== Отступы ===

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

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

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

=== Viewport ===

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

На мобильных устройствах <code>viewport</code> равен разрешению экрана устройства. [http://viewportsizes.com/ Размеры viewpoprt] популярных стройств.

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

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

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

* [https://chrome.google.com/webstore/detail/bootstrap-viewport/kflgmkikmbklpikoicfhonemdcemkdia?utm_source=chrome-app-launcher-info-dialog Bootstrap Viewport] — показывает в правом верхнем углу <code>viewport</code> и префикс Bootstrap (<code>lg</code>, <code>md</code>, <code>sm</code> или <code>sx</code>)
* [https://chrome.google.com/webstore/detail/bootstrap-3-resize-tool/bfbgdbiecfcepelcdmbokphbkoloeimp?utm_source=chrome-app-launcher-info-dialog Bootstrap 3 Resize Tool] — переключает размер окна браузера по префиксам Bootstrap
* [https://chrome.google.com/webstore/detail/bootstrap-overlay/aaplkmfheonlpjpnlofjemkabjdmidfi?utm_source=chrome-app-launcher-info-dialog Bootstrap Overlay] — накладывает на сайт сетку Bootstrap

== Полезное ==

* [https://bootstrapcreative.com/pattern/ Bootstrap Snippets Library & Layout Examples]
* Список переменных: http://getbootstrap.com/customize/
* Список переменных [https://github.com/twbs/bootstrap/blob/master/less/variables.less variables.less]
* [http://www.quackit.com/bootstrap/bootstrap_4/differences_between_bootstrap_3_and_bootstrap_4.cfm Differences Between Bootstrap 3 and Bootstrap 4]
* http://bootbites.com/ — блог со статьями про Bootstrap (eng)
* http://www.bootstrap-tutorials.com/ (eng)
* [http://bootstrap.zina.com.ua/material/bootstrapv3-by-designshock.zip PSD элементов Bootstrap 3] (также доступен на <code>NAS/Design/Bootstrap/material/bootstrapv3-by-designshock.psd</code>, [http://www.designshock.com/bootstrap-3-psd/ источник])
* [http://bootstrapuikit.com/ Bootstrap 3 Vector UI Kit]
* [https://getbootstrap.com/examples/starter-template/ Bootstrap starter template]
* [http://habrahabr.ru/post/211032/ Как сверстать веб-страницу на Bootstrap]
* [http://www.internet-technologies.ru/articles/article_1764.html Пособие по Twitter Bootstrap – Дизайн сайта от и до] — перевод статьи [http://www.sitepoint.com/twitter-bootstrap-tutorial-handling-complex-designs/ Twitter Bootstrap Tutorial – Handling Complex Designs]
* [http://www.tutorialrepublic.com/twitter-bootstrap-examples.php Примеры на TutorialRepublic.com]
* [https://www.sitepoint.com/5-useful-sass-mixins-bootstrap/ 5 Useful Sass Mixins in Bootstrap]

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

* [http://alefeuvre.github.io/foundation-grid-displayer/ Grid displayer bookmarklet for Twitter Bootstrap and ZURB Foundation]
* http://bootsnipp.com/
* [http://jaykanakiya.com/bootstrap-grid-builder/ Генератор сетки]
* [http://bootsnipp.com/buttonbuilder Генератор кнопок]
* [http://work.smarchal.com/twbscolor/ Генератор NavBar]
* [http://habrahabr.ru/post/198346/ Подборка полезного для Twitter Bootstrap 3]

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

* [http://willschenk.com/bootstrap-advanced-grid-tricks/ Bootstrap: Advanced Grid Tricks | Blank Page Tech]
* [http://bootstrap-sass.happyfuncorp.com/ welcome | index | Bootstrap Sass Examples]
* [http://bootstrap-sass.happyfuncorp.com/bootstrap-sass/layout/advanced_techniques.html Advanced Techniques | Bootstrap-sass on Rails]
* [https://sass-scss.ru/documentation/pravila_i_direktivi/direktiva_extend.html Директива @extend | Документация по Sass на русском языке]

=== Axure ===

* [http://www.axureresponsivedesign.com/ From Adaptive to Responsive with Axure RP]
* [https://github.com/patshiu/Bootstrap-3-Axure-7-Template-Library-Arial Bootstrap3 Template Library for Axure 7]
* [http://axutopia.com/twitter-bootstrap/ Free Axure Widgets Library for Twitter Bootstrap 3.0]
* [http://mitreboxuxd.com/download-our-bootstrap-3-0-axure-stencil/ MitreBox Axure BootStrap Stencil]
* [http://ryanswarts.com/download-this-axure-widget-library/ A hand-drawn Axure widget library based on Twitter Bootstrap]
* [http://axemplate.com/downloads/bootstrap-widget-library/ Bootstrap widget library]

=== Плагины ===

* [http://bootboxjs.com/ Bootbox.js] — простое модально окно
* [http://habrahabr.ru/post/210734/ Плагин для повышения accessibility интерфейса]
* [http://tutorialzine.com/2013/07/50-must-have-plugins-for-extending-twitter-bootstrap/ 50 Must-have plugins for extending Twitter Bootstrap]

=== BEM + Bootstrap ===

* [https://medium.com/@andersonorui_/bem-sass-and-bootstrap-9f89dc07d20f BEM, SASS and Bootstrap: how to mix everything up in a smart way?]
* [https://statelycode.blogspot.com/2019/04/bootstrap-bem-block-element-modefier.html Использование Bootstrap в методологии BEM]

== См. также ==

* [[Bootstrap Viewports extension]]
* [[Hugo Zina]]
* [[BEM]]

[[Категория:Bootstrap]]
[[Категория:Дизайн]]
[[Категория:CSS]]

Bootstrap - Історія редагувань

Romych: /* Стандартные размеры container */