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


399

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

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

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

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

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

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

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


6
Возможно, это лучший пример стиля жидкой компоновки?
Коди Грей

Ответы:


442

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

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

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

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

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

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

РЕДАКТИРОВАТЬ : Согласно комментариям, некоторые jsFiddles для:

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


1
хм, ладно, мне показалось, что в документах вы можете смешивать и сочетать текучие и фиксированные, но я думаю, что для расширенного использования я не готов. :) Я до сих пор не понимаю, как responsiveменяется как фиксированный, так и жидкий соответственно - вы можете использовать отзывчивый (или нет) как с фиксированным, так и с жидким, верно? Можете ли вы объяснить, как реагирует каждый из них?
jrochkind

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

16
У тебя вышло. В макете с фиксированной шириной столбцы изменяются, когда окно браузера достигает ширины, определенной в медиа-запросе. Поэтому, если у вас есть окно шириной более 960 пикселей, оно останется на максимальной ширине. Затем, когда вы сузите свой браузер до 959 пикселей, он будет привязан к новому макету на основе медиазапроса, максимальная ширина которого составляет 768 пикселей. Таким образом, поскольку вы просматриваете макет с фиксированной шириной, столбцы не изменятся, если ширина вашего браузера составляет от 768 до 960.
eterps

3
И когда вы просматриваете макет с изменяемой шириной, размеры столбцов всегда будут меняться в соответствии с шириной вашего браузера. Сам макет также будет меняться в соответствии с медиа-запросами, как и макет с фиксированной шириной.
Этерпс

12
Самое важное, что нужно помнить, это то, что фиксированная ширина = пиксели, а ширина жидкости = процент. Реагирование происходит от всех причудливых правил CSS, определенных в bootstrap-responseive.css, и эти правила применяются к обоим макетам.
eterps

21

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

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

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


7

Источник - 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

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

6

Расположение жидкости в 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;
}

2
Я не понимаю, почему люди продолжают говорить, что «контейнер-жидкость» не поддерживается в Bootstrap 3, хотя это так. Я только что проверил дважды, и в Bootstrap 3.1.0 он четко определен.
Барт

10
Это потому, что он был удален в 3 добавлен еще в 3.1 .
Стив Клостерс

-2

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


1
Хотя эта ссылка может ответить на вопрос, лучше включить сюда основные части ответа и предоставить ссылку для справки. Ответы, содержащие только ссылки, могут стать недействительными в случае изменения связанной страницы. - Из обзора
piet.t

Я согласен .. но это не ссылка на ответ, это ссылка на плагин, где файлы могут быть загружены, я думаю, я не могу прикрепить файлы с ответом здесь ...
энтузиаст
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.