Bootstrap - Descripción general de CSS

Este capítulo proporciona una descripción general de las piezas clave de la infraestructura de Bootstrap, incluido el enfoque de Bootstrap para un desarrollo web mejor, más rápido y más sólido.

Tipo de documento HTML5

Bootstrap hace uso de ciertos elementos HTML y propiedades CSS que requieren el uso del tipo de documento HTML5. Por lo tanto, incluya el siguiente fragmento de código para el tipo de documento HTML5 al comienzo de todos sus proyectos con Bootstrap.

<!DOCTYPE html>
<html>
   ....
</html>

Móvil primero

Desde que se lanzó Bootstrap 3, Bootstrap se ha convertido en móvil primero. Significa que los estilos 'móviles primero' se pueden encontrar en toda la biblioteca en lugar de ellos en archivos separados. Necesitas agregar elviewport meta tag al <head> elemento, para garantizar una representación adecuada y el zoom táctil en dispositivos móviles.

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

La propiedad width controla el ancho del dispositivo. Establecerlo en el ancho del dispositivo asegurará que se procese en varios dispositivos (móviles, computadoras de escritorio, tabletas ...) correctamente.
initial-scale = 1.0 asegura que cuando se cargue, su página web se renderizará a una escala de 1: 1 y no se aplicará ningún zoom de forma inmediata.

Añadir user-scalable = no al contentatributo para deshabilitar las capacidades de zoom en dispositivos móviles como se muestra a continuación. Los usuarios solo pueden desplazarse y no hacer zoom con este cambio, y hace que su sitio se sienta un poco más como una aplicación nativa.

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">

Normalmente se usa la escala máxima = 1.0 junto con escalable por el usuario = no . Como se ha mencionado más arribauser-scalable = no puede brindar a los usuarios una experiencia más parecida a una aplicación nativa, por lo que Bootstrap no recomienda usar este atributo.

Imágenes receptivas

Bootstrap 3 le permite hacer que las imágenes respondan agregando una clase .img-responsive al <img>etiqueta. Esta clase se aplicamax-width: 100%; y height: auto; a la imagen para que se adapte bien al elemento padre.

<img src = "..." class = "img-responsive" alt = "Responsive image">

Tipografía y enlaces

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 .

Si tiene la intención de utilizar LESS código, puede encontrar todos estos dentro de scaffolding.less .

Normalizar

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.

Contenedores

Clase de uso .container para envolver el contenido de una página y centrar fácilmente el contenido como se muestra a continuación.

<div class = "container">
   ...
</div>

Eche un vistazo a .containerclase en el archivo bootstrap.css -

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

Tenga en cuenta que, debido al relleno y los anchos fijos, los contenedores no se pueden encajar de forma predeterminada.

Eche un vistazo al archivo bootstrap.css -

@media (min-width: 768px) {
   .container {
      width: 750px;
   }
}

Aquí puede ver que CSS tiene consultas de medios para contenedores con width. Esto ayuda a aplicar la capacidad de respuesta y, dentro de ellos, la clase de contenedor se modifica en consecuencia para representar el sistema de cuadrícula correctamente.

↰ Previous page Next page ↱