Notas de estudio Bootstrap tres

  1. 1.   Contenedor de diseño

La clase de contenedor es el elemento de diseño más básico en Bootstrap y se requiere cuando se usa el sistema de cuadrícula predeterminado. Dos contenedores están definidos en Bootstrap , .container y .container- fluid .

El contenedor del contenedor usará la consulta de medios para establecer un ancho fijo de acuerdo con el ancho de pantalla diferente . Cuando se cambia el tamaño del navegador, la página se cambiará en etapas, lo que significa que el ancho máximo del contenedor del contenedor será cambiar en cada punto de ruptura.

El contenedor-contenedor de fluidos permanece en tamaño de pantalla completa, siempre al 100 % de ancho.

Código de referencia:

<cuerpo>

<div class="borde del contenedor text-center
bg-light">

</div>

<div class="container-fluid border text-center
bg-light">

</div>

</cuerpo>

  1. 2.   Responda a los puntos de interrupción

Bootstrap utiliza consultas de medios para crear puntos de interrupción sensibles para diseños e interfaces que se basan principalmente en un ancho mínimo de ventana gráfica y permiten que los elementos se expandan a medida que cambia la ventana gráfica.

Elija diferentes píxeles según el dispositivo.

  1. 3.   índice z

El índice z establece la posición de un elemento posicionado a lo largo del eje Z , que se define como el eje que se extiende verticalmente al área de visualización. Si es un número positivo, está más cerca del usuario. Si es un número negativo, significa que el usuario está más lejos. Utilice esta propiedad para organizar el contenido y ayudar a controlar el diseño.

No se recomienda personalizar el valor de la propiedad del índice z , si cambia uno de ellos, es posible que deba cambiarlos todos.

  1. 4.   Sistema de rejilla

Bootstrap incluye una cuadrícula móvil primero, que se basa en un diseño de 12 columnas, tiene 5 tamaños de respuesta para diferentes pantallas, admite la invocación gratuita de sass mixins y combina sus propias clases predefinidas de CSS y javaScript para crear varios diseños de formas y tamaños.

Cada fila de la cuadrícula debe colocarse en un contenedor con una clase de .container (ancho fijo) o .container-fluid (ancho de pantalla completa), de modo que algunos márgenes y rellenos se puedan configurar automáticamente.

Las filas se utilizan en sistemas de cuadrícula para crear grupos horizontales de columnas, el contenido se coloca en columnas y solo las columnas pueden ser nodos directos de filas. Las clases predefinidas como .row y .col-sm-4 se pueden usar para crear rápidamente columnas de diseño de cuadrícula, creando espacios entre el contenido de la columna mediante el relleno, este espacio a través de márgenes negativos en la clase de fila , configurando la primera fila y la última Compensación por una columna.

Convenciones del sistema de cuadrícula en varias pantallas y dispositivos

Dispositivos de pantalla ultra pequeña

( <576px )

dispositivo de pantalla pequeña

(≥ 576 píxeles )

Dispositivo de pantalla mediana

(≥ 768 píxeles )

Dispositivo de pantalla grande

(≥ 992 píxeles )

Dispositivos de pantalla grande

(≥ 1200 píxeles )

anchura máxima del contenedor

Ninguno (automático)

540px

720px

960px

1140px

prefijo de clase _

.columna-

.col-sm-

.col-md-

.col-lg-

.col-xl-

número de columnas

12

Ancho de la ranura

30px ( 15px en ambos lados de cada columna )

anidado

permitir

clasificación de columnas

permitir

Las columnas de cuadrícula se crean abarcando las 12 columnas especificadas. Bootstrap usa em o rem para la mayoría de las dimensiones, los puntos de interrupción de la cuadrícula y los anchos de los contenedores en px , porque los anchos de la ventana gráfica se miden en píxeles y no cambian con el tamaño de la fuente.

  1. 5.   Diseño automático

Con clases de columna específicas de punto de interrupción, el cambio de tamaño de ruptura se puede hacer fácilmente sin usar estilos explícitos.

a. Columnas de igual ancho

  Ejemplo de código:

<!DOCTYPEhtml>

<html>

<cabeza>

<juego de caracteres meta =" UTF-8 ">

<título> Título</título>

<meta name =" viewport " content =" ancho=ancho-del-dispositivo,escala-inicial=1, reducción-para-ajustar=no ">

<enlace rel =" hoja de estilo " href =" bootstrap-4.2.1-dist/css/bootstrap.css ">

<secuencia de comandos src =" jquery-3.3.1.slim.js "></secuencia de comandos>

<script src =" https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js "></script>

<script src =" bootstrap-4.2.1-dist/js/bootstrap.min.js "></script>

</cabeza>

< clase de cuerpo =" contenedor ">

<h3 class =" mb-4 "> Columnas monoespaciadas </h3>

<div clase =" fila ">

<div class =" col border py-3 bg-light "> La mitad </div>

<div class =" col border py-3 bg-light "> La mitad </div>

</div>

<div clase =" fila ">

<div class =" col border py-3 bg-light "> un tercio </div>

<div class =" col border py-3 bg-light "> un tercio </div>

<div class =" col border py-3 bg-light "> un tercio </div>

</div>

<div clase =" fila ">

<div class =" col border py-3 bg-light "> cuarto </div>

<div class =" col border py-3 bg-light "> cuarto </div>

<div class =" col border py-3 bg-light "> cuarto </div>

<div class =" col border py-3 bg-light "> cuarto </div>

</div>

<div clase =" fila ">

<div class =" col border py-3 bg-light "> un doceavo </div>

<div class =" col border py-3 bg-light "> un doceavo </div>

<div class =" col border py-3 bg-light "> un doceavo </div>

<div class =" col border py-3 bg-light "> un doceavo </div>

<div class =" col border py-3 bg-light "> un doceavo </div>

<div class =" col border py-3 bg-light "> un doceavo </div>

<div class =" col border py-3 bg-light "> un doceavo </div>

<div class =" col border py-3 bg-light "> un doceavo </div>

<div class =" col border py-3 bg-light "> un doceavo </div>

<div class =" col border py-3 bg-light "> un doceavo </div>

<div class =" col border py-3 bg-light "> un doceavo </div>

<div class =" col border py-3 bg-light "> un doceavo </div>

<div class =" col border py-3 bg-light "> un doceavo </div>

</div>

</cuerpo>

</html>

b. Establecer el ancho de columna

En el caso de una fila y varias columnas, se puede especificar una columna y se puede definir el ancho, mientras que otras columnas se redimensionan automáticamente y la clase de cuadrícula definida se puede usar para optimizar el ancho o el bloque de la cuadrícula. En este caso, se cambiará el tamaño de las demás columnas independientemente del ancho de la columna central.

Ejemplo de código:

<!DOCTYPEhtml>

<html>

<cabeza>

<juego de caracteres meta =" UTF-8 ">

<título> Título</título>

<meta name =" viewport " content =" ancho=ancho-del-dispositivo,escala-inicial=1, reducción-para-ajustar=no ">

<enlace rel =" hoja de estilo " href =" bootstrap-4.2.1-dist/css/bootstrap.css ">

<secuencia de comandos src =" jquery-3.3.1.slim.js "></secuencia de comandos>

<script src =" https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js "></script>

<script src =" bootstrap-4.2.1-dist/js/bootstrap.min.js "></script>

</cabeza>

< clase de cuerpo =" contenedor ">

<h3 class =" mb-4 "> Establecer un ancho de columna </h3>

<div clase =" fila ">

<div class =" col border py-3 bg-light "> izquierda </div>

<div class =" col-7 border py-3 bg-light "> medio </div>

<div class =" col border py-3 bg-light "> derecha </div>

</div>

<div clase =" fila ">

<div class =" col-3 border py-3 bg-light "> izquierda </div>

<div class =" col border py-3 bg-light "> medio </div>

<div class =" col border py-3 bg-light "> derecha </div>

</div>

</cuerpo>

</html>

c. Contenido de ancho variable

Esto se puede lograr utilizando el método col-{breakpoint}-auto breakpoint para cambiar el tamaño de la columna según el ancho natural de su contenido.

Ejemplo de código:

<!DOCTYPEhtml
 >

<html>
 

<cabeza>
 

<juego de caracteres meta =" UTF-8 ">

<título> Título</título>

<meta name =" viewport " content =" ancho=ancho-del-dispositivo,escala-inicial=1,
 reducción-para-ajustar=no ">

<enlace rel =" hoja de estilo " href =" bootstrap-4.2.1-dist/css/bootstrap.css ">

<secuencia de comandos src =" jquery-3.3.1.slim.js "></secuencia de comandos>

<script src =" https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js "></script>

<script src =" bootstrap-4.2.1-dist/js/bootstrap.min.js "></script>

</cabeza>
 

< clase de cuerpo =" contenedor ">

<h3 class =" mb-4 "> Contenido de ancho variable </h3>

<div clase =" fila
 justificar-contenido-md-center ">

<div class =" col
 col-lg-2 border py-3 bg-light "> izquierda </div>

<div class =" col-md-auto
 border py-3 bg-light "> (cuando el tamaño de la pantalla es ≥768px , el ancho de la columna se puede ajustar automáticamente según el contenido) </div>

<div class =" col
 col-lg-2 border py-3 bg-light "> derecha </div>

</div>
 

<div clase =" fila ">

<div class =" col border
 py-3 bg-light "> izquierda </div>

<div class =" col-md-auto
 border py-3 bg-light "> (cuando el tamaño de la pantalla es ≥768px , el ancho de la columna se puede ajustar automáticamente según el contenido) </div>

<div class =" col
 col-lg-2 border py-3 bg-light "> derecha </div>

</div>
 

</cuerpo>
 

</html>

D. Ancho igual y varias columnas .

Cree columnas de igual ancho que abarquen varias filas insertando la clase de estilo común w-100 , que divide la columna en nuevas filas.

Ejemplo de código:

<!DOCTYPEhtml
 >

<html>
 

<cabeza>
 

<juego de caracteres meta =" UTF-8 ">

<título> Título</título>

<meta name =" viewport " content =" ancho=ancho-del-dispositivo,escala-inicial=1,
 reducción-para-ajustar=no ">

<enlace rel =" hoja de estilo " href =" bootstrap-4.2.1-dist/css/bootstrap.css ">

<secuencia de comandos src =" jquery-3.3.1.slim.js "></secuencia de comandos>

<script src =" https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js "></script>

<script src =" bootstrap-4.2.1-dist/js/bootstrap.min.js "></script>

</cabeza>
 

< clase de cuerpo =" contenedor ">

<h3 class =" mb-4 "> Visualización de varias líneas de columnas de igual ancho </h3><div   class =" fila ">

<div class =" col border
 py-3 bg-light "> cuarto </div>

<div class =" col border
 py-3 bg-light "> cuarto </div>

<div clase =" w-100 "></div>

<div class =" col border
 py-3 bg-light "> cuarto </div>

<div class =" col border
 py-3 bg-light "> cuarto </div>

</div>
 

</cuerpo>
 

</html>

  1. 6.   Clase de respuesta

El sistema de cuadrícula Bootstrap incluye 5 anchos y definiciones para crear diseños receptivos complejos, que se pueden definir según sea necesario: extra small.col , small.col-sm-*, medium.col-md-* , large.col - lg -* , extra grande .col-xl-* cinco estilos de pantalla.

A. Cubre todos los dispositivos

Utilice las clases .col y .col-* si desea definir la misma representación del sistema de cuadrícula desde el dispositivo más pequeño hasta el dispositivo más grande a la vez. Este último se usa para definir un tamaño específico; de lo contrario, usar .col está bien.

Ejemplo de código:

<!DOCTYPEhtml
 >

<html>
 

<cabeza>
 

<juego de caracteres meta =" UTF-8 ">

<título> Título</título>

<meta name =" viewport " content =" ancho=ancho-del-dispositivo,escala-inicial=1,
 reducción-para-ajustar=no ">

<enlace rel =" hoja de estilo " href =" bootstrap-4.2.1-dist/css/bootstrap.css ">

<secuencia de comandos src =" jquery-3.3.1.slim.js "></secuencia de comandos>

<script src =" https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js "></script>

<script src =" bootstrap-4.2.1-dist/js/bootstrap.min.js "></script>

</cabeza>
 

< clase de cuerpo =" contenedor ">

<h3 class =" mb-4 "> cubre todos los dispositivos </h3>

<div clase =" fila ">

<div class =" col border
 py-3 bg-light "> col</div>

<div class =" col border
 py-3 bg-light "> col</div>

<div class =" col border
 py-3 bg-light "> col</div>

<div class =" col border
 py-3 bg-light "> col</div>

</div>
 

<div clase =" fila ">

<div clase =" col-8
 borde py-3 bg-light "> col-8</div>

<div class =" col-4
 borde py-3 bg-light "> col-4</div>

</div>
 

</cuerpo>
 

</html>

B. Disposición horizontal

Con un solo método de clase .col-sm-* , es posible crear un sistema de cuadrícula básico que se mantenga si no se especifican otros anchos de punto de interrupción de consulta de medios, y se volverá superlativo a medida que la pantalla se estreche . se convertirá automáticamente en una fila por columna y se apilará horizontalmente.

Ejemplo de código:

<!DOCTYPEhtml
 >

<html>
 

<cabeza>
 

<juego de caracteres meta =" UTF-8 ">

<título> Título</título>

<meta name =" viewport " content =" ancho=ancho-del-dispositivo,escala-inicial=1,
 reducción-para-ajustar=no ">

<enlace rel =" hoja de estilo " href =" bootstrap-4.2.1-dist/css/bootstrap.css ">

<secuencia de comandos src =" jquery-3.3.1.slim.js "></secuencia de comandos>

<script src =" https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js "></script>

<script src =" bootstrap-4.2.1-dist/js/bootstrap.min.js "></script>

</cabeza>
 

< clase de cuerpo =" contenedor ">

<h3 class =" mb-4 "> Disposición horizontal </h3>

<!-- Iniciar alineación horizontal en dispositivos de tipo sm ( ≥576px ) -->

<div clase =" fila ">

<div class =" col-sm-8
 borde py-3 bg-light "> col-sm-8</div>
 

<div class =" col-sm-4
 borde py-3 bg-light "> col-sm-4</div>
 

</div>
 

<!-- Iniciar alineación horizontal en dispositivos de tipo md ( ≥768px ) -->

<div clase =" fila ">

<div class =" col-md-8
 borde py-3 bg-light "> col-md-8</div>
 

<div class =" col-md-4
 borde py-3 bg-light "> col-md-4</div>
 

</div>
 

</cuerpo>
 

</html>

  1. C. Mezclar y combinar

Cada columna puede tener una definición de dispositivo diferente según sea necesario.

Ejemplo de código:

<!DOCTYPEhtml
 >

<html>
 

<cabeza>
 

<juego de caracteres meta =" UTF-8 ">

<título> Título</título>

<meta name =" viewport " content =" ancho=ancho-del-dispositivo,escala-inicial=1,
 reducción-para-ajustar=no ">

<enlace rel =" hoja de estilo " href =" bootstrap-4.2.1-dist/css/bootstrap.css ">

<secuencia de comandos src =" jquery-3.3.1.slim.js "></secuencia de comandos>

<script src =" https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js "></script>

<script src =" bootstrap-4.2.1-dist/js/bootstrap.min.js "></script>

</cabeza>
 

< clase de cuerpo =" contenedor ">

<h3 clase =" mb-4 "> Mezclar y combinar </h3>

<!-- Se muestra como una columna de ancho completo y una columna de medio ancho en dispositivos más pequeños que el tipo md , y se muestra como una columna en dispositivos mayores o iguales que el tipo md , lo que representa 8 y 4 copias respectivamente -->

<div clase =" fila ">

<div class =" col-12
 col-md-8 borde py-3 bg-light "> .col-12 .col-md-8</div>
 

<div class =" col-6
 col-md-4 borde py-3 bg-light "> .col-6 .col-md-4</div>
 

</div>
 

<!-- En cualquier tipo de dispositivo, el ancho de columna es 50%-->

<div clase =" fila ">

<div class =" col-6
 borde py-3 bg-light "> .col-6</div>
 

<div class =" col-6
 borde py-3 bg-light "> .col-6</div>
 

</div>
 

</cuerpo>
 

</html>

c. Eliminar márgenes

La cuadrícula y las columnas predeterminadas de Bootstrap tienen márgenes, generalmente izquierdo y derecho , margen de 15 px o procesamiento de relleno , puede usar la clase .no-gutters para eliminar, lo que afectará la fila .row , el espacio paralelo de la columna y todas las subcolumnas.

Ejemplo de código:

<!DOCTYPEhtml>

<html>
 

<cabeza>
 

<juego de caracteres meta =" UTF-8 ">

<título> Título</título>

<meta name =" viewport " content =" ancho=ancho-del-dispositivo,escala-inicial=1,
 reducción-para-ajustar=no ">

