Como criar a barra de navegação e o botão padrão do Bootstrap para dispositivos móveis
Publicados: 2022-02-16
Bootstrap é um framework HTML, CSS e JavaScript. Com ele, você pode criar facilmente sites responsivos para dispositivos móveis. Ele oferece muitos estilos CSS predefinidos para elementos da Web, incluindo barras de navegação.
Neste tutorial, você aprenderá como criar facilmente uma barra de navegação responsiva básica do Bootstrap. Em seguida, você aprenderá a usar um botão Bootstrap Standard Navbar para dispositivos móveis.
Para poder usar o Bootstrap, você deve instalá-lo primeiro. Para os propósitos deste tutorial, você pode instalá-lo em qualquer lugar em seu PC local - não precisa ser um servidor web. Vamos fazê-lo juntos.
Passo 1. Baixar Bootstrap
- Vá para getboostrap.com e clique no botão "Download Bootstrap":
- Na próxima página "Getting Started", clique em outro botão "Download Bootstrap":
- Salve este arquivo em qualquer lugar em seu disco rígido:
Passo 2. Instale o Bootstrap no seu PC local
- Descompacte este arquivo
- Renomeie a pasta resultante para bootstrap
Etapa 3. Crie um arquivo index.html básico
- Na sua pasta bootstrap crie um arquivo index.htm l com o seguinte código:
<!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>Passo 4. Crie uma barra de navegação responsiva
- Logo abaixo da div do corpo de abertura, crie uma nova div com a classe Bootstrap do container :
<div class="container"><!-- Start navbar container div -->
- Pressione Enter algumas vezes para criar algum espaço e feche este novo div:
</div><!-- Finish navbar container div -->
- Dentro do seu novo container div crie a tag nav para sua nova navbar:
<nav class="navbar navbar-default">
- No teclado, pressione a tecla Enter algumas vezes e feche a tag:
- Dentro da tag nav , crie outro container div e comece a criar o conteúdo real da navbar:
<div class="container">
<div class="navbar-header"><!-- Start navbar-header -->
<a href="#" class="navbar-brand">Trusthub</a>
</div><!-- Finish navbar-header -->
</div>
- Exclua a tag <h1> e seu conteúdo.
- Encontre onde seu div do cabeçalho da barra de navegação fecha e logo abaixo dele crie outro div, sem classes ainda.
- Dentro desta div, inicie uma lista não ordenada contendo os elementos reais da sua barra de navegação responsiva:
<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>
- Salve seu arquivo index.html.
- Abra este arquivo em seu navegador. Agora você deve ver sua barra de navegação responsiva. Você está quase pronto para torná-lo a barra de navegação móvel padrão. Antes de fazer isso, vamos melhorá-lo um pouco.
- Por favor, volte ao seu arquivo index.html .
- Em sua tag nav , altere o padrão para inverse para obter o seguinte código:
<nav class="navbar navbar-inverse">
- Salve o arquivo.
- Volte ao seu site e atualize a página. Sua barra de navegação parece um pouco melhor agora:
Bem feito! Sua barra de navegação responsiva agora está pronta para você trabalhar mais nela.
Assista ao vídeo abaixo para saber como substituir a barra de navegação que você acabou de criar pelo botão de menu padrão do Bootstrap para usuários móveis.