English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutorial básico de Bootstrap

plugins de Bootstrap

Tipografía de Bootstrap

Bootstrap utiliza Helvetica Neue, Helvetica, Arial y sans-serif como su pila de fuentes predeterminada.

Utilizando las características de alineación de Bootstrap, puede crear títulos, párrafos, listas y otros elementos en línea.

título

Bootstrap define todos los títulos HTML (h1 h6de estilo. Vea el siguiente ejemplo:

Los resultados se muestran a continuación:

subtítulo en línea

Si es necesario agregar un subtítulo en línea a cualquier título, simplemente agregue <small> a los lados del elemento, o agregue .small class, de esta manera puede obtener un texto más pequeño y de color más claro, como se muestra en el siguiente ejemplo:

Ejemplo en línea

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">　
<title>Bootstrap　Ejemplo　-　subtítulo en línea/title>
<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
	<h1>Soy un título1　h1.　<small>Soy un subtítulo1　h1</small></h1>　
	<h2>Soy un título2　h2.　<small>Soy un subtítulo2　h2</small></h2>
	<h2>Soy un título3　h2.　<small>Soy un subtítulo3　h2</small></h2>
	<h4>Soy un título4　h4.　<small>Soy un subtítulo4　h4</small></h4>
	<h5>Soy un título5　h5.　<small>Soy un subtítulo5　h5</small></h5>
	<h6>Soy un título6　h6.　<small>Soy un subtítulo6　h6</small></h6>
</body>
</html>
Prueba aquí ‹/›

Los resultados se muestran a continuación:

Texto principal de guía

Para agregar texto en negrita a un párrafo, puede agregar, lo que dará un texto más grande y grueso, con una altura de línea mayor, como se muestra en el siguiente ejemplo:

Ejemplo en línea

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　Ejemplo　-　Texto principal de guía/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Texto principal de guía/h2>
<p class="lead">Este es un ejemplo de uso del texto principal de guía. Este es un ejemplo de uso del texto principal de guía. Este es un ejemplo de uso del texto principal de guía. Este es un ejemplo de uso del texto principal de guía. Este es un ejemplo de uso del texto principal de guía. Este es un ejemplo de uso del texto principal de guía. Este es un ejemplo de uso del texto principal de guía. Este es un ejemplo de uso del texto principal de guía./p>
</body>
</html>
Prueba aquí ‹/›

Los resultados se muestran a continuación:

resaltado

Las etiquetas de énfasis predeterminadas de HTML <small>（establecer texto al tamaño del texto del padre） 85%）、<strong>（establecer texto en un texto más grueso）、<em>（establecer texto en itálica）。

Bootstrap proporciona algunas clases para resaltar texto, como se muestra en los ejemplos a continuación:

Ejemplo en línea

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　Ejemplo　-　resaltado/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<small>El contenido de esta línea está dentro de una etiqueta/small><br>
<strong>El contenido de esta línea está dentro de una etiqueta/strong><br>
<em>El contenido de esta línea está dentro de una etiqueta y se presenta en itálica/em><br>
<p class="text-left">Alinear texto a la izquierda/p>
<p class="text-center">Alinear texto al centro/p>
<p class="text-right">Alinear texto a la derecha/p>
<p class="text-muted">El contenido de esta línea está desaturado/p>
<p class="text-primary">El contenido de esta línea tiene una clase "primary"/p>
<p class="text-success">El contenido de esta línea tiene una clase "success"/p>
<p class="text-info">El contenido de esta línea tiene una clase "info"/p>
<p class="text-warning">El contenido de esta línea tiene una clase "warning"/p>
<p class="text-danger">El contenido de esta línea tiene una clase "danger"/p>
</body>
</html>
Prueba aquí ‹/›

Los resultados se muestran a continuación:

缩写

Los elementos HTML proporcionan etiquetas de abreviatura, como WWW o HTTP. Bootstrap define el estilo del elemento <abbr> para que se muestre una línea de borde de guión inferior en el texto, que se muestra completo al pasar el ratón sobre él (siempre y cuando haya agregado texto al atributo title del <abbr>). Para obtener un texto de tamaño más pequeño, agregue .initialism al <abbr>.

Ejemplo en línea

!DOCTYPE　html>
<html>
<head>
　　　<title>Bootstrap　Ejemplo　-　缩写</title>
　　　<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
　　　<script　src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
　　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
</body>
</html>
Prueba aquí ‹/›

Los resultados se muestran a continuación:

Dirección (Address)

Puede usar la etiqueta <address> para mostrar información de contacto en una página web. Debido a que <address> por defecto es display:block; es necesario usar la etiqueta <br> para agregar saltos de línea al texto de dirección cerrado.

Ejemplo en línea

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　Ejemplo　-　Dirección</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<address>
	<strong>Alguna Empresa, Inc.</strong><br>
	007　calle<br>
	Alguna Ciudad, Estado XXXXX<br>
	<abbr title="Teléfono">P:</abbr> (123)　456-7890
</address>
<address>
	<strong>Nombre Completo</strong><br>
	<a href="mailto:#">correo electrónico a somedomain.com</a>
</address>
</body>
</html>
Prueba aquí ‹/›

Los resultados se muestran a continuación:

Cita (Blockquote)

Puede usar la <blockquote> predeterminada junto a cualquier texto HTML. Otras opciones incluyen agregar una etiqueta <small> para identificar la fuente de la cita, usando la clase .pull-right Cita alineada a la derecha. A continuación, se muestra un ejemplo de estas características:

Ejemplo en línea

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　Ejemplo　-　Cita</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<blockquote>
	<p>
		Este es un ejemplo de cita predeterminada. Este es un ejemplo de cita predeterminada. Este es un ejemplo de cita predeterminada. Este es un ejemplo de cita predeterminada. Este es un ejemplo de cita predeterminada. Este es un ejemplo de cita predeterminada. Este es un ejemplo de cita predeterminada. Este es un ejemplo de cita predeterminada.
	</p>
</blockquote>
<blockquote>
	Esta es una cita con título de fuente.
	<small>Alguien famoso en <cite title="Título de la Fuente">Título de la Fuente</cite></small>
</blockquote>
<blockquote class="pull-right">
	Esta es una cita alineada a la derecha.
	<small>Alguien famoso en <cite title="Título de la Fuente">Título de la Fuente</cite></small>
</blockquote>
</body>
</html>
Prueba aquí ‹/›

Los resultados se muestran a continuación:

Lista

Bootstrap admite listas ordenadas, desordenadas y de definición.

  • Lista ordenada：La lista ordenada es una lista que comienza con un número u otro carácter ordenado.

  • Lista desordenada：La lista desordenada es una lista sin orden específico, iniciada con un punto de exclamación en estilo tradicional. Si no desea mostrar estos puntos de exclamación, puede usar la clase .list-unstyled para quitar los estilos. También puede hacerlo utilizando class .list-inline Coloca todos los elementos de lista en una línea.

  • Lista de definiciones：En este tipo de lista, cada elemento de lista puede contener elementos <dt> y <dd>. <dt> representa Definir términos，como un diccionario. A continuación, <dd> es la descripción de <dt>. .dl-horizontal puede hacer que los frases y descripciones dentro de <dl> se alineen en una línea. Comienza apiladas como el estilo predeterminado de <dl>, y se alinea en una línea a medida que la barra de navegación se expande.

Los siguientes ejemplos muestran estos tipos de listas:

Ejemplo en línea

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　Ejemplo　-　Lista</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h4>Lista ordenada</h4>
<ol>
	<li>Item　1</li>
	<li>Item　2</li>
	<li>Item　3</li>
	<li>Item　4</li>
</ol>
<h4>Lista desordenada</h4>
<ul>
	<li>Item　1</li>
	<li>Item　2</li>
	<li>Item　3</li>
	<li>Item　4</li>
</ul>
<h4>Lista sin estilo</h4>
<ul　class="list-unstyled">
	<li>Item　1</li>
	<li>Item　2</li>
	<li>Item　3</li>
	<li>Item　4</li>
</ul>
<h4>Lista en línea</h4>
<ul　class="list-inline">
	<li>Item　1</li>
	<li>Item　2</li>
	<li>Item　3</li>
	<li>Item　4</li>
</ul>
<h4>Definición de lista</h4>
<dl>
	<dt>Description　1</dt>
	<dd>Item　1</dd>
	<dt>Description　2</dt>
	<dd>Item　2</dd>
</dl>
<h4>Definición horizontal</h4>
<dl　class="dl-horizontal">
	　<dt>Description　1</dt>
	　<dd>Item　1</dd>
	　<dt>Description　2</dt>
	　<dd>Item　2</dd>
</dl>
</body>
</html>
Prueba aquí ‹/›

Los resultados se muestran a continuación:

Más clases de alineación

La siguiente tabla proporciona ejemplos de más clases de alineación Bootstrap:

ClaseDescripciónEjemplo
.leadResaltar el párrafoPrueba uno
.text-leftAlinear el texto a la izquierdaPrueba uno
.text-rightAlinear el texto a la derechaPrueba uno
.text-nowrapLa parte del párrafo que sobrepasa la pantalla no hace saltos de líneaPrueba uno
.text-uppercaseEstablecer el texto en mayúsculasPrueba uno
.initialismEl texto mostrado en el elemento <abbr> se muestra en un tamaño de fuente pequeño y puede convertir las letras minúsculas en mayúsculasPrueba uno
.list-unstyledElimina la estilo de lista predeterminada, alineación a la izquierda de los elementos de lista (en <ul> y <ol>). Esta clase solo se aplica a los elementos de lista hijos directos 　 　(Si necesita eliminar elementos de lista anidados, debe usar este estilo en la lista anidada)Prueba uno
.dl-horizontalEste tipo establece flotación y desplazamiento, se aplica a los elementos <dl> y <dt>, la implementación específica se puede ver en el ejemploPrueba uno
Código de BootstrapSistema de rejilla de Bootstrap