Componentes HTML

Além de prover customizações para os elementos HTML existentes, o Bootstrap criou uma série de componentes HTML responsivo para agilizar o processo de desenvolvimento de páginas web, tais como ícones, listas, barras de navegação, etc. Esta sessão irá mostrar alguns exemplos de utilização de tais componentes.

Glyphicons

Bootstrap possui um conjunto com mais de 200 ícones vetorizados para utilização. Esses ícones foram disponíveis gratuitamente pela biblioteca Glyphicons.

Para utilizar um dos ícones disponíveis, devemos criar um <span> vazio, e aplicar a classe .glyphicon seguida da classe que representa o ícone que você deseja importar. A lista dos ícones disponíveis está disponível na documentação.

Exemplo

  <button type="button" class="btn btn-default btn-lg">
    <span class="glyphicon glyphicon-star"></span> Favorito
  </button>              
              

Dropdowns

Bootstrap fornece formas de se criar um componente de dropdown. Para utilizá-lo, deve-se criar um <button> com a classe .dropdown e uma propriedade data-toggle="dropdown". Em seguida, basta criar uma lista que referencie este botão por meio da propriedade aria-labelledby="buttonId".

Exemplo

  <div class="dropdown">
    <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
      Opções <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
      <li><a href="#">Opção 1</a></li>
      <li><a href="#">Opção 2</a></li>
      <li><a href="#">Opçao 3</a></li> 
    </ul>
  </div>
          

Grupos de Input

Bootstrap permite agrupar controles HTML em um campo de <input>, presente nos formulários HTML. Para isto devemos criar uma <div> com a classe .input-group e então inserir dentro dessa <div> o <input> do campo desejado e um <span> com a classe input-group-addon. Esse <span> irá conter o controle a HTML a ser agrupado ao input

Exemplo

  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" placeholder="Twitter">
  </div>

  <div class="input-group">
    <input type="text" class="form-control">
    <span class="input-group-addon">.00</span>
  </div>

  <div class="input-group">
    <span class="input-group-addon">R$</span>
    <input type="text" class="form-control">
    <span class="input-group-addon">.00</span>
  </div>
              

Menus/Navs

Bootstrap oferece uma série de estilos para menus, por meio do elemento <nav>. Para utilizá-los, deve-se adicionar a classe .nav a um elemento <ul> seguida do estilo desejado para o menu. O Bootstrap fornece dois tipos de menu:

• Abas (Tabs), por meio da classe .nav-tabs
• Pílulas (Pills), por meio da classe .nav-pills

Tabs

• Home
• Profile
• Messages

  <ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
  </ul>
          

Pills

• Home
• Profile
• Messages

  <ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
  </ul>          
          

Além disso, menus que possuam a classe .nav-pills podem ser alinhados verticalmente por meio da propriedade .nav-stacked.

  <ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
  </ul>
              

Barras de Navegação (Navbars)

Bootstrap também fornece meios para se criar navbars em sua página web. Por padrão tais navbars possuem um comportamento responsivo: elas se tornam expandíveis quando sofrem ação do usuário.

Configuração Básica

O código abaixo mostra um exemplo básico de utilização de uma navbar:

  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">MinhaPaginaWeb</a>
      </div>
      <div>
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Início</a></li>
          <li><a href="#">About me</a></li>
          <li><a href="#">Experimentos</a></li> 
          <li><a href="#">Links Relacionados</a></li> 
        </ul>
      </div>
    </div>
  </nav>
          

Como se pode observar, uma nav bar é implementada por meio do elemento <nav>, e deve possuir as classes .navbar e .navbar-default.

Uma vez declarado o elemento <nav>, deve-se implementar as <div>s que serão responsáveis pelo header e corpo da navbar. O header deverá ser criado com a classe .navbar-header.

O corpo, por sua vez, deverá conter um elemento <ul class="nav navbar-nav">. Esse elemento representa as opções que serão exibidas no menu.

Se implementado conforme o código descrito acima, a navbar possuirá o seguinte aspecto:

Navbar Invertida

Caso o estilo da navbar não combina muito bem com sua página, você pode utilizar a classe .navbar-inverse para utilizar um estilo alternativo (escuro) para a navbar.

  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">MinhaPaginaWeb</a>
      </div>
      <div>
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Início</a></li>
          <li><a href="#">...</a></li>
        </ul>
      </div>
    </div>
  </nav>              
              

Navbar Fixa

Bootstrap também fornece opções para "fixar" a navbar no topo ou no fim da tela, de forma que a navbar fique sempre visível. Para isso, utilizam-se as classes .navbar-fixed-top e .navbar-fixed-bottom, respecitvamente.

  <nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">MinhaPaginaWeb</a>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Início</a></li>
        <li><a href="#">About me</a></li>
        <li><a href="#">Experimentos</a></li> 
        <li><a href="#">Links Relacionados</a></li> 
      </ul>
    </div>
  </div>
  </nav>
          

Navbar e Submenus

Os submenus de uma navbar podem ser implementados por meio de um dropdown. Neste caso, devemos implementar o dropdown normalmente, porém dentro da div que representa o corpo da navbar.

Exemplo

  <nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
          <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li> 
          </ul>
        </li>
        <li><a href="#">Page 2</a></li> 
        <li><a href="#">Page 3</a></li> 
      </ul>
    </div>
  </div>
  </nav>          
          

Navbar Alinhada a Direita

Os itens de uma navbar podem ser alinhados à direita, se desejado. Para isso, basta utilizar a classe .navbar-right.

Exemplo

  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">MinhaPaginaWeb</a>
      </div>
      <div>
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Início</a></li>
          <li><a href="#">About me</a></li>
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Experimentos
            <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Experimento 1</a></li>
              <li><a href="#">Experimento 2</a></li>
              <li><a href="#">Experimento 3</a></li> 
            </ul>
          </li> 
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#"><span class="glyphicon glyphicon-user"></span> Registrar</a></li>
          <li><a href="#"><span class="glyphicon glyphicon-user"></span> Login</a></li>
        </ul>
      </div>
    </div>
  </nav>
          

Navbar para Mobile

Para tornar a navbar responsiva a dispositivos mobile, devemos implementar um botão que irá representar a abertura do menu, e definir qual componente será expandido quando o botão for clicado.

Mais especificamente, o botão deverá possuir os seguintes atributos: class="navbar-toggle", data-toggle="collapse", e data-target="#idConteudoNavbar". O atributo class="navbar-toggle" informa a navbar que este botão ficará posicionado a direita da navbar quando ela mudar seu layout para mobile. O atributo data-toggle="collapse" informa que este botão implementa uma ação de expansão, se clicado. Por fim o atributo data-target="#idConteudoNavbar" informa qual elemento HTML será expandido ou retraído pelo botão.

Além disso, precisamos configurar a <div> que irá se expandir/retrair. Para isso, devemos adicionar as classes .collapse e .navbar-collapse para indicar que essa div é expansível, além de definir o mesmo id que foi definido no botão anteriormente.

Observe atentamente o exemplo abaixo para entender o funcionamento da navbar:

  <h2>Navbar para Mobile</h2>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarSite">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span> 
        </button>
        <a class="navbar-brand" href="#">MinhaPaginaWeb</a>
      </div>
      <div class="collapse navbar-collapse" id="navbarSite">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Início</a></li>
          <li><a href="#">About me</a></li>
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Experimentos
            <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Experimento 1</a></li>
              <li><a href="#">Experimento 2</a></li>
              <li><a href="#">Experimento 3</a></li> 
            </ul>
          </li> 
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#"><span class="glyphicon glyphicon-user"></span> Registrar</a></li>
          <li><a href="#"><span class="glyphicon glyphicon-user"></span> Login</a></li>
        </ul>
      </div>
    </div>
  </nav>
          

Labels

Labels podem ser declaradas por meio da classe .label seguida do tipo de label que se deseja criar.

Exemplo

  <span class="label label-default">Default</span>
  <span class="label label-primary">Primary</span>
  <span class="label label-success">Success</span>
  <span class="label label-info">Info</span>
  <span class="label label-warning">Warning</span>
  <span class="label label-danger">Danger</span>
              

Alertas

Bootstrap possui um conjunto de alertas que podem ser utilizados em sua página web. Um alerta pode ser criado por meio da classe .alert seguida do tipo de alerta que se deseja mostrar.

Se desejado, podemos adicionar a classe .alert-dismissible para adicionar uma opção para que o alerta seja fechado pelo usuário. Além disso, devemos adicionar um elemento HTML

Exemplo

  <div class="alert alert-success alert-dismissible">Alerta informando que algo foi realizado com sucesso</div>
  <div class="alert alert-info" >Alerta com algo informativo</div>
  <div class="alert alert-warning"><strong>Cuidado!!</strong> Você está entrando em uma zona perigosa</div>
  <div class="alert alert-danger alert-dismissible"><strong>Error code 867.</strong> É melhor fechar esse alerta antes que alguém mais veja.</div>