Bootstrap 5 | Botones

Posted on by Rudeus Greyrat

Bootstrap 5 es el último lanzamiento importante de Bootstrap en el que renovaron la interfaz de usuario y realizaron varios cambios. Los botones son los componentes proporcionados para crear varios botones. Bootstrap 5 incluye varios estilos de botones predefinidos, cada uno con su propio propósito.

Sintaxis:

<button class="badge bg-type"> Button Text <button>

Tipos: Los siguientes son los nueve tipos de botones disponibles en Bootstrap 5:

 

 Ejemplo 1: Este ejemplo muestra el funcionamiento de los primeros cinco tipos de botones en Bootstrap 5.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        Bootstrap 5 | Buttons
    </title>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
</head>
<body>
    <div style="text-align: center;width: 600px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
    </div>
    <div style="width: 600px; height: 200px;
        margin:20px;text-align: center;">
        <button type="button" class="btn btn-primary">
            Primary
        </button>
        <button type="button" class="btn btn-secondary">
            Secondary
        </button>
        <button type="button" class="btn btn-success">
            Success
        </button>
        <button type="button" class="btn btn-danger">
            Danger
        </button>
        <button type="button" class="btn btn-warning">
            Warning
        </button>
    </div>
</body>
</html>

Producción:

Ejemplo 2: Este ejemplo muestra el funcionamiento de los últimos cuatro tipos de botones en Bootstrap 5.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        Bootstrap 5 | Buttons
    </title>
 
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
</head>
<body>
    <div style="text-align: center;width: 600px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
    </div>
    <div style="width: 600px;height: 200px;
            margin:20px;text-align: center;">
        <button type="button" class="btn btn-info">
            Info
        </button>
        <button type="button" class="btn btn-light">
            Light
        </button>
        <button type="button" class="btn btn-dark">
            Dark
        </button>
        <button type="button" class="btn btn-link">
            Link
        </button>
    </div>
</body>
</html>

Producción:

Ejemplo 3: Este ejemplo muestra el funcionamiento de diferentes elementos como botones en Bootstrap 5.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        Bootstrap 5 | Buttons
    </title>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
</head>
<body style="text-align:center;">
    <div class="container mt-3">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h2>Button Elements</h2>
        <input class="btn btn-success" type="button"
            value="Input Button">
        <input class="btn btn-success" type="submit"
            value="Submit Button">
        <input class="btn btn-success" type="reset"
            value="Reset Button">
        <button class="btn btn-success" type="button">
            Button
        </button>
        <a href="#" class="btn btn-success" role="button">
            Link Button
        </a>
    </div>
</body>
</html>

Producción:

Button Outlines: Bootstrap 5 provides a series of classes that can be used when we need to use outline styled buttons in our project, i.e. button without background color. The outline button classes remove any background color or background image style applied to the buttons. All the button types support it as given in the example below:

Ejemplo: este ejemplo muestra el funcionamiento de diferentes botones de esquema en Bootstrap 5.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        Bootstrap 5 | Buttons
    </title>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
</head>
<body style="text-align:center;">
    <div class="container mt-3">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h2>Button Outline</h2>
        <button type="button"
            class="btn btn-outline-primary">
            Primary
        </button>
        <button type="button"
            class="btn btn-outline-secondary">
            Secondary
        </button>
        <button type="button"
            class="btn btn-outline-success">
            Success
        </button>
        <button type="button"
            class="btn btn-outline-danger">
            Danger
        </button>
        <button type="button"
            class="btn btn-outline-warning">
            Warning
        </button>
        <button type="button"
            class="btn btn-outline-info">
            Info
        </button>
        <button type="button"
            class="btn btn-outline-light">
            Light
        </button>
        <button type="button"
            class="btn btn-outline-dark">
            Dark
        </button>
    </div>
</body>
</html>

Producción:

Button Sizes: Bootstrap 5 provides different classes that allow to changing the size of the button. The .btn-lg and .btn-sm classes are used for large and small buttons.

Ejemplo: Este ejemplo muestra el funcionamiento de diferentes tamaños de botones en Bootstrap 5.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        Bootstrap 5 | Buttons
    </title>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
</head>
<body style="text-align:center;">
    <div class="container mt-3">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h2>Button Sizes</h2>
        <button type="button"
            class="btn btn-success btn-sm">
            Small Button
        </button>
        <button type="button"
            class="btn btn-success">
            Default Button
        </button>
        <button type="button"
            class="btn btn-success btn-lg">
            Large Button
        </button>
    </div>
</body>
</html>

Producción:

Active State Buttons: The .active class is used to make button and link to an active state.

Ejemplo: este ejemplo muestra el funcionamiento del estado activo de un botón en Bootstrap 5.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        Bootstrap 5 | Buttons
    </title>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
</head>
<body style="text-align:center;">
    <div class="container mt-3">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h2>Button Active State</h2>
        <button type="button"
            class="btn btn-success">
            Default Button
        </button>
        <button type="button"
            class="btn btn-success active">
            Active Button
        </button>
    </div>
</body>
</html>

Producción:

Disabled State Buttons: The disabled attribute is used with button element to set the disabled state of the button.

Ejemplo: este ejemplo muestra el funcionamiento del estado deshabilitado de un botón en Bootstrap 5.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        Bootstrap 5 | Buttons
    </title>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
</head>
<body style="text-align:center;">
    <div class="container mt-3">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h2>Button Disabled State</h2>
        <button type="button"
            class="btn btn-primary" disabled>
            Disabled Button
        </button>
        <button type="button"
            class="btn btn-success" disabled>
            Disabled Button
        </button>
    </div>
</body>
</html>

Producción:

Block Level Buttons: The .btn-block class is used to create a block-level button which takes all width of the parent element.

Ejemplo: Este ejemplo muestra el funcionamiento de un botón de nivel de bloque en Bootstrap 5.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        Bootstrap 5 | Buttons
    </title>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
</head>
<body style="text-align:center;" style="width:700px;">
    <div class="container mt-3">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h2>Block Level Buttons</h2>
        <button type="button"
            class="btn btn-block btn-primary">
            Block Level Button
        </button>
        <button type="button"
            class="btn btn-block btn-success">
            Block Level Button
        </button>
    </div>
</body>
</html>

Producción:

Spinner Buttons: The spinner-* classes are used to add a spinner to the button.

Ejemplo: Este ejemplo muestra el funcionamiento de un botón giratorio en Bootstrap 5.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        Bootstrap 5 | Buttons
    </title>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
</head>
<body style="text-align:center;">
    <div class="container mt-3">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h2>Spinner Buttons</h2>
        <button type="button" class="btn btn-primary">
            <span class="spinner-border spinner-border-sm">
            </span>
            Spinner Button
        </button>
        <button type="button" class="btn btn-success">
            <span class="spinner-grow spinner-grow-sm">
            </span>
            Spinner Button
        </button>
    </div>
</body>
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por gurrrung 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 *