Как создать стандартную панель навигации и кнопку Bootstrap для мобильных устройств
Опубликовано: 2022-02-16
Bootstrap — это фреймворк HTML, CSS и JavaScript. Используя его, вы можете легко создавать адаптивные веб-сайты для мобильных устройств. Он предлагает вам множество предустановленных стилей CSS для веб-элементов, включая панели навигации.
В этом уроке вы узнаете, как легко создать базовую адаптивную панель навигации Bootstrap. Затем вы узнаете, как использовать стандартную кнопку Bootstrap Navbar для мобильных устройств.
Чтобы иметь возможность использовать Bootstrap, вы должны сначала установить его. Для целей этого руководства вы можете установить его в любом месте на локальном ПК — это не обязательно должен быть веб-сервер. Давай сделаем это вместе.
Шаг 1. Скачать Bootstrap
- Перейдите на сайт getboostrap.com и нажмите кнопку «Загрузить Bootstrap»:
- На следующей странице «Начало работы» нажмите еще одну кнопку «Загрузить Bootstrap»:
- Сохраните этот файл в любом месте на жестком диске:
Шаг 2. Установите Bootstrap на свой локальный ПК
- Разархивируйте этот файл
- Переименуйте полученную папку в bootstrap
Шаг 3. Создайте базовый файл index.html
- В папке начальной загрузки создайте файл index.htm l со следующим кодом:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <h1>Trusthub</h1> <div class="row"> <div> <h2>What Trusthub can do for you</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p> </div> <div> <h2>Our Team</h2> <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.</p> </div> <div class="row"> <div class="col-md-3 col-xs-6"> <h3>Innovate</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Sustain</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Lead</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Inspire</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="/js/bootstrap.min.js"></script> </body> </html>Шаг №4. Создайте адаптивную панель навигации
- Прямо под открывающим блоком body создайте новый блок с классом контейнера Bootstrap:
<div class="container"><!-- Start navbar container div -->
- Нажмите Enter несколько раз, чтобы освободить пространство и закрыть этот новый div:
</div><!-- Finish navbar container div -->
- Внутри вашего нового контейнера div создайте тег nav для вашей новой панели навигации:
<nav class="navbar navbar-default">
- На клавиатуре нажмите клавишу Enter пару раз и закройте тег:
- Внутри тега nav создайте еще один контейнер div и начните создавать фактическое содержимое панели навигации:
<div class="container">
<div class="navbar-header"><!-- Start navbar-header -->
<a href="#" class="navbar-brand">Trusthub</a>
</div><!-- Finish navbar-header -->
</div>
- Удалите тег <h1> и его содержимое.
- Найдите, где закрывается ваш блок navbar-header, и прямо под ним создайте другой блок, еще без классов.
- Внутри этого div начните неупорядоченный список, содержащий фактические элементы вашей адаптивной панели навигации:
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
- Сохраните файл index.html.
- Откройте этот файл в своем браузере. Теперь вы должны увидеть свою отзывчивую панель навигации. Вы почти готовы сделать его стандартной мобильной панелью навигации. Прежде чем вы это сделаете, давайте немного улучшим его.
- Вернитесь к файлу index.html .
- В теге nav измените значение по умолчанию на inverse , чтобы получить следующий код:
<nav class="navbar navbar-inverse">
- Сохраните файл.
- Вернитесь на свой сайт и обновите страницу. Теперь ваша панель навигации выглядит немного лучше:
Отличная работа! Теперь ваша адаптивная панель навигации готова к дальнейшей работе.
Посмотрите видео ниже, чтобы узнать, как заменить только что созданную панель навигации стандартной кнопкой меню Bootstrap для мобильных пользователей.