Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Bootstrap уроки: Bootstrap уроки — основы адаптивной верстки Бутстрап на itProger

Содержание

Bootstrap уроки — основы адаптивной верстки Бутстрап на itProger

Уроки по Bootstrap для начинающих! Новый видеокурс, в котором мы будет изучать фреймворк Bootstrap от базовых классов и до написания JavaScript скриптов. За курс вы узнаете как верстать сайты с помощью Bootstrap и какими характеристика обладаете данная технология.

Полезные ссылки:

Информация про Bootstrap

При каждом создании списка лучших фреймворков CSS в числе лидеров всегда стоит Bootstrap и это не случайно. Он занимает заслуженное место в списке благодаря наличию уникальных функций, часть из них не существует ни в одном другом фреймворке. 

Изначально разрабатывался для популярнейшей соцсети Twitter, но его роль выходит далеко за пределы одного сервиса. Сегодня является одним из самых используемых и эффективных фреймворков CSS. Бутстрап включает и другие широко известные языки – HTML и Javascript. 

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

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

Bootstrap верстка – популярный способ быстро создать веб сайт. Адаптивная верстка Bootstrap – часть данной работы. Все сайты, что строятся на Бутстрап имеют продуманную структуру и являются адаптивными по умолчанию. 

Почему используют Bootstrap?

Bootstrap содержит множество готовых стилей и JavaScript скриптов для создания веб сайта. Написание стилей для сайта можно значительно сократить за счёт использования уже готовых решений от Bootstrap.

Благодаря быстрой реализации стилей многие разработчики полюбили Bootstrap и используют его для разнообразных проектов.

Как работать с Bootstrap?

Принцип работы с Bootstrap прост. Вам предстоит:

  • скачать или подключить Bootstrap при помощи CDN;
  • выполнить верстку сайта с помощью Bootstrap, используя подготовленные стили. 

Верстка сайта на Bootstrap легкая даже для новичков в сфере веб разработки. Понять как работать с бутстрап и освоить Bootstrap основы можно в течении пары часов. Далее вы сможете проектировать сайты на бутстрап, делая их адаптивными, отзывчивыми и красивыми.

Версии Bootstrap

На сегодняшний день существует несколько основных версий Bootstrap. Последние крупные обновления это:

  • Bootstrap 3 – добавлены классы для работы со множеством HTML5 объектов;
  • Bootstrap 4 – представлена возможность строить адаптивную верстку Bootstrap на основе FlexBox;
  • Bootstrap 5 – улучшены и добавлены стили к HTML объектам. Уменьшен код, увеличина производительность.
План курса

За курс мы ознакомимся с фреймворком Bootstrap. Мы изучим все основные классы, что содержаться в фреймворке. Также изучим использование подготовленных JavaScript скриптов. На основе практических Bootstrap примеров верстки вы сможете построить веб сайт и изучить Bootstrap с нуля. 

Наши Bootstrap уроки отлично подойдут как новичкам, так и тем, кто хочет подтянуть свои знания в разработке адаптивных веб сайтов.

К концу курса у вас будет достаточно знаний чтобы использовать Bootstrap в ваших проектах.

Bootstrap Бутстрап 4 Учебник Справочник на русском примеры

Bootstrap 4 — это новейшая версия Bootstrap, которая является наиболее популярной платформой HTML, CSS и JavaScript для разработки адаптивных мобильных веб-сайтов.

Bootstrap 4 абсолютно бесплатно скачать и использовать!

Начните учить Bootstrap 4 сейчас »

Start Bootstrap 4


Попробуйте примеры

Этот учебник Bootstrap 4 содержит сотни примеров Bootstrap 4.

С помощью нашего онлайн-редактора вы можете отредактировать код и нажать на кнопку для просмотра результата.

Пример Bootstrap 4

  Моя первая Bootstrap страница
  Измените размер этой адаптивной страницы, чтобы увидеть эффект!

<div>
  <div>
    <div>
      <h4>Колонка 1</h4>
      <p>Просто текст
..</p>
      <p>Новый текст..</p>
    </div>
    <div>
      <h4>Колонка 2</h4>
      <p>Просто текст
..</p>
      <p>Новый текст..</p>
    </div>
    <div>
      <h4>Колонка 3</h4>
      <p>Просто текст
..</p>
      <p>Новый текст..</p>
    </div>
  </div>
</div>

Нажмите на «Просмотр демо в редакторе» кнопку, чтобы увидеть, как работает.



Bootstrap 3 vs. Bootstrap 4

Bootstrap 4 — новейшая версия Bootstrap; с новыми компонентами, более быстрой таблицы стилей и большей отзывчивостью.

Bootstrap 4 поддерживает новейшие, стабильные выпуски всех основных браузеров и платформ. Тем не менее Internet Explorer 9 и вниз не поддерживается.

Если вам требуется поддержка IE8-9, используйте Bootstrap 3. Это наиболее стабильная версия Bootstrap, и она по-прежнему поддерживается командой для критических исправлений и изменений в документации. Тем не менее, новые функции не будут добавлены к нему.


Базовый шаблон Bootstrap 4

Мы создали адаптивный начальный шаблон с Bootstrap 4. Вы можете изменять, сохранять, делиться и использовать его в своих проектах:


Ссылки Bootstrap

Полный список всех классов Bootstrap 4 CSS с описанием и примерами:

Если вы хотите сделать больше с компонентами Bootstrap, смотрите наш полный Bootstrap 4 с JavaScript все примеры:


Bootstrap Бутстрап 4 Class

.active Добавление цвета белого текста к активной ссылке в навигационной области . Navbar
.active Добавление синего цвета фона к элементу активного списка в группе списков List Groups
.active Добавление темно-синего цвета фона для имитации нажатой кнопки Buttons
.active Добавляет синий цвет фона для активного раскрывающегося элемента в раскрывающемся списке Dropdowns
.active Добавление синего цвета фона в активную ссылку разбиения на страницы (для выделения текущей страницы) Pagination
.active Отображает/показывает текущий элемент карусели Carousel
.alert Создает окно сообщения предупреждения Alerts
.alert-danger Тревога. Указывает на опасное или потенциально отрицательное действие Alerts
.alert-dark Темная тревога. Темно-серый окно оповещения Alerts
.alert-dismissible Указывает закрывающееся окно оповещения. Вместе с .close классом этот класс используется для закрытия оповещения (добавляет дополнительные отступы) Alerts
.alert-heading Добавляет color:inherit к указанному элементу Alerts
.alert-info Синее оповещение. Указывает нейтральное информативное изменение или действие Alerts
.alert-light Сигнал тревоги. Светлая серая коробка оповещения Alerts
.alert-link Используется на ссылки внутри оповещения для обеспечения соответствия цветные ссылки Alerts
.alert-primary Синяя тревога. Указывает на важное действие Alerts
.alert-secondary Серый сигнал тревоги. Указывает на «менее» важное действие Alerts
.alert-success Зеленая тревога. Указывает на успешное или положительное действие Alerts
.alert-warning Желтый сигнал тревоги. Указывает на осторожность следует принимать с этим действием Alerts
.align-baseline Элемент выравнивается по базовой линии родительского элемента. Это значение по умолчанию Utilities
.align-bottom Элемент выравнивается по нижнему элементу в строке Utilities
.align-middle Элемент помещается в середину родительского элемента Utilities
.align-top Элемент выравнивается по верхней части самого высокого элемента на линии Utilities
.align-text-top Элемент выравнивается по верхнему краю шрифта родительского элемента Utilities
.align-text-bottom Элемент выравнивается по нижнему краю шрифта родительского элемента Utilities
.align-content-around Выравнивание собранных элементов «вокруг» Flex
.align-content-*-around Выравнивание собранных элементов «вокруг» на разных экранах Flex
.align-content-center Выравнивание собранных элементов по центру Flex
.align-content-*-center Выравнивание собранных элементов в центре на разных экранах Flex
.align-content-end Выравнивание собранных элементов в конце Flex
.align-content-*-end Выравнивание собранных элементов в конце на разных экранах Flex
.align-content-start Выравнивание собранных элементов с начала Flex
.align-content-*-start Выравнивание собранных элементов с начала на разных экранах Flex
.align-content-stretch Растянуть собранные элементы Flex
.align-content-*-stretch Растянуть собранные элементы на разных экранах Flex
.align-items-start Выравнивание отдельных строк элементов с начала Flex
.align-items-*-start Выравнивание отдельных рядов элементов с начала на разных экранах Flex
.align-items-end Выравнивание отдельных строк элементов в конце Flex
.align-items-*-end Выравнивание отдельных рядов элементов в конце на разных экранах Flex
.align-items-center Выравнивание отдельных строк элементов в центре Flex
.align-items-*-center Выравнивание одиночных рядов элементов в центре на разных экранах Flex
.align-items-baseline Выравнивание отдельных строк элементов по базовой линии Flex
.align-items-*-baseline Выравнивание отдельных строк элементов в базовой линии на разных экранах Flex
.align-items-stretch Растянуть отдельные строки элементов Flex
.align-items-*-stretch Растянуть отдельные ряды элементов на разных экранах Flex
.align-self-start Выравнивание элемента Flex с начала Flex
.align-self-*-start Выравнивание элемента Flex с начала на разных экранах Flex
.align-self-end Выравнивание элемента Flex в конце Flex
.align-self-*-end Выравнивание элемента Flex в конце на разных экранах Flex
.align-self-center Выравнивание элемента Flex в центре Flex
.align-self-*-center Выравнивание элемента Flex в центре на разных экранах Flex
.align-self-baseline Выравнивание элемента Flex по базовой линии Flex
.align-self-*-start Выравнивание элемента Flex по базовой линии на разных экранах Flex
.align-self-stretch Растянуть гибкий элемент Flex
.align-self-*-stretch Растянуть гибкий элемент на разных экранах Flex
.badge Создает круглый значок (серый круг-часто используется в качестве числового индикатора) Badges
.badge-danger Красный значок. Указывает на опасное или потенциально отрицательное действие Badges
.badge-dark Тёмный значок. Темно-серый окно оповещения Badges
.badge-info Значок синего. Указывает нейтральное информативное изменение или действие Badges
.badge-light Светлый значок. Светлая серая коробка оповещения Badges
.badge-pill Делает значок более круглым Badges
.badge-primary Синий значок. Указывает на важное действие Badges
.badge-secondary Серый значок. Указывает на «менее» важное действие Badges
.badge-success Зелёный значок. Указывает на успешное или положительное действие Badges
.badge-warning Желтый значок. Указывает на осторожность следует принимать с этим действием Badges
.bg-danger Добавляет красный цвет фона к элементу. Представляет опасность или отрицательное действие Colors
.bg-dark Добавляет темный серый цвет фона к элементу Colors
.bg-info Добавляет бирюзовый цвет фона к элементу. Представляет некоторую информацию Colors
.bg-light Добавление светло-серого цвета фона к элементу Colors
.bg-primary Добавляет синий цвет фона к элементу. Представляет что-то важное Colors
.bg-secondary Добавляет серый цвет фона к элементу. Указывает на «менее» важное действие Colors
.bg-success Добавляет зеленый цвет фона к элементу. Указывает на успех или положительное действие Colors
.bg-warning Добавляет желтый/оранжевый цвет фона к элементу. Представляет предупреждение или отрицательное действие Colors
.blockquote Styles цитирует блоки содержимого из другого источника (добавляет больший размер шрифта (1.25 REM)) Typography
.blockquote-footer Стили заголовок источника внутри цитата (светло-серый текст с отступом) Typography
.border Добавление границы к элементу Utilities
.border-bottom-0 Удаление нижней границы элемента Utilities
.border-danger Добавляет красную границу к элементу (указывает на опасность) Utilities
.border-dark Добавление темной границы к элементу Utilities
.border-info Добавление синей границы к элементу (обозначает информацию) Utilities
.border-left-0 Удаляет левую границу из элемента Utilities
.border-light Добавление светло-серой границы к элементу Utilities
.border-primary Добавление синей границы к элементу Utilities
.border-right-0 Удаление правой границы элемента Utilities
.border-top-0 Удаление верхней границы элемента Utilities
.border-secondary Добавление серой границы к элементу Utilities
.border-success Добавление зеленой границы к элементу (указывает на успешное завершение) Utilities
.border-warning Добавление оранжевой границы к элементу (указывает на предупреждение) Utilities
.border-white Добавление белой границы к элементу Utilities
.border-0 Удаляет все границы элемента Utilities
.breadcrumb Разбиение на страницы. Указывает расположение текущей страницы в навигационной иерархии Pagination
.breadcrumb-item Стили — элементы списка или ссылки внутри цепочки навигации Pagination
.btn Создание базовой кнопки (серый фон и закругленные углы) Buttons
.btn-block Создает кнопку уровня блока, охватывающую всю ширину родительского элемента Buttons
.btn-dark Темная серая кнопка Buttons
.btn-danger Красная кнопка. Указывает на опасность или отрицательное действие Buttons
.btn-group Группирует кнопки вместе в одной строке Button Groups
.btn-group-lg Большая группа кнопок (делает все кнопки в группе кнопок больше-увеличенный размер шрифта и заполнение) Button Groups
.btn-group-sm Малая группа кнопок (делает все кнопки в группе кнопок меньше) Button Groups
.btn-group-vertical Заставляет группу кнопок отображаться вертикально в сложенном виде Button Groups
.btn-info Синей кнопке. Представляет нейтральное информативное изменение или действие Buttons
.btn-light Светлая серая кнопка Buttons
.btn-link Делает кнопку похожую на ссылку (поведение кнопки Get) Buttons
.btn-lg Большая кнопка Buttons
.btn-outline-dark Темная серая граница/Контурная кнопка Buttons
.btn-outline-danger Красная граница/Контурная кнопка. Указывает на опасность или отрицательное действие Buttons
.btn-outline-info Бирюзовая граница/Контурная кнопка. Представляет нейтральное информативное изменение или действие Buttons
.btn-outline-light Светлая серая граница/Контурная кнопка Buttons
.btn-outline-primary Синяя граница/Контурная кнопка. Buttons
.btn-outline-secondary Серая граница/Контурная кнопка. Указывает на «менее» важное действие Buttons
.btn-outline-success Зеленая граница/Контурная кнопка. Указывает на успех или положительное действие Buttons
.btn-outline-warning Оранжевая граница/Контурная кнопка. Представляет предупреждение или отрицательное действие Buttons
.btn-primary Синяя кнопка. Указывает на что-то важное Buttons
.btn-sm Маленькая кнопка Buttons
.btn-secondary Серая кнопка. Указывает на «менее» важное действие Buttons
.btn-success Зеленая кнопка. Указывает на успех или положительное действие Buttons
.btn-toolbar Объединение наборов кнопок в панели инструментов кнопок для более сложных компонентов Button Groups
.btn-warning Оранжевая кнопка. Представляет предупреждение или отрицательное действие Buttons
.card Создает карточку Cards
.card-body Контейнер для содержимого карты Cards
.card-columns Контейнер для создания кладки, как сетка карт Cards
.card-danger Добавляет на карточку красный цвет фона. Представляет опасность или отрицательное действие Cards
.card-dark Добавляет серый цвет фона к карточке Cards
.card-deck Контейнер для создания сетки карт с одинаковой высотой и шириной Cards
.card-footer Нижний колонтитул карты Cards
.card-group Контейнер для создания сетки карт, которые имеют одинаковую высоту и ширину, без боковых полей Cards
.card-header Заголовок карты Cards
.card-header-tabs Стили навигации вкладки внутри заголовка карты Cards
.card-header-pills Стили навигационных таблеток внутри заголовка карты Cards
.card-img-bottom Поместите изображение снизу внутри карты Cards
.card-img-overlay Превращает изображение в фон карты. Часто используется для добавления текста поверх изображения Cards
.card-img-top Поместите изображение вверху внутри карты Cards
.card-info Добавляет цвет синего цвета к карточке. Представляет некоторую информацию Cards
.card-light Добавляет светло-серый цвет фона к карточке Cards
.card-link Добавляет синий цвет к любой ссылке и наведите эффект внутри карты Cards
.card-primary Добавляет голубой цвет фона к карточке. Представляет что-то важное Cards
.card-secondary Добавляет серый цвет фона к карточке. Представляет что-то «менее» важное Cards
.card-subtitle .card-subtitleиспользуется после a .card-title и добавляет в элемент следующее:margin-top: -.375rem; margin-bottom: 0; Cards
.card-success Добавляет зеленый цвет фона к карточке. Указывает на успех или положительное действие Cards
.card-text Используется для удаления нижнего поля для элемента p, если он является последним дочерним элементом (или единственным), внутри.card-body Cards
.card-title Добавляет заголовок к любому элементу заголовка внутри карточки Cards
.card-warning Добавляет желтый/оранжевый цвет фона на карточку. Представляет предупреждение или отрицательное действие Cards
.carousel Создает Карусель (слайд-шоу) Carousel
.carousel-caption Создает текст заголовка для каждого слайда в карусели Carousel
.carousel-control-next Контейнер для «Next» Карусель/пункт Ссылка Carousel
.carousel-control-next-icon Используется вместе с .carousel-control-next для создания «следующий» значок/Кнопка (стрелка вправо) Carousel
.carousel-control-prev Контейнер для «Предыдущий» Карусель/пункт Ссылка Carousel
.carousel-control-prev-icon Используется вместе с .carousel-control-prev для создания «Предыдущий» значок/Кнопка (влево-заостренные стрелки) Carousel
.carousel-indicators Добавляет маленькие точки/индикаторы в нижней части каждого слайда (который показывает, сколько слайдов есть в карусели, и какой слайд пользователь в настоящее время просмотра) Carousel
.carousel-inner Контейнер для элементов слайда Carousel
.carousel-item Задает содержимое каждого слайда Carousel
.clearfix Очищает поплавки Utilities
.close Стиль значка закрытия. Часто используется для оповещений и модальностей. Часто используется вместе с & Times; символ, чтобы создать фактический значок (лучше лукионг «x»). Он плавает вправо по умолчанию Utilities
.col-* Создает раскладку столбцов для дополнительных мелких устройств (и вверх/все устройства, если они не объединены с другими классами столбцов). *может быть число от 1 до 12 Grid System
.col-sm-* Создает макет столбца для небольших устройств (и вверх, если не объединен с другими классами столбцов). *может быть число от 1 до 12 Grid System
.col-md-* Создает макет столбца для средних устройств (и вверх, если не сочетается с другими классами столбцов). *может быть число от 1 до 12 Grid System
.col-lg-* Создает макет столбца для больших устройств (и вверх, если не сочетается с другими классами столбцов). *может быть число от 1 до 12 Grid System
.col-xl-* Создание макета столбца для дополнительных больших устройств. *может быть число от 1 до 12 Grid System
.collapse Обозначает складное содержимое, которое может быть скрыто или показано по требованию Collapse
.collapse show Показать складное содержимое по умолчанию Collapse
.container Фиксированная ширина контейнера с шириной определяется экран сайтов. Равное поле слева и справа. Containers
.container-fluid Контейнер, охватывающий всю ширину экрана Containers
.disabled Отключает кнопку (добавляет непрозрачность и значок «нет парковки-знак» при наведении) Buttons
.disabled Отключает выпадающий элемент (добавляет серый цвет текста и значок «нет парковки-знак» при наведении) Dropdowns
.disabled Отключает ссылку на разбиение на страницы (не может быть нажата-добавляет серый цвет текста и значок «нет парковки-знак» при наведении) Pagination
.disabled Отключает элемент списка в группе списка (не может быть нажата-добавляет светло-серый цвет и удаляет эффект наведения на ссылки элемента списка) List Groups
.dropdown Создание переключаемого меню, позволяющего пользователю выбрать одно значение из стандартного списка Dropdowns
.dropdown-divider Используется для разделения ссылок в выпадающем меню с тонкой горизонтальной границей Dropdowns
.dropdown-header Используется для добавления заголовков внутри раскрывающегося меню Dropdowns
.dropdown-item Создает раскрывающийся элемент (добавляется к ссылкам или кнопкам внутри. раскрывающееся меню) Dropdowns
.dropdown-item-text Используется для добавления простого текста в раскрывающийся список или используется для ссылок для стиля ссылок по умолчанию Dropdowns
.dropdown-menu Добавляет стили по умолчанию для контейнера раскрывающегося меню Dropdowns
.dropdown-menu-right Выравнивание выпадающего меню по правому краю Dropdowns
.dropdown-toggle Используется на кнопке, которая должна скрывать и показывать (переключать) раскрывающееся меню Dropdowns
.dropleft Влево-выравнивание раскрывающегося списка Dropdowns
.dropright Выравнивание по правому краю раскрывающегося списка Dropdowns
.dropup Указывает дропуп меню (вверх, а не вниз) Dropdowns
.d-block Создание элемента блока (Добавляет display:block ) Utilities
.d-*-block Создание элемента блока на определенной ширине экрана Utilities
.d-flex Создание контейнера Flexbox и преобразование прямых дочерних элементов в элементы Flex Flex
.d-*-flex Создает контейнер Flexbox для определенного размера экрана Flex
.d-inline-flex Создает встроенный контейнер Flexbox Flex
.d-*-inline-flex Создает встроенный контейнер Flexbox для определенного размера экрана Flex
.embed-responsive Контейнер для встроенного содержимого. Позволяет правильно масштабировать видео или слайд-шоу на любом устройстве Images
.embed-responsive-16by9 Контейнер для встроенного содержимого. Создает соотношение сторон 16:9, встроенное содержимое Images
.embed-responsive-4by3 Контейнер для встроенного содержимого. Создает соотношение сторон 4:3, встроенное содержимое Images
.embed-responsive-item Используется внутри .embed-responsive . Масштабирование видео красиво к родительскому элементу Images
.fade Добавление эффекта затухания при закрытии окна оповещения Alerts
.fade Добавляет эффект затухания при показе содержимого вкладки/таблетки Navs
.fade Добавляет эффект затухания при открытии модального Modal
.fixed-bottom Делает элемент оставаться в нижней части экрана (липкий/фиксированный) Utilities
.fixed-top Делает элемент оставаться в верхней части экрана (липкий/фиксированный) Utilities
.flex-column Отображать гибкие элементы по вертикали Flex
.flex-*-column Отображать гибкие элементы по вертикали на различных размерах экрана: Flex
.flex-column-reverse Отображать гибкие элементы по вертикали, в обратном порядке Flex
.flex-*-column-reverse Отображать гибкие элементы по вертикали, в обратном направлении на различных размерах экрана Flex
.flex-fill Используется для элементов Flex для принудительного его/их в столбцы с одинаковой шириной Flex
.flex-*-fill Принудить элементы Flex к одинаковой ширине на разных экранах Flex
.flex-grow-0|1 Используется на одном элементе Flex для занимают остальное свободное пространство Flex
.flex-nowrap Не оборачивайте элементы Flex Flex
.flex-*-nowrap Не оборачивать элементы на разных экранах Flex
.flex-shrink-0|1 Используется на одном элементе Flex для его сжатия при необходимости   Flex
.flex-row Отображать гибкие элементы по горизонтали (бок о бок) Flex
.flex-*-row Отображать гибкие элементы по горизонтали на определенном размере экрана Flex
.flex-row-reverse Отображать гибкие элементы по правому краю и по горизонтали Flex
.flex-*-row-reverse Отображать гибкие элементы по правому краю и по горизонтали на определенном размере экрана Flex
.flex-wrap Обернуть элементы Flex Flex
.flex-*-wrap Перенос элементов на различные экраны Flex
.flex-wrap-reverse Обернуть элементы Flex в обратном порядке Flex
.flex-*-wrap-reverse Обернуть элементы Flex в обратном порядке на разных экранах Flex
.float-left Поплавок элемента влево Utilities
.float-*-left Поплавок элемента влево на разных экранах Utilities
.float-none Удаление плавающих элементов из элемента Utilities
.float-right Поплавок элемента вправо Utilities
.float-*-right Поплавок элемента влево на разных экранах Utilities
.font-weight-bold Полужирный текст Typography
.font-weight-italic Курсивный текст Typography
.font-weight-light Легковесный текст (font-weight:300) Typography
.font-weight-normal Обычный текст (font-weight:400) Typography
.form-check Контейнер для флажков. Добавляет правильное заполнение Forms
.form-check-inline Делает флажки отображаются на той же строке (по горизонтали) Forms
.form-check-input Флажки стилей с соответствующими полями Forms
.form-check-label Обеспечивает правильное поле для меток, используемых вместе с флажками Forms
.form-control Используется на входных, текстовое и выбор элементов, чтобы охватить всю ширину страницы и сделать их отзывчивыми Forms
.form-control-file Добавляет display:block и width:100% для ввода, поданных с типом = «файл» Forms
.form-control-lg Управление большими формами Forms
.form-control-plaintext Стили элемента управления формы как обычный текст Forms
.form-control-range Добавляет display:block и width:100% к входной подано с типом = «диапазон» Forms
.form-control-sm Управление малыми формами Forms
.form-group Контейнер для ввода и метки формы Forms
.form-inline Делает <form> Выравнивание по левому краю с элементами управления inline-block (это относится только к формам в видовых экранах, которые по крайней мере 768px в ширину) Forms
.h2 - .h6 Делает элемент похожим на заголовок выбранного класса (h2-H6) Typography
.h-25 Устанавливает высоту элемента до 25% Utilities
.h-50 Устанавливает высоту элемента до 50% Utilities
.h-75 Устанавливает высоту элемента до 75% Utilities
.h-100 Устанавливает высоту элемента до 100% Utilities
.img-fluid Отзывчивый образ (добавляет Макс-ширина: 100% и высота: Авто) Images
.img-thumbnail Формирует изображение на миниатюру (тонкие светло-серые границы) Images
.initialism Отображение текста внутри <abbr> элемента в немного меньшем размере шрифта Typography
.input-lg Большое поле ввода Input Sizing
.input-sm Небольшое поле ввода Input Sizing
.invisible Сделать элемент невидимым Utilities
.jumbotron Создает мягкий серый заголовок/прямоугольник с закругленными углами, что увеличивает размер шрифта текста внутри него. Используется для вызова дополнительного внимания к какому-либо Специальному содержанию или информации Jumbotron
.jumbotron-fluid Создает Jumbotron с полной шириной (серый мягкий заголовок) без округленных границ Jumbotron
.justify-content-* Выравнивание элементов Flex с начала, в конце, по центру, между и «вокруг« Flex
.justify-content-*-around Выравнивание элементов Flex «вокруг» на различных размерах экрана Flex
.justify-content-*-between Выравнивание элементов Flex в «между» на различных размерах экрана Flex
.justify-content-*-center Выравнивание элементов Flex в центре на различных размерах экрана Flex
.justify-content-*-end Выравнивание элементов Flex в конце на различных размерах экрана Flex
.justify-content-*-start Выравнивание элементов Flex с начала на различных размерах экрана Flex
.lead Увеличение размера шрифта и высоты строки абзаца Typography
.list-group Создание группы списков с рамками для <li> элементов List Group
.list-group-item Добавляется к каждому <li> элементу в группе списков List Group
.list-group-item-action Добавлено к ссылкам внутри группы List, чтобы сделать их выделяться на Hover (темный фон) List Group
.list-group-item-danger Красный цвет фона для элемента списка в группе списков List Group
.list-group-item-dark Темно-серый цвет фона для элемента списка в группе списков List Group
.list-group-item-info Светло-голубой цвет фона для элемента списка в группе списков List Group
.list-group-item-light Светло-серый цвет фона для элемента списка в группе списков List Group
.list-group-item-primary Синий цвет фона для элемента списка в группе списков List Group
.list-group-item-success Зеленый цвет фона для элемента списка в группе списков List Group
.list-group-item-warning Желтый цвет фона для элемента списка в группе списков List Group
.list-inline Размещение всех элементов списка в одной строке (используется вместе с .list-inline-item каждым элементом <li>) Typography
.list-inline-item Размещение всех элементов списка в одной строке (используется вместе с .list-inline родительским элементом <ul>) Typography
.list-unstyled Удаляет все стандартные стили списка (маркеры, левое поле и т. д.) из
<ul>
списка или <ol>
Typography
.mark Выделение текста: выделенный текст Typography
.media Выравнивание мультимедийных объектов вместе с содержимым (например, изображениями или видео, которые часто используются для комментариев в блоге и т.д.) Media Objects
.media-body Контейнер для мультимедийного содержимого Media Objects
.modal Идентифицирует содержимое как модальное и привлекает к нему внимание Modals
.modal-body Определяет стиль тела модального. Добавить HTML разметку здесь (p, IMG, и т.д.) Modals
.modal-content Стили модальные (граница, фон-цвет и т.д.). Внутри этого, добавьте заголовку модального, тело и нижний колонтитул, если необходимо Modals
.modal-dialog-centered Центрировать модальные вертикально и горизонтально в пределах страницы Modals
.modal-footer Нижний колонтитул модального (часто содержит кнопку действия и кнопку закрытия) Modals
.modal-header Заголовок модального (часто содержит заголовок и кнопку закрытия) Modals
.modal-lg Большой модальный (шире, чем по умолчанию) Modals
.modal-sm Малый модальный (меньше ширины) Modals
.m-# / m-*-# Адаптивные классы маржи. * can be sm, md, lg or xl. # может быть числом от 0 до 5 Utilities
.mt-# / mt-*-# Адаптивные верхние классы маржи. * can be sm, md, lg or xl. # может быть числом от 0 до 5 Utilities
.mb-# / mb-*-# Адаптивные классы нижнего поля. * can be sm, md, lg or xl. # может быть числом от 0 до 5 Utilities
.ml-# / ml-*-# Адаптивные классы левого поля. * can be sm, md, lg or xl. # может быть числом от 0 до 5 Utilities
.mr-# / mr-*-# Адаптивные правильные классы маржи. * can be sm, md, lg or xl. # может быть числом от 0 до 5 Utilities
.mx-# / mx-*-# Адаптивные левый и правый поля автоматических (горизонтальных) классов. * can be sm, md, lg or xl. # может быть числом от 0 до 5 Utilities
.my-# / my-*-# Адаптивные верхние и нижние поля автоматических (вертикальных) классов. * can be sm, md, lg or xl. # может быть числом от 0 до 5 Utilities
.mx-auto Выравнивание элемента по горизонтали Utilities
.nav nav-tabs Создание меню с вкладками Tabs
.nav nav-pills Создает меню таблетки Tabs
.nav-justified Выравнивает ссылки табуляции/таблеток с одинаковой шириной Tabs
.navbar Создание панели навигации Navbar
.navbar-nav Контейнер для навигационных ссылок внутри контейнера. навигационной панели Navbar
.navbar-brand Добавляется к ссылке или элементу заголовка внутри навигационной страницы для представления логотипа или заголовка Navbar
.navbar-collapse Сворачивает навигационной панели (скрытые и заменены меню/гамбургер значок на мобильных телефонах и малых таблеток) Navbar
.navbar-expand-* Отзывчивый складной класс-стеки навигационной вертикально на малых (SM), средний (MD), большой (LG) или очень большой (XL) экраны Navbar
.navbar-dark Добавление цвета белого текста ко всем ссылкам в навигационной области Navbar
.navbar-light Добавление черного цвета текста ко всем ссылкам в навигационной области Navbar
.navbar-text Вертикальное выравнивание любых элементов внутри навигационной области, которые не являются связями (обеспечивает правильное заполнение) Navbar
.navbar-toggler Стили кнопки, которые должны открыть панели навигации на небольших экранах. Автоматический стиль как гамбургер/три бара Navbar
.navlink Используется для стиль ссылки/якоря внутри навигационной Navbar
.nav-item Используется для стилей элементов списка внутри навигационной области Navbar
.no-gutters Удаление водосточных желобов/дополнительное пространство из столбцов Grid System
.page-item Элементы списка стилей внутри разбиения на страницы Pagination
.page-link Стили ссылки внутри разбиения на страницы Pagination
.pagination Создает разбиение на страницы (полезно, когда у вас есть веб-сайт с большим количеством страниц Pagination
.pagination-lg Большая разбивка на страницы (каждая разбивка по ссылкам получает больший размер шрифта и более обивка) Pagination
.pagination-sm Малые разбиения на страницы (каждая разбивка на страницы получает меньший размер шрифта и меньше обивка) Pagination
.pre-scrollable Делает <pre> элемент прокручиваемым ( max-height 350 пикселей и предоставляет полосу прокрутки по оси y) Helpers
.progress Контейнер для индикаторов выполнения Progress Bars
.progress-bar Создает индикатор выполнения Progress Bars
.progress-bar-animated Анимация индикатора выполнения (используется вместе с полосками) Progress Bars
.progress-bar-striped Добавляет полосы на индикатор выполнения Progress Bars
.p-# / p-*-# Адаптивные классы заполнения. * can be sm, md, lg or xl. # может быть числом от 0 до 5 Utilities
.pt-# / pt-*-# Адаптивные верхние классы заполнения. * can be sm, md, lg or xl. # может быть числом от 0 до 5 Utilities
.pb-# / pb-*-# Адаптивные классы заполнения нижних полей. * can be sm, md, lg or xl. # может быть числом от 0 до 5 Utilities
.pl-# / pl-*-# Адаптивные классы заполнения левого поля. * can be sm, md, lg or xl. # может быть числом от 0 до 5 Utilities
.pr-# / pr-*-# Адаптивные правильные классы заполнения. * can be sm, md, lg or xl. # может быть числом от 0 до 5 Utilities
.py-# / py-*-# Адаптивные классы заполнения верхнего и нижнего полей. * can be sm, md, lg or xl. # может быть числом от 0 до 5 Utilities
.px-# / px-*-# Адаптивные классы заполнения левого и правого полей. * can be sm, md, lg or xl. # может быть числом от 0 до 5 Utilities
.rounded Добавление скругленных углов к элементу Utilities
.rounded-bottom Добавление скругленных углов снизу к элементу Utilities
.rounded-circle Формирует элемент в окружность (не поддерживается в IE8 и более ранних версиях) Utilities
.rounded-left Добавляет левый закругленный угол элемента Utilities
.rounded-right Добавление скругленных углов вправо к элементу Utilities
.rounded-top Добавление верхних скругленных углов к элементу Utilities
.rounded-0 Удаление скругленных углов из элемента Utilities
.row Контейнер для отзывчивых столбцов Grid System
.shadow Добавление тени к элементу Utilities
.shadow-lg Добавление большой тени к элементу Utilities
.shadow-md Добавление средней тени к элементу Utilities
.shadow-none Удаление теней из элемента Utilities
.shadow-sm Добавление небольшой тени к элементу Utilities
.small Создает светлый, дополнительный текст в любом заголовке Typography
.sr-only Скрытие элемента на всех устройствах, Кроме программ чтения с экрана Helpers
.sr-only-focusable Скрытие элемента на всех устройствах, Кроме программ чтения с экрана Helpers
.sticky-top Делает элемент оставаться липким/фиксированной в верхней части страницы, когда вы прокрутите мимо него Utilities
.tab-content Используется вместе с .tab-pane для создания переключаемых/динамических вкладок/таблетки Tabs
.tab-pane Используется вместе с .tab-content для создания переключаемых/динамических вкладок/таблетки Tabs
.table Добавление базовой стилизации в таблицу (заполнение, нижние границы и т.д.) Tables
.table-active Добавляет серый цвет фона в строку таблицы ( <tr> или ячейку таблицы ( <td> ) (тот же цвет используется при наведении) Tables
.table-bordered Добавляет границы со всех сторон таблицы и ячеек Tables
.table-bordered Удаление Бродов из таблицы Tables
.table-condensed Делает таблицу более компактной, сокращая заполнение ячеек пополам Tables
.table-dark Добавление черного фона с белым текстом в таблицу Tables
.table-hover Создает парящую таблицу (добавляет серый цвет фона на строках таблицы при наведении) Tables
.table-responsive-* Делает таблицу отзывчивой (при необходимости добавляет горизонтальную полосу прокрутки). По умолчанию полоса прокрутки добавляется в таблицу на экранах, которые меньше, чем 992пкс Wide (при необходимости). Там нет разницы при просмотре ничего лагере, чем 992пкс широкий. Однако, вы можете использовать SM | MD | LG | XL, чтобы решить, когда таблица должна получить полосу прокрутки, в зависимости от ширины экрана Tables
.table-striped Добавление в таблицу Зебра-полос Tables
.text-capitalize Обозначает текст с прописными буквами Typography
.text-center Выравнивание текста по центру Typography
.text-*-center Центрировать-выравнивание текста по разным экранам Typography
.text-danger Красный цвет текста. Указывает на опасность Colors
.text-dark Темно-серый цвет текста Typography
.text-hide Скрытие текста (помогает заменить текстовое содержимое элемента фоновым изображением) Typography
.text-info Светло-голубой цвет текста. Указывает информацию Colors
.text-light Светло-серый цвет текста Colors
.text-justify Обозначает обоснованный текст Typography
.text-left Выравнивание текста по левому краю Typography
.text-*-left Выравнивание текста по левому краю на разных экранах Typography
.text-lowercase Изменяет текст на нижний регистр Typography
.text-muted Серый цвет текста Colors
.text-nowrap Предотвращает перенос текста Typography
.text-primary Синий цвет текста. Указывает что-то важное Colors
.text-secondary Серый цвет текста. Указывает что-то «менее» важно Colors
.text-right Выравнивание текста по правому краю Typography
.text-*-right Выравнивание текста по правому краю на разных экранах Typography
.text-success Зеленый цвет текста. Указывает на успех Colors
.text-uppercase Делает текст прописным Typography
.text-warning Желтый/оранжевый цвет текста. Указывает предупреждение Colors
.text-white Белый цвет текста Colors
.thead-dark Добавляет черный цвет фона в заголовки таблицы Tables
.thead-light Добавление серого цвета фона в заголовки таблицы Tables
.visible Сделать видимым элемент Utilities
.w-25 Задает ширину элемента 25% Utilities
.w-50 Устанавливает ширину элемента до 50% Utilities
.w-75 Устанавливает ширину элемента до 75% Utilities
.w-100 Устанавливает ширину элемента до 100% Utilities

Bootstrap Бутстрап 4 Navigation Bar


Панели навигации

Панель навигации — это заголовок навигации, расположенный в верхней части страницы:

Logo


Базовая навигационная

С помощью Bootstrap панель навигации может расширяться или сворачиваться в зависимости от размера экрана.

Стандартная панель навигации создается с помощью .navbar класса, за которым следует адаптивный класс свертывания: (стеки навигационной панели .navbar-expand-xl|lg|md|sm по вертикали на очень больших, больших, средних или маленьких экранах).

Чтобы добавить ссылки внутри навигационной области, используйте <ul> элемент с class="navbar-nav".
Затем добавьте <li> элементы с .nav-item классом
за которым следует <a> элемент с .nav-link классом:

Пример

  <!— Links —>
  <ul>
    <li>
      <a href=»#»>Link
1</a>
    </li>
    <li>
      <a href=»#»>Link
2</a>
    </li>
    <li>
      <a href=»#»>Link
3</a>
    </li>
  </ul>

</nav>


Вертикальная навигационная

Удалите .navbar-expand-xl|lg|md|sm класс для создания вертикальной панели навигации:

Пример

  <!— Links —>
  <ul>
    <li>
      <a href=»#»>Link
1</a>
    </li>
    <li>
      <a href=»#»>Link
2</a>
    </li>
    <li>
      <a href=»#»>Link
3</a>
    </li>
  </ul>

</nav>



Центрированная навигационная

Добавьте .justify-content-center класс для центрирования панели навигации.

Следующий пример будет центрировать панель навигации на средних, больших и очень больших экранах. На маленьких экранах она будет отображаться по вертикали и по левому краю (из-за. навигации-развернуть-SM класса):

Пример

<nav>
  <a
class=»navbar-brand» href=»#»>Logo</a>
  …
</nav>


Цветной навигационной

Используйте любой из .bg-color классов для изменения цвета фона навигационной области (,,,,,, .bg-primary
.bg-success
.bg-info .bg-warning .bg-danger .bg-secondary .bg-dark и .bg-light )

Совет: Добавьте белый цвет текста ко всем ссылкам в навигационной навигации с помощью .navbar-dark класса или используйте .navbar-light класс для добавления черного цвета текста.

Пример

 
   

      Active
   
   
      Link
   

   
     
Link
   
   

      Disabled
   
 

<!— Black with white text —>
<nav>…</nav>

<!— Blue with white text —>
<nav>…</nav>

Активное/отключенное состояние: добавьте .active класс к <a> элементу, чтобы выделить текущую ссылку, или класс, указывающий на то, .disabled что ссылка не является интерактивной.


Марка/логотип

.navbar-brand класс используется для выделения названия бренда/логотипа/проекта вашей страницы:

Logo

Пример

<nav>
  <a
class=»navbar-brand» href=»#»>Logo</a>
  …
</nav>

При использовании .navbar-brand класса на изображениях Bootstrap 4 автоматически применяет стиль изображения для вертикальной навигации.

Пример

<nav>
   <a href=»#»>
    <img src=»bird.jpg»
alt=»Logo»>
  </a>
  …
</nav>


Свертывание панели навигации

Navbar

Очень часто, особенно на небольших экранах, вы хотите, чтобы скрыть навигационные ссылки и заменить их на кнопку, которая должна выявить их при нажатии на.

Чтобы создать складную панель навигации, используйте кнопку с class="navbar-toggler",
data-toggle="collapse" and data-target="#thetarget"
. Затем оберните содержимое навигационной панели (ссылки и т.д.) внутри элемента div с class="collapse navbar-collapse" , за которым следует идентификатор, соответствующий data-target кнопке: «сетаржет«.

Пример

 
  Navbar

  <!— Toggler/collapsibe Button —>
  <button
class=»navbar-toggler» type=»button»
data-toggle=»collapse» data-target=»#collapsibleNavbar»>
   
<span></span>
  </button>

  <!— Navbar links —>
  <div
id=»collapsibleNavbar»>
    <ul>
     
<li>
        <a
href=»#»>Link</a>
      </li>
     
<li>
        <a
href=»#»>Link</a>
      </li>
     
<li>
        <a
href=»#»>Link</a>
      </li>
   
</ul>
  </div>
</nav>

Совет: Можно также удалить класс. навигации-Expand-MD, чтобы всегда скрывать ссылки панели навигации и отображать кнопку переключателя.


Навигационное меню с раскрывающимся списком

Logo

NavBars также может содержать выпадающие меню:

Пример

 

  Logo

 
<!— Links —>
  <ul>
    <li
class=»nav-item»>
      <a href=»#»>Link
1</a>
    </li>
    <li>
     
<a href=»#»>Link 2</a>
    </li>

   
<!— Dropdown —>
    <li>
     
<a href=»#»
data-toggle=»dropdown»>
        Dropdown
link
      </a>
     
<div>
        <a
class=»dropdown-item» href=»#»>Link 1</a>
       
<a href=»#»>Link 2</a>
       
<a href=»#»>Link 3</a>
     
</div>
    </li>
  </ul>
</nav>


Формы и кнопки панели навигации

Добавьте <form> элемент, class="form-inline" чтобы сгруппировать входы и кнопки рядом друг с другом:

Пример

<nav>
 
<form action=»/action_page.php»>
    <input
type=»text» placeholder=»Search»>
   
<button type=»submit»>Search</button>
 
</form>
</nav>

Можно также использовать другие классы ввода, например .input-group-prepend или .input-group-append для прикрепления значка или текста справки рядом с полем ввода. Подробнее об этих классах вы узнаете в главе Bootstrap Inputs.

Пример

<nav>
  <form action=»/action_page.php»>
    <div>
      <div
class=»input-group-prepend»>
       
<span>@</span>
     
</div>
      <input type=»text»
class=»form-control» placeholder=»Username»>
    </div>
  </form>
</nav>


Текст навигационной навигации

Navbar text

Используйте .navbar-text класс для вертикального выравнивания любых элементов внутри навигационной области, которые не являются ссылками (обеспечивает правильное заполнение и цвет текста).

Пример

<!—
Links —>
  <ul>
    <li
class=»nav-item»>
      <a href=»#»>Link
1</a>
    </li>
    <li>
     
<a href=»#»>Link 2</a>
    </li>
 
</ul>

  <!— Navbar text—>
  <span>
   
Navbar text
  </span>

</nav>


Фиксированная панель навигации

Панель навигации можно также зафиксировать вверху или внизу страницы.

Фиксированная панель навигации остается видимой в фиксированном положении (сверху или снизу) независимо от прокрутки страницы.

.fixed-topкласс делает навигационную панель фиксированной в верхней части:

Пример

<nav>
 

</nav>

Используйте .fixed-bottom класс для того, чтобы сделать навигационную страницу в нижней части страницы:

Пример

<nav>
 

</nav>

Используйте .sticky-top класс, чтобы сделать навигационную страницу фиксированной/оставаться в верхней части страницы, когда вы прокрутите ее мимо . Примечание:
Этот класс не работает в Internet Explorer 11 и более ранних версиях (будет рассматривать его как position:relative ).

Пример

<nav>
 

</nav>

Bootstrap Бутстрап 4 Colors — цвета


Цвета текста

Bootstrap 4 имеет некоторые контекстные классы, которые могут быть использованы для обеспечения «значение через цвета».

Классы для текстовых цветов: .text-muted,
.text-primary, .text-success, .text-info,
.text-warning, .text-danger, .text-secondary, .text-white,
.text-dark, .text-body (цвет тела по умолчанию/часто черный) и .text-light:

Пример

Этот текст отключен.

Этот текст важен.

Этот текст указывает на успех.

Этот текст представляет некоторую информацию.

Этот текст представляет предупреждение.

Этот текст представляет опасность.

Вторичный текст.

Темно-серый текст.

Основного текста.

Светло-серый текст.

Контекстные текстовые классы также можно использовать для ссылок, которые добавят более темный цвет наведения:

Вы также можете добавить 50% непрозрачность для черного или белого текста с .text-black-50 или .text-white-50 классов:

Пример

Black text with 50% opacity on white background

White text with 50% opacity on black background


Цвета фона

Для цветов фона используются следующие классы: .bg-primary ,,,,,
.bg-success
.bg-info .bg-warning .bg-danger .bg-secondary .bg-dark и .bg-light.

Обратите внимание, что цвета фона не задается цвет текста, поэтому в некоторых случаях вы хотите использовать их вместе с .text-* классом.

Пример

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary background color.

Dark grey background color.

Light grey background color.

Bootstrap Бутстрап 4 Text Typography


Параметры начальной загрузки 4 по умолчанию

Bootstrap 4 использует значение по умолчанию
font-size of 16px, and its
line-height is 1.5.

По умолчанию font-family используется шрифт «Новая», шрифт, Arial, без засечек.

Кроме того, все <p> элементы имеют margin-top: 0 и margin-bottom: 1rem (16px по умолчанию).


<h2> — <h6>

Bootstrap 4 стили HTML заголовки (<h2>
<h6>)  с более смелым шрифтом и увеличенным размером шрифта:

Пример

h3 Bootstrap heading (2rem = 32px)

h4 Bootstrap heading (1.75rem = 28px)

h5 Bootstrap heading (1.5rem = 24px)
h5 Bootstrap heading (1.25rem = 20px)
h6 Bootstrap heading (1rem = 16px)


Отображение заголовков

Отображаемые заголовки используются для выделять больше, чем обычные заголовки (больший размер шрифта и более легкий шрифт-вес), и есть четыре класса на выбор: .display-1, .display-2, .display-3, .display-4


<small>

В Bootstrap 4 элемент HTML <small> используется для создания более светлого, вторичного текста в любом заголовке:

Пример

h3 heading

secondary text

h4 heading

secondary text

h5 heading

secondary text

h5 heading

secondary text

h6 heading

secondary text



<mark>

Bootstrap 4 будет стиль HTML <mark> элемент с желтым цветом фона и некоторые отступы:

Пример

Используйте элемент Mark для highlight Текста.


<abbr>

Bootstrap 4 будет стиль HTML <abbr> элемент с пунктирным нижней границы:

Пример

The WHO was founded in 1948.


<blockquote>

Добавьте .blockquote класс к a <blockquote> при цитировании блоков содержимого из другого источника:

Пример

For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.


<dl>

Bootstrap 4 будет стиль HTML <dl> элемент следующим образом:

Пример

Coffee
— black hot drink
Milk
— white cold drink

<code>

Bootstrap 4 будет стиль HTML <code> элемент следующим образом:

Пример

Следующие элементы HTML: span , section и div определяет раздел в документе.


<kbd>

Bootstrap 4 будет стиль HTML <kbd> элемент следующим образом:

Пример

Use ctrl + p to open the Print dialog box.


<pre>

Bootstrap 4 будет стиль HTML <pre> элемент следующим образом:

Пример

Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.

Другие классы типографии

Следующие классы Bootstrap 4 можно добавить в HTML-элементы стиля далее:

Класс Описание
.font-weight-bold Полужирный текст
.font-italic Курсивный текст
.font-weight-light Легковесный текст
.font-weight-normal Обычный текст
.lead Выделяет абзац
.small Обозначает меньший текст (значение 85% от размера родительского элемента)
.text-left Указывает текст, выровненный по левому краю
.text-*-right Обозначает текст, выровненный по левому краю на малых, средних, больших или XLarge экранах
.text-center Обозначает текст, выровненный по центру
.text-*-center Обозначает выравнивание текста по центру на малых, средних, больших или XLarge экранах
.text-right Указывает текст с выравниванием по правому краю
.text-*-right Обозначает текст с выравниванием по правому краю на малых, средних, больших или XLarge экранах
.text-justify Обозначает обоснованный текст
.text-monospace Текст с интервалом
.text-nowrap Обозначает отсутствие текста переноса
.text-lowercase Обозначает текст в нижнем регистре
.text-uppercase Указывает верхний текст
.text-capitalize Обозначает текст с прописными буквами
.initialism Отображение текста внутри <abbr> элемента в немного меньшем размере шрифта
.list-unstyled Удаляет стандартный стиль списка и левое поле для элементов списка (работает на обоих <ul> и <ol> ). Этот класс применяется только к элементам списка непосредственных дочерних элементов (чтобы удалить стиль списка по умолчанию из любых вложенных списков, примените этот класс ко всем вложенным спискам)
.list-inline Размещение всех элементов списка в одной строке (используется вместе с
.list-inline-item на каждом <li> Элементами)
.pre-scrollable Делает <pre> элемент прокручиваемым

Полный Bootstrap 4 CSS Ссылка

Для полного справочника всех классов CSS, доступных в Bootstrap 4, посетите наш
Bootstrap 4 все классы ссылка.

Введение. Начало работы · Bootstrap. Версия v4.0.0

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



Быстрый старт


Хотите использовать Bootstrap в своем проекте? Bootstrap – библиотека шаблонов CSS, распространяемая свободно командой сайта MaxCDN. Нужна система управления пакетами или исходники Bootstrap? Посетите страницу загрузок.



CSS


Вставьте этот кусок кода в <head>, перед всеми прочими файлами CSS, для загрузки Bootstrap.


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

JS


Многие из наших компонентов требуют использования JavaScript. Точнее — им требуются jQuery, Popper.js и наши собственные плагины. Для активации плагинов разместите следующий кусок кода <script> в конце страниц, прямо перед закрывающим </body>. Сперва jQuery , потом Popper.js, потом наши.

Мы используем мини-сборку jQuery, но и полную можно использовать.


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh5U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Любопытно, какие компоненты явно требуют jQuery, наших JS и Popper.js? Нажмите ссылку «Показать компоненты» ниже. Если вы не уверены в том, как правильно написать «коренную» структуру страницы, можете использовать наши шаблоны.



Показать компоненты, требующие JavaScript

  • Уведомления отмены
  • Кнопки изменения состояний и чекбоксов/»радио»
  • Карусель для поведения «слайд», элементы контроля и индикаторы
  • Коллапс для изменения видимости содержимого
  • Выпадающие элементы для отображения и расположения (также требует Popper.js)
  • Модальные окна для отображения, расположения и создания поведения прокрутки
  • Навбар для расширения нашего плагина коллапса для придания отзывчивого поведения
  • Выплывающие подсказки и окна для отображения и расположения (также требует Popper.js)
  • Отслеживание прокрутки и обновления навигации

Начальный шаблон страницы


Удостоверьтесь, что ваши страницы сверстаны по новейшим стандартам. Они должны включать и использовать HTML5 doctype и viewport meta tag для правильного «отзывчивого» поведения страниц. Вот как должен выглядеть «верхний», коренной код страницы:


<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h2>Hello, world!</h2>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh5U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Это все, что вам нужно из общих требований к странице. Посетите Обзорный раздел или наши официальные примеры для создания контента и компонентов вашего сайта.


Важные глобальные атрибуты


Bootstrap включает некоторые глобальные стили и настройки, о которых вам необходимо знать при работе с ним; все эти стили и настройки почти полностью имеют дело с и «заточены» под нормализацию кроссбраузерных стилей.


HTML5 doctype


Bootstrap требует использования doctype «HTML5». Без него у вас возникнут некоторые проблемы со стилями.


<!DOCTYPE html>
<html lang="en">
  ...
</html>

«Отзывчивый» мета-тэг


Bootstrap разрабатывался как mobile first, т.е. его настройки прежде всего оптимизированы под мобильные устройства, а уж потом с помощью медиа-запросов мы подгоняем масштаб компонентов как нам необходимо на прочих устройствах. Вставьте этот кусок кода в <head>:


<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Вы можете посмотреть пример этого в действии на странице starter template.


Размер ширины и высоты элемента


Для большей простоты масштабирования в CSS мы изменяем глобальное значение box-sizing с content-box на border-box. Это гарантирует, что padding не будет влиять на конечную вычисленную ширину элемента; однако может создать проблемы для сторонних приложений, таких как Google Maps или поисковой движок Google.


В том редком случае, когда вам надо преодолеть эти возможные баги, делайте так:


.selector-for-some-widget {
  box-sizing: content-box;
}

С использованием фрагмента кода, приведенного выше, вложенные элементы – включая сгенерированный через :before и :after контент – будут все наследовать заданный box-sizing для класса .selector-for-some-widget.


Узнайте больше о блоковой модели и параметризации размеров на CSS Tricks.


«Ребут» (новая библиотека CSS, не использующая классов, обеспечивающая «модульный подход»)


Для улучшенной кроссбраузерной визуализации мы применили «Ребут», обеспечивающий более продвинутые «сбросы стилей» для элементов HTML для коррекции мелких багов в браузерах и девайсах.




Оставайтесь в курсе последних новостей Bootstrap и вливайтесь в сообщество Bootstrap с помощью этих ресурсов:


  • @getbootstrap on Twitter.
  • The Official Bootstrap Blog.
  • the official Slack room.
  • Чат с камрадами по Bootstrap. Канал ##bootstrap на сервере irc.freenode.net.
  • Помощь в реализации Bootstrap 4 на Stackoverflow bootstrap-4).
  • При разработке через npm или аналогичные депозитарии, разработчикам следует использовать ключевое слово bootstrap в своих пакетах и библиотеках для максимальной видимости.

Вы также можете присоединиться @getbootstrap on Twitter для получения «свежайших» слухов и классных музыкальных клипов.



Bootstrap 4 Учебник


Попробуйте сами Примеры

Это руководство по Bootstrap 4 содержит сотни примеров Bootstrap 4.

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

Bootstrap 4, пример

Мой первый бутстрап
Страница
Измените размер этой адаптивной страницы, чтобы увидеть эффект!

Столбец 1

Lorem ipsum
долор..

Столбец 2

Lorem ipsum
dolor ..

Колонка 3

Lorem ipsum
dolor ..

Попробуй сам »

Нажмите кнопку «Попробуйте сами», чтобы увидеть, как это работает.



Bootstrap 3 и Bootstrap 4

Bootstrap 4 — новейшая версия Bootstrap; с новыми компонентами, более быстрой таблицей стилей и большей отзывчивостью.

Bootstrap 4 поддерживает последние стабильные версии всех основных браузеров и
платформы. Однако Internet Explorer 9 и более ранние версии не поддерживаются.

Если вам требуется поддержка IE8-9, используйте Bootstrap 3. Это самый
стабильная версия Bootstrap, и она по-прежнему поддерживается командой для исправления критических ошибок и изменений документации. Однако новые функции НЕ будут добавлены в
Это.

Перейти к Bootstrap 3 »


Базовый шаблон Bootstrap 4

Мы создали адаптивный стартовый шаблон с помощью Bootstrap 4.Вы можете изменять, сохранять, публиковать и использовать его в своих проектах:


Ссылки на Bootstrap

Полный список всех CSS-классов Bootstrap 4 с описанием и примерами:

Если вы хотите сделать больше с компонентами Bootstrap, ознакомьтесь с полным справочником Bootstrap 4 JavaScript / jQuery — все с примерами «Попробуйте сами»:


Bootstrap 4 упражнения


Тест-тест Bootstrap 4

Проверьте свои навыки Bootstrap 4 в W3Schools!

Начать тест на Bootstrap 4!


Знаете ли вы?

W3.CSS — отличная альтернатива Bootstrap 4.

W3.CSS меньше, быстрее и проще в использовании.

Если вы хотите изучить W3.CSS, перейдите на наш W3.CSS
Руководство.

Bootstrap 4 Начало работы


Что такое Bootstrap?

  • Bootstrap — это бесплатная интерфейсная среда для более быстрой и простой веб-разработки
  • Bootstrap включает шаблоны дизайна на основе HTML и CSS для типографики, форм, кнопок, таблиц, навигации, модальных окон, каруселей изображений и многого другого, а также дополнительные плагины JavaScript.
  • Bootstrap также дает вам возможность легко создавать адаптивные дизайны.

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

Адаптивный веб-дизайн — это создание веб-сайтов, которые автоматически настраиваются
сами по себе, чтобы хорошо выглядеть на всех устройствах, от маленьких телефонов до больших настольных компьютеров.

Bootstrap 4, пример

Мой первый бутстрап
Страница
Измените размер этой адаптивной страницы, чтобы увидеть эффект!

Столбец 1

Lorem ipsum
dolor ..

Колонка 2

Lorem ipsum
dolor ..

Колонка 3

Lorem ipsum
долор..

Попробуй сам »


Bootstrap 3 и Bootstrap 4

Bootstrap 4 — новейшая версия Bootstrap; с новыми компонентами, более быстрой таблицей стилей и большей отзывчивостью.

Bootstrap 4 поддерживает последние стабильные версии всех основных браузеров и
платформы. Однако Internet Explorer 9 и более ранние версии не поддерживаются.

Если вам требуется поддержка IE8-9, используйте Bootstrap 3. Это самый
стабильная версия Bootstrap, и она по-прежнему поддерживается командой для исправления критических ошибок и изменений документации.Однако в
Это.

Поддержка удаленных значков : Bootstrap 4 не поддерживает глификоны BS3. Вместо этого используйте Font-Awesome или другие библиотеки значков.


Зачем использовать Bootstrap?

Преимущества бутстрапа:

  • Простота использования: Любой, кто имеет базовые знания HTML и CSS, может начать использовать Bootstrap
  • Адаптивные функции: Адаптивный CSS Bootstrap подстраивается под телефоны, планшеты и настольные компьютеры
  • Подход, ориентированный на мобильные устройства: В Bootstrap стили, ориентированные на мобильные устройства, являются частью базовой структуры
  • Совместимость с браузером: Bootstrap 4 совместим со всеми современными браузерами (Chrome, Firefox, Internet Explorer 10+, Edge, Safari и Opera)

Где взять Bootstrap 4?

Есть два способа начать использовать Bootstrap 4 на вашем собственном веб-сайте.

Вы можете:

  • Включить Bootstrap 4 из CDN
  • Загрузите Bootstrap 4 с сайта getbootstrap.com


Бутстрап 4 CDN

Если вы не хотите загружать и размещать Bootstrap 4 самостоятельно, вы можете включить его из CDN (сети доставки контента).

MaxCDN обеспечивает поддержку CDN для CSS и JavaScript Bootstrap. Вы также должны включить jQuery:

MaxCDN:




Одно из преимуществ использования Bootstrap 4 CDN:
Многие пользователи уже загрузили
Bootstrap 4 от MaxCDN при посещении
другой сайт.В результате он будет загружен из кеша при посещении вашего сайта, что приведет к сокращению времени загрузки.
Кроме того, большинство CDN гарантируют, что после того, как пользователь запросит у него файл, он будет обработан.
с ближайшего к ним сервера, что также сокращает время загрузки.

jQuery и Поппер?
Bootstrap 4 использует jQuery и Popper.js для
Компоненты JavaScript (например, модальные окна, всплывающие подсказки, всплывающие окна и т. Д.). Однако, если вы просто используете
CSS часть Bootstrap, они вам не нужны.

Показать компоненты, требующие jQuery »

  • Закрытые оповещения
  • Кнопки и флажки / переключатели для переключения состояний
  • Карусель для слайдов, элементов управления и индикаторов
  • Свернуть для переключения содержимого
  • Выпадающие списки (для идеального позиционирования также требуется Popper.js)
  • Модальные окна (открыть и закрыть)
  • Navbar (для складных меню)
  • Всплывающие подсказки и всплывающие окна (для идеального позиционирования также требуется Popper.js)
  • Scrollspy для поведения прокрутки и обновлений навигации


Загрузка Bootstrap 4

Если вы хотите загрузить и разместить Bootstrap 4 самостоятельно, перейдите по ссылке
https: // getbootstrap.com /,
и следуйте инструкциям там.


Создание первой веб-страницы с помощью Bootstrap 4

1. Добавьте тип документа HTML5

Bootstrap 4 использует элементы HTML и свойства CSS, требующие
тип документа HTML5.

Всегда включайте тип документа HTML5 в начало
страница вместе с атрибутом lang и правильным набором символов:






2.Bootstrap 4 предназначен для мобильных устройств

Bootstrap 4 разработан для работы с мобильными устройствами. Стили, ориентированные на мобильные устройства:
часть основной структуры.

Чтобы обеспечить правильный рендеринг и сенсорное масштабирование, добавьте следующий тег внутри
элемент:

Часть width = device-width устанавливает ширину страницы, соответствующую ширине экрана.
устройства (который зависит от устройства).

Часть initial-scale = 1 устанавливает начальный уровень масштабирования при первой загрузке страницы
браузером.

3. Контейнеры

Bootstrap 4 также требует наличия содержащего элемента для обертывания содержимого сайта.

Есть два класса контейнеров на выбор:

  1. Класс .container предоставляет отзывчивый контейнер фиксированной ширины
  2. Класс .container-fluid предоставляет контейнер полной ширины , охватывающий всю ширину окна просмотра

Две базовые страницы начальной загрузки, 4 страницы

В следующем примере показан код для базовой страницы Bootstrap 4 (с адаптивным контейнером фиксированной ширины):

Пример контейнера

Бутстрап
4 Пример

Моя первая страница начальной загрузки

Это текст.


Попробуй сам »

В следующем примере показан код для базовой страницы Bootstrap 4 (с контейнером полной ширины):

Пример жидкости в контейнере

Бутстрап
4 Пример

Моя первая страница начальной загрузки

Это текст.


Попробуй сам »

Bootstrap 4 кнопки


Стили кнопок

Bootstrap 4 предоставляет разные стили кнопок:

Базовый
Начальный
Вторичный
Успех
Информация
Предупреждение
Опасность
Темный
Свет
Ссылка на сайт

Пример










Попробуй сам »

Классы кнопок могут использоваться на ,

< input type = "submit" value = "Кнопка отправки">

Попробуй сам »

Почему мы добавляем # в атрибут href ссылки?

С
у нас нет страницы, на которую можно было бы ссылаться, и мы не хотим получать «404»
сообщение, мы помещаем # как ссылку.В реальной жизни это, конечно, должен быть реальный URL-адрес страницы «Поиск».


Контур кнопки

Bootstrap 4 предоставляет восемь кнопок с контуром / рамкой:

Начальный
Вторичный
Успех
Информация
Предупреждение
Опасность
Темный
Свет

Пример








Попробуй сам »



Размеры кнопок

Используйте .btn-lg class для больших кнопок или .btn-sm class для маленьких кнопок:

Большой
Дефолт
Небольшой

Пример



Попробуй сам »


Кнопки уровня блокировки

Добавьте класс .btn-block для создания кнопки уровня блока
который охватывает всю ширину родительского элемента.

Кнопка полной ширины

Пример

Попробуй сам »


Активные / отключенные кнопки

Кнопка может быть установлена ​​в активное (кажется нажатым) или отключенное (не кликабельное) состояние:

Активный первичный
Отключено Основное

Класс .active заставляет кнопку появляться
нажата, а атрибут отключен, атрибут
делает кнопку неактивной.Обратите внимание, что элементы не поддерживают отключенные
атрибут и поэтому должен использовать класс .disabled , чтобы он выглядел визуально
отключен.

Пример



Disabled Link

Попробуй сам »


Поворотные кнопки

Вы также можете добавить «спиннеры» к кнопке, о чем вы узнаете больше в нашем руководстве по BS4 Spinners:

Загрузка..

Загружается ..

Загружается ..

Пример

<кнопка отключена>

Загрузка ..

Попробуй сам »

Bootstrap 3 Учебник


Попробуйте сами Примеры

Этот учебник Bootstrap содержит сотни примеров Bootstrap.

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

Пример начальной загрузки

My First Bootstrap Page
Измените размер этой адаптивной страницы, чтобы увидеть эффект!

Столбец 1

Lorem ipsum
dolor ..

Колонка 2

Lorem ipsum
долор..

Столбец 3

Lorem ipsum
dolor ..

Попробуй сам »

Нажмите кнопку «Попробуйте сами», чтобы увидеть, как это работает.



Упражнения начальной загрузки


Тест-тест начальной загрузки

Проверьте свои навыки Bootstrap в W3Schools!

Начать тест по начальной загрузке!


Ссылки на Bootstrap

На W3Schools вы найдете полную справку по Bootstrap для всех классов CSS,
Компоненты и плагины JavaScript — все с примерами «Попробуйте сами»:


Темы / шаблоны начальной загрузки

Мы создали несколько шаблонов начальной загрузки, с которыми вы можете поиграть.Их можно использовать совершенно бесплатно:


Bootstrap 3 и Bootstrap 4

Bootstrap 4 — новейшая версия Bootstrap; с новыми компонентами, более быстрой таблицей стилей и большей отзывчивостью.

Bootstrap 4 поддерживает последние стабильные версии всех основных браузеров и
платформы. Однако Internet Explorer 9 и более ранние версии не поддерживаются.

Если вам требуется поддержка IE8-9, используйте Bootstrap 3. Это самый
стабильная версия Bootstrap, и она по-прежнему поддерживается командой для исправления критических ошибок и изменений документации.Однако в
Это.

Перейти к Bootstrap 4 »


Знаете ли вы?

W3.CSS — отличная альтернатива Bootstrap.

W3.CSS меньше, быстрее и проще в использовании.

Если вы хотите изучить W3.CSS, перейдите на наш W3.CSS
Руководство.

Введение · Bootstrap v5.0

Быстрый старт

Хотите быстро добавить Bootstrap в свой проект? Используйте jsDelivr, бесплатную CDN с открытым исходным кодом.Используете менеджер пакетов или вам нужно скачать исходные файлы? Перейдите на страницу загрузок.

CSS

Скопируйте и вставьте таблицу стилей в ваш перед всеми другими таблицами стилей для загрузки нашего CSS.

  
  

СП

Многие из наших компонентов требуют использования JavaScript для работы.В частности, для них требуются наши собственные плагины JavaScript и Popper. Поместите один из следующих

Отдельно

Если вы решите использовать отдельные скрипты, сначала должен быть Popper (если вы используете всплывающие подсказки или всплывающие подсказки), а затем наши плагины JavaScript.

  

  
Модули

Если вы используете ->

Следующие шаги см. В документации по макету или в наших официальных примерах, чтобы начать размещение содержимого и компонентов вашего сайта.

Важные глобалы

Bootstrap использует несколько важных глобальных стилей и настроек, о которых вам нужно знать при его использовании. Все они почти исключительно ориентированы на нормализацию кроссбраузерных стилей. Давайте нырнем.

HTML5 doctype

Bootstrap требует использования документа типа HTML5. Без него вы увидите несколько забавных незавершенных стилей, но его включение не должно вызывать каких-либо серьезных сбоев.

  

  ...

  

Адаптивный метатег

Bootstrap разработан mobile first , стратегия, в которой мы сначала оптимизируем код для мобильных устройств, а затем масштабируем компоненты по мере необходимости с помощью медиа-запросов CSS. Чтобы обеспечить правильный рендеринг и сенсорное масштабирование для всех устройств, добавьте метатег адаптивного окна просмотра к вашему .

  
  

Вы можете увидеть пример этого в действии в начальном шаблоне.

Размер коробки

Для более простого изменения размеров в CSS мы переключаем глобальное значение box-sizing с content-box на border-box . Это гарантирует, что заполнение не влияет на окончательную вычисленную ширину элемента, но может вызвать проблемы с некоторым сторонним программным обеспечением, таким как Карты Google и Система пользовательского поиска Google.

В редких случаях, когда вам нужно отменить его, используйте что-то вроде следующего:

 .selector-for-some-widget {
  размер коробки: коробка содержимого;
}
  

В приведенном выше фрагменте все вложенные элементы, в том числе сгенерированный контент через :: before и :: after , унаследуют заданный размер блока для этого .selector-for-some-widget .

Узнайте больше о блочной модели и ее размерах на сайте CSS Tricks.

Перезагрузка

Для улучшения кроссбраузерного рендеринга мы используем Reboot, чтобы исправить несоответствия между браузерами и устройствами, обеспечивая при этом несколько более самоуверенный сброс общих элементов HTML.

Будьте в курсе развития Bootstrap и обращайтесь к сообществу с помощью этих полезных ресурсов.

  • Прочтите официальный блог Bootstrap и подпишитесь на него.
  • Присоединяйтесь к официальной комнате Slack.
  • Общайтесь с другими загрузчиками в IRC. На сервере irc.libera.chat в канале #bootstrap .
  • Справку по реализации можно найти на сайте Stack Overflow (с тегом bootstrap-5 ).
  • Разработчики должны использовать ключевое слово bootstrap в пакетах, которые изменяют или добавляют функциональность Bootstrap при распространении через npm или аналогичные механизмы доставки для максимальной обнаруживаемости.

Вы также можете подписаться на @getbootstrap в Твиттере, чтобы следить за последними сплетнями и потрясающими музыкальными клипами.

Простое руководство по загрузке | Toptal

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

Bootstrap - это мощный набор инструментов, представляющий собой набор инструментов HTML, CSS и JavaScript для создания и создания веб-страниц и веб-приложений.Это бесплатный проект с открытым исходным кодом, размещенный на GitHub и изначально созданный (и для) Twitter.

Итак, зачем изучать Boostrap?

После выпуска с открытым исходным кодом в 2011 году Bootstrap очень быстро стал популярным, и не без причины. Веб-дизайнеры и веб-разработчики любят Bootstrap, потому что он гибок и с ним легко работать. Его основные преимущества заключаются в том, что он адаптивен по дизайну, поддерживает широкую совместимость с браузерами, предлагает согласованный дизайн с использованием повторно используемых компонентов, а также очень прост в использовании и быстро обучается.Он предлагает широкую расширяемость с использованием JavaScript, поставляется со встроенной поддержкой плагинов jQuery и программным API JavaScript. Bootstrap можно использовать с любой IDE или редактором, а также с любой серверной технологией и языком, от ASP.NET до PHP и Ruby on Rails.

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

Начало работы с Bootstrap Basics

Bootstrap доступен в двух формах; как предварительно скомпилированную версию, так и как версию исходного кода. Версия с исходным кодом использует препроцессор Less CSS, но если вам больше нравится Sass, также доступен официальный порт Sass для Bootstrap. Чтобы упростить использование префиксов поставщиков CSS, Bootstrap использует Autoprefixer.

Версия исходного кода включает исходный код стилей, написанный на Less (или Sass), весь JavaScript и сопроводительную документацию.Это позволяет более амбициозным дизайнерам и разработчикам изменять и настраивать по своему усмотрению все предоставленные стили и создавать свою собственную версию Bootstrap. Но если вы не знакомы с Less (или Sass) или просто не заинтересованы в изменении исходного кода, не волнуйтесь. Вы можете просто использовать предварительно скомпилированный ванильный CSS. Позже все стили можно переопределить, используя собственные стили.

Структура файла

Мы остановимся на предварительно скомпилированной версии, которую можно скачать здесь.Когда вы загружаете zip-архив и распаковываете его, основная файловая структура выглядит так:

  бутстрап /
├── css /
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js /
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── шрифты /
    ├── глификоны-халфлинги-regular.eot
    ├── глификоны-халфлинги-regular.svg
    ├── глификоны-халфлинги-regular.ttf
    ├── глификоны-халфлинги-правильные.woff
    └── глификоны-халфлинги-regular.woff2
  

Структура Bootstrap довольно проста и не требует пояснений. Он включает предварительно скомпилированные файлы, которые позволяют быстро использовать в любом веб-проекте. Помимо скомпилированных и минифицированных файлов CSS и JS, он также включает шрифты из Glyphicons и необязательную стартовую тему Bootstrap.

Эту структуру можно легко включить в файловую структуру вашего собственного проекта, просто включив файлы Bootstrap в том виде, в котором они находятся в zip-архиве, или, если это лучше подходит для вашего проекта, вы можете изменить порядок этих файлов и разместить их в любом месте.Просто убедитесь, что папка шрифтов Glyphicons находится на том же уровне, что и папка CSS.

Базовый шаблон HTML для начальной загрузки

Базовый HTML-шаблон Bootstrap должен выглядеть примерно так:

  

  
    
    
    
     Шаблон начальной загрузки 
    <ссылка href = "css / bootstrap.min.css "rel =" таблица стилей ">
  
  
    

Привет, мир!

Важно начинать любой HTML с объявления HTML 5 Doctype, чтобы браузеры знали, какой документ они могут ожидать. Заголовок содержит три важных тега , которые должны быть объявлены первыми, а любые дополнительные теги заголовка должны быть добавлены после них.Если вы хотите поддерживать старые браузеры, такие как IE8, вы также можете включить прокладку HTML 5 в заголовок, которая позволит использовать элементы HTML5 в старых браузерах, и Respond.js, который будет выполнять полифиллинг CSS3 Media Queries в старых версиях Интернета. Explorer.

  
  ...
  
    
    
  

  

Хотя это не очень важно, если вы ориентируетесь только на современные браузеры.

файлов JavaScript добавляются в конец тела, чтобы веб-страница загружалась визуально до того, как будет выполнен какой-либо JavaScript. jQuery необходим для плагинов Bootstrap, и его необходимо загрузить до bootstrap.js . Если вы не используете какие-либо интерактивные функции Bootstrap, вы также можете исключить эти файлы из источника.

Это минимум, необходимый для запуска и работы базовой разметки Bootstrap. Если вы разработчик, вы, вероятно, захотите взглянуть на более сложные примеры на странице примеров Bootstrap.Если вы дизайнер или просто ищете вдохновения, Bootstrap Expo демонстрирует сайты, созданные с использованием Bootstrap. Как мы увидим позже, каждую часть Bootstrap можно легко настроить с помощью CSS. Но если это не для вас, и вы ищете немного другой внешний вид по сравнению с предварительно упакованными темами Bootstrap, существует множество бесплатных тем с открытым исходным кодом и премиальных тем, доступных из таких источников, как Bootswatch и WrapBootstrap.

Шаблоны начальной загрузки и компоненты пользовательского интерфейса

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

Многие из них используют расширения JavaScript и плагины jQuery.

Эти шаблоны Bootstrap доступны в виде хорошо продуманных классов CSS, которые вы можете применять к своему HTML для достижения различных эффектов. Это делает использование Bootstrap очень удобным. Используя имена семантических классов, такие как .success , .warning и .info , эти компоненты легко повторно использовать и расширять. Но хотя Bootstrap использует описательные имена классов, которые имеют значение, в нем нет конкретных деталей реализации. Все классы можно переопределить с помощью настраиваемого стиля и цвета CSS, при этом значение класса останется прежним.

Сеточная система начальной загрузки

Прежде чем мы углубимся в компоненты и шаблоны дизайна Bootstrap, важно упомянуть одну из основных функций, которые Bootstrap представил в версии 3: философию дизайна, ориентированную на мобильные устройства, результатом которой стал адаптивный дизайн Bootstrap.Конечным результатом является то, что Bootstrap легко и эффективно масштабируется с помощью единой базы кода, от телефонов, планшетов до настольных компьютеров.

Эта отзывчивость достигается с помощью гибкой системы сеток Bootstrap, которую можно применять для соответствующего масштабирования до 12 столбцов в соответствии с размером устройства или области просмотра. Сетки обеспечивают структуру макета, определяя горизонтальные и вертикальные направляющие для размещения содержимого и обеспечения полей. Сетки также предлагают интуитивно понятную структуру для зрителей, потому что им легко следить за потоком контента слева направо или справа налево, перемещающимся вниз по странице.До появления сеток и до того, как CSS был настолько мощным, макеты на основе сеток создавались с помощью таблиц, в которых содержимое располагалось внутри ячеек таблицы. По мере того, как CSS становился более зрелым, начал появляться ряд CSS-фреймворков для макетов на основе сетки. К ним относятся сетки YUI, 960 GS и чертежи, и это лишь некоторые из них.

Чтобы использовать систему сеток Bootstrap, необходимо соблюдать несколько правил. Элементы столбцов сетки размещаются внутри элементов строк, которые создают горизонтальные группы столбцов. На странице может быть столько строк, сколько нужно, но столбцы должны быть непосредственными дочерними элементами строк.В полной строке ширина столбца будет любой комбинацией, которая в сумме составляет 12, но не обязательно использовать все 12 доступных столбцов.

Строки

необходимо разместить либо в оболочке макета фиксированной ширины, которая имеет класс .container и ширину 1170 пикселей, либо в оболочку макета полной ширины, которая имеет класс .container-fluid и который включает отзывчивое поведение в этой строке.

Сетка Bootstrap имеет четыре уровня классов: xs для телефонов (<768 пикселей), sm для планшетов (≥768 пикселей), md для настольных компьютеров (≥992 пикселей) и lg для больших настольных компьютеров (≥ 1200 пикселей).Они в основном определяют размеры, при которых столбцы будут сжиматься или распространяться по горизонтали. Уровни классов можно использовать в любой комбинации для получения динамических и гибких макетов.

Например, если мы хотим получить две строки, одну с двумя столбцами и одну с четырьмя столбцами, мы могли бы написать:

  
Первый столбец
Второй столбец
Первый столбец
Второй столбец
Третий столбец
Четвертый столбец

Мы также можем использовать столбцы различной ширины:

  
Более широкий столбец
Меньший столбец

Мы можем даже сдвигать столбцы, используя смещение, например, для создания более узкого и центрированного содержимого:

  
Центрированный столбец

Столбцы могут быть вложенными.Может быть менее 12 столбцов, и, как упоминалось выше, мы можем выбрать столбцы фиксированной или полной ширины, используя обертки .container или .container-fluid соответственно.

  
Родительский столбец фиксированной ширины
Вложенный столбец
Вложенный столбец
Жидкость..
.. и во всю ширину ..
.. пример

Если мы объединим разные уровни классов, мы получим разный вид на мобильных и настольных компьютерах. В приведенном ниже примере на рабочем столе будет 4 столбца в строке, а на мобильном устройстве они будут иметь полную ширину и располагаться друг над другом.

  
.col-xs-12 .col-md-3
.col-xs-12 .col-md-3
.col-xs-12 .col-md-3
.col-xs-12 .col-md-3

Можно полностью отключить отзывчивость страницы. Это в основном отключит аспекты «мобильного сайта» Bootstrap. Просто имейте в виду, что если вы отключите отзывчивость, любой компонент фиксированной ширины, например фиксированная панель навигации, не будет виден, когда область просмотра станет уже, чем содержимое страницы. Для неотзывчивого контейнера это означает ширину 970 пикселей. Также в этом случае панели навигации не будут сворачиваться в мобильных представлениях, как описано ниже.

Это только основные примеры. Чтобы увидеть весь потенциал сеток, ознакомьтесь с документацией Bootstrap Grids.

Типографика начальной загрузки

Начинающие разработчики часто предполагают, что их чистый HTML без стилей будет выглядеть одинаково во всех браузерах. К сожалению, в каждом браузере есть собственная таблица стилей «пользовательского агента» по умолчанию, которая применяется к HTML, и нет двух браузеров с одинаковыми значениями по умолчанию. Например, размеры шрифтов заголовков не согласованы в браузерах, в некоторых неупорядоченных и упорядоченных списках оставлены поля, а в других - отступы, браузеры применяют настраиваемые границы и отступы к телу HTML, и даже кнопки отображаются по-разному в разных браузерах.Чтобы устранить все эти несоответствия, были созданы различные правила «сброса» CSS, которые определяют согласованные стили по умолчанию.

Bootstrap, помимо чистого сброса CSS, предлагает еще несколько полезных вещей. Он поставляется с normalize.css, готовой для HTML5 альтернативой сбросу CSS, а также имеет несколько хорошо продуманных собственных значений по умолчанию. Например, Bootstrap устанавливает глобальный размер шрифта по умолчанию на 14 пикселей с высотой строки 1,428. Шрифт по умолчанию изменен на Helvetica / Arial с резервным шрифтом без засечек.Все эти стили применяются к и всем абзацам с добавлением того, что

(абзацы) получают нижнее поле, равное половине их вычисленной высоты строки (по умолчанию 10 пикселей). Помимо этих значений по умолчанию, существуют также настраиваемые стили для стандартных тегов HTML, которые обеспечивают большую согласованность текста, например выделенный текст ( ), удаленный текст ( и ), подчеркнутый текст ( ), мелкий текст ( ) и полужирный текст ( ).Классы выравнивания помогают упорядочить контент на странице с помощью классов .text-left , .text-center , .text-right , .text-justify и .text-nowrap . Существуют также предопределенные стили для блочных кавычек, неупорядоченный и упорядоченный список со встроенными параметрами, и это лишь некоторые из них. Чтобы получить полный список, перейдите на страницу Bootstrap Typography.

Одна интересная вещь, которую также делает возможной Bootstrap, заключается в том, что вы можете использовать, например, стили заголовков с помощью тега

или .h2 кл. Последний будет соответствовать стилю заголовка

, но позволит отображать текст в строке.

Формы

Формы

прошли долгий путь за долгие годы, и сегодня использование веб-форм является одним из наиболее распространенных действий, выполняемых при просмотре веб-страниц. В то время как HTML5 представил ряд новых атрибутов форм, типов ввода и других вспомогательных элементов, браузеры не сильно улучшили визуально формы. Это одна из областей, в которой Bootstrap действительно выделяется, потому что выравнивание и стилизация меток и входных данных, проверка форм и отображение сообщений об ошибках могут быть сложными без какой-либо помощи.

Во-первых, Bootstrap устанавливает для всех текстовых элементов ввода, таких как ,