<enlace rel =" hoja de estilo " href =" bootstrap-4.2.1-dist/css/bootstrap.css ">

<secuencia de comandos src =" jquery-3.3.1.slim.js "></secuencia de comandos>

<script src =" https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js "></script>

<script src =" bootstrap-4.2.1-dist/js/bootstrap.min.js "></script>

</cabeza>
 

< clase de cuerpo =" contenedor ">

<h3 class =" mb-4 "> Eliminar márgenes </h3>

<div clase =" fila ">

<div class =" col-12
 col-sm-6 col-md-8 py-3 borde bg-light "> .col-12 .col-sm-6 .col-md-8</div>

<div class =" col-6
 col-md-4 py-3 borde bg-light "> .col-6 .col-md-4</div>
 

</div>
 

</cuerpo>
 

</html>

D. Columna de embalaje

Si coloca más de 12 columnas en una fila, cada conjunto de columnas adicionales se envolverá como una unidad en una nueva fila.

Ejemplo de código:

<!DOCTYPEhtml>

<html>
 

<cabeza>
 

<juego de caracteres meta =" UTF-8 ">

<título> Título</título>

<meta name =" viewport " content =" ancho=ancho-del-dispositivo,escala-inicial=1,
 reducción-para-ajustar=no ">

<enlace rel =" hoja de estilo " href =" bootstrap-4.2.1-dist/css/bootstrap.css ">

<secuencia de comandos src =" jquery-3.3.1.slim.js "></secuencia de comandos>

<script src =" https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js "></script>

<script src =" bootstrap-4.2.1-dist/js/bootstrap.min.js "></script>

</cabeza>
 

<body class="container">

<h3 class="mb-4">列包装</h3>

<div class="row">

<div class="col-9 py-3
 border bg-light">.col-9</div>

<div class="col-4 py-3
 border bg-light">.col-4<br>因为9 + 4 = 13 >12，4列宽的div被包装到一个新行上，作为一个连续的单元。</div>

<div class="col-6 py-3
 border bg-light">.col-6<br>后续的列沿着新行继续排列。</div>

</div>
 

</body>
 

</html>

  1. 7.  重排序

a.排列顺序

使用.order-*类选择符，可以对空间进行可视化排序，提供.order-1到.order-12等12个级别的顺序，支持主流浏览器和设备。

没有.order类的元素，默认在最前边。

代码样例

<!DOCTYPE html>

<html>
 

<head>
 

<meta charset="UTF-8">

<title>Title</title>

<meta name="viewport" content="width=device-width,initial-scale=1,
 shrink-to-fit=no">

<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">

<script src="jquery-3.3.1.slim.js"></script>

<script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script>

<script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>

</head>
 

<body class="container">

<h3 class="mb-4">排列顺序</h3>

<div class="row">

<div class="col
 order-12 py-3 border bg-light">

order-12

</div>
 

<div class="col
 order-1 py-3 border bg-light">

order-1

</div>
 

<div class="col
 order-6 py-3 border bg-light">

order-6

</div>
 

<div class="col py-3
 border bg-light">

col

</div>
 

</div>
 

</body>
 

</html>

可以使用.order-first更改一个顺序到首位置，使用.order-last到末尾

b.列偏移

  • 使用响应式的.offset-*类偏移

  • 使用边距通用样式处理

  • 偏移类

使用.offset-md-*类可以使列向右偏移，通过定义*的数字，实现列偏移，比如：.offset-md-4是向右偏移四列

代码样例：

<!DOCTYPE html>

<html>
 

<head>
 

<meta charset="UTF-8">

<title>Title</title>

<meta name="viewport" content="width=device-width,initial-scale=1,
 shrink-to-fit=no">

<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">

<script src="jquery-3.3.1.slim.js"></script>

<script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script>

<script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>

</head>
 

<body class="container">

<h3 class="mb-4">偏移类示例</h3>

<div class="row">

<div class="col-md-6
 offset-md-3 py-3 border bg-light">.col-md-6 .offset-md-3</div>
 

</div>
 

<div class="row">

<div class="col-md-4
 offset-md-1 py-3 border bg-light">.col-md-4 .offset-md-1</div>
 

<div class="col-md-4
 offset-md-2 py-3 border bg-light">.col-md-4 .offset-md-2</div>
 

</div>
 

<div class="row">

<div class="col-md-4
 py-3 border bg-light">.col-md-4</div>
 

