Como agregar las clases de Bootstrap

Crear diseño adaptable es fundamental para tu sitio web y hoy te daremos unos tips….

Con la aparición de dispositivos móviles como tablet , ipad, celulares , es indispensable que tu sitio web tenga la capacidad de adaptación, por ello debes de agregar las clases de este framework (Bootstrap).

Ir aprendiendo a como agregar las clases de Bootstrap te ayudara a crear sitios adaptables y dinámicos .

Leonty

¿Como implemento bootstrap a mi sitio web ?

  • Tienes 2 opciones una seria copiando el link CDN desde la misma pagina oficial.
  • También podrías descargar las librerías necesarias hacia tu proyecto.

Link CDN Bootstrap:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">;<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>;

¿Como llamo a las clases de bootstrap?

  • Al integrar las clases sea a los contenedores o columnas los atributos se agregaran automáticamente y podrás visualizar en el inspeccionar del navegador.

Grid Classe:

  • Contamos con 4 rejillas para el contenedor.
  • xs – Diseñado para dispositivimos moviles en dimensiones de ( 768px de ancho).
  • sm – Adaptable para Tablets con tamaños iguales o mayores a ( 768px de ancho).
  • md – Apatablet para Laptod o notebook con tamaño ( 992px o más de ancho).
  • lg– Optimo para Pc de escritorios o laptod con dimensiones mayores a 1200px de ancho.

Ejemplo: <div class="col-lg-* "> recuerda que al indicar la clase como el ejemplo , este  abarca un tamaño especifico en lo ancho de la pantalla.

Para encajar de manera ideal es prudente incluir las clases container o container-fluid y row

Importante con cada nueva versión de bootstrap el llamado de las clases cambia como lo con la versión 4.0.0

Nota Adicional:

  • Si deseas tener un diseño mas personalizado en tu sitio web , tendrás que recurrir a los códigos de css nativo.
  • Para dar un mejor detalle personalizado usando código css , ayúdate con las herramientas que trae consigo cada navegador, ejemplo: en Chrome es el inspeccionar.

Deja un comentario