Bootstrap es el mas popular HTML, CSS, y JavaScript framework para desarrollar una pagina web responsiva, ¿a que voy con responsiva?, que si quieres que tu pagina se vea correctamente en tablets, pc y dispositivos móviles.
tiene una amplia galería de templates que se pueden amoldar a tus necesidades, lo cuales van desde un formulario de login, hasta una pagina completa, con funciones muy completas, las cuales te ahorran tiempo buscando en google, tambien contiene una amplia galeria de iconos que frecuentente utilizatias en una aplicacion web.
como todos saben todo framework contiene sus ventajas y desventajas de las cuales son:
Ventajas:
- Creacion de paginas web de manera facil y rapida.
- Utiliza componentes y servicios creados por la comunidad web, tales como: HTML5 shim, Normalize.css, OOCSS, jQuery UI, LESS y GitHub.
- Es un conjunto de buenas prácticas que perduran en el tiempo.
- La implementación de HTML5 + CSS3
- El famoso Grid system, que por defecto incluye 12 columnas fijas o fluidas, dependiendo de si tu diseño será responsivo o no.
- El uso de LESS, que es una ampliación a las famosas hojas de estilo CSS, pero a diferencia de estás, funciona como un lenguaje de programación, permitiendo el uso de variables, funciones, operaciones aritméticas, entre otras, para acelerar y enriquecer los estilos en un sitio web.
- OOCSS, css orientado a objetos, que está organizado por módulos independientes y reutilizables en todo el proyecto.
- Hay una enorme comunicad que soporta este desarrollo y cuenta con implementaciones externas como WordPress, Drupal, SASS o jQuery UI.
- Herramienta sencilla y ágil para construir sitios web e interfaces. Una vez que entiendas y domines su funcionamiento, verás lo fácil que es hacer efectos y diseñar interfaces que te ahorran realmente mucho tiempo de trabajo.
- Además y por si fuera poco tiene un tema por defecto bastante optimizado y que puedes modificar o crear tu propio tema.
Desventajas
- Es necesario adaptarse a su forma de trabajo, si bien su curva de aprendizaje es liviana, deberás comprender y familiarizarte con su estructura y nomenclatura.
- Debes adaptar tu diseño a un grid de 12 columnas, que se modifican según el dispositivo.
- Aquí empiezan los problemas, Bootstrap por defecto te trae anchos, márgenes y altos de línea, y realizar cambios específicos es por decir, un poco tedioso.
- Es complicado, cambiar de versión si has realizado modificaciones profundas sobre el core.
- Si necesitas añadir componentes que no existen, debes hacerlos tú mismo en CSS y cuidar de que mantenga coherencia con tu diseño y cuidando el responsive.
- Un problema que he visto a menudo en muchos temas, es que el responsive funciona bien, pero a nivel de diseño en ocasiones se le escapan ciertos detalles que le quitan estética al sitio. Si eres un perfeccionista del diseño, ten por seguro que Bootstrap te va a dar algunos problemas.
Si ya te decidiste a implemetar o comenzar a usar BootStrap en tu pagina web existen tres formas, pero en este artuculo comenzaremos con la forma mas sencilla y simple como se hace en a siguiente forma.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
dicho codigo solo lo copias y pegas en el head de tu pagina web.
y listo con esto ya tienes BootStrap en tu pagina web.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
dicho codigo solo lo copias y pegas en el head de tu pagina web.
y listo con esto ya tienes BootStrap en tu pagina web.
0 comentarios:
Publicar un comentario