Bootstrap4 教程基本

Bootstrap4

Bootstrap 4

Bootstrap 4 - 16 - 1.5。

-- 116

<h1> - <h6>

1 6,

ejemplo

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap ejemplo</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>h1　Título Bootstrap (2.5rem =　40px)</h1>
　　<h2>h2　Título Bootstrap (2rem =　32px)</h2>
　　<h2>h2　Título Bootstrap (1.75rem =　28px)</h2>
　　<h4>h4　Título Bootstrap (1.5rem =　24px)</h4>
　　<h5>h5　Título Bootstrap (1.25rem =　20px)</h5>
　　<h6>h6　Título Bootstrap (1rem =　16px)</h6>
</div>
</body>
</html>

prueba aquí ‹/›

Clase de título Display

Bootstrap también ofrece cuatro clases Display para controlar el estilo de los títulos: .display-1, .display-2, .display-3, .display-4。

ejemplo

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap ejemplo</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Título Display</h1>
　　<p>Los títulos Display pueden output un estilo de fuente más grande y más grueso.</<p>
　　<h1　class="display-1">Display　1</h1>
　　<h1　class="display-2">Display　2</h1>
　　<h1　class="display-3">Display　3</h1>
　　<h1　class="display-4">Display　4</h1>
</div>
</body>
</html>

prueba aquí ‹/›

<small>

En Bootstrap 4 En HTML, el elemento <small> se utiliza para crear texto de tamaño más pequeño y color más claro:

ejemplo

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap ejemplo</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Título de texto más pequeño</h1>
　　<p>El elemento small se utiliza para texto de tamaño más pequeño y color más claro:</<p>　　　　　　　
　　<h1>h1　Título <small>Subtítulo</small></h1>
　　<h2>h2　Título <small>Subtítulo</small></h2>
　　<h2>h2　Título <small>Subtítulo</small></h2>
　　<h4>h4　Título <small>Subtítulo</small></h4>
　　<h5>h5　Título <small>Subtítulo</small></h5>
　　<h6>h6　Título <small>Subtítulo</small></h6>
</div>
</body>
</html>

prueba aquí ‹/›

<mark>

Bootstrap 4 Definir <mark> como fondo amarillo y cierta margen interno:

ejemplo

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap ejemplo</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Texto resaltado</h1>　　　　
　　<p>Se utiliza el elemento mark para <mark>resaltar</mark> texto:/mark> texto.</<p>
</div>
</body>
</html>

prueba aquí ‹/›

<abbr>

Bootstrap 4 Definir el estilo del elemento HTML <abbr> como una línea de borde punteada en la parte inferior del texto:

ejemplo

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap ejemplo</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Abreviaturas</h1>
　　<p>El elemento abbr se utiliza para marcar abreviaturas o siglas:</<p>
　　<p><abbr title="Organización Mundial de la Salud">OMS</abbr> se estableció1948año.</<p>
</div>
</body>
</html>

prueba aquí ‹/›

<blockquote>

Se puede agregar la clase .blockquote al <blockquote> para el contenido citado:

ejemplo

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap ejemplo</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Citas</h1>
　　<p>El elemento blockquote se utiliza para presentar contenido de otras fuentes:</<p>
　　<blockquote class="blockquote">
　　　　<p>5A lo largo de 0 años, la Fundación Mundial para la Naturaleza ha estado protegiendo el futuro de la naturaleza. La Fundación Mundial para la Naturaleza (WWF) es una de las organizaciones de protección de la naturaleza líderes en el mundo, en100 países/trabajar en diversas regiones,
　　　　ha recibido el apoyo de120 miembros y casi500 miembros de apoyo.</<p>
　　　　<footer class="blockquote-footer">Desde el sitio web de WWF</footer>
　　</blockquote>
</div>
</body>
</html>

prueba aquí ‹/›

<dl>

Bootstrap 4 Definir el estilo del elemento HTML <dl> como sigue:

ejemplo

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap ejemplo</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Lista de descripciones</h1>　　　　
　　<p>El elemento dl representa una lista de descripciones:</<p>
　　<dl>
　　　　<dt>Café</dt>
　　　　<dd>-　Bebida caliente </dd>
　　　　<dt>Leche</dt>
　　　　<dd>-　Bebida fría </dd>
　　</dl>　　　　　
</div>
</body>
</html>

prueba aquí ‹/›

<code>

Bootstrap 4 Definir el estilo del elemento HTML <code> como sigue:

ejemplo

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap ejemplo</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>fragmento de código</h1>
　　<p>Pueden colocarse algunos elementos de código dentro del elemento <code>:</<p>
　　<p>Los siguientes elementos HTML: <code>span</, <code>section</, <code>div</code> se utiliza para definir parte del contenido del documento.</<p>
</div>
</body>
</html>

prueba aquí ‹/›

<kbd>

Bootstrap 4 Definir el estilo del elemento HTML <kbd> como sigue:

ejemplo

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap ejemplo</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>/h1>
　　>entrada de teclado</<p>
　　<p>Para indicar entradas que se suelen ingresar mediante teclado, usar el elemento kbd:<　+　<p>/kbd>abrir el cuadro de diálogo "imprimir".</<p>
</div>
</body>
</html>

prueba aquí ‹/›

<pre>

Bootstrap 4 Definir el estilo del elemento HTML <pre> como sigue:

ejemplo

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap ejemplo</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>códigos en múltiples líneas</h1>
<p>Para códigos en múltiples líneas, usar el elemento pre:</<p>
<pre>
el texto del elemento previo
mostrar con un ancho fijo
fuente, y mantener
espacio y
salto de línea.
</pre>
</div>
</body>
</html>

prueba aquí ‹/›

más clases de tipografía

la tabla proporciona más clases de tipografía Bootstrap4 más ejemplos de tipografía:

nombre de la clase	descripción	ejemplo
.font-peso-bold	texto negrita	Intente uno
.font-peso-normal	texto normal	Intente uno
.font-peso-light	texto más fino	Intente uno
.font-italic	texto en itálica	Intente uno
.lead	hacer que el párrafo resalte	Intente uno
.small	especificar texto más pequeño (para el elemento padre) 85% )	Intente uno
.text-izquierda	alineación a la izquierda	Intente uno
.text-centrado	Centrado	Intente uno
.text-right	Alineación a la derecha	Intente uno
.text-justify	Establecer alineación de texto, el texto que sobrepase el ancho de la pantalla se alineará automáticamente en una nueva línea	Intente uno
.text-nowrap	No hacer que el texto que sobrepase el ancho de la pantalla se alinee en una nueva línea	Intente uno
.text-lowercase	Establecer texto en minúsculas	Intente uno
.text-uppercase	Establecer texto en mayúsculas	Intente uno
.text-capitalize	Establecer la capitalización de la palabra	Intente uno
.initialism	Mostrar el texto en el elemento <abbr> en un tamaño de fuente pequeño y puede convertir letras minúsculas en mayúsculas	Intente uno
.list-unstyled	Eliminar el estilo de lista predeterminado, alineación a la izquierda de los elementos de lista (en <ul> y <ol>). Esta clase solo se aplica a los elementos de lista subordinados directos 　　(Si necesita eliminar elementos de lista anidados, debe usar este estilo en la lista anidada)	Intente uno
.list-inline	Colocar todos los elementos de lista en una misma línea	Intente uno
.pre-scrollable	Hacer que el elemento <pre> sea desplazable, el área máxima de altura del bloque de código es340px, una vez que supere esta altura, aparecerá una barra de desplazamiento en el eje Y	Intente uno

Bootstrap4 Colores Bootstrap4 系统网格