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