Домой створення та просування сайтів Новий Bootstrap 3 з орієнтацією на мобільні пристрої

створення та просування сайтів

Новий Bootstrap 3 з орієнтацією на мобільні пристрої

От

21.04.2020

853

Найголовніша зміна в новій версії Bootstrap це підтримка адаптивного дизайну, але найцікавіше полягає в тому, що сам цей модуль був видалений. Замість цього, новий Bootstrap на рівні ядра підтримує адаптивність.

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

У зовнішньому вигляді і відчуттях ви також можете помітити зміни. Наприклад, стиль оформлення став плоским, але є можливість повернутися до зовнішнього вигляду версії 2.0. В додаток до цього іконки з зображень перевели у шрифти, що позитивно позначається, коли необхідно використовувати різні розміри і кольори.

Система сіток

Поговоримо трохи про оновленій системі сіток. У новій версії Bootstrap мається чотири системи сіток, які працюють схожим чином і відрізняються розмірами екранів з якими вони працюють.

Активація сітки

Для того, щоб сітка правильно працювала і виводилася на екран, додайте мета-тег viewport у ваш документ:

Відмінності систем сіток по ширині

Як вже було сказано вище, в новій версії фреймворку мається чотири системи сіток. Вони активуються за допомогою завдання параметрів у мета-тегу viewport. Є наступні співвідношення між пристроями і шириною:

Дуже маленькі пристрої ~ Телефони (< 768px);
Маленькі пристрої ~ Планшети (>= 768px);
Середні пристрою ~ Ноутбуки (>= 992px);
Великі пристрою ~ Настільні комп’ютери (>= 1200 px).

Кожному підтримуваного увазі відповідає свій клас:

col-xs— ~ Дуже маленькі пристрої;
col-sm— ~ Маленькі пристрої;
col-md— ~ Середні пристрою;
col-lg— ~ Великі пристрою.

Щоб використовувати систему сіток, вам знадобиться контейнер з класом «container». Всередині має бути ще один контейнер з класом «row». Зауважте, що на відміну від Bootstrap 2, суфікс «fluid» не використовується. Усередині цього контейнера ви можете помістити свої стовпці.

col-xs-6
col-xs-6

Отже, нова версія дотримується підходу «Mobile First». Це означає, що стовпці з суфіксом класу «xs» завжди будуть плаваючими по горизонталі, незалежно від обраного розміру екрана.

Якщо ви, скажімо, використовуєте стовпці з префіксом «md», а розмір екрана вибрано меншим, ніж 992px (наприклад, 991px), то колонки будуть розташовуватися один під одним зі 100%-ної шириною, як показано в прикладі нижче:

col-md-4
col-md-4
col-md-4

Коли дана сторінка буде проглядатися на екрані, розмір якого 992px або більш, це буде виглядати так:

Якщо ж ви переглянете цей документ на екрані розміром 991px або менше, то виглядати це буде вже інакше:

Ви також можете комбінувати класи, щоб адаптувати дизайн відразу до кількох типів пристроїв. Наприклад, в наступному прикладі розмітка створена таким чином, що перші дві колонки є плаваючими і прилягають один до одного по горизонталі на маленьких пристроях (sm), а на середніх за розміром пристроях (md) розташовуються один під одним:

col-sm-6 col-md-4
col-sm-6 col-md-4
col-sm-6 col-md-4

У цьому випадку, відкривши сторінку на екрані розміром більше 991px, ви побачите три рівних колонки, одну під одною, як у прикладі вище. Однак, якщо документ буде проглядатися на пристрої, з розміром екрану між 768px і 991px, то результат буде наступним:

Як у прикладі вище, ви можете поєднувати стовпці в самих різних комбінаціях, щоб створити складну розмітку. Про систему колонок в Bootstrap можна говорити дуже багато. Якщо вам необхідна детальна інформація з даного питання, зверніться до документації.

Bootstrap CSS

Більшість основних класів Bootstrap у новій версії фреймворку не зазнали змін, однак, все ж є деякі нововведення, про які варто згадати.

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

Також, ім’я кожної змінної було стандартизовано відповідно з правилом «element-state-pseudo state». Це означає, що стилі для елементів зразок:

…

тепер мають префікс елемента, до якого вони застосовуються. Тому в новій версії Bootstrap визначення попереднього списку буде таким:

…

Те ж саме правило застосовується і до списків з inline-стилями.

