Простое руководство по использованию Bootstrap
Bootstrap - это фреймворк CSS и Javascript / jQuery с предустановленными дизайнами css и Javascript, которые назначаются определенным именам классов. Содержимое размещается на основе сетки из 12 столбцов, затем свойства CSS вызываются путем присвоения имен тегам html определенному классу.
Bootstrap позволяет быстрее создавать и создавать прототипы, поскольку для этого требуются только имена классов в HTML.
Настройка Bootstrap
- cd в папку на рабочем месте, затем введите команду ниже в терминале (Mac), чтобы установить bootstrap с использованием пакета npm для приложений node.js.
$ npm install bootstrap
2. Свяжите документ Bootstrap CSS, а затем ссылку на пользовательский style.css, чтобы персонализировать наш дизайн в <head>
части нашего HTML-документа. Добавьте ссылку на Bootstrap Javascript перед закрывающим тегом </body>
.
Использование сетки из 12 столбцов Bootstrap для размещения содержимого
- Назовите класс внутри HTML от
<tag>
доcontainer
, чтобы установить размер внутренней сетки на максимальную ширину страницы. - Создайте строку, присвоив классу внутри HTML
<tag>
имяrow
. - Создавайте столбцы с желаемым размером экрана и диапазоном столбцов. В этом примере на экране среднего размера каждый контент 1 и 2 охватывает 6 столбцов, что равняется 12 столбцам. Для базового Bootstrap не требуется Media Query.
Попробуйте проверить элемент, чтобы увидеть исходный HTML и имена классов на основе CSS-фреймворка Bootstrap.
Как стилизовать панель навигации с помощью Bootstrap
- Создайте тег навигации в HTML с классом, равным панели навигации. Navbar-default устанавливает свойство CSS по умолчанию, а navbar-static-top позиционирует панель навигации статично вверх.
<nav class="navbar navbar-default navbar-static-top">
2. Создайте div с именем класса контейнера, чтобы иметь панель навигации максимальной ширины.
<div class="container">
3. Внутри контейнера создайте div с классом nav-header и тегом <a>
с классом navbar-brand, чтобы логотип возвращался на домашнюю страницу.
<div class="navbar-header"> <a class="navbar-brand" href="#">logo or <img> tag</a>
4. Чтобы раскрывающееся меню располагалось справа от панели навигации, создайте неупорядоченный список со следующими классами:
<div class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" role="button">Products</a> <ul class="dropdown-menu"> <li><a href="#">option 1</a></li> ...
Наконец, если вы хотите персонализировать свою страницу, используйте базовый CSS, связав собственный style.css, чтобы привязать свойства к тегам, классам и идентификаторам html.
Дополнительную информацию можно найти в документации по начальной загрузке: https://getbootstrap.com/
Другой пример основ начальной загрузки на Codepen: https://codepen.io/taniarascia/pen/yYQYpO#0
Используйте плагин Bootstrap 4 для кода Visual Studio, чтобы помочь с классами
Если у вас есть вопросы или комментарии, напишите мне:
[email protected]