Bootstrap 4 Нові та цікаві функції, які ви будете любити

Наступний великий випуск рамки Bootstrap знаходиться за рогом. Альфа-версію вже можна завантажити з сайту розробки Bootstrap, а вихідний код також доступний на Github.

Twitter Bootstrap в даний час є найпопулярнішим фронтенд рамки там. Це дозволяє розробникам швидко створювати веб-сайти для мобільних пристроїв і швидко реагувати. Bootstrap дає можливість спокійно використовувати стандартні тріо HTML5, CSS3 і Javascript. В даний час вона використовується більш ніж 6 мільйонами сайтів в Інтернеті.

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

1. Sass Замість LESS

До цих пір Bootstrap використовував LESS в якості свого головного викладача CSS, але для нового основного випуску правила стилю будуть перероблені до Sass, що набагато більш популярне серед розробників фронтендів, має величезну базу вкладників, зазвичай простіше у використанні і пропонує більше можливостей. Завдяки потужному Libsass Sass Complier, написаному на C / C++ Bootstrap 4 буде збиратися набагато швидше ніж раніше.

2. Новий рівень сітки для менших екранів

Bootstrap має складну гнучку систему, що дозволяє розробникам націлювати пристрої з різними вікнами. Bootstrap 3 в даний час має 4 класу сітки для стовпців, .col-xs-XX для мобільних телефонів, .col-sm-XX для таблеток, .col-md-XX для настільних комп'ютерів і .col-lg-XX для великих настільних комп'ютерів. Bootstrap 4 покращить систему сітки п'ятою, що сприятиме розробникам націлюйте на менші пристрої на ширину вікна 480px.

Новий клас сітки прийняв назву попереднього найменшого і підштовхнув поточні назви ярусів сітки вгору на одну ступінь. У Bootstrap 4 великі стільниці використовуватимуть .col-xl-XX селектор класу. Важливо знати, що незважаючи на нову назву, вони не додають нового класу для додаткових великих екранів, але для додаткових маленьких.

3. Представляє відносні одиниці CSS

Bootstrap 4, нарешті, знижує підтримку Internet Explorer 8. Це дійсно розумний крок, оскільки дозволяє їм позбутися від набридливих поліфілів і перетворити їх у відносні одиниці CSS. Замість пікселів, новий основний реліз буде використовувати REMs та EMs що дозволяють реалізувати чуйну типографіку на сайтах Bootstrap. Це також підвищить читабельність і зробить сайти більш доступними для користувачів з обмеженими можливостями.

Якщо ви хочете спробувати, як відносні одиниці працюють з новою Bootstrap 4, ознайомтеся з цією демонстрацією на Codepen.

4. Нові картки Bootstrap

Команда розробників вирішила об'єднати деякі попередні елементи інтерфейсу користувача Bootstrap, тому вони вирішили ввести a Новий компонент інтерфейсу називається Cards. Карти замінять колишні свердловини, мініатюри та панелі, а також надасть користувачам більш раціоналізований робочий процес. Не хвилюйтеся, картки зберігатимуть знайомі елементи, такі як заголовки, колонтитули колодязів, мініатюри та панелі.

Оскільки карти будуть більш гнучкими, ніж поточні компоненти інтерфейсу, вони дозволять збільшити простір для творчих реалізацій. Є деякі піонери, які вже провели експерименти на Codepen з картами Bootstrap. Ви можете перевірити їх, або створити свої власні карти.

5. Новий модуль перезавантаження

Новий модуль Reboot замінює попередній normalize.css скинути файл. Вона не відкидає її; навпаки, він будує на ньому більше правил. Мета переходу полягала в тому, щоб включити всі загальні селектори CSS і скинути стилі в єдиний, простий у використанні файл SCSS. Ви можете подивитися на вихідний код тут, якщо ви хочете краще зрозуміти, як працює новий модуль.

Добре б знати, що нові стилі скидання налаштовують властивість CSS у форматі box кордон на елемент, який успадковується кожним дочірнім елементом на сторінці. Нове правило стилю робить відповідні макети більш керованими. Якщо ви хочете відчути різницю між типом розкладки контенту та кордоном, погляньте на цю зручну демонстрацію, надану службою CSS-Tricks.com (вона не була створена для Bootstrap 4, вона просто показує, як розмір вікна зазвичай працює).

6. Підтримка Flexbox

Bootstrap 4 робить можливим використовувати CSS3 Flexbox Layout, однак - оскільки Internet Explorer 9 не підтримує модуль flexbox - це версія Bootstrap 4 за замовчуванням використовує властивості float і CSS для реалізації макета текучого середовища.

Flexbox має простий у використанні макет, який може бути чудово використаний у реагуванні, оскільки він забезпечує гнучкий контейнер, який або розширюється, або зменшується, щоб заповнити доступний простір найкращим чином. Використовуйте лише функцію opt-in flexbox, якщо ви ні необхідно надати підтримку IE9.

7. Спрощена настройка змінної

Усі змінні Sass, що використовуються в новому випуску Bootstrap, включені в один файл з назвою _variables.scss, що значно спрощує процес розробки. Ви не повинні робити нічого іншого, крім того, щоб копіювати параметри з цього файлу в інший, який викликається _custom.scss , щоб змінити значення за замовчуванням.

Ти можеш налаштувати багато речей такі як кольори, інтервали, стилі зв'язків, типографіки, таблиці, точки перетину сітки та контейнери, номер стовпця та ширина жолоби, та багато інших.

8. Нові утиліти для інтервалів

У Bootstrap 3 вже є багато практичних класів утиліти, як-от ті, що змінюють плаваюче або clearfix, але Bootstrap 4 додає ще більше. The нові класи інтервалів дозволяють розробникам швидко міняти прокладки та поля на своїх сайтах.

Синтаксис для нових класів досить простий, наприклад, додавання .клас м-а-0 посилання на правило стилів, що встановлює поля 0 на всіх сторонах даного елемента (margin-all-0). Хоча поля використовують m- префікс, прокладки в стилі з стор- префікс. У документах з розробки ви можете ознайомитися з усіма новими класами вбудованих інтервалів.

9. Підказки та Popovers працює на Tether

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

Не забувайте, що, оскільки Tether є бібліотекою JavaScript третьої сторони, вам слід окремо включити його в HTML перед файлом bootstrap.js.

10. Рефактовані модулі JavaScript

Команда розробників рефакторизувала кожен модуль JavaScript для нового випуску, використовуючи EcmaScript 6. Завдяки інтелектуальному використанню найновіших специфікацій та нових удосконалень, вони мають намір поліпшити досвід роботи з інтерфейсом..

Новий Bootstrap 4 також пройшов через інші вдосконалення JavaScript, такі як перевірка типу опції, загальні типові методи, і Підтримка UMD, що всі разом працюватимуть, щоб зробити найпопулярніший фронтендний фреймворк більш плавним, ніж будь-коли раніше.

Тепер читайте: 10 легких альтернатив Bootstrap & Foundation