Navbar Bootstrap 4 con iconos. En este artículo, crearemos una barra de navegación responsiva usando Bootstrap 4. Además, vamos incorporar iconos en las opciones del menú del framework fontawesome.
El diseño web responsive hace que un sitio web se vea bien en todos los dispositivos, como computadoras de escritorio, tabletas y teléfonos, etc. Es muy recomendado si estamos creando aplicaciones web.
¿Qué es el framework Bootstrap?
Bootstrap es el marco HTML, CSS y JavaScript más popular para desarrollar sitios web receptivos. Es un marco front-end que se utiliza para crear sitios web y aplicaciones web modernos. Es de código abierto y de uso gratuito.
¿Qué es el framework FontAwesome?
Es un framework de iconos vectoriales, usa fuentes y es utilizado para sustituir imágenes de iconos comunes por gráficos vectoriales convertidos en fuentes. Resumiendo, es un proyecto magnífico que sirve para incorporar iconos en tu proyecto web.
Ventajas de usar BootStrap
- Utiliza HTML5, CSS3, jQuery o GitHub, entre otros.
- Genera Grid system: muy útil para maquetar por columnas.
- Posee plantillas de sencilla adaptación y responsive.
- Adaptable con librerías JavaScript.
- Una amplia documentación que te puede sacar de apuros rápidamente.
- Facilita el diseño de interfaces y además incluye por defecto una plantilla bastante optimizada.
- Se adapta al lenguaje de programación PHP y otros lenguajes.
- Trabaja fácilmente con cualquier CMS existente en el mercado digital
Navbar Bootstrap 4 con iconos.
En la documentación oficial de este framework especifica el uso de NavBar, pero falto la integración de iconos y en este ejemplo veremos la manera correcta de realizar esta integración.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Beautiful Bootstrap Navbar with Menu Icons</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
body {
background: #eeeeee;
font-family: 'Varela Round', sans-serif;
}
.navbar {
color: #fff;
background: #926dde !important;
padding: 5px 16px;
border-radius: 0;
border: none;
box-shadow: 0 0 4px rgba(0,0,0,.1);
}
.navbar img {
border-radius: 50%;
width: 36px;
height: 36px;
margin-right: 10px;
}
.navbar .navbar-brand {
color: #efe5ff;
padding-left: 0;
padding-right: 50px;
font-size: 24px;
}
.navbar .navbar-brand:hover, .navbar .navbar-brand:focus {
color: #fff;
}
.navbar .navbar-brand i {
font-size: 25px;
margin-right: 5px;
}
.search-box {
position: relative;
}
.search-box input {
padding-right: 35px;
min-height: 38px;
border: none;
background: #faf7fd;
border-radius: 3px !important;
}
.search-box input:focus {
background: #fff;
box-shadow: none;
}
.search-box .input-group-addon {
min-width: 35px;
border: none;
background: transparent;
position: absolute;
right: 0;
z-index: 9;
padding: 10px 7px;
height: 100%;
}
.search-box i {
color: #a0a5b1;
font-size: 19px;
}
.navbar .nav-item i {
font-size: 18px;
}
.navbar .nav-item span {
position: relative;
top: 3px;
}
.navbar .navbar-nav > a {
color: #efe5ff;
padding: 8px 15px;
font-size: 14px;
}
.navbar .navbar-nav > a:hover, .navbar .navbar-nav > a:focus {
color: #fff;
text-shadow: 0 0 4px rgba(255,255,255,0.3);
}
.navbar .navbar-nav > a > i {
display: block;
text-align: center;
}
.navbar .dropdown-item i {
font-size: 16px;
min-width: 22px;
}
.navbar .dropdown-item .material-icons {
font-size: 21px;
line-height: 16px;
vertical-align: middle;
margin-top: -2px;
}
.navbar .nav-item.open > a, .navbar .nav-item.open > a:hover, .navbar .nav-item.open > a:focus {
color: #fff;
background: none !important;
}
.navbar .dropdown-menu {
border-radius: 1px;
border-color: #e5e5e5;
box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.navbar .dropdown-menu a {
color: #777 !important;
padding: 8px 20px;
line-height: normal;
font-size: 15px;
}
.navbar .dropdown-menu a:hover, .navbar .dropdown-menu a:focus {
color: #333 !important;
background: transparent !important;
}
.navbar .navbar-nav .active a, .navbar .navbar-nav .active a:hover, .navbar .navbar-nav .active a:focus {
color: #fff;
text-shadow: 0 0 4px rgba(255,255,255,0.2);
background: transparent !important;
}
.navbar .navbar-nav .user-action {
padding: 9px 15px;
font-size: 15px;
}
.navbar .navbar-toggle {
border-color: #fff;
}
.navbar .navbar-toggle .icon-bar {
background: #fff;
}
.navbar .navbar-toggle:focus, .navbar .navbar-toggle:hover {
background: transparent;
}
.navbar .navbar-nav .open .dropdown-menu {
background: #faf7fd;
border-radius: 1px;
border-color: #faf7fd;
box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.navbar .divider {
background-color: #e9ecef !important;
}
@media (min-width: 1200px) {
.form-inline .input-group {
width: 350px;
margin-left: 30px;
}
}
@media (max-width: 1199px) {
.navbar .navbar-nav > a > i {
display: inline-block;
text-align: left;
min-width: 30px;
position: relative;
top: 4px;
}
.navbar .navbar-collapse {
border: none;
box-shadow: none;
padding: 0;
}
.navbar .navbar-form {
border: none;
display: block;
margin: 10px 0;
padding: 0;
}
.navbar .navbar-nav {
margin: 8px 0;
}
.navbar .navbar-toggle {
margin-right: 0;
}
.input-group {
width: 100%;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-xl navbar-dark bg-dark"> <a href="#" class="navbar-brand"><i class="fa fa-cube"></i>Brand<b>Name</b></a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse justify-content-start">
<form class="navbar-form form-inline">
<div class="input-group search-box">
<input type="text" id="search" class="form-control" placeholder="Search here...">
<span class="input-group-addon"><i class="material-icons"></i></span> </div>
</form>
<div class="navbar-nav ml-auto"> <a href="#" class="nav-item nav-link active"><i class="fa fa-home"></i><span>Home</span></a> <a href="#" class="nav-item nav-link"><i class="fa fa-gears"></i><span>Projects</span></a> <a href="#" class="nav-item nav-link"><i class="fa fa-users"></i><span>Team</span></a> <a href="#" class="nav-item nav-link"><i class="fa fa-pie-chart"></i><span>Reports</span></a> <a href="#" class="nav-item nav-link"><i class="fa fa-briefcase"></i><span>Careers</span></a> <a href="#" class="nav-item nav-link"><i class="fa fa-envelope"></i><span>Messages</span></a> <a href="#" class="nav-item nav-link"><i class="fa fa-bell"></i><span>Notifications</span></a>
<div class="nav-item dropdown"> <a href="#" data-toggle="dropdown" class="nav-item nav-link dropdown-toggle user-action"><img src="https://www.tutorialrepublic.com/examples/images/avatar/3.jpg" class="avatar" alt="Avatar"> Antonio Moreno <b class="caret"></b></a>
<div class="dropdown-menu"> <a href="#" class="dropdown-item"><i class="fa fa-user-o"></i> Profile</a> <a href="#" class="dropdown-item"><i class="fa fa-calendar-o"></i> Calendar</a> <a href="#" class="dropdown-item"><i class="fa fa-sliders"></i> Settings</a>
<div class="divider dropdown-divider"></div>
<a href="#" class="dropdown-item"><i class="material-icons"></i> Logout</a> </div>
</div>
</div>
</div>
</nav>
</body>
</html>Navbar Bootstrap 4 responsive
Hoy en día se requiere de proyectos que trabajen y funcionen en varios entornos y/o resoluciones de pantalla. Sin embargo, existe varios framework de estilos que nos ayudan en esta integración y en este ejemplo hemos elegido a Bootstrap.
Razones y ventajas para usar Bootstrap para diseños web y/o sistemas web:
- Muy fácil de usar:
Su integración es fácil y rápido, para empezar con Bootstrap. Por lo tanto, es muy adaptable también. - Mucha sensibilidad:
Bootstrap se adapta en diseño y el desarrollo al responder con el comportamiento en función del tamaño de la pantalla, la plataforma y la orientación. - Componentes de JavaScript empaquetados:
Este framework usa los componentes de JavaScript para incluir la funcionalidad que lo crea de una manera simple para operar, como información sobre herramientas, ventanas modales, alertas, etc. Incluso puede omitir los scripts de escritura por completo. - Usa cuadrícula:
Tiene una interfaz de utilizar una cuadrícula de 12 columnas. También admite elementos desplazados y anidados. La cuadrícula se puede mantener en un modo de respuesta. - Fácil sencilla:
Puede trabajar e integrar fácilmente junto con otras plataformas y marcos en sitios existentes y nuevos. Se puede usar junto con CSS actual.
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<!--fontawesome-->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js"></script>
<!--This is used for search icon. Instead putting icon manually it is loaded from fontawesome-->
<title>Responsive nav bar with Bootstrap 4</title>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-md navbar-light bg-dark fixed-top"> <a class="navbar-brand"><img src="img/dish.png"></a>
<button type="button" class="navbar-toggler bg-light" data-toggle="collapse" data-target="#nav"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse justify-content-between" id="nav">
<ul class="navbar-nav">
<li class="nav-item" > <a class="nav-link text-light font-weight-bold px-3" href="#">HOME</a> </li>
<li class="nav-item dropdown" data-toggle="dropdown"> <a class="nav-link text-light font-weight-bold px-3 dropdown-toggle" href="#">CATEGORIES</a>
<div class="dropdown-menu"> <a class="dropdown-item" href="#">Fast Food</a> <a class="dropdown-item" href="#">Lunch</a> <a class="dropdown-item" href="#">Dessert</a> </div>
</li>
<li class="nav-item"> <a class="nav-link text-light font-weight-bold px-3" href="#">ABOUT US</a> </li>
<li class="nav-item"> <a class="nav-link text-light font-weight-bold px-3" href="#">CONTACT</a> </li>
</ul>
<!-- Search bar -->
<form class="form-inline ml-3">
<div class="input-group">
<input type="text" class="form-control " placeholder="Search" >
<button type="submit"><i class="fa fa-search"></i></button>
</div>
</form>
</div>
</nav>
</body>
</html>Conclusión
La presentación y visualización de un proyecto lo es todo a ojos del usuario final es por tal motivo que millones de empresas en internet se enfocan de presentar una interfaz amigable al usuario final.
Es por tal motivo que debemos de usar todas las herramientas que están a nuestro alcance como ser librerías JavaScript, lenguajes de programación, base de datos y también framework de estilos como lo son Bootstrap y FontAwesome.
Este framework se adaptan fácilmente a cualquier resolución y nos ahorran un montón de tiempo en maquetación de estilos.
