Лучшие учебники Bootstrap для адаптивного веб-дизайна

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

HTML-линтер для проектов с использованием Bootstrap

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

Код, тема и дополнительные ресурсы для Bootstrap

Начало работы с учебником Bootstrap

Использование Bootstrap упрощает разработку полностью адаптивного веб-сайта и является фреймворком, который стоит изучить.

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

Адаптивный веб-сайт - это веб-сайт, который изменяет размер и порядок элементов на странице в зависимости от размера вашего браузера. На адаптивном веб-сайте, если вы измените размер своего браузера, вы сможете увидеть изменения в реальном времени. Bootstrap делает ваш сайт адаптивным для вас.

Как добавить Bootstrap на свою страницу

Добавление начальной загрузки на вашу страницу - быстрый процесс, просто добавьте следующие теги в свой код.

Вам также нужно будет добавить следующее между bodyтегами в вашем коде. С начальной загрузкой вы будете использовать теги. При использовании многих функций 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

Стили навигационной панели

Bootstrap предоставляет набор классов в структуре Bootstrap для стилизации ваших навигационных панелей. Эти классы следующие:

Добавление раскрывающихся меню на панель навигации

Вы можете включить раскрывающееся меню в панель навигации. Эта функция требует, чтобы вы включили файл javascript Bootstrap, чтобы она работала.

  • Drop down
    • Item 1
    • Item 2
    • Item 3
  • Добавление кнопок на панель навигации

    Вы можете добавить кнопки на панель навигации. Существующие классы Bootstrap Button работают, однако вам нужно будет включить класс 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

    Примеры навигационной панели

    Original text