Жидкая или фиксированная сеточная система, в адаптивном дизайне, основанная на Twitter Bootstrap

Когда вы решите между фиксированной шириной и шириной жидкости, вам нужно подумать о своей странице ENTIRE. Как правило, вы хотите выбрать тот или иной, но не тот и другой. Примеры, перечисленные в вашем вопросе, на самом деле находятся на одной странице с фиксированной шириной. Другими словами, страница Scaffolding использует макет фиксированной ширины. фиксированная сетка и сетка флюида на странице "Леса" не должны быть примерами, а скорее документацией для реализация фиксированных и жидкостных макетов.

Пример правильной фиксированной ширины здесь. Пример правильной ширины жидкости здесь.

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

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

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

Раньше в bootstrap 2 вам приходилось использовать row-fluid внутри контейнера для жидкости и row внутри фиксированного контейнера. С введением bootstrap 3, row-fluid был удален, больше не использует его.

EDIT: в соответствии с комментариями некоторые jsFiddles для:

• жидкостная невосприимчивая макета,
• отзывчивая жидкость,
• фиксированный невосприимчивый макет,
• фиксированный отзывчивый макет.

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

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

Расположение жидкостей ведет себя по-разному. Представьте, что вы установили ширину основного макета на 100% ширину. Теперь каждый столбец будет вычисляться только относительно его относительного размера (т.е. 25%) и растягивается при изменении размера браузера. Таким образом, исходя из вашей цели макета, вы можете выбрать, как ведет себя ваш макет.

Вот хорошая статья о жидкости против гибкого.

Источник - http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

Доводы

• Макеты с фиксированной шириной намного проще в использовании и проще настраивать с точки зрения дизайна.
• Ширины одинаковы для каждого браузера, поэтому есть меньше проблем с изображениями, формами, видео и другим контентом с фиксированной шириной.
• Нет необходимости в min-width или max-width, который в любом случае не поддерживается каждым браузером.
• Даже если веб-сайт предназначен для совместимости с наименьшим разрешением экрана, 800 × 600, контент будет по-прежнему достаточно широким, с большим разрешением, чтобы он был легко читаемым.

против

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

Расположение жидкости в Bootstrap 3.

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

container-fluid добавляется в Bootstrap 3.1

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

.container фиксированной;

Фиксированный mixin-контейнер устанавливает контент в центр экрана и добавляет прокладки. Он не определяет фиксированную ширину страницы.

Другой подход - использовать стиль CSS Eric Flowers

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

вы можете использовать это - https://github.com/chanakyachatterjee/JSLightGrid..JSLightGrid. посмотрим.. Я нашел это действительно очень полезным. Хорошая производительность, очень легкий вес, все важные для браузера и жидкости сами по себе, поэтому вам действительно не нужна бутстрап для сетки.