Bootstrap 3 - основні елементи для створення сітки, ит шеф
На цьому уроці ми розглянемо основні елементи Bootstrap (контейнери; ряди; блоки, що складаються з колонок Bootstrap) необхідні для створення сітки веб-сторінок сайту. Цей процес є одним з основних етапів створення сайту, саме з розробки сітки ми починаємо будувати інтерфейс веб-сторінки після його проектування.
Основними елементами платформи Twitter Bootstrap 3 для створення сітки сайту є:
- Контейнери (елементи div з класом ".container" або ".container-fluid");
- Ряди (елемент div з класом ".row");
- Блоки div. що складаються з колонок Bootstrap (елемент div з одним ".col - # - $" або декількома класами ".col - # - $").
Контейнери (елементи div з класом ".container" або ".container-fluid")
Контейнер є "фундаментом", з якого починають створювати сітку веб-сторінки сайту. На платформі Twitter Bootstrap контейнери бувають 2 видів:
Таким чином, контейнер призначений для встановлення ширини сітки. Крім цього, він задає внутрішні позитивні відступи від своєї лівої і правої межі до вмісту, яке буде в нього вміщено. Значення відступів встановлюється рівним 15px і досягається це за рахунок CSS властивостей "padding-left: 15px" і "padding-right: 15px".
Ряди (елемент div з класом ".row")
Ряди при створенні сітки застосовують тільки для того, щоб в них розміщувати блоки div. що складаються з колонок Bootstrap (
А тепер розглянемо, в яких елементах сітки можна розміщувати ряди. Ряди можна розміщувати в контейнері і в блоках div. що складаються з колонок Bootstrap.
Чому саме так? Це все пов'язано з тим, що блоки div. що складаються з колонок Bootstrap, мають позитивні внутрішні відступи. І якщо їх не компенсувати там, де потрібно, то у Вас вийде неправильний макет, тобто в деяких місцях від кордонів сітки до вмісту буде 30px, в інших місцях може вийти 45px, і т.д. Щоб цього не допустити слід використовувати ряди.
Ряди - це блоки div. які мають негативні зовнішні відступи зліва і справа рівні 15px (margin-left: -15px і margin-right: -15px). Отже, якщо ряд розташувати в деякому блоці, то він вийде за допустимі межі цього блоку панелі з обох сторін 15px.
У підсумку, ряд, розміщений в контейнері або блоці div, що складається з колонок Bootstrap, буде компенсувати позитивні внутрішні відступи цих елементів Bootstrap зліва і справа (padding-left: 15px і padding-right: 15px) своїми негативними зовнішніми відступами.
Блоки div. що складаються з колонок Bootstrap
Блоки div. що складаються з колонок Bootstrap, призначені для створення осередків в сітці. При цьому будь-який осередок в даній сітці можна розбити ще на осередки. Пояснимо даний момент на невеликому прикладі більш докладно.
Етапи створення осередків сітки:
- На першому етапі створюємо контейнер. У цьому момент сітка складається з одного осередку;
- На другому етапі розбиваємо цей осередок на необхідну кількість осередків (наприклад: шапка, лівий блок, правий блок, основний контент і підвал сторінки);
- На третьому етапі, наприклад, ми можемо додатково розбити осередок "Підвал сторінки" ще на кілька осередків. Подібним чином при необхідності ми можемо розбити будь-яку клітинку сітки.
Крім цього необхідно пам'ятати, що розбиваючи осередок на кілька осередків, їх необхідно помістити в ряд (блок div з класом ".row"). Це вимоги є обов'язковим, тому що блоки складаються з колонок Bootstrap мають внутрішні позитивні відступи зліва і справа по 15 px, які необхідно компенсувати. Якщо ця вимога не виконати, то у Вас порушиться структура сітки.
Також при розміщенні блоків div. що складаються з колонок Bootstrap, в ряд необхідно знати те, що в один рядок ряду поміщається рівно 12 колонок Bootstrap. Тобто блоки, які не поміщаються в перший рядок, розташовуються в наступному рядку і т.д. Але тут є один дуже важливий момент, який пов'язаний з тим, що ці блоки не завжди переносяться на наступний рядок ряду. Це пов'язано з тим. що блоки div. що складаються з колонок Bootstrap є плаваючими (властивість CSS "float: left").
Розглянемо цей важливий момент на прикладі:
На зображенні, представленому вище видно, що 1 рядок ряду містить 2 блоки (Блок №1 і Блок №2), сума колонок, яких становить 12. У нашому макеті "Блок №3" повинен розташовуватися в 2 рядку, але в реальній ситуації це не відбувається. І щоб виправити цю сітку, на платформі Twitter Bootstrap 3 є спеціальний клас "clearfix", який необхідно додати до порожнього блоку div. Далі блок div з класом "clearfix" необхідно розмістити до блоку, який повинен починатися з нового рядка в ряду.
Щоб створити блок div. що складається з колонок Bootstrap, до нього необхідно додати клас ".col - # - $", де:
наприклад:
блок
- на пристрої xs ширину, рівну 6 колонкам Bootstrap, тобто 50% від ширини батьківського елементу;
- на пристрої sm ширину, рівну 4 колонкам Bootstrap, тобто 33.33% від ширини батьківського елементу;
- на пристрої md ширину, рівну 3 колонкам Bootstrap, тобто 25% від ширини батьківського елементу;
- на пристрої lg ширину, рівну 2 колонкам Bootstrap, тобто 16.67% від ширини батьківського елементу;
Приклад створення сітки веб-сторінки
Створимо сітку для веб-сторінки на платформі Bootstrap, що складається з шапки сайту, лівого блоку, основного блоку і підвалу сайту.
Привіт, тільки починаю освоювати bootstrap і прошу допомогти з парою питань.
1. Є макет, де шапка шириною 1920px і підвал теж шириною 1920px. У підвалі і шапці зображення. Сама робоча область сайту 1000px. Як правильно зробити макет, щоб зображення в шапці і підвалі адаптувалися.
2. Чи потрібно кастомизировать сітку під 1000px на сайті Bootstrap або можна використовувати стандартну сітку (поставити зліва і справа блоки шириною col - * - 1, а для робочої області використовувати col - * - 10)
itchief.ru/assets/uploadify/b/3/9/b3909068e371160c94d8e94da3dc4ae7s.jpg
Так, можна використовувати стандартну сітку Bootstrap. Але, її необхідно обмежити по ширині. Це можна зробити так:
1. Створити 3 блоки:
2. Обмежити їх ширину за допомогою CSS-властивості max-width:
3. До зображень можна додати клас img-responsive. а також при необхідності використовувати медіа-запити. Або використовувати їх в якості фону і встановити властивості background-size значення, рівне cover.
Спасибі за оперативну відповідь. Скажіть, а можна як-небудь адаптувати три блоки з фонами, при тому, що і блок в якому вони лежать теж з фоном.
Код.
Ситуація часто зустрічається, але ніяк не виходить адаптувати весь вміст блоку, включаючи фони.
Якщо ви хочете накласти один вміст на інше, то можна скористатися абсолютним позиціонуванням.
HTML-розмітка.
Привіт, чи можна без системи бутстрап зверстати адаптивний сайт під всі пристрої? якщо так, то чи складно, для новачка? або краще не морочитися і вкл бутстрап? я вирішив взагалі відмовитися від бутстрап, або все таки ви мені ще якісь варіанти запропонуєте? мені здається що з бутстрап сайт вийде за вагою важче, так як я все що там є я точно не буду використовувати, і сайт вантажиться буде довше, хоча я новачок в цьому, що порадите?
галочки зазначив, скачав, скачати 3 файлу, css, js, config.json. в папці css є просто бутстрап і бутстрап хв, вони мені обидва потрібні? так само в js. а для чого 3 й фаил config.json? мені його куди покласти?
Якщо у Вас є js файли значить Ви не прибрали галочки з розділу, що містить jQuery плагіни. Потрібен тільки файл bootstrap.min.css. Файл bootstrap.min.css - це стисла версія файлу bootstrap.css. Мінімізація файлу відбувається за допомогою спеціальних утиліт, які видаляють з вихідного файлу прогалини і багато іншого. Файл bootstrap.css більше підходить для вивчення, в ньому можна подивитися як все організовано.
Файл config.json містить настройки Вашої збірки. Тобто якщо вийде нова версія Bootstrap, в якій щось покращено, то Ви можете знову перейти на сторінку Customize Bootstrap і завантажити ці настройки компілятору. Після цього натиснувши Compile і Download Ви отримаєте нову версію Вашої збірки.
ок. велике дякую за допомогу
А чим відрізнятиметься адаптація сайту зроблений профілів в ручну, від сайту зробленим новачком типу мене за допомогою бутстрап, які будуть плюси і мінуси? Дякую за інформацію, все сидів чекав вашої відповіді ☺, не знав як починати верстати з бутстрап або без. Ніби як хочеться по швидше зверстати для справи сайт, а з іншого боку хочеться навчитися ВЕРТАН як профілів.
Якщо Ви зробите сайт на Bootstrap, то він буде коректно працювати на всіх пристроях і браузерах. Напевно це найголовніший плюс. Ви ж не знаєте тонкощі роботи різних браузерів на різних пристроях. В одному браузері може виглядати так, в іншому зовсім інакше, а в третьому це не працювати. По-друге вивчаючи CSS Bootstrap Ви дізнаєтеся як правильно необхідно створювати свій власний CSS, але і багато іншого, таке як Less і Sass. Це стане в нагоді зрозуміти як необхідно правильно створювати свої стилі, щоб їх потім можна було легко модифікувати. Крім цього і на Bootstrap можна створити дуже цікавий і незвичайний дизайн.
Олександр, Добрий вечір. Питання мій стосується visible - для яких цілей необхідно, якщо можна задати видимість універсальну для всіх пристроїв?
Добрий день.
Клас visible призначений для того щоб зробити блок видимим на одному пристрої, а на інших немає.
Наприклад, нижченаведений блок div буде видно тільки на пристроях sm, а на інших немає. Крім цього він буде відображатися як блок (dispaly: block).
Також в Bootstrap є ще інші класи visible, які роблять елемент видимим тільки при друку, а на екрані в браузері немає.
Наприклад, наступний блок div буде видно тільки при друку, а на сторінці відображатися не буде. Крім цього він буде відображатися як блок (dispaly: block).
Якщо до елементу не ставити класи з даної групи, то він буде видно на всіх пристроях.
Наприклад, наступний елемент буде відображатися на всіх пристроях.
Я, зрозумів спасибі за роз'яснення, перефразую питання, який сенс взагалі робити видимість на одних пристроях, а на інших приховувати?
Наприклад, на сайті getbootstrap.com є головне меню (верхнє), контент і меню справа.
Так ось на великих екранах відображаються 3 блоку, а на маленьких тільки 2 (меню праворуч відсутній).
Подібне можна спостерігати і на сайті api.jquery.com, але тільки там на маленьких екранах відсутній меню зліва.
Доброго дня Олександр.
Дякую за статті, Новомосковський по порядку.
Є побажання: виділити якось справа в «Навігація» поточний лінк з назвою статті, щоб було зручніше і швидше переходити до наступної.
Добрий день, Олег.
Дякую за побажання, найближчим часом зроблю.
Доброго часу!
клас hidden-xs працює відмінно, але ось visible-xs-block змусити працювати не можу!
Ні чого зрозуміти не можу, чому блок не хоче відображатися тільки в мобільному вигляді, а відображається на всіх дозволах?
Лука, перевірте яку версію Bootstrap 3.x.x Ви використовуєте. Поточна версія 3.3.5.
У версіях Bootstrap до 3.2.0 цих класів не було, там використовувалися класи: visible-xs. visible-sm. visible-md, and .visible-lg. Після 3.2.0 ці класи були прибрані і з'явилися нові класи. visible-xs-block. visible-xs-inline. visible-xs-inline-block. visible-sm-block. visible-sm-inline. visible-sm-inline-block і т.д.
Якщо Ви будете переходити з попередньої версії (<3.2.0) до 3.3.5 то классы visible-xs. visible-sm. visible-md, и .visible-lg необходимо соответственно заменить на .visible-xs-block. visible-sm-block. visible-md-block, и .visible-lg-block.
Добрий день.
Підкажіть, де слід застосовувати class = "clearfix visible - * - block», "..- inline" та ". -inline-block"
Дякуємо
Привіт Сергій.
У Twitter Bootstrap 3 є 2 групи класів для відображення і приховування елементів:
1 Група - класи hidden-xs, hidden-sm, hidden-md, hidden-lg.
Кожен з них призначений для того щоб приховати відображення елемента на певному пристрої.
Наприклад, наступний код приховує відображення елемента div на пристроях xs і sm (на пристроях md і lg елемент div буде відображатися):
2 Група - класи visible-xs- *, visible-sm- *, visible-md- *, visible-lg- *.
Кожен з них призначений для відображення елемента на певному пристрої, а на інших приховує.
Наприклад, наступний код відображає елемент div тільки на пристроях xs, на інших приховує (sm, md і lg):
3 слово в назві класу (block, inline або inline-block) визначає, як елемент буде відображатися: як блоковий (block), як рядковий (inline) або як рядково-блоковий (inline-block).
Думаю із застосуванням цих класів зрозуміло. Тобто вони застосовуються для відображення або приховування елементів.
Клас .clearfix застосовується при створенні сітки за допомогою адаптивних блоків (col - * - *). Оскільки адаптивні блоки є плаваючими, то іноді необхідно це обтікання скасовувати, щоб Ваша розмітка не "попливла».
Питання стосувалося саме третього елемента в конструкції visible - * - *. Тобто -block, -inline, -inline-block. Про інші складові у вас все добре описано раніше. Буду намагатися формулювати питання точніше. Дякуємо.
Привіт, за останнім коду,
имхо кожен блок веб-сторінки (шапку, садбар, контент, футер) краще розмістити в окремий рядок:
Привіт, з шапкою і підвалом згоден. Твій варіант більш логічний. Хоча ні хто не забороняє Вам макет створювати як в статті, він буде валідний з точки зору Bootstrap, стандартів і структури. До речі скрізь є свої плюси і мінуси, як говорив Ейнштейн все відносно. Можна навіть знайти переваги, наприклад блоків (елементів) буде менше, що особливо важливо для людей, які прагнуть до мінімалізму :)
Деякі дуже люблять таку структуру:
Що скажете?