Bootstrap es un marco de primer front-end móvil elegante, intuitivo y potente para un desarrollo web más rápido y sencillo. Utiliza HTML, CSS y Javascript.
Bootstrap se puede utilizar como:
Mobile first approach - Desde Bootstrap 3, el marco consta de los primeros estilos de Mobile en toda la biblioteca en lugar de en archivos separados.
Browser Support - Es compatible con todos los navegadores populares.
![]()
Easy to get started- Con solo el conocimiento de HTML y CSS, cualquiera puede comenzar con Bootstrap. Además, el sitio oficial de Bootstrap tiene una buena documentación.
Responsive design - El CSS sensible de Bootstrap se ajusta a computadoras de escritorio, tabletas y móviles.
Proporciona una solución limpia y uniforme para crear una interfaz para desarrolladores.
Contiene componentes incorporados hermosos y funcionales que son fáciles de personalizar.
También proporciona personalización basada en web.
Y lo mejor de todo es que es de código abierto.
El paquete Bootstrap incluye:
Scaffolding- Bootstrap proporciona una estructura básica con Grid System, estilos de enlace, fondo. Esto se trata en detalle en la secciónBootstrap Basic Structure
CSSBootstrap viene con la función de configuración global de CSS, elementos HTML fundamentales diseñados y mejorados con clases extensibles y un sistema de cuadrícula avanzado. Esto se cubre en detalle en la secciónBootstrap with CSS.
ComponentsBootstrap contiene más de una docena de componentes reutilizables creados para proporcionar iconografía, menús desplegables, navegación, alertas, ventanas emergentes y mucho más. Esto se cubre en detalle en la secciónLayout Components.
JavaScript Plugins- Bootstrap contiene más de una docena de complementos personalizados de jQuery. Puede incluirlos todos fácilmente, o uno por uno. Esto se trata en detalle en la secciónBootstrap Plugins.
Customize - Puede personalizar los componentes de Bootstrap, MENOS variables y complementos de jQuery para obtener su propia versión.
Las clases contextuales le permiten cambiar el color de fondo de las filas de su tabla o celdas individuales.
| No Señor. | Clase y descripción |
|---|---|
| 1 | .active Aplica el color de desplazamiento a una fila o celda en particular |
| 2 | .success Indica una acción exitosa o positiva |
| 3 | .warning Indica una advertencia que podría necesitar atención. |
| 4 | .danger Indica una acción peligrosa o potencialmente negativa |
Bootstrap incluye un primer sistema de cuadrícula de fluidos móvil y receptivo que escala adecuadamente hasta 12 columnas a medida que aumenta el tamaño del dispositivo o la ventana gráfica. Incluye clases predefinidas para opciones de diseño fáciles, así como potentes mixins para generar diseños más semánticos.
Las consultas de medios en Bootstrap le permiten mover, mostrar y ocultar contenido según el tamaño de la ventana gráfica.
A continuación se muestra la estructura básica de la cuadrícula Bootstrap:
<div class = "container">
<div class = "row">
<div class = "col-*-*"></div>
<div class = "col-*-*"></div>
</div>
<div class = "row">...</div>
</div>
<div class = "container">....Las compensaciones son una característica útil para diseños más especializados. Se pueden usar para empujar columnas para obtener más espacio, por ejemplo. Las clases .col-xs = * no admiten compensaciones, pero se replican fácilmente usando una celda vacía.
Puede cambiar fácilmente el orden de las columnas de la cuadrícula incorporadas con las clases modificadoras .col-md-push- * y .col-md-pull- * donde * van de 1 a 11.
Bootstrap 3 permite hacer que las imágenes respondan agregando una clase .img-responsive a la etiqueta <img>. Esta clase aplica ancho máximo: 100%; y altura: auto; a la imagen para que se adapte bien al elemento padre.
Bootstrap establece una visualización global básica (fondo), tipografía y estilos de enlace:
Basic Global display- Establece el color de fondo: #fff; en el elemento <body> .
Typography- Utiliza los atributos @ font-family-base , @ font-size-base y @ line-height-base como base tipográfica
Link styles- Establece el color del enlace global a través del atributo @ link-color y aplica el subrayado del enlace solo en : hover .
Bootstrap usa Normalize para establecer la coherencia entre navegadores.
Normalize.css es una alternativa moderna y lista para HTML5 a los restablecimientos de CSS. Es un pequeño archivo CSS que proporciona una mejor coherencia entre navegadores en el estilo predeterminado de los elementos HTML.
Para agregar algo de énfasis a un párrafo, agregue class = "lead". Esto le dará un tamaño de fuente más grande, un peso más liviano y una altura de línea más alta
Bootstrap admite listas ordenadas, listas desordenadas y listas de definición.
Ordered lists - Una lista ordenada es una lista que se encuentra en algún tipo de orden secuencial y está precedida por números.
Unordered lists- Una lista desordenada es una lista que no tiene ningún orden en particular y que tradicionalmente tiene un estilo con viñetas. Si no desea que aparezcan las viñetas, puede eliminar el estilo utilizando la clase .list-unstyled . También puede colocar todos los elementos de la lista en una sola línea usando la clase .list-inline .
Definition lists- En este tipo de lista, cada elemento de la lista puede constar de los elementos <dt> y <dd>. <dt> significa término de definición y, como un diccionario, este es el término (o frase) que se está definiendo. Posteriormente, <dd> es la definición de <dt>.
Puede hacer que los términos y descripciones en <dl> se alineen uno al lado del otro usando la clase dl-horizontal .
Los glifos son fuentes de iconos que puede utilizar en sus proyectos web. Los Glyphicons Halflings no son gratuitos y requieren licencia, sin embargo, su creador los ha puesto a disposición para proyectos Bootstrap sin costo alguno.
Para usar los íconos, simplemente use el siguiente código en cualquier lugar de su código. Deje un espacio entre el icono y el texto para un relleno adecuado.
<span class = "glyphicon glyphicon-search"></span>El complemento de transición proporciona efectos de transición simples, como deslizamiento o desvanecimiento en modales.
Un modal es una ventana secundaria que se superpone a su ventana principal. Normalmente, el propósito es mostrar contenido de una fuente separada que puede tener alguna interacción sin salir de la ventana principal. Las ventanas secundarias pueden proporcionar información, interacción o más.
Puede alternar el contenido oculto del complemento desplegable -
Via data attributes - Agregar data-toggle = "dropdown" a un enlace o botón para alternar un menú desplegable como se muestra a continuación:
<div class = "dropdown">
<a data-toggle = "dropdown" href = "#">Dropdown trigger</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
...
</ul>
</div>Si necesita mantener los enlaces intactos (lo cual es útil si el navegador no habilita JavaScript), use el data-target atributo en lugar de href="#" -
<div class = "dropdown">
<a id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html">
Dropdown
<span class = "caret"></span>
</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
...
</ul>
</div>Via JavaScript - Para llamar al menú desplegable alternar a través de JavaScript, use el siguiente método -
$('.dropdown-toggle').dropdown()El carrusel Bootstrap es una forma flexible y receptiva de agregar un control deslizante a su sitio. Además de ser receptivo, el contenido es lo suficientemente flexible como para permitir imágenes, iframes, videos o casi cualquier tipo de contenido que desee.
Los grupos de botones permiten apilar varios botones en una sola línea. Esto es útil cuando desea colocar elementos como botones de alineación juntos.
La clase .btn-group se utiliza para un grupo de botones básico. Envuelva una serie de botones con la clase .btn en .btn-group.
.btn-toolbar ayuda a combinar conjuntos de <div class = "btn-group"> en una <div class = "btn-toolbar"> para componentes más complejos.
Las clases .btn-group-lg, .btn-group-sm, .btn-group-xs se pueden aplicar al grupo de botones en lugar de cambiar el tamaño de cada botón.
La clase .btn-group-vertical hace que un conjunto de botones aparezca apilado verticalmente en lugar de horizontalmente.
Los grupos de entrada son controles de formulario ampliados . Con los grupos de entrada, puede anteponer y agregar fácilmente texto o botones a las entradas basadas en texto.
Al agregar contenido antepuesto y adjunto a un campo de entrada, puede agregar elementos comunes a la entrada del usuario. Por ejemplo, puede agregar el símbolo del dólar, la @ para un nombre de usuario de Twitter o cualquier otra cosa que pueda ser común para la interfaz de su aplicación.
Para anteponer o agregar elementos a un .form-control -
Envuélvalo en un <div> con clase .input-group
Como siguiente paso, dentro de ese mismo <div>, coloque su contenido adicional dentro de un <span> con clase .input-group-addon.
Ahora coloque este <span> antes o después del elemento <input>.
Para crear un menú de navegación con pestañas:
- Comience con una lista básica desordenada con la clase base de .nav.
- Agregue clases .nav-tabs.
Para crear un menú de navegación de píldoras:
- Comience con una lista básica desordenada con la clase base de .nav.
- Agregue las píldoras .nav de clase.
Puede apilar las píldoras verticalmente usando la clase .nav-stacked junto con las clases: .nav, .nav-pills.
La barra de navegación es una de las características destacadas de los sitios Bootstrap. Las barras de navegación son componentes "meta" receptivos que sirven como encabezados de navegación para su aplicación o sitio. Las barras de navegación se colapsan en las vistas móviles y se vuelven horizontales a medida que aumenta el ancho de la ventana gráfica disponible. En esencia, la barra de navegación incluye estilos para nombres de sitios y navegación básica.
Para crear una barra de navegación predeterminada:
Agregue las clases .navbar, .navbar-default a la etiqueta <nav>.
Agregue role = "navegación" al elemento anterior, para ayudar con la accesibilidad.
Agregue una clase de encabezado .navbar-header al elemento <div>. Incluya un elemento <a> con class navbar-brand. Esto le dará al texto un tamaño un poco más grande.
Para agregar enlaces a la barra de navegación, simplemente agregue una lista desordenada con las clases de .nav, .navbar-nav.
Las rutas de navegación son una excelente manera de mostrar información basada en jerarquías para un sitio. En el caso de los blogs, las rutas de navegación pueden mostrar las fechas de publicación, categorías o etiquetas. Indican la ubicación de la página actual dentro de una jerarquía de navegación.
Una ruta de navegación en Bootstrap es simplemente una lista desordenada con una clase de .breadcrumb. CSS agrega automáticamente el separador (bootstrap.min.css).
La clase .pagination se utiliza para agregar la paginación en una página.
Puede personalizar los enlaces utilizando .disabled para enlaces en los que no se puede hacer clic y .active para indicar la página actual.
Las etiquetas Bootstrap son excelentes para ofrecer recuentos, sugerencias u otro marcado para las páginas. Utilice class .label para mostrar etiquetas.
Las insignias son similares a las etiquetas; la principal diferencia es que las esquinas están más redondeadas. Las insignias se utilizan principalmente para resaltar elementos nuevos o no leídos. Para usar insignias, simplemente agregue <span class = "badge"> a los enlaces, navegadores Bootstrap y más.
Como sugiere el nombre, este componente opcionalmente puede aumentar el tamaño de los encabezados y agregar mucho margen para el contenido de la página de destino. Para usar el Jumbotron -
- Cree un contenedor <div> con la clase de .jumbotron.
- Además de un <h1> más grande, el peso de la fuente se reduce a 200px.
El encabezado de la página es una pequeña característica agradable para agregar el espacio apropiado alrededor de los encabezados de una página. Esto es particularmente útil en una página web donde puede tener varios títulos de publicaciones y necesita una forma de agregar distinción a cada uno de ellos. Para usar un encabezado de página, envuelva su encabezado en un <div> con una clase de .page-header.
Para crear miniaturas usando Bootstrap:
- Agregue una etiqueta <a> con la clase de .thumbnail alrededor de una imagen.
- Esto agrega cuatro píxeles de relleno y un borde gris.
- Al pasar el mouse, un resplandor animado delinea la imagen.
es posible agregar cualquier tipo de contenido HTML como encabezados, párrafos o botones en miniaturas. Siga los pasos a continuación:
Cambie la etiqueta <a> que tiene una clase de .thumbnail a <div>.
Dentro de ese <div>, puede agregar cualquier cosa que necesite. Como se trata de un <div>, podemos usar la convención de nomenclatura predeterminada basada en span para el tamaño.
Si desea agrupar varias imágenes, colóquelas en una lista desordenada y cada elemento de la lista flotará a la izquierda.
Bootstrap Alerts proporciona una forma de diseñar mensajes para el usuario. Proporcionan mensajes de retroalimentación contextual para acciones típicas de los usuarios.
Puede agregar un icono de cierre opcional para alertar.
Puede agregar una alerta básica creando un contenedor <div> y agregando una clase de .alert y una de las cuatro clases contextuales (por ejemplo, .alert-success, .alert-info, .alert-warning, .alert-danger) .
Para crear una alerta de despido:
Agregue una alerta básica creando un contenedor <div> y agregando una clase de .alert y una de las cuatro clases contextuales (por ejemplo, .alert-success, .alert-info, .alert-warning, .alert-danger).
También agregue .alert-despedible opcional a la clase <div> anterior.
Agrega un botón de cierre.
Utilice el elemento <button> con el atributo de datos data-dispats = "alert".
Para crear una barra de progreso básica:
Agregue un <div> con una clase de .progress.
A continuación, dentro del <div> anterior, agregue un <div> vacío con una clase de .progress-bar.
Agregue un atributo de estilo con el ancho expresado como porcentaje. Digamos, por ejemplo, style = "60%"; indica que la barra de progreso estaba al 60%.
Para crear una barra de progreso con diferentes estilos:
Agregue un <div> con una clase de .progress.
A continuación, dentro del <div> anterior, agregue un <div> vacío con una clase de .progress-bar y class progress-bar- * donde * podría ser éxito, información, advertencia, peligro.
Agregue un atributo de estilo con el ancho expresado como porcentaje. Digamos, por ejemplo, style = "60%"; indica que la barra de progreso estaba al 60%.
Para crear una barra de progreso rayada:
Agregue un <div> con una clase de .progress y .progress-striped.
A continuación, dentro del <div> anterior, agregue un <div> vacío con una clase de .progress-bar y class progress-bar- * donde * podría ser éxito, información, advertencia, peligro.
Agregue un atributo de estilo con el ancho expresado como porcentaje. Digamos, por ejemplo, style = "60%"; indica que la barra de progreso estaba al 60%.
Para crear una barra de progreso animada:
Agregue un <div> con una clase de .progress y .progress-striped. También agregue class .active a .progress-striped.
A continuación, dentro del <div> anterior, agregue un <div> vacío con una clase de .progress-bar.
Agregue un atributo de estilo con el ancho expresado como porcentaje. Digamos, por ejemplo, style = "60%"; indica que la barra de progreso estaba al 60%.
Incluso puede apilar varias barras de progreso. Coloque las múltiples barras de progreso en el mismo .progress para apilarlas.
Estos son estilos de objetos abstractos para construir varios tipos de componentes (como comentarios de blogs, tweets, etc.) que presentan una imagen alineada a la izquierda o alineada a la derecha junto con el contenido textual. El objetivo del objeto de los medios es hacer que el código para desarrollar estos bloques de información sea drásticamente más corto.
El objetivo de los objetos multimedia (marcado ligero, fácil ampliación) se logra aplicando clases a algunos de los marcadores simples.
Esta clase permite hacer flotar un objeto multimedia (imágenes, video y audio) a la izquierda o derecha de un bloque de contenido.
Si está preparando una lista donde los elementos serán parte de una lista desordenada, use una clase. útil para hilos de comentarios o listas de artículos.
Los componentes del panel se utilizan cuando desea poner su componente DOM en una caja. Para obtener un panel básico, simplemente agregue class .panel al elemento <div>. También agregue la clase .panel-default a este elemento.
aquí hay dos formas de agregar un encabezado de panel:
Use la clase .panel-header para agregar fácilmente un contenedor de encabezado a su panel.
Use cualquier <h1> - <h6> con una clase .panel-title para agregar un encabezado con estilo.
Puede agregar pies de página a los paneles, ajustando botones o texto secundario en un <div> que contenga la clase .panel-footer.
Utilice clases de estado contextuales como, panel-primary, panel-success, panel-info, panel-warning, panel-danger, para hacer que un panel sea más significativo para un contexto particular.
¡Si! Para obtener una tabla sin bordes dentro de un panel, use la clase .table dentro del panel. Supongamos que hay un <div> que contiene .panel-body, agregamos un borde adicional en la parte superior de la tabla para la separación. Si no hay <div> que contenga .panel-body, el componente se mueve del encabezado del panel a la tabla sin interrupción.
¡Si! Puede incluir grupos de listas dentro de cualquier panel. Cree un panel agregando class .panel al elemento <div>. También agregue la clase .panel-default a este elemento. Ahora, dentro de este panel, incluya sus grupos de listas.
Un pozo es un contenedor en <div> que hace que el contenido aparezca hundido o un efecto de inserción en la página. Para crear un pozo, simplemente envuelva el contenido que le gustaría que aparezca en el pozo con un <div> que contenga la clase de .well.
El complemento Scrollspy (navegación de actualización automática) le permite apuntar a secciones de la página según la posición de desplazamiento. En su implementación básica, a medida que se desplaza, puede agregar clases .active a la barra de navegación según la posición de desplazamiento.
El complemento de afijo permite que un <div> se adhiera a una ubicación en la página. También puede activar y desactivar su fijación con este complemento. Un ejemplo común de esto son los íconos sociales. Comenzarán en una ubicación, pero cuando la página alcance una determinada marca, el <div> se bloqueará en su lugar y dejará de desplazarse con el resto de la página.