Система з рідинною або фіксованою сіткою у адаптивному дизайні на основі Twitter Bootstrap

Мене плутають різні варіанти в сітці завантажувального закладу щебетання та те, як вони йдуть разом.

Почнемо з того , що ви можете мати звичайний фіксований containerабо container-fluid.

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

Потім, крім цього, ви можете включити "чуйні" медіа-запити, чи ні.

Я плутаюсь у взаємодії цих речей. Але почнемо з одного очевидного прикладу.

На самій сторінці прикладів є те, що представлено як приклад як нерухомої, так і текучої сітки

Однак у моєму браузері на самій цій прикладі сторінки - обидві сітки ведуть себе однаково. Можливо, тому, що на прикладі сторінки використовуються необов'язкові запити на відповідь медіа? В обох прикладах сітки, якщо я почну поступово звужувати вікно свого веб-переглядача, елементи сітки не поступово звужуються - як тільки буде досягнута певна (чуйна) гранична ширина, вони оснащуються меншим розміром і знову на подальші граничні ширини. Але і звичайний "фіксований" приклад, і "текучий" приклад тут поводяться абсолютно однаково - так у чому, до біса, різниця?

Коли ви вирішите між фіксованою шириною і шириною рідини, вам потрібно продумати свою ЦІЛЬНУ сторінку. Як правило, ви хочете вибрати те чи інше, але не те і інше. Приклади, які ви вказали у своєму запитанні, насправді знаходяться на тій же сторінці з фіксованою шириною. Іншими словами, сторінка лісів використовує макет фіксованої ширини. Фіксована сітка і сітка рідини на сторінці Ліси не призначені бути прикладом, а документація для реалізації основних засобів і рідини по ширині розкладки.

Приклад відповідної фіксованої ширини тут . Приклад правильної ширини рідини тут .

Дотримуючись прикладу фіксованої ширини, ви не повинні бачити зміну змісту розмірів, коли ваш браузер ширший 960 пікселів. Це максимальна (фіксована) ширина сторінки. Медіа-запити в дизайні фіксованої ширини означатимуть мінімальні ширини для певних стилів. Ви побачите це в дії, коли ви зменшите вікно свого веб-переглядача і побачите макет до іншого розміру.

І навпаки, макет шириною рідини завжди розтягуватиметься, щоб відповідати вікну вашого веб-переглядача, незалежно від того, наскільки він широкий. Медіа-запити вказують, коли змінюються стилі, але ширина контейнерів завжди є відсотком від вікна вашого браузера (а не фіксованої кількості пікселів).

"Відповідальні" медіа-запити готові до роботи. Вам просто потрібно вирішити, чи хочете ви використовувати для вашої сторінки макет із фіксованою шириною або шириною рідини.

Раніше в завантажувальній машині 2 вам довелося використовувати row-fluidвсередині ємності з рідиною і rowвсередині нерухомого контейнера. З введенням завантажувального пристрою 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/

Плюси

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

Мінуси

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

Макет рідини в Bootstrap 3.

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

container-fluid додано ще в Bootstrap 3.1

Розмітка текучої сітки використовує всю ширину екрану і краще працює на великому екрані. Виявляється, створити макет з рідкої сітки легко, використовуючи комбінації Bootstrap 3. У наступному рядку розміщена схема текучої сітки:

.фіксований контейнер;

Змішана .container змішана встановлює вміст у центр екрана та додає прокладки. Він не визначає фіксовану ширину сторінки.

Інший підхід полягає у використанні стилю CSS Еріка Квітки

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

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