Інші зміни в іменах змінних стосуються класів, які співвіднесені з різними розмірами. Наприклад, розмітка для кнопок у версії 2.* виглядала так:

Старі суфікси розмірів для кнопок були змінені у відповідності з прийнятим в новій версії угодою про імена, по аналогії з системами сіток. Тому приклад, наведений вище, в Bootstrap 3 буде виглядати наступним чином:

Те ж саме стосується і елементів введення.

Адаптивні таблиці

Загальний синтаксис і розмітка для таблиць не змінилася, але, слідуючи новій парадигмі «Mobile First», вони також стали адаптивними. Щоб використати це нововведення, просто оберніть таблицю контейнером з класом «responsive-table». Це зробить таблиці прокручиваемыми по горизонталі на маленьких пристроях (< 768px).

…

Результат буде наступним:

Форми

У розділі CSS, присвяченому формами, ви можете ознайомитися з основними відмінностями роботи з ними в новій версії Bootstrap. Кожен елемент вводу в Bootstrap 3 тепер відображається як блочний елемент з шириною 100%. Атрибут size» може бути змінений за допомогою класів, що залежать від атрибутів padding та font-size даного елемента, а не від значення width.

Розмітка для форм також змінилася. Найпростіша форма версії 2.* виглядала ось так:

…
…

У новій версії розмітка тієї ж форми має додаткові елементи і, зокрема, клас для самого елемента вводу:

…
…

Bootstrap використовує технології пристосування сайтів для використання людьми з обмеженими здібностями. З цієї причини, в коді вище є атрибут «role». Також зауважте, що тандем label/input обгорнутий зовні контейнером з класом «form-group». Це, як і все інше в новій версії фреймворку, зроблено для досягнення максимальної адаптивності.

Форми пошуку в новій версії прибрали. Так як всі елементи input і textarea за замовчуванням тепер мають ширину 100%, то горизонтальним inline-формами, необхідно приділити особливу увагу. Однак сама розмітка практично ідентична попередньої версії.

Email
Пароль
Запам’ятати мене
Sign in

Зверніть увагу, що до них був доданий клас «form-inline», а до них – клас «sr-only», що є частиною Bootstrap, що служить мети пристосування сайту для людей з обмеженими можливостями. Використання тега не обов’язково для inline-форм, проте настійно рекомендується його додавати – це нікому не зашкодить.

До речі, класsr-only» призначений спеціально для програм читання з екрану. Завдяки йому, такі програми будуть знати, що мітку слід прочитати вголос.

Нарешті, для створення горизонтальної форми, ви просто встановлюєте ширину тега за допомогою комбінації класів: «col-md-» (конкретний клас вибирається з доступних варіантів виходячи з ваших цілей) і «control-label«. Потім, оборачиваете тег контейнер з присвоєними йому класами для специфікації стовпців.

Результуюча форма виглядає так:

Є ще деякі зміни, що стосуються форм, наприклад, видалення класів «input-prepend» і «input-append», і додавання замість них «input-group» та «input-group-addon». Щоб дізнатися про всі зміни, будь ласка, зверніться до документації.

Іконки-гліфи (Glyphicons)

Це ще один аспект нової версії Bootstrap, який зазнав змін. Бібліотека іконок включає в себе 40 нових гліфів, які переведені з растрового формату у векторний. Простіше кажучи, іконки тепер стали шрифтовыми символами.

Тому тепер, замість додавання класів у форматі «glyphicons-*» з папки «img», де раніше знаходилося два графічних файлу, що містять бібліотеку, вам потрібно додавати гліф-іконки, які містяться у файлах з теки «fonts». Файли шрифтів з гліфами представлені в чотирьох форматах, що зроблено для кросбраузерною сумісності.

З міркувань продуктивності, кожна з них вимагає наявності базового класу і класу іконки. Так що тепер, замість додавання звичних користувальницьких растрових іконок, використовується наступна конструкція:

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

Компоненти JavaScript

Незважаючи на зміни, компоненти JavaScript в Bootstrap 3.0 мають ті ж імена і використовуються так само, як і раніше, але з кількома незначними відмінностями.

Модальні вікна

Можливо, одним з найбільш часто використовуваних в Bootstrap компонентів є плагін Modals. Відмінність полягає в тому, що контейнери «modal-header», «modal-content» і «modal-footer», тепер обгорнуті контейнером «modal-dialog», який, у свою чергу, вкладений у контейнер «modal-content». Звична розмітка:

змінилася на:

Нова розмітка більш об’ємна, однак, вона робить компонент більш адаптивним, а також дозволяє прокручувати область перегляду замість використання параметра «max-height».

Щоб запустити модальне вікно з JavaScript, використовується той же метод, що і раніше:

$( ‘#my-modal’ ).modal(‘show’);

Більшість плагінів залишилися колишніми. Окремо варто зауважити, що такий елемент навігації, як «акордеон» був замінений сжимающимися панелями (Collapsible Panels), які працюють аналогічно і мають практично такий же синтаксис.

Класи були трохи змінені, але як і раніше потрібне використання плагіна переходів (Transition Plugin) без потреби створювати додаткові контейнери.

Плагін Typeahead також був виключений зі складу Bootstrap на користь плагіна Twitter ‘ s Typeahead.

Події

Події JavaScript тепер знаходяться в просторі імен. Що це означає для вас? У Bootstrap 2, щоб зловити момент закриття якого-небудь вікна, вам потрібно додати наступний код:

$( ‘#my-alert’ ).bind( ‘close’, function() {});

Тепер, в третій версії, імена подій змінилися і стали прив’язаними до фреймворку. Тому приклад, наведений вище, тепер буде виглядати так:

$( ‘#my-alert’ ).bind( ‘close.bs.alert’, function() {});

Ви можете ознайомитися з іншими наявними в Bootstrap компонентами JavaScript (всі вони засновані на jQuery).

Нові компоненти

У новій версії фреймворку з’явилися нові компоненти в CSS-частини. Це групові списків (list groups) і панелі (panels).

Групові списки

Ось витяг з офіційної документації по груповим списків (list groups):

… це гнучкий і потужний компонент не тільки для відображення простих списків елементів, але і складного вмісту.

Щоб додати групової список, просто створіть ненумерованний список з класом «list-group» і припишіть клас «list-group-item» до кожного елементу списку.

Lorem ipsum…
Dolor sit…

Ви можете додати клас «active» до будь-якого елементу списку, щоб виділити його. Також, якщо ви помістіть всередині нього значок, він буде отцентрирован по вертикалі і притиснуте до правого краю всередині елемента. Спробуйте самі.

Панелі

Панелі призначені для того, щоб виділяти і групувати всередині них кілька елементів вашого сайту або програми. Розмітка для створення панелі дуже проста, а вміст може бути практично будь-яким.

Панелі можуть містити шапку (header) та підвал (footer), а також мати спеціальне призначення із застосуванням класів «sucess», «error», «warning» і так далі. Наприклад:

Заголовок панелі

Тут деякий контент

Lorem ipsum…
Dolor sit…

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

Customizer – тонка настройка Bootstrap

У третій версії фреймворку оновився Customizer. Змінився не тільки зовнішній вигляд – інструмент став краще структурований і тепер дає відмінний контроль над максимальною кількістю параметрів.

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

Кросбраузерність

Довгий час Internet Explorer 6 наводив жах на веб-розробників. Bootstrap 2.* все ще підтримував сьому версію дітища Microsoft. Але в третій версії розробники фреймворку прибрали підтримку IE7 і Mozilla Firefox 3.6 і нижче.

Bootstrap має підтримку всіх останніх версій основних браузерів (Mozilla, Opera, Chrome, Firefox і IE) під Windows і Mac.

Якщо говорити про IE, то підтримуються версії 8 і вище. І хоча є деякі властивості, які браузер від Microsoft не обробляє (наприклад «border-radius»), фреймворк залишається повністю функціональним, але з невеликими недоліками. Також IE 8 вимагає respond.js для підтримки адаптивності.

Щоб дізнатися про всі обхідних шляхах і підводних каменях підтримки CSS-властивостей різними браузерами, зверніться до офіційної документації.

Висновок

З самого своєї появи, Bootstrap зарекомендував себе як відмінний інструмент для швидкої розробки професійно виглядають веб-сайтів і веб-додатків. Третя версія не стала винятком. Хочете знати, чому вам варто використовувати Bootstrap?

Даний фреймворк має продуману і гнучку систему сіток з підтримкою мобільних пристроїв, використання яких стає все більш популярним з кожним днем, і підтримує адаптивний дизайн, що зараз актуально, як ніколи раніше. У цих аспектах Bootstrap не має собі рівних!

Переклад статті «Mobile First With Bootstrap 3» був підготовлений дружною командою проекту Сайтостроение від А до Я.