Cum se creează bara de navigare și butonul standard Bootstrap pentru dispozitive mobile

Publicat: 2022-02-16
Cum se creează butonul standard Bootstrap Navbar pentru dispozitive mobile

Bootstrap este un cadru HTML, CSS și JavaScript. Folosind-o, puteți construi cu ușurință site-uri web receptive pentru dispozitive mobile. Vă oferă o mulțime de stiluri CSS prestabilite pentru elementele web, inclusiv bare de navigare.

În acest tutorial, veți învăța cum să creați cu ușurință o bară de navigare receptivă Bootstrap de bază. Apoi veți învăța cum să utilizați un buton Bootstrap Standard Navbar pentru dispozitive mobile.

Pentru a putea folosi Bootstrap, trebuie să îl instalați mai întâi. În scopul acestui tutorial, îl puteți instala oriunde pe computerul dvs. local - nu trebuie să fie un server web. Hai s-o facem împreună.

Pasul 1. Descărcați Bootstrap

    • Accesați getboostrap.com și faceți clic pe butonul „Descărcați Bootstrap”:

01 descărca bootstrap

    • Pe următoarea pagină „Noțiuni introductive”, faceți clic pe alt buton „Descărcați Bootstrap”:

02 descărcare butonul bootstrap 02

    • Salvați acest fișier oriunde pe hard disk:

03 folderul bootstrap

Pasul 2. Instalați Bootstrap pe computerul local

    • Dezarhivați acest fișier
    • Redenumiți folderul rezultat în bootstrap

Pasul 3. Creați un fișier index.html de bază

    • În folderul bootstrap creați un fișier index.htm l cu următorul cod:
 <!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>

Pasul #4. Creați o bară de navigare receptivă

    • Chiar sub div-ul corpului de deschidere, creați un nou div cu clasa Bootstrap a containerului :

<div class="container"><!-- Start navbar container div -->

    • Apăsați Enter de câteva ori pentru a crea spațiu și a închide acest nou div:

</div><!-- Finish navbar container div -->

04 navbar container div

    • În interiorul noului container div, creați eticheta de navigare pentru noua bară de navigare:

<nav class="navbar navbar-default">

    • Pe tastatură, apăsați tasta Enter de câteva ori și închideți eticheta:

05 etichete navbar

    • În interiorul etichetei nav , creați un alt container div și începeți să creați conținutul real al barei de navigare:

<div class="container">
<div class="navbar-header"><!-- Start navbar-header -->
<a href="#" class="navbar-brand">Trusthub</a>
</div><!-- Finish navbar-header -->
</div>

06 conținut în interiorul etichetei nav

    • Ștergeți eticheta <h1> și conținutul acesteia.
    • Găsiți unde se închide div -ul antet din bara de navigare și chiar dedesubt creați un alt div, fără clase încă.

07 div nou sub antetul barei de navigare care se închide

    • În interiorul acestui div, începeți o listă neordonată care conține elementele reale ale barei de navigare receptive:

<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>

08 ul list

    • Salvați fișierul index.html.
    • Deschideți acest fișier în browser. Ar trebui să vedeți acum bara de navigare receptivă. Sunteți aproape gata să o transformați în bara de navigare mobilă standard. Înainte de a face, totuși, hai să o îmbunătățim ușor.
    • Vă rugăm să reveniți la fișierul index.html .
    • În eticheta de navigare , schimbați valoarea implicită în inversă pentru a obține următorul cod:

<nav class="navbar navbar-inverse">

    • Salvați fișierul.
    • Reveniți la site-ul dvs. și reîmprospătați pagina. Bara ta de navigare arată puțin mai bine acum:

09 etichetă de navigare inversă

Bine făcut! Bara de navigare receptivă este acum gata pentru a lucra în continuare la ea.

Urmăriți videoclipul de mai jos pentru a afla cum să înlocuiți bara de navigare pe care tocmai ați creat-o cu butonul standard de meniu Bootstrap pentru utilizatorii de telefonie mobilă.