BootStrap - Formatos de menu
Notas :

1-Como tudo no bootstrap ele utiliza css aplicar a formatação nos elementos.

2-a classe nav-pills e nav-tabs da ul trabalha em conjunto com a classe active da tag a.
   Essa classe active informa qual é o item ou aba ativa.
   nav-pills : faz com que os itens do menu tenham um formato de botão com bordas arredondadas.
   nav-tabs : faz com que os itens do menu sejam exibidos em abas.

3-O menu é alinhado por default à esquerda da tela.
   Caso precisemos de outro alinhamanto, na ul podemos incluir as classes :
      justify-content-center : Alinha o menu ao centro da página.
      justify-content-end : Alinha o menu à direita da página.
      flex-column : Faz o menu ficar vertical.

Menu simples 1:

Importante : O default quando não definimos o alinhamento é exibir o menu alinhado a esquerda da página.

Menu simples 2 -Alinhando o menu no centro da página com a classe justify-content-center:

Menu simples 3 -Alinhando o menu a direita da página(end) com a classe justify-content-end:

Menu simples 4 -Navegação vertical por linhas com a classe flex-column:



Menu com abas:

Note que o item 6 esta desabilitado porque acrescentamos a classe disabled ao link a.


Barra de navegação simples :

A classe navbar-expand da tag nav faz os itens ficarem todos na horizontal.
A classe navbar-expand admite os prefixos sm, md, lg e xl para formatar o tamanho de cada ite do menu.
A classe class="navbar-brand" da tag a do logo retira o sublinhado do link e aplica um estilo diferente ao link destacando dos demais.
As classes navbar-light e navbar-dark definem a cor dos caracteres dos itens do menu.
As classes bg-light e bg-dark definem a cor de fundo dos itens do menu.
A classe ml-auto da tag ul posiciona todos os itens do menu à direita da tela.

Código da página


<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="../../BootstrapEngine/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="estilo.css">
        <title>Bootstrap - Menus de Navegação</title>
    </head>
    <body>

        <nav class="navbar navbar-light mb-4" style="background-color:aqua">
            <div class="container">
                <div class="navbar-brand mb-0 h1">
                    <h3>BootStrap - Menus de Navegação</h3>
                </div>
            </div>
        </nav>

        <div style="padding-left:5px" class="container">


            Notas :<br><br>

            1-Utiliza css para formatar alguns elementos.<br><br>

            2-a classe nav-pills e nav-tabs da ul trabalha em conjunto com a classe active da tag a.<br>
               Essa classe active informa qual é o item ou aba ativa.<br>
               nav-pills : faz com que os itens do menu tenham um formato de botão com bordas arredondadas.<br>
               nav-tabs : faz com que os itens do menu sejam exibidos em abas.<br><br>

            3-O menu é alinhado por default à esquerda da tela.<br>
               Caso precisemos de outro alinhamanto, na ul podemos incluir as classes : <br>
                  justify-content-center : Alinha o menu ao centro da página.<br>
                  justify-content-end : Alinha o menu à direita da página.<br>
                  flex-column : Faz o menu ficar vertical.

            <br><br>


            <hr>
            <h3>Menu simples 1:</h3>
            <ul class="nav nav-pills">
                <li class="nav-item"><a class="nav-link active" href="#">Item 1</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 4</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 5</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 6</a></li>
            </ul>
            Importante : O default quando não definimos o alinhamento é exibir o menu alinhado a esquerda da página.<br>

            <br>
            <hr>
            <h3>Menu simples 2 -Alinhando o menu no centro da página com a classe justify-content-center:</h3>
            <ul class="nav nav-tabs justify-content-center">
                <li class="nav-item"><a class="nav-link active" href="#">Item 1</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 4</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 5</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 6</a></li>
            </ul>

            <hr>
            <h3>Menu simples 3 -Alinhando o menu a direita da página(end) com a classe justify-content-end:</h3>
            <ul class="nav nav-tabs justify-content-end">
                <li class="nav-item"><a class="nav-link active" href="#">Item 1</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 4</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 5</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 6</a></li>
            </ul>

            <hr>
            <h3>Menu simples 4 -Navegação vertical por linhas com a classe flex-column:</h3>
            <ul class="nav nav-tabs flex-column">
                <li class="nav-item"><a class="nav-link active" href="#">Item 1</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 4</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 5</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 6</a></li>
            </ul>

            <br>
            <hr>
            <br>

            <h3>Menu com abas:</h3>
            <ul class="nav nav-tabs">
                <li class="nav-item"><a class="nav-link active" href="#">Item 1</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 4</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 5</a></li>
                <li class="nav-item"><a class="nav-link disabled" href="#">Item 6</a></li>
            </ul>
            Note que o item 6 esta desabilitado porque acrescentamos a classe disabled ao link a.<br>

            <br>
            <hr>
            <br>

            <h3>Barra de navegação simples :</h3>
            <nav class="navbar navbar-nav">
                <a class="navbar-brand" href="#">Logo</a>

                <ul class="navbar-nav ml-auto">
                    <li class="nav-item"><a class="nav-link" href="#">Item 1</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Item 4</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Item 5</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Item 6</a></li>
                </ul>
            </nav>
            A classe navbar-expand da tag nav faz os itens ficarem todos na horizontal.<br>
            A classe navbar-expand admite os prefixos sm, md, lg e xl para formatar o tamanho de cada ite do menu.<br>
            A classe class="navbar-brand" da tag a do logo retira o sublinhado do link e aplica um estilo diferente ao link destacando dos demais.<br>
            As classes navbar-light e navbar-dark definem a cor dos caracteres dos itens do menu.<br>
            As classes bg-light e bg-dark definem a cor de fundo dos itens do menu.<br>
            A classe ml-auto da tag ul posiciona todos os itens do menu à direita da tela.<br>

        </div>

    </body>
</html>