Я запутался по поводу различных опций в сетке начальной загрузки Twitter , и как они идут вместе.
Для начала, вы можете иметь обычную фиксированную container
или a container-fluid
.
Тогда либо можно включить либо обычный row
, либо текучий ряд row-fluid
. То есть у вас может быть фиксированный контейнер с рядом жидкости или контейнер с жидкостью ... с фиксированным рядом?
Кроме того, вы можете включить «отзывчивые» медиа-запросы или нет.
Я не понимаю, как эти вещи взаимодействуют. Но давайте начнем с одного очевидного примера.
На самой странице примеров есть то, что представлено в качестве примера как фиксированной сетки, так и флюидной сетки.
Однако в моем браузере, на самой странице примера, обе сетки ведут себя одинаково. Возможно, потому что пример страницы использует дополнительные адаптивные медиа-запросы? В обоих примерах сетки, если я начну постепенно сужать окно браузера, элементы сетки не будут постепенно сужаться - как только будет достигнута определенная (отзывчивая) ширина границы, они уменьшатся до меньшего размера и снова при дальнейших значениях ширины границы. Но и обычный «фиксированный» пример, и «жидкий» пример ведут себя точно так же - так в чем же разница?
Ответы:
Когда вы выбираете между фиксированной шириной и шириной жидкости, вы должны думать в терминах вашей ВСЕЙ страницы. Как правило, вы хотите выбрать один или другой, но не оба. Примеры, которые вы перечислили в своем вопросе, на самом деле, находятся на той же странице с фиксированной шириной. Другими словами, страница Scaffolding использует макет фиксированной ширины. Фиксированная сетка и сетка жидкости на странице Леса не предназначены быть примером, а документация для реализации основных средств и жидкости по ширине раскладки.
Пример правильной фиксированной ширины здесь . Пример правильной ширины жидкости здесь .
При рассмотрении примера с фиксированной шириной вы не должны видеть изменения размера контента, когда ваш браузер имеет ширину более 960 пикселей. Это максимальная (фиксированная) ширина страницы. Медиа-запросы в дизайне с фиксированной шириной будут определять минимальную ширину для определенных стилей. Вы увидите это в действии, когда вы уменьшите окно браузера и увидите, что макет привязан к другому размеру.
И наоборот, макет ширины жидкости всегда будет растягиваться, чтобы соответствовать окну вашего браузера, независимо от его ширины. Медиа-запросы указывают, когда стили меняются, но ширина контейнеров всегда в процентах от вашего окна браузера (а не фиксированное количество пикселей).
«Адаптивные» медиа-запросы готовы. Вам просто нужно решить, хотите ли вы использовать макет с фиксированной или жидкой шириной для вашей страницы.
Ранее в начальной загрузке 2 вам приходилось использовать
row-fluid
внутри контейнера с жидкостью иrow
внутри фиксированного контейнера. С введением bootstrap 3,row-fluid
был удален, больше не использовать его .РЕДАКТИРОВАТЬ : Согласно комментариям, некоторые jsFiddles для:
Эти скрипты полностью не загружаются при загрузке и основаны на чистых медиазапросах CSS, что делает их хорошей отправной точкой для тех, кто хочет создать подобное решение без использования Twitter Bootstrap.
источник
responsive
меняется как фиксированный, так и жидкий соответственно - вы можете использовать отзывчивый (или нет) как с фиксированным, так и с жидким, верно? Можете ли вы объяснить, как реагирует каждый из них?Интересная дискуссия. Я тоже задавал себе этот вопрос. Основное различие между текучим и фиксированным заключается в том, что фиксированный макет имеет фиксированную ширину с точки зрения всего макета веб-сайта (видового экрана). Если у вас есть окно просмотра шириной 960 пикселей, каждый столбец имеет фиксированную ширину, которая никогда не изменится.
Расположение жидкости ведет себя иначе. Представьте, что вы установили ширину вашего основного макета на 100% ширины. Теперь каждый столбец будет рассчитываться только по его относительному размеру (то есть 25%) и растягивается по мере изменения размера браузера. Таким образом, в зависимости от цели вашего макета вы можете выбрать, как ведет себя ваш макет.
Вот хорошая статья о жидкости против гибкости .
источник
Источник - http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
Pros
Cons
источник
Расположение жидкости в Bootstrap 3.
В отличие от Boostrap 2, Bootstrap 3 не имеет смесителя .container-liquid для создания контейнера для жидкости. .Container - это компоновка сетки с фиксированной шириной. На большом экране по обе стороны содержимого веб-страницы присутствуют чрезмерные пробелы.
container-fluid
добавлен обратно в Bootstrap 3.1Жидкая сетка использует всю ширину экрана и лучше работает на большом экране. Оказывается, что легко создать текучую сетку, используя миксины Bootstrap 3. Следующая строка создает гибкую компоновку сетки:
.container фиксированной;
.Container-fixed mixin устанавливает содержимое в центр экрана и добавляет отступы. Он не определяет фиксированную ширину страницы.
Другой подход заключается в использовании стиля CSS Эрика Флауэрса.
источник
Вы можете использовать это - https://github.com/chanakyachatterjee/JSLightGrid ..JSLightGrid. Посмотрите .. Я нашел это действительно очень полезным. Хорошая производительность, очень легкий вес, все важные браузеры, дружественные и гибкие сами по себе, так что вам не нужен самозагрузка для сетки.
источник