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