Jak utworzyć standardowy pasek nawigacyjny i przycisk Bootstrap dla urządzeń mobilnych?
Opublikowany: 2022-02-16
Bootstrap to framework HTML, CSS i JavaScript. Korzystając z niego, możesz łatwo zbudować responsywne strony internetowe z myślą o urządzeniach mobilnych. Oferuje wiele wstępnie ustawionych stylów CSS dla elementów internetowych, w tym pasków nawigacyjnych.
W tym samouczku dowiesz się, jak łatwo utworzyć podstawowy, responsywny pasek nawigacyjny Bootstrap. Następnie dowiesz się, jak używać standardowego przycisku paska nawigacyjnego Bootstrap dla urządzeń mobilnych.
Aby móc korzystać z Bootstrapa, musisz go najpierw zainstalować. Na potrzeby tego samouczka możesz zainstalować go w dowolnym miejscu na lokalnym komputerze — nie musi to być serwer WWW. Zróbmy to razem.
Krok 1. Pobierz Bootstrap
- Przejdź do getboostrap.com i kliknij przycisk „Pobierz Bootstrap”:
- Na następnej stronie „Pierwsze kroki” kliknij inny przycisk „Pobierz Bootstrap”:
- Zapisz ten plik w dowolnym miejscu na dysku twardym:
Krok 2. Zainstaluj Bootstrap na lokalnym komputerze!
- Rozpakuj ten plik
- Zmień nazwę folderu wynikowego na bootstrap
Krok 3. Utwórz podstawowy plik index.html
- W folderze startowym utwórz plik index.htm l z następującym kodem:
<!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>Krok 4. Utwórz responsywny pasek nawigacyjny
- Tuż pod otwierającym elementem div body utwórz nowy div za pomocą kontenera klasy Bootstrap:
<div class="container"><!-- Start navbar container div -->
- Naciśnij Enter kilka razy, aby zrobić trochę miejsca i zamknąć ten nowy div:
</div><!-- Finish navbar container div -->
- Wewnątrz nowego div kontenera utwórz tag nawigacyjny dla nowego paska nawigacyjnego:
<nav class="navbar navbar-default">
- Na klawiaturze naciśnij kilka razy klawisz Enter i zamknij tag:
- Wewnątrz znacznika nawigacyjnego utwórz kolejny div kontenera i zacznij tworzyć rzeczywistą zawartość paska nawigacyjnego:
<div class="container">
<div class="navbar-header"><!-- Start navbar-header -->
<a href="#" class="navbar-brand">Trusthub</a>
</div><!-- Finish navbar-header -->
</div>
- Usuń znacznik <h1> i jego zawartość.
- Znajdź miejsce, w którym zamyka się Twój div navbar-header, a tuż pod nim utwórz kolejny div, bez klas.
- Wewnątrz tego div, rozpocznij nieuporządkowaną listę zawierającą rzeczywiste elementy twojego responsywnego paska nawigacyjnego:
<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>
- Zapisz plik index.html.
- Otwórz ten plik w swojej przeglądarce. Powinieneś teraz zobaczyć responsywny pasek nawigacyjny. Jesteś już prawie gotowy, aby uczynić go standardowym mobilnym paskiem nawigacyjnym. Zanim jednak to zrobisz, trochę go ulepsz.
- Wróć do pliku index.html .
- W tagu nawigacyjnym zmień wartość domyślną na odwrotną , aby uzyskać następujący kod:
<nav class="navbar navbar-inverse">
- Zapisz plik.
- Wróć do swojej witryny i odśwież stronę. Twój pasek nawigacyjny wygląda teraz trochę ładniej:
Bardzo dobrze! Twój responsywny pasek nawigacyjny jest teraz gotowy do dalszej pracy nad nim.
Obejrzyj poniższy film, aby dowiedzieć się, jak zastąpić właśnie utworzony pasek nawigacyjny standardowym przyciskiem menu Bootstrap dla użytkowników mobilnych.