Usando un simple complemento de Bootstrap, puede agregar un menú desplegable en pestañas usando la clase desplegable. Las clases nav y nav-tabs también se utilizan para lograr esto.
Primero, haga una lista desordenada y asígnele una clase de nav y nav-tabs . Ahora, asigne una clase de menú desplegable a la etiqueta del elemento de la lista que desea que se comporte como un menú desplegable.
El siguiente paso es crear una lista desordenada para la pestaña desplegable y darle una clase de menú desplegable.
También puede personalizar el menú desplegable y los enlaces de navegación escribiendo su propio CSS y anulando el CSS de Bootstrap. Aquí hay un ejemplo de trabajo para el mismo.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title> Welcome to GFG </title>
<style>
.main {
margin-top: 20vh;
margin-left: 10vw;
}
.tab-pane {
width:100%;
background-color:#b6b0d2;
padding:10px;
color: black;
}
.nav-tabs > li a {
border: 2px solid black;
background-color:#35218e;
color:#fff;
margin-right: 1.2vw;
}
.nav-tabs > li.active > a {
background-color:#b6b0d2;
color:#000;
border: 1px solid #35218e;
}
.nav-tabs > li.active > a:focus {
background-color: #c9bad1;
color:#000;
}
.nav-tabs > li > a:hover {
background-color: #b6b0d2 ;
}
</style>
</head>
<body>
<div class="container main">
<ul class="nav nav-tabs" role="tablist">
<li class="active homeTab">
<a href="#home"
role="tab"
data-toggle="tab">Home</a></li>
<li ><a href="#section1"
data-toggle="tab"
role="tab">Section1</a></li>
<li ><a href="#section2"
data-toggle="tab"
role="tab" >Section2</a></li>
<li class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown">
Section4 <b class="caret">
</b></a>
<ul class="dropdown-menu">
<li><a href="#subSection1"
role="tab"
data-toggle="tab">
Sub-section 1</a></li>
<li><a href="#subSection2"
role="tab"
data-toggle="tab">
Sub-section 2</a></li>
<li><a href="#subSection3"
role="tab"
data-toggle="tab">
Sub-section 3</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown">
Section4 <b class="caret">
</b></a>
<ul class="dropdown-menu">
<li><a href="#subSection1"
role="tab"
data-toggle="tab">
Sub-section 1</a></li>
<li><a href="#subSection2"
role="tab"
data-toggle="tab">
Sub-section 2</a></li>
<li><a href="#subSection3"
role="tab"
data-toggle="tab">
Sub-section 3</a></li>
</ul>
</li>
<div class="tab-content">
<div class="tab-pane active" id="home">
Bootstrap is a free and open-source tool
collection for creating responsive websites
and web applications. It is the most popular
HTML, CSS, and JavaScript framework for
developing responsive, mobile-first web sites.
Nowadays, the websites are perfect for all
the browsers (IE, Firefox and Chrome) and for
all sizes of screens (Desktop, Tablets,
Phablets, and Phones). All thanks to
Bootstrap developers – Mark Otto and Jacob
Thornton of Twitter, though it was later
declared to be an open-source project.
</div>
<div class="tab-pane" id="section1">
Bootstrap is a free and open-source tool
collection for creating responsive websites
and web applications. </div>
<div class="tab-pane" id="section2">
Bootstrap is a free and open-source tool
collection for creating responsive websites
and web applications.</div>
<div class="tab-pane" id="section3">
Bootstrap is a free and open-source tool
collection for creating responsive websites
and web applications.</div>
<div class="tab-pane" id="subSection1">
Sub section1 content</div>
<div class="tab-pane" id="subSection2">
Sub Section 2 content
</div>
</div>
</body>
</html>
Producción
Publicación traducida automáticamente
Artículo escrito por prachimantri y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA