Cap 4: Visión general de Bootstrap CSS - LPC-Ltda/Ruby-on-Rails GitHub Wiki

HTML 5 doctype

Bootstrap hace uso de ciertos elementos HTML y propiedades CSS que requieren en uso de HTML doctype. Por ello debe incluir esto al comienzo de todos sus proyectos que usen Bootstrap.

<!Doctype html>
<html>
</html>

Mobile First

Desde Bootstrap 3, Bootstrap se ha convertido a mobile first. Esto significa que el estilo mobile first puede ser encontrado a través de la librería completa en lugar que en archivos separados. Usted necesita agregar un tag meta viewport en el elemento para asegurarse del rendereo apropiado y el touch zooming en dispositivos móviles.

<meta name="viewport" content="width-device-width, initial-scale=1.0">
  • la propiedad width controla el ancho del dispositivo, setearlo en device-width nos asegurará que será rendereado a través de varios dispositivos (móviles, desktop, tablets...) apropiadamente.
  • initial-scale=1.0 asegura que al momento de cargarse su página web será cargada en escala 1:1, y no se aplicará zooming.

Agregue user-scalable=no al atributo content para deshabilitar la capacidad de zooming en dispositivos móviles como se muestra abajo. Los usuarios sólo estarán realizar el scroll, y resulta en que su sitio tienen una apariencia más nativa. Bootstrap no recomienda usar este atributo.

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

Normalmente maximun-scale=1.0 es usado junto con user-scalable=no.

Imágenes sensibles

Bootstrap 3 le permite hacer las imagenes sensibles al agregar la clase .img-responsive al tag . Esta clase aplica max-width: 100%; y height: auto; a la imagen para que escale amablemente al elemento padre.

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

Tipografía y links

Bootstrap setea un despliegue global básico (background), tipografía y estilos de link:

  • Despliegue básico global: Setea background-color: #fff, en el elemento .
  • Tipografía: Usa los atributos @font-family-base, @font-size-base y @line-height-base como tipografía base.
  • Estilos de link: Setea el color de link global vía el atributo @link-color y aplica el subrayado del link sólo en :over. Si usted tiene la intención de usar código LESS, usted puede encontrar todos estos dentro de scaffolding.less.

Normalize

Bootstrap usa Normalize para estalecer la consistencia entre browsers.

Normalize es una alternativa modera al reset CSS. Este es un pequeño archivo CSS que provee mejor consistencia a través de los browsers en el estilo por defecto de los elementos HTML.

Containers

Use la clase .container para envolver el contenido de una página y rápidamente centrar el contenido.

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

Mire la clase .container en el archivo bootstrap.css

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

Note que, debido al padding y anchos fijos, los containers no son anidables por defecto.

Mire el archivo bootstrap.css:

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

Aquí puede ver que CSS tiene consultas de media para los containers con width. Esto ayuda para la aplicación de la sensibilidad y dentro de esto la clase container es modificada de para poder renderear el sistema de grilla apropiadamente.

⚠️ **GitHub.com Fallback** ⚠️