Principales componentes de arranque y nombres de clases clave

1. Sistema de rejilla

.col-xs/sm/md/lg- * //representa el estilo en cada dispositivo

xs: teléfono con dispositivo extrapequeño (<768 px)

sm: tableta de dispositivo pequeño (≥768px)

md: computadora de escritorio de dispositivo de tamaño mediano (≥992px)

lg: computadora de escritorio de equipo grande (≥1200px)

.col-xs/sm/md/lg-* //columna compensada

Estas clases aumentarán el margen izquierdo de una columna por * columnas, donde * varía de 1 a 11 .

2. Composición tipográfica

.text-muted: pista, use gris claro (#999)
.text-primary: primario, usar azul (#428bca)
.text-success: éxito, use verde claro (#3c763d)
.text-info: Información de notificación, use azul claro (#31708f)
.text-warning: Advertencia, use amarillo (#8a6d3b)
.text-danger: peligro, usar marrón (#a94442)

3. Código

<código>: código de visualización en línea

<pre>: si el código debe mostrarse como un elemento de bloque independiente o el código tiene varias líneas, entonces se debe usar la etiqueta <pre>

Etiquetas de inicio y finalización con < y >

4. Formulario

<tabla>: agrega un estilo básico para la tabla

<thead>: el elemento contenedor (<tr>) de la fila del encabezado de la tabla, que se utiliza para identificar las columnas de la tabla

<tbody>: elemento contenedor para las filas de la tabla en el cuerpo de la tabla (<tr>)

<tr>: un grupo de elementos contenedores (<td> o <th>) para celdas de tabla que aparecen en una sola fila

<td>: celda de tabla predeterminada

<th>: celdas de tabla especiales que identifican columnas o filas (según el alcance y la posición). Debe usarse dentro de <thead>

<caption>; una descripción o resumen del contenido de Table Store

Clase de formulario:

.table: agregue un estilo básico a cualquier <table> (solo divisores horizontales)

.table-striped: agregue rayas de cebra en <tbody> (IE8 no es compatible)

.table-bordered: agrega bordes a todas las celdas de la tabla

.table-hover: habilite el estado del mouseover en cualquier fila dentro de <tbody>

.table-condensed: hacer la tabla más compacta

Clases <tr>, <th> y <td>

.active: aplica el color flotante a la fila o celda

.success: Indica una operación exitosa

.info: indica la operación de cambio de información

.warning: Indica una operación de advertencia

.peligro: Indica una operación peligrosa

pd: de hecho, las clases anteriores son las mismas que la clase de color del documento

5. Formulario

La estructura básica del formulario viene con Bootstrap, y los controles de formulario individuales reciben automáticamente algunos estilos globales. Los pasos para crear un formulario básico se enumeran a continuación:

Agregue role="form" al elemento padre <form> .
Coloque etiquetas y controles en un <div> con clase .form-group . Esto es necesario para obtener el mejor espaciado.
Agrega class=" form-control " a todos los elementos de texto <input>, <textarea> y <select> .

Formulario en línea: clase .form-inline

Forma horizontal: clase .form-horizontal

6. Menú desplegable

Agregue un menú desplegable dentro de .dropdown

menú desplegable: crea un menú desplegable

Alinee el menú desplegable a la derecha agregando la clase .pull-right a .dropdown-menu

encabezado desplegable: Agregar título de menú desplegable

7. Barra de navegación

Crear barra de navegación predeterminada:

Agregue class .navbar, .navbar-default a la etiqueta <nav> .
Agregar role="navigation" al elemento anterior ayuda con la accesibilidad.
Agrega una clase de encabezado .navbar-header a un elemento <div> que contiene un elemento <a> con clase navbar-brand . Esto hará que el texto aparezca un tamaño más grande.
Para agregar enlaces a la barra de navegación, simplemente agregue una lista desordenada con las clases .nav, .navbar-nav .

Barra de navegación receptiva:

El contenido a colapsar debe estar envuelto en un <div> con clase .collapse, .navbar-collapse

8. Insignia

.insignia

9. Caja modal

1. Establezca el atributo data-toggle="modal" en el elemento del controlador (como un botón o enlace) y configure data-target="#identifier" o href="#identifier" para especificar el cuadro modal específico que se va a conmutado (con id="identificador").

2. Use javascrpt para llamar al cuadro modal con id="identifier"

如：$('#identificador').modal(opciones)

Hay dos cosas a tener en cuenta en el cuadro modal:
1. El primero es .modal , que identifica el contenido de <div> como un cuadro modal.
2. La segunda es la clase .fade . Cuando se alterna el modal, hace que el contenido aparezca y desaparezca gradualmente.

aria-labelledby="myModalLabel", este atributo hace referencia al título del cuadro modal.
El atributo aria-hidden="true" se usa para mantener la ventana modal invisible hasta que se activa un disparador (como hacer clic en el botón asociado).
<div class="modal-header">, modal-header es una clase que define el estilo del encabezado de la ventana modal.
class="close", close es una clase CSS que se utiliza para diseñar el botón de cierre de la ventana modal.
data-dismiss="modal", es un atributo de datos HTML5 personalizado. Aquí se utiliza para cerrar la ventana modal.
class="modal-body", es una clase CSS de Bootstrap CSS, que se utiliza para establecer el estilo del cuerpo de la ventana modal.
class="modal-footer", es una clase CSS de Bootstrap CSS, que se usa para establecer el estilo para la parte inferior de la ventana modal.
data-toggle="modal", el atributo de datos personalizado HTML5 data-toggle se usa para abrir una ventana modal.

10. Menú desplegable

Agregue data-toggle="dropdown" al enlace o botón , agregue el contenido para que se muestre u oculte

"menú desplegable" , si necesita mantener el enlace intacto (útil si el navegador no habilita JavaScript), use  el  atributo  de destino de datos en lugar de href="#"

11. Pestaña

Necesita agregar data-toggle="tab" o data-toggle="pill" al enlace del texto del ancla.

Agregar clases nav y nav-tabs a ul aplicará estilos de pestaña Bootstrap , agregar clases nav y nav-pills a ul aplicará estilos de cápsula Bootstrap .

12. carrusel

#myCarousel, diapositiva de carrusel: contenedor de carrusel

.carrusel-indicadores: carrusel (carrusel) indicadores

#myCarousel: subclase dentro del indicador de carrusel

.carousel-inner: elementos del carrusel

.item: subclase de elemento de carrusel

.carrusel-control izquierda/derecha: Carrusel (Carrusel) de navegación (navegación izquierda y derecha)

data-slide="prev": cambiar hacia arriba

diapositiva de datos = "siguiente": cambiar hacia abajo

Notas para principiantes de Bootstrap