Найкращі навчальні посібники з адаптивного веб-дизайну

Bootstrap - це популярний інтерфейс для веб-розробки. Він містить заздалегідь побудовані компоненти та елементи дизайну для стилізації вмісту HTML. Сучасні браузери, такі як Chrome, Firefox, Opera, Safari та Internet Explorer, підтримують Bootstrap.

Bootstrap включає адаптивну систему сіток для різних макетів. Це чудова відправна точка для створення мобільного веб-сайту. Він також включає необов’язкові функції JavaScript, такі як розбірний вміст, каруселі та модалі.

Історія версій

Twitter спочатку розробив фреймворк Bootstrap як внутрішній інструмент. Вони випустили його як проект з відкритим кодом у серпні 2011 року.

Bootstrap 2 був випущений в січні 2012 р. Однією з основних особливостей було введення 12-стовпчатої системи адаптивних сіток. Bootstrap 3 з'явився в серпні 2013 року, переключившись на плоский дизайн та мобільний підхід. Bootstrap 4 доступний у бета-версії з серпня 2017 року і тепер включає Sass та Flexbox.

Bootstrap 4 розроблявся два роки, перш ніж випустити деякі бета-версії протягом 2017 року, тоді як перший стабільний реліз вийшов у січні 2018 року. Серед помітних змін:

  • Переміщено з Less в Sass;
  • Переміщено у Flexbox та вдосконалено систему сіток;
  • Додані картки (заміна колодязів, мініатюр та панелей);
  • І набагато більше!

На момент написання останнього випуску Bootstrap є 4.1.3. Якщо ви хочете бути в курсі будь-яких новин оголошень, слідкуйте за ними тут.

Встановлення

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

Посилання на інше джерело

Ви можете додати Bootstrap CSS, використовуючи елемент всередині вашої веб-сторінки, який посилається на Мережу доставки вмісту (CDN):

Додавання елементів JavaScript Bootstrap подібно до елементів, які зазвичай розміщуються внизу вашого тегу ''. Можливо, спочатку вам доведеться включити деякі залежності. Зверніть особливу увагу на зазначений порядок:

Примітка: Це лише приклади та можуть змінюватися без попередження. Будь ласка, зверніться до CDN, щоб переглянути поточні посилання для включення у ваш проект.

Завантажити / встановити

Ви можете завантажити та встановити вихідні файли Bootstrap за допомогою Bower, Composer, Meteor або npm. Це дозволяє отримати більший контроль та можливість включати або виключати модулі за необхідності.

npm install bootstrap

gem 'bootstrap', '~> 4.1.3'

Примітка: Це лише приклади та можуть змінюватися без попередження. Будь ласка, зверніться до порожнього веб-сайту 'rel =' nofollow '> Bootstrap, щоб отримати найсвіжіші посилання.

Сітка Bootstrap

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

Bootstrap постачається із заздалегідь визначеними класами сітки для використання у розмітці. Детальніше та приклади дивіться на //getbootstrap.com/docs/4.1/layout/grid/

Особливості Boostrap

Більше інформації:

У Bootstrap є детальна документація з багатьма прикладами та HTML-шаблон для початку (цей шаблон містить лише сценарій; він не містить налаштування системи сіток, якщо це те, що ви шукаєте).

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

Ресурси Bootstrap:

Офіційний блог Bootstrap

Сайт Bootstrap натхнення

Вітрина сайтів, побудованих за допомогою Bootstrap

HTML-лінтер для проектів, що використовують Bootstrap

Елементи дизайну та фрагменти коду для Bootstrap

Код, тема та додаткові ресурси для Bootstrap

Початок роботи з підручником Bootstrap

Використання Bootstrap спрощує розробку адаптивного веб-сайту та є основою, на якій варто навчитися.

Що таке адаптивний веб-сайт?

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

Як додати Bootstrap на свою сторінку

Додавання завантажувальної стрічки на вашу сторінку - це швидкий процес, просто додайте наступне до тегів у коді.

Вам також потрібно буде додати наступне між bodyтегами у вашому коді. За допомогою bootstrap ви будете використовувати теги. При використанні багатьох функцій Bootstrap кожен тег матиме свій унікальний набір застосованих класів, що дозволяє тегу виконувати своє завдання. В інших розділах цього посібника Bootstrap буде показано більше прикладів того, як Bootstrap використовує теги. ( теги не є ексклюзивними для Bootstrap, однак Bootstrap використовує їх.).

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

Congratulations!

Bootstrap is now working on this page

Шаблони

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

Починаємо

Посилання на шаблон

Панель навігації

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

Як користуватись

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

Приклад коду

Це код, необхідний для створення базової панелі навігації.

 Site Name 
  • Home
  • Page 1
  • Page 2
  • Page 3

Стилі Navbar

Bootstrap надає набір класів у фреймворці Bootstrap для стилізації ваших панелей навігації. Ці класи такі:

Додавання випадаючих меню на панель навігації

Ви можете включити спадне меню всередині панелі навігації. Ця функція вимагає включення файлу JavaScript сценарію Bootstrap, щоб він працював.

  • Drop down
    • Item 1
    • Item 2
    • Item 3
  • Додавання кнопок на панель навігації

    Ви можете додати кнопки на панелі навігації. Існуючі класи кнопки Bootstrap працюють, однак вам доведеться включити клас navbar-btnдо кінця списку класів.

    Button

    Додавання форм на панель навігації

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

     Search 

    Вирівнювання елементів праворуч на панелі навігації

    У деяких випадках вам може знадобитися вирівняти елементи на панелі навігації праворуч (наприклад, кнопка входу або реєстрації.). Для цього вам потрібно буде використовувати navbar-rightклас.

     Site Name 
    • Home
    • Page 1
    • Page 2
    • Page 3
    • Action Link #1
    • Action Link #2

    Відображення панелі навігації незалежно від прокрутки

    У деяких випадках вам може знадобитися зберегти панель навігації у верхній або нижній частині екрана, незалежно від прокрутки. Вам потрібно буде додати до елемента navbar-fixed-topабо navbar-fixed-bottomклас, або клас .

     Site Name 
    • Home
    • Page 1
    • Page 2
    • Page 3

    Згортання панелі навігації

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

     Site Name 
    • Home
    • Page 1
    • Page 2
    • Page 3

    Приклади Navbar

    Original text