¿Qué es bootstrap?
Bootstrap es un conjunto de herramientas de código abierto muy popular entre los expertos en desarrollo web, ya que está ideado para un desarrollo responsive. Es decir, gracias a Bootstrap, los desarrolladores web pueden crear páginas web visibles en diferentes formatos y pantallas.
Bootstrap incluye plantillas de diseño basadas en HTML y CSS para la realización de formularios, botones, tablas, navegación… así como complementos de JavaScript opcionales para mejorar el comportamiento de estos elementos.
¿Qué herramientas usa Bootstrap?
Antes de entrar en las sugerencias de herramientas, vamos a hablar de lo que son las herramientas de bootstrapping y por qué son importantes.
Empezar un negocio, incluso uno de Bootstrapping, es caro. Pero no se puede construir una gran empresa de Saas o de Comercio sin la ayuda de herramientas digitales. Por desgracia, las mejores herramientas suelen ser prohibitivas para las empresas con un presupuesto ajustado.
La buena noticia es que hay un montón de herramientas digitales gratuitas, freemium o asequibles que puedes utilizar en su lugar. Estas herramientas suelen ser tan potentes como las de nivel empresarial, que también ayudan a mantener un flujo de caja positivo y a maximizar los beneficios.
Herramientas bootstrap de gestión de proyectos
Wrike
Wrike es una herramienta de gestión de proyectos versátil y completa, perfecta para startups y empresas de todos los tamaños. Tiene todas las características que se esperan de una herramienta de gestión de proyectos SaaS, incluyendo diagramas de Gantt, tableros Kanban, informes y formularios de solicitud.
Wrike también hace que la colaboración sea perfecta con calendarios compartidos, intercambio de archivos y seguimiento del tiempo de los informes del equipo.
Esta herramienta bootstrap también la utilizan algunas de las empresas más grandes del mundo, incluyendo Google, Airbnb, y Dell. También se integra con más de 400 otras herramientas SaaS y plataformas de software como Salesforce, WordPress o Hubspot.
Wrike es gratuito para siempre para un máximo de cinco usuarios. La versión profesional cuesta 9,80 dólares por usuario al mes para un máximo de 15 usuarios. Si lo necesitas, la versión empresarial cuesta 24,80 dólares por usuario al mes.
Herramientas bootstrap para crear un sitio web
Incluso dirigir un negocio local offline puede ser un reto sin una fuerte presencia en la web. Sin embargo, no es necesario gastar miles de dólares en una costosa agencia de diseño web. Es posible construir un sitio web desde cero utilizando un constructor de sitios web intuitivo.
Webflow
Esta herramienta fue etiquetada como «la plataforma de desarrollo del futuro» por Smashing Magazine. Se trata de un constructor de sitios web muy capaz que permite a cualquiera crear sitios web visualmente impresionantes sin la ayuda de un desarrollador o diseñador.
¿Qué podemos hacer con Bootstrap?
Si por cualquier motivo no quieres descargar los archivos y subirlos a tu hosting, puede incluirlos desde una CDN. Únicamente tienes que añadir el siguiente código:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0
.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min
.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/p
opper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.
min.js"></script>¿Cuáles son las librerías de Bootstrap?
Bootstrap es una librería de estilos CSS 
, es decir, es un archivo CSS que añades en tus proyectos para tener una serie de estilos ya preparados para utilizar.
Este tipo de librerías CSS suelen incluir estilos para los elementos más comunes de una página web, como por ejemplo, botones, tarjetas, navbars, etc. Además tiene una serie de estilos para crear columnas fácilmente.
Elementos funcionales
Los elementos que voy a explicar ahora son elementos que Bootstrap ha decidido darle estilos por defecto para que se vean mejor, es decir, los contenedores y márgenes eran elementos layout que no añadían look and feel y los que hay a continuación tienen ya apariencia visual, colores, bordes, etc.
Botones de Bootstrap
Para crear un botón tienes que usar la clase btn. Dentro de los botones bootstrap ha creado una serie de tipos:
<!-- Botón standart -->
<button type="button" class="btn btn-default">Default</button>
<!-- Botón primario -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Botón de éxito -->
<button type="button" class="btn btn-success">Success</button>
<!-- Botón de información -->
<button type="button" class="btn btn-info">Info</button>
<!-- Botón de aviso -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Botón de peligro -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Botón con énfasis en un link -->
<button type="button" class="btn btn-link">Link</button>Containers
Lo primero que vamos a ver son los contenedores. Los contenedores como su nombre indica, sirven para crear una “caja” o “contenedor” sobre la que va el contenido de una página web.
Cuando le aplicas a un elemento HTML la clase container lo que ocurre es que a ese elemento se le aplica un ancho y un padding determinado y además se coloca en el centro de la página web.
Lo que ocurre es que normalmente en las páginas webs no quieres que el contenido principal de la página web ocupe el 100% de la página ya que es muy incómodo para el usuario a la hora de leer que las líneas sean tan largas.
Con este elemento consigues reducir el ancho del contenido además de colocarlo en el centro de la página web.
Lo bueno de los containers es que van a ajustar su ancho automáticamente sin que tengas que hacer nada al ancho de los distintos elementos para que se vea correctamente,
En el ejemplo de abajo he creado un contenedor con un párrafo simplemente. Le he colocado un color de fondo para que se vea lo que ocupa el contenedor, aunque el contenedor por defecto es transparente.
<div class="container">
<p>
Este párrafo va dentro de un container
</p>
</div>
Publicar un comentario