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

Я запутался по поводу различных опций в сетке начальной загрузки Twitter , и как они идут вместе.

Для начала, вы можете иметь обычную фиксированную containerили a container-fluid.

Тогда либо можно включить либо обычный row, либо текучий ряд row-fluid. То есть у вас может быть фиксированный контейнер с рядом жидкости или контейнер с жидкостью ... с фиксированным рядом?

Кроме того, вы можете включить «отзывчивые» медиа-запросы или нет.

Я не понимаю, как эти вещи взаимодействуют. Но давайте начнем с одного очевидного примера.

На самой странице примеров есть то, что представлено в качестве примера как фиксированной сетки, так и флюидной сетки.

Однако в моем браузере, на самой странице примера, обе сетки ведут себя одинаково. Возможно, потому что пример страницы использует дополнительные адаптивные медиа-запросы? В обоих примерах сетки, если я начну постепенно сужать окно браузера, элементы сетки не будут постепенно сужаться - как только будет достигнута определенная (отзывчивая) ширина границы, они уменьшатся до меньшего размера и снова при дальнейших значениях ширины границы. Но и обычный «фиксированный» пример, и «жидкий» пример ведут себя точно так же - так в чем же разница?

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

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

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

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

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

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

РЕДАКТИРОВАТЬ : Согласно комментариям, некоторые 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/

Pros

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

Cons

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

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

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

container-fluid добавлен обратно в Bootstrap 3.1

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

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

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

Другой подход заключается в использовании стиля CSS Эрика Флауэрса.

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

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