BootStrap es el marco CSS de código abierto, gratuito y más popular que se utiliza para el desarrollo web front-end. correa de arranque 4es la última versión que se está utilizando. BootStrap 4 ofrece una amplia gama de componentes, contenido, diseño y utilidades para trabajar. Bootstrap 4 ofrece un sistema de cuadrícula que utiliza una serie de contenedores, filas y columnas para diseñar y alinear el contenido. El sistema de cuadrícula permite a los usuarios crear cuadrículas con especificaciones personalizadas. El sistema de cuadrícula está construido con un flexbox y responde completamente y puede ajustar el tamaño de la columna de acuerdo con el tamaño de la pantalla. Los contenedores son el elemento de diseño más básico en Bootstrap que se requiere al usar el sistema de cuadrícula. La columna de una lista se puede dividir en filas utilizando el sistema de cuadrícula de BootStrap. Las clases ‘row’ y ‘col’ de BootStrap permiten dividir cualquier área en filas y columnas. Los siguientes códigos se pueden usar para dividir una columna de la lista en diferentes filas usando BootStrap.
Considere la siguiente lista:
- Fila 1
- Fila 2
- Fila 3
- Fila 4
Ejemplo 1: en este ejemplo, dividimos las columnas de la lista en filas usando filas y columnas anidadas.
<!DOCTYPE html>
<html>
<head>
<title>Splitting List Into Columns</title>
<!-- Linking BootStrap 4 CDN to HTML application -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous" />
<!--Styling the webpage using CSS -->
<style type="text/css">
.col {
background-color: yellow;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-center display-4">Column</h1>
<div class="row">
<div class="col">
<div class="row">
<div class="col">Row 1</div>
</div>
<div class="row">
<div class="col">Row 2</div>
</div>
<div class="row">
<div class="col">Row 3</div>
</div>
<div class="row">
<div class="col">Row 4</div>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: en este ejemplo, dividimos la columna de la lista en filas agregando el atributo de clase en la etiqueta <li>.
<!DOCTYPE html>
<html>
<head>
<title>Splitting List Into Columns</title>
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous" />
<style type="text/css">
.col-12 {
background-color: skyblue;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-center display-4">Column</h1>
<ul>
<li class="col-12">Row 1</li>
<li class="col-12">Row 2</li>
<li class="col-12">Row 3</li>
<li class="col-12">Row 4</li>
</ul>
</div>
</body>
</html>
Producción:
Ejemplo 3: En este ejemplo, dividimos la columna de una lista en filas por divisiones anidadas.
<!DOCTYPE html>
<html>
<head>
<title>Splitting List Into Columns</title>
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous" />
<style type="text/css">
.col-12 {
background-color: lightgreen;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-center display-4">Column</h1>
<div class="col-12">Row 1</div>
<div class="col-12">Row 2</div>
<div class="col-12">Row 3</div>
<div class="col-12">Row 4</div>
</div>
</body>
</html>
Producción
Publicación traducida automáticamente
Artículo escrito por Shreyasi_Chakraborty y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA