Arranque 4 | Listas deplegables

Posted on by Rudeus Greyrat

Los menús desplegables son una de las partes más importantes de un sitio web interactivo. Un menú desplegable es la colección de elementos de menú que permiten a los usuarios elegir un valor de la lista. La clase .dropdown se usa para diseñar el menú desplegable. 

Ejemplo:  

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Dropdowns</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body style="text-align:center;">
    <div class="container">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h2>Dropdown List</h2>
        <div class="dropdown">
            <button type="button"
                class="btn btn-success dropdown-toggle"
                data-toggle="dropdown">
                Select CS Subjects
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">
                    Data Structure
                  </a>
                <a class="dropdown-item" href="#">
                    Algorithm
                  </a>
                <a class="dropdown-item" href="#">
                    Operating System
                  </a>
                <a class="dropdown-item" href="#">
                    Computer Networks
                  </a>
            </div>
        </div>
    </div>
</body>
</html>

Producción: 

Divisor desplegable: la clase .dropdown-divider se usa para dividir la lista del menú desplegable usando una línea horizontal delgada.

Ejemplo:  

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Dropdowns</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body style="text-align:center;">
    <div class="container">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h2>Dropdown Divider List</h2>
        <div class="dropdown">
            <button type="button"
                class="btn btn-success dropdown-toggle"
                data-toggle="dropdown">
                Select Subjects
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">
                    Data Structure
                  </a>
                <a class="dropdown-item" href="#">
                    Algorithm
                  </a>
                <a class="dropdown-item" href="#">
                    Operating System
                  </a>
                <a class="dropdown-item" href="#">
                    Computer Networks
                  </a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">
                    Physics
                  </a>
                <a class="dropdown-item" href="#">
                    Mathematics
                  </a>
                <a class="dropdown-item" href="#">
                    Chemistry
                  </a>
            </div>
        </div>
    </div>
</body>
</html>

Producción: 
 

Encabezado desplegable: la clase .dropdown-header se usa para agregar una sección de encabezado dentro de la lista desplegable.

Ejemplo:  

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Dropdowns List</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body style="text-align:center;">
    <div class="container">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h2>Dropdown Header List</h2>
        <div class="dropdown">
            <button type="button"
                class="btn btn-success dropdown-toggle"
                data-toggle="dropdown">
                Select Subjects
            </button>
            <div class="dropdown-menu">
                <strong class="dropdown-header">
                    CS Subjects
                  </strong>
                <a class="dropdown-item" href="#">
                    Data Structure
                  </a>
                <a class="dropdown-item" href="#">
                    Algorithm
                  </a>
                <a class="dropdown-item" href="#">
                    Operating System
                  </a>
                <a class="dropdown-item" href="#">
                    Computer Networks
                  </a>
                <div class="dropdown-divider"></div>
                <strong class="dropdown-header">
                    Other Subjects
                  </strong>
                <a class="dropdown-item" href="#">
                    Physics
                  </a>
                <a class="dropdown-item" href="#">
                    Mathematics
                  </a>
                <a class="dropdown-item" href="#">
                    Chemistry
                  </a>
            </div>
        </div>
    </div>
</body>
</html>

Producción: 
 

Elementos deshabilitados y activos: la clase .active se usa para agregar elementos destacados de la lista. La clase .disabled se usa para deshabilitar la lista de elementos. 
 

Ejemplo:  

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Dropdowns List</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body style="text-align:center;">
    <div class="container">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h3>Dropdown Disable and Active items List</h3>
        <div class="dropdown">
            <button type="button"
                class="btn btn-success dropdown-toggle"
                data-toggle="dropdown">
                Select Subjects
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item active" href="#">
                    Data Structure
                  </a>
                <a class="dropdown-item disabled" href="#">
                    Algorithm
                  </a>
                <a class="dropdown-item active" href="#">
                    Operating System
                  </a>
                <a class="dropdown-item" href="#">
                    Computer Networks
                  </a>
            </div>
        </div>
    </div>
</body>
</html>

Producción: 
 

Posición desplegable: las clases .dropright y .dropleft se utilizan para establecer la posición de la lista desplegable en el lado izquierdo y derecho.
 

Ejemplo 1:  

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Dropdowns List</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body style="text-align:center;">
    <div class="container">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h3>Dropdown Right items List</h3>
        <div class="dropdown dropright">
            <button type="button"
                class="btn btn-success dropdown-toggle"
                data-toggle="dropdown">
                Select Subjects
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">
                    Data Structure
                  </a>
                <a class="dropdown-item" href="#">
                    Algorithm
                  </a>
                <a class="dropdown-item" href="#">
                    Operating System
                  </a>
                <a class="dropdown-item" href="#">
                    Computer Networks
                  </a>
            </div>
        </div>
    </div>
</body>
</html>

Producción: 
 

Ejemplo 2:  

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Dropdowns List</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body style="text-align:center;">
    <div class="container">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h3>Dropdown Left items List</h3>
        <div class="dropdown dropleft">
            <button type="button"
                class="btn btn-success dropdown-toggle"
                data-toggle="dropdown">
                Select Subjects
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">
                    Data Structure
                  </a>
                <a class="dropdown-item" href="#">
                    Algorithm
                  </a>
                <a class="dropdown-item" href="#">
                    Operating System
                  </a>
                <a class="dropdown-item" href="#">
                    Computer Networks
                  </a>
            </div>
        </div>
    </div>
</body>
</html>

Producción: 
 

Menú desplegable alineado a la derecha: la clase .dropdown-menu-right se usa para establecer la alineación a la derecha del menú desplegable.
 

Ejemplo:  

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Dropdowns List</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body style="text-align:center;">
    <div class="container">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h3>Dropdown Menu Right Aligned</h3>
        <div class="dropdown">
            <button type="button"
                class="btn btn-success dropdown-toggle"
                data-toggle="dropdown">
                Select Computer Science Subject from List
            </button>
            <div class="dropdown-menu dropdown-menu-right">
                <a class="dropdown-item" href="#">
                    Data Structure
                  </a>
                <a class="dropdown-item" href="#">
                    Algorithm
                  </a>
                <a class="dropdown-item" href="#">
                    Operating System
                  </a>
                <a class="dropdown-item" href="#">
                    Computer Networks
                  </a>
            </div>
        </div>
    </div>
</body>
</html>

Producción: 
 

Dropup: la clase .dropup se usa en lugar de la clase .dropdown para expandir la lista del menú hacia arriba.
 

Ejemplo:  

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Dropdowns List</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body style="text-align:center;">
    <br><br><br><br>
    <div class="container">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h3>Dropup List</h3>
        <div class="dropup">
            <button type="button"
                class="btn btn-success dropdown-toggle"
                data-toggle="dropdown">
                Select Subject
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">
                    Data Structure
                  </a>
                <a class="dropdown-item" href="#">
                    Algorithm
                  </a>
                <a class="dropdown-item" href="#">
                    Operating System
                  </a>
                <a class="dropdown-item" href="#">
                    Computer Networks
                  </a>
            </div>
        </div>
    </div>
</body>
</html>

Producción: 
 

Texto desplegable: la clase .dropdown-item-text se usa para agregar texto sin formato en la lista del menú desplegable. 
 

Ejemplo:  

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Dropdowns List</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body style="text-align:center;">
    <div class="container">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h3>Dropdown Text</h3>
        <div class="dropdown">
            <button type="button"
                class="btn btn-success dropdown-toggle"
                data-toggle="dropdown">
                Select Subject
            </button>
            <div class="dropdown-menu">
                <div class="dropdown-item-text">
                    Data Structure
                  </div>
                <div class="dropdown-item-text">
                    Algorithm
                  </div>
                <div class="dropdown-item-text">
                    Operating System
                  </div>
                <div class="dropdown-item-text">
                    Computer Networks
                  </div>
            </div>
        </div>
    </div>
</body>
</html>

fropdownSalida: 
 

Botones agrupados con un menú desplegable: la clase .btn-group se usa para crear un grupo de botones y la clase .dropdown-menu se usa para crear una lista desplegable.
 

Ejemplo:  

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Dropdowns List</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body style="text-align:center;">
    <div class="container">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h3>Grouped Buttons with a Dropdown</h3>
        <div class="btn-group">
            <button type="button"
                class="btn btn-success btn-primary">
                Programming
            </button>
            <button type="button"
                class="btn btn-success btn-primary">
                Theory
            </button>
            <div class="btn-group">
                <button type="button"
                    class="btn btn-success dropdown-toggle"
                    data-toggle="dropdown">
                    Select Subject
                </button>
                <div class="dropdown-menu">
                    <div class="dropdown-item-text">
                        Data Structure
                      </div>
                    <div class="dropdown-item-text">
                        Algorithm
                      </div>
                    <div class="dropdown-item-text">
                        Operating System
                      </div>
                    <div class="dropdown-item-text">
                        Computer Networks
                      </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Producción: 
 

Menús desplegables de botones divididos: la clase .dropdown-toggle-split se usa para dividir los botones desplegables. 

Ejemplo:  

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Dropdowns List</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body style="text-align:center;">
    <div class="container">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h3>Split Button Dropdown List</h3>
        <div class="btn-group">
            <button type="button"
                class="btn btn-success btn-primary">
                Programming
            </button>
            <button type="button"
                class="btn btn-success dropdown-toggle
                    dropdown-toggle-split"
                data-toggle="dropdown">
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">
                    C Programming
                  </a>
                <a class="dropdown-item" href="#">
                    C++ Programming
                  </a>
                <a class="dropdown-item" href="#">
                    Java Programming
                  </a>
            </div>
        </div>
        <div class="btn-group">
            <button type="button"
                class="btn btn-success btn-primary">
                Theory
            </button>
            <button type="button"
                class="btn btn-success dropdown-toggle
                    dropdown-toggle-split"
                data-toggle="dropdown">
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">
                    Operating System
                  </a>
                <a class="dropdown-item" href="#">
                    Computer Networks
                  </a>
            </div>
        </div>
        <div class="btn-group">
            <button type="button"
                class="btn btn-success btn-primary">
                Select Subject
            </button>
            <button type="button"
                class="btn btn-success dropdown-toggle
                    dropdown-toggle-split"
                data-toggle="dropdown">
            </button>
            <div class="dropdown-menu">
                <div class="dropdown-item">
                    Data Structure
                  </div>
                <div class="dropdown-item">
                    Algorithm
                  </div>
                <div class="dropdown-item">
                    Operating System
                  </div>
                <div class="dropdown-item">
                    Computer Networks
                  </div>
            </div>
        </div>
    </div>
</body>
</html>

Producción: 
 

Lista desplegable de grupos de botones verticales: la clase .btn-group-vertical se utiliza para crear un grupo de botones verticales con una lista desplegable.

Ejemplo:  

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Dropdowns List</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body style="text-align:center;">
    <div class="container">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h3>Vertical Button Group Dropdown List</h3>
        <div class="btn-group-vertical">
            <div class="btn-group dropright">
                <button type="button"
                    class="btn btn-success btn-primary">
                    Programming
                </button>
                <button type="button"
                    class="btn btn-success dropdown-toggle
                        dropdown-toggle-split"
                    data-toggle="dropdown">
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">
                        C Programming
                      </a>
                    <a class="dropdown-item" href="#">
                        C++ Programming
                      </a>
                    <a class="dropdown-item" href="#">
                        Java Programming
                      </a>
                </div>
            </div>
            <div class="btn-group dropright">
                <button type="button"
                    class="btn btn-success btn-primary">
                    Theory
                </button>
                <button type="button"
                    class="btn btn-success dropdown-toggle
                        dropdown-toggle-split"
                    data-toggle="dropdown">
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">
                        Operating System
                      </a>
                    <a class="dropdown-item" href="#">
                        Computer Networks
                      </a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Producción: 
 

Navegador compatible:

  • Google Chrome
  • explorador de Internet
  • Firefox
  • Ópera
  • Safari

Publicación traducida automáticamente

Artículo escrito por Dharmendra_Kumar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *