Bootstrap web programming
 Скачать 1.82 Mb.
|
Bootstrapweb programmingBootstrapBuild responsive , mobile first projects on the web with the world’s most popular front-end component library .Bootstrap is an open source toolkit for developing with HTML, CSS and JS.20 Gorgeous Sites Built with Twitter Bootstraphttps://www.creative-tim.com/blog/web-design/sites-built-with-twitter-bootstrap/прочитать документациюhttps://getbootstrap.com/docs/5.1/getting-started/introduction/#bundleBootstrap 5 ориентирован прежде всего на мобильные устройства.Bootstrap 5 разработан, чтобы реагировать на мобильные устройства. Стили, ориентированные на мобильные устройства, являются частью базовой платформы.Чтобы обеспечить правильный рендеринг и масштабирование касанием, добавьте в элемент следующий тег :width=device-width Часть задает ширину страницы , чтобы следить за экраном на ширину устройства (который будет варьироваться в зависимости от устройства).Эта initial-scale=1 часть устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.КонтейнерыBootstrap 5 также требует наличия содержащего элемента для обертывания содержимого сайта.На выбор предлагается два класса контейнеров:
Fixed ContainerИспользуйте этот .container класс для создания адаптивного контейнера фиксированной ширины.Обратите внимание, что его ширина ( max-width) будет меняться для разных размеров экрана:Fluid ContainerИспользуйте .container-fluid класс для создания контейнера полной ширины, который всегда будет охватывать всю ширину экрана ( width всегда 100%)Container PaddingПо умолчанию контейнеры имеют левое и правое заполнение, без верхнего или нижнего заполнения. Поэтому мы часто используем служебные программы для определения интервалов , такие как дополнительные отступы и поля, чтобы они выглядели еще лучше. Например, .pt-5 означает «добавить большой верхний отступ »Container Border and ColorДругие утилиты, такие как границы и цвета, также часто используются вместе с контейнерами:Responsive ContainersВы также можете использовать .container-sm|md|lg|xl классы, чтобы определить, когда контейнер должен реагировать.max-width Контейнера изменяется на различных размеров экрана / видовых:Grid SystemСистема сеток Bootstrap построена с использованием flexbox и позволяет размещать до 12 столбцов на странице.Если вы не хотите использовать все 12 столбцов по отдельности, вы можете сгруппировать столбцы вместе, чтобы создать более широкие столбцы:Grid ClassesВ сеточной системе Bootstrap 5 есть шесть классов:
Совет: Каждый класс масштабируется, поэтому, если вы хотите установить одинаковую ширину для sm и md, вам нужно только указать sm.Text/TypographyBootstrap 5 использует значение font-size по умолчанию 1rem (по умолчанию 16 пикселей), а его значение line-height- 1,5.Кроме того, у всех |
| Class | Description |
| .carousel | Создает карусель |
| .carousel-indicators | Добавляет индикаторы для карусели. Это маленькие точки внизу каждого слайда (которые показывают, сколько слайдов находится в карусели и какой слайд пользователь просматривает в данный момент) |
| .carousel-inner | Добавляет слайды в карусель |
| .carousel-item | Определяет содержимое каждого слайда |
| .carousel-control-prev | Добавляет левую (предыдущую) кнопку в карусель, которая позволяет пользователю возвращаться между слайдами |
| .carousel-control-next | Добавляет правую кнопку (далее) на карусель, которая позволяет пользователю перемещаться между слайдами |
| .carousel-control-prev-icon | Используется вместе с .carousel-control-prev для создания кнопки "предыдущий" |
| .carousel-control-next-icon | Используется вместе с .carousel-control-next для создания кнопки "далее" |
| .slide | Добавляет CSS-переход и анимационный эффект при переходе от одного элемента к другому. Удалите этот класс, если вы не хотите этого эффекта |
Add captions to slides
Добавьте элементы внутри каждого, чтобы создать заголовок для каждого слайда Bootstrap modal
Модальный компонент - это диалоговое / всплывающее окно, которое отображается поверх текущей страницы
Bootstrap 5 Scrollspy
Scrollspy используется для автоматического обновления ссылок в списке навигации в зависимости от положения прокрутки
Добавьте data-bs-spy="scroll"к элементу, который следует использовать в качестве прокручиваемой области (часто это элемент).
Затем добавьте data-bs-targetатрибут со значением идентификатора или именем класса панели навигации ( .navbar). Это необходимо для того, чтобы убедиться, что панель навигации связана с прокручиваемой областью. Обратите внимание, что прокручиваемые элементы должны соответствовать идентификатору ссылок внутри элементов списка навигационной панели ( совпадений ). Необязательный data-bs-offsetатрибут указывает количество пикселей, которые нужно сместить сверху при вычислении позиции прокрутки. Это полезно, когда вы чувствуете, что ссылки внутри навигационной панели меняют активное состояние слишком рано или слишком рано при переходе к прокручиваемым элементам. По умолчанию 10 пикселей. Offcanvas
Offcanvas аналогичен модальным окнам (по умолчанию скрыт и отображается при активации), за исключением того, что часто используется в качестве меню навигации на боковой панели.
.offcanvas Класс создает offcanvas боковую панель.
.offcanvas-start Класс позиционирует offcanvas, и делает его 400px в ширину. См. Примеры ниже, чтобы узнать о других классах позиционирования.
.offcanvas-title Класс обеспечивает соответствующие поля и высоту строки.
Затем добавьте свой контент в .offcanvas-body класс.
Чтобы открыть боковую панель offcanvas, вы должны использовать элемент
Чтобы открыть боковую панель offcanvas с элементом, вы можете указать на него #demoс помощью атрибута href вместо data-bs-target атрибута.
Используйте .offcanvas-start|end|top|bottomдля позиционирования вне холста слева, справа, сверху или снизу
Bootstrap forms
Все текстовые элементы и
чтобы создать заголовок для каждого слайда Обратите внимание, что прокручиваемые элементы должны соответствовать идентификатору ссылок внутри элементов списка навигационной панели (