Bootstrap4 Tutoriales básicos

Bootstrap4 Barra de navegación Bootstrap4 Desplegable

Bootstrap4 Navegación

Bootstrap ofrece un método fácil y rápido para crear componentes básicos de navegación, como etiquetas y pastillas, que son muy flexibles y hermosas. Todos los componentes de navegación de Bootstrap (tarjetas y pastillas) comparten la misma marca básica y estilos a través de la clase .nav básica.

Si quieres crear una barra de navegación horizontal simple, puedes agregar en el elemento <ul> Clase .nav, agrega .nav a cada opción <li>-Clase item, agrega .nav a cada enlace-Clase link:

Ejemplo

<!DOCTYPE html>
<html>
<head>
　　<title> Ejemplo Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Navegación</h2>
　　<p>Navegación horizontal simple:</p>
　　<ul　class="nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　disabled"　href="#">Desactivado</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>

Prueba aquí ‹/›

Método de alineación de navegación

.justify-content-Clase center para mostrar navegación centrada, .justify-content-Configuración de clase end para alineación derecha de navegación.

Ejemplo

<!DOCTYPE html>
<html>
<head>
　　<title> Ejemplo Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Navegación</h2>
　　<p>Alineación izquierda de navegación (por defecto):</p>
　　<ul　class="nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　disabled"　href="#">Desactivado</a>
　　　　</li>
　　</ul>
　　
　　<p　class="text-center">Navegación centrada:</p>
　　<ul　class="nav　justify-content-center">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　disabled"　href="#">Desactivado</a>
　　　　</li>
　　</ul>
　　　　
　　<p　class="text-right">Navegación alineada a la derecha:</p>
　　<ul　class="nav　justify-content-end">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　disabled"　href="#">Desactivado</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>

Prueba aquí ‹/›

Navegación vertical

.flex-La clase column se utiliza para crear navegación vertical：

Ejemplo

<!DOCTYPE html>
<html>
<head>
　　<title> Ejemplo Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Navegación vertical</h2>
　　<p>.flex-column　clase se utiliza para crear navegación vertical：</p>
　　<ul　class="nav　flex-column">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　disabled"　href="#">Desactivado</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>

Prueba aquí ‹/›

Pestañas

Utilice .nav-La clase tabs puede convertir la navegación en pestañas. Luego, para marcar la opción seleccionada, utilice la clase .active.

Ejemplo

<!DOCTYPE html>
<html>
<head>
　　<title> Ejemplo Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Pestañas</h2>
　　<p>Navegación de pestañas:</p>
　　<ul class="nav nav-tabs">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　active"　href="#">Activo</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　disabled"　href="#">Desactivado</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>

Prueba aquí ‹/›

Navegación de cápsulas

.nav-La clase pills puede configurar que los elementos de navegación tengan la forma de cápsula.

Ejemplo

<!DOCTYPE html>
<html>
<head>
　　<title> Ejemplo Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Cápsulas</h2>
　　<p>Navegación de cápsulas:</p>
　　<ul class="nav nav-pills">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　active"　href="#">Activo</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　disabled"　href="#">Desactivado</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>

Prueba aquí ‹/›

Navegación de ancho igual

.nav-La clase justified puede configurar que los elementos de navegación se muestren en filas de ancho igual.

Ejemplo

<!DOCTYPE html>
<html>
<head>
　　<title> Ejemplo Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Navegación de ancho igual</h2>
　　<p>.nav-La clase justified puede configurar que los elementos de navegación se muestren en filas de ancho igual./p>
　　<ul class="nav nav-pills　nav-justified">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　active"　href="#">Activo</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　disabled"　href="#">Desactivado</a>
　　　　</li>
　　</ul><br>
　　<p>Pestañas justificadas:</p>
　　<ul class="nav nav-tabs　nav-justified">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　active"　href="#">Activo</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　disabled"　href="#">Desactivado</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>

Prueba aquí ‹/›

Cinta de despliegue de cápsulas

Ejemplo

<!DOCTYPE html>
<html>
<head>
　　<title> Ejemplo Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Cinta de navegación de cápsulas con despliegue</h2>
　　<ul class="nav nav-pills">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　active"　href="#">Activo</a>
　　　　</li>
　　　　<li class="nav-item　dropdown">
　　　　　　<a class="nav-link　dropdown-toggle"　data-toggle="dropdown"　href="#">Desplegable</a>
　　　　　　<div　class="dropdown-menu">
　　　　　　　　<a　class="dropdown-item"　href="#">Enlace　1</a>
　　　　　　　　<a　class="dropdown-item"　href="#">Enlace　2</a>
　　　　　　　　<a　class="dropdown-item"　href="#">Enlace　3</a></div>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　disabled"　href="#">Desactivado</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>

Prueba aquí ‹/›

Menú desplegable de pestañas

Ejemplo

<!DOCTYPE html>
<html>
<head>
　　<title> Ejemplo Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Menú desplegable de pestañas</h2>
　　<ul class="nav nav-tabs">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　active"　href="#">Activo</a>
　　　　</li>
　　　　<li class="nav-item　dropdown">
　　　　　　<a class="nav-link　dropdown-toggle"　data-toggle="dropdown"　href="#">Desplegable</a>
　　　　　　<div　class="dropdown-menu">
　　　　　　　　<a　class="dropdown-item"　href="#">Enlace　1</a>
　　　　　　　　<a　class="dropdown-item"　href="#">Enlace　2</a>
　　　　　　　　<a　class="dropdown-item"　href="#">Enlace　3</a></div>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　disabled"　href="#">Desactivado</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>

Prueba aquí ‹/›

Pestañas dinámicas

Si desea configurar que las pestañas sean dinámicas y seleccionables, puede agregar data-toggle="tab" atributo. Luego, agregue .tab en el contenido correspondiente de cada opción-pane　clase.

Si desea tener un efecto de transición suave, puede agregar en .tab-pane　después de agregar 　 .fade类:

Ejemplo

<!DOCTYPE html>
<html>
<head>
　　<title> Ejemplo Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Opciones de cambio</h2>
　　<br>
　　<!--　Nav　tabs　-->
　　<ul class="nav nav-tabs"　role="tablist">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link active" data-toggle="tab"　href="#home">Home</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" data-toggle="tab" href="#menu1">Menu　1</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" data-toggle="tab" href="#menu2">Menu　2</a>
　　　　</li>
　　</ul>
　　<!--　Tab panes　-->
　　<div class="tab-content">
　　　　<div id="home" class="container tab-pane active"><br>
　　　　　　<h2HOME/h2>
　　　　　　Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua./p>
　　　　</div>
　　　　<div id="menu1" class="container tab-pane fade"><br>
　　　　　　<h2>Menu　1</h2>
　　　　　　<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>/p>
　　　　</div>
　　　　<div id="menu2" class="container tab-pane fade"><br>
　　　　　　<h2>Menu　2</h2>
　　　　　　<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>/p>
　　　　</div>
　　</div>
</div>
</body>
</html>

Prueba aquí ‹/›

Pestañas dinámicas en forma de cápsula

Para crear pestañas dinámicas en forma de cápsula, simplemente cambia el código de ejemplo anterior en data-toggle El atributo se establece como data-toggle="pill":

Ejemplo

<!DOCTYPE html>
<html>
<head>
　　<title> Ejemplo Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Opciones de pestañas en cápsula</h2>
　　<br>
　　<!--　Nav pills　-->
　　<ul class="nav nav-pills" role="tablist">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link active" data-toggle="pill" href="#home">Home</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" data-toggle="pill" href="#menu1">Menu　1</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" data-toggle="pill" href="#menu2">Menu　2</a>
　　　　</li>
　　</ul>
　　<!--　Tab panes　-->
　　<div class="tab-content">
　　　　<div id="home" class="container tab-pane active"><br>
　　　　　　<h2HOME/h2>
　　　　　　Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua./p>
　　　　</div>
　　　　<div id="menu1" class="container tab-pane fade"><br>
　　　　　　<h2>Menu　1</h2>
　　　　　　<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>/p>
　　　　</div>
　　　　<div id="menu2" class="container tab-pane fade"><br>
　　　　　　<h2>Menu　2</h2>
　　　　　　<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>/p>
　　　　</div>
　　</div>
</div>
</body>
</html>

Prueba aquí ‹/›

Bootstrap4 Barra de navegación Bootstrap4 Desplegable