<div class="col-md-4
 offset-md-4 py-3 border bg-light">.col-md-4 .offset-md-4</div>
 

</div>
 

</body>
 

</html>

  1. b)  使用margin类

网格系统中可以使用.ml-auto与.mr-auto来强制隔离两边的距离，实现水平隔离的效果。

代码样例：

<!DOCTYPE
 html>

<html>
 

<head>
 

<meta charset="UTF-8">

<title>Title</title>

<meta name="viewport" content="width=device-width,initial-scale=1,
 shrink-to-fit=no">

<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">

<script src="jquery-3.3.1.slim.js"></script>

<script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script>

<script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>

</head>
 

<body class="container">

<h3 class="mb-4">使用margin类实现列偏移</h3>

<div class="row">

<div class="col-md-4
 py-3 border bg-light">.col-md-4</div>
 

<div class="col-md-4
 ml-auto py-3 border bg-light">.col-md-4 .ml-auto</div>
 

</div>
 

<div class="row">

<div class="col-md-3
 ml-md-auto py-3 border bg-light">.col-md-3 .ml-md-auto</div>
 

<div class="col-md-3
 ml-md-auto py-3 border bg-light">.col-md-3 .ml-md-auto</div>
 

</div>
 

<div class="row">

<div class="col-auto
 mr-auto py-3 border bg-light">.col-auto .mr-auto</div>
 

<div class="col-auto
 py-3 border bg-light">.col-auto</div>
 

</div>
 

</body>
 

</html>

c.列嵌套

如果想在网格系统中将内容再次嵌套，可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素中。被嵌套的行所包含的列数量小于12个。

代码样例：

<!DOCTYPE html>

<html>
 

<head>
 

<meta charset="UTF-8">

<title>Title</title>

<meta name="viewport" content="width=device-width,initial-scale=1,
 shrink-to-fit=no">

<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">

<script src="jquery-3.3.1.slim.js"></script>

<script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script>

<script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>

</head>
 

<body class="container">

<h3 class="mb-4">嵌套</h3>

<div class="row">

<div class="col-12
 col-lg-6">

<!--嵌套行-->

<div class="row border
 no-gutters">

<div class="col-12
 col-sm-3"><img src="images/b.jpg" alt=""></div>

<div class="col-12
 col-sm-9 pl-3">

李白诗歌的语言，有的清新如同口语，有的豪放，不拘声律，近于散文，但都统一在“清水出芙蓉，天然去雕饰”的自然美之中。

</div>
 

</div>
 

</div>
 

<div class="col-12
 col-lg-6">

<!--嵌套行-->

<div class="row border
 no-gutters">

<div class="col-12
 col-sm-3"><img src="images/c.jpg" alt=""></div>

<div class="col-12
 col-sm-9 pl-3">

在杜甫中年因其诗风沉郁顿挫，忧国忧民，杜甫的诗被称为“诗史”。他的诗词以古体、律诗见长，风格多样，以“沉郁顿挫”四字准确概括出他自己的作品风格，而以沉郁为主。

</div>
 

</div>
 

</div>
 

</div>
 

</body>
 

</html>

  1. 8.  布局工具类

Bootstrap包含十几个用于显示、隐藏、对齐和间隔的使用工具，可以加快移动设备与响应式界面的开发。

a.Display块属性定义

使用 Bootstrap.的实用程序来响应式的切换，display属性的值，将其以网格系统内容或组件混合使用，以便在特定的事物中显示或隐藏。

b.Flexbox选项

Bootstrap是基于Flexbox流式布局，大多数组件都支持Flex流式布局，但不是所有的元素的display都是默认就启用display:flex属性的(会增加不必要的层叠，影响到浏览器的需要。)。

c.外边距和内边距

使用外边距和内边距使用程序来控制元素和组件的间距大小。Bootstrap包含一个用于间隔使用程序的5级刻度(基于1rem值默认$spacer变量),为所有视图选择值(例如，.mr-3 用于右边框: 1rem),或为目标特定视图选择响应变量(例如，.mr-md-3用于有边框：1rem,从md断点开始)。

d.切换显示和隐藏

如果不使用display对元素进行隐藏(或无法使用的)，可以使用visibility这个Bootstrap可视性工具来对网页上的元素进行隐藏，使用它后网页元素对于正常用户是不可见的，但元素的宽高占位依然有效。

图片