Bootstrap nos proporciona diferentes clases que se pueden usar con diferentes etiquetas HTML como <button> , <a> , <input> y <label> para aplicar bordes de botones personalizados . Estas clases son las siguientes.
- borde
- borde superior
- borde inferior
- borde izquierdo
- borde derecho
En este artículo, aprenderemos a implementar colores de borde usando Bootstrap.
Enlace CDN: Primero, agregue los scripts de Bootstrap necesarios para su proyecto.
<enlace rel=”hoja de estilo” 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>
Ejemplo 1: el siguiente código muestra un uso simple de las clases de borde.
HTML
<!DOCTYPE html> <html> <head> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity= "sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src= "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity= "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity= "sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity= "sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"> </script> <!-- Custom CSS --> <style> h2{ color: green; text-align: center; } div.one{ margin-top: 40px; text-align: center; } button{ margin-top: 10px; width:80px; height:80px; margin-right:15px; border:white; } </style> </head> <body> <h2>GeeksforGeeks</h2> <div class="container"> <!-- Bootstrap Button Classes --> <div class="one"> <button class="border"></button> <button class="border-top"></button> <button class="border-bottom"></button> <button class="border-left"></button> <button class="border-right"></button> </div> </div> </body> </html>
Producción:
Nota: Como puede ver, la salida apenas se ve. Para este propósito, Bootstrap proporciona colores de borde .
Colores de borde de arranque : también proporciona una serie de clases que se pueden usar en las clases de borde de arranque anteriores para aplicar estilos de borde personalizados. Estas clases son las siguientes:
- borde-primario
- frontera-secundaria
- frontera-éxito
- frontera-peligro
- advertencia de frontera
- borde-info
- frontera-luz
- borde oscuro
- borde-blanco
Nota: Para que las clases anteriores funcionen, las clases de borde de Bootstrap también deben mencionarse junto con las clases anteriores. Los siguientes ejemplos usan la clase de » borde » de Bootstrap.
Ejemplo 2: El siguiente ejemplo muestra las clases “ border-primary”, “border-secundario”, “border-success”,”border-danger”,”border-warning ” con los colores azul, gris, verde, rojo y amarillo respectivamente.
HTML
<!DOCTYPE html> <html lang="en"> <head> <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> <div class="container"> <ul> <li class="border border-primary"> .border border-primary </li> <br> <li class="border border-secondary"> .border border-secondary </li> <br> <li class="border border-success"> .border border-success </li> <br> <li class="border border-danger"> .border border-danger </li> <br> <li class="border border-warning"> .border border-warning </li> </ul> </div> </body>
Producción:
Ejemplo 3: El siguiente ejemplo muestra las clases » border-info», «border-light», «border-dark», «border-white » con color cian, claro, negro y blanco respectivamente.
HTML
<!DOCTYPE html> <html lang="en"> <head> <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> <h2 style="color:green;text-align:center"> GeeksforGeeks </h2> <p style="text-align:center"> <b>Bootstrap borders</b> </p> <div class="container"> <ul> <li class="border border-info"> .border border-info </li> <br> <li class="border border-light"> .border border-light </li> <br> <li class="border border-dark"> .border border-dark </li> <br> <li class="border border-white"> .border border-white </li> </ul> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por vivekjaiswar899 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA