• Categoria do post:Programação para Web
  • Tempo de leitura:3 minutos de leitura
Ads

Bootstrap versão 3

Para mudar a cor da navbar podemos usar o parâmetro style. Ele permite modificar o CSS padrão de qualquer elemento HTML.

De acordo com o Boostrap, o código que monta a navbar é esse:

<nav class="navbar navbar-light bg-faded">

O parâmetro class define qual a formatação CSS que a tag nav irá assumir, mas podemos modificá-la usando o style, ficando assim:

<nav class="navbar navbar-light bg-faded" style="background-color: #ABC; border-color: #000;">

No exemplo acima obteremos uma navbar da cor azul e com borda preta.

Caso queira modificar outros atributos, leia este artigo da Stack Over Flow: http://stackoverflow.com/questions/18529274/change-navbar-color-in-twitter-bootstrap-3

O bootstrap oferece também outras 3 cores pré-definidas, a navibar de cor preta, a de cor azul e azul claro, bastando aplicar o código a seguir;

Bootstrap versão 4

O BS em sua versão 4 oferece opções mais simples para desenvolvedores iniciantes. A documentação da versão 4 e os códigos CDNs podem ser obtidos em http://v4-alpha.getbootstrap.com/ Notá-se que a versão 4 ainda não está totalmente finalizada, portanto, alguns recursos interativos que dependam de JS podem não funcionar.

Preto

navbar1

<nav class="navbar navbar-dark bg-inverse">
  <!-- Navbar content -->
</nav>

Azul

navbar2<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

Azul Claro

navbar3
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

 

Ads

Anderson Oliveira

Anderson Oliveira é desenvolvedor, escritor e docente no CEETPS - Centro Estadual de Educação Tecnologia de São Paulo. Atualmente trabalha na Administração Central do CPS e leciona aulas de programação na Etec Prof. Carmine Biagio Tundisi de Atibaia.