Bootstrap es un marco receptivo creado por Twitter. Se utiliza para crear sitios receptivos. Tiene una clase y un diseño predefinidos. En Bootstrap, podemos agregar clases predefinidas al código sin escribir código. También tenemos una clase “.col” predefinida para crear columnas.
Sistema de diseño de cuadrícula : toda la pantalla de trabajo (escritorio, tableta, móvil) se divide en 12 filas de igual tamaño. Podemos hacer columnas desiguales usando la clase «col-number» (predefinida), donde el número decide la proporción/tamaño de esa columna y el número debe ser menor o igual a 12.
Guía paso a paso para implementar columnas desiguales en bootstrap:
Paso 1: Incluya Bootstrap y jQuery CDN en la etiqueta <head> antes que todas las demás hojas de estilo para cargar nuestro CSS.
<enlace rel=”hoja de estilo” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/ popper.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”> </script>
Paso 2: agregue la clase con la clase .col-3 y .col-6 para tener divisiones desiguales de columnas.
<div class=".col-3">
<!-- Column 1 content -->
</div>
<div class=".col-6">
<!-- Column 2 content -->
</div>
Paso 3: agregue la etiqueta <div> con la clase container-fluid y también agregue otra <div> con la clase .row para tener todas las columnas desiguales en una fila.
Ejemplo 1: el siguiente ejemplo creará una división del 25 %/50 %/25 % de columnas de longitud desigual.
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.5.2/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"> </script> </head> <body> <div class="container-fluid"> <div class="row"> <! -- columns having unequal lengths --> <! -- bg-success is background color --> <div class="col-3 bg-success">col-3</div> <div class="col-6 bg-warning">col-6</div> <div class="col-3 bg-success">col-3</div> </div> </div> </body> </html>
Producción:
25% /50%/ 25% dividido
Ejemplo 2: En el siguiente ejemplo, usamos dos elementos col , que obtienen un ancho del 50 % cada uno de las columnas de igual longitud. Bootstrap reconocerá cuántos elementos están presentes y, en consecuencia, creará columnas de igual ancho.
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.5.2/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"> </script> </head> <body> <div class="container-fluid"> <div class="row"> <! -- columns of equal width --> <! -- bg-success is bg color --> <div class="col bg-success">col</div> <div class="col bg-warning">col</div> </div><br/> <div class="row"> <! -- columns having unequal lengths --> <! -- bg-success is background color --> <div class="col-3 bg-success">col-3</div> <div class="col-6 bg-warning">col-6</div> <div class="col-3 bg-success">col-3</div> </div> </div> </body> </html>
Producción:
fila 1:- 50 %/50 % de división, fila 2:- 25 %/50 %/25 % de división
Publicación traducida automáticamente
Artículo escrito por saksham894954 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA