read

Tutorial pragmático Bootstrap Lección 1

Este tutorial está diseñado para programadores que comienzan pero que ya tienen nociones de web y quieren comenzar a usar bootstrap ya

Bootstrap es un conjunto de herramientas HTML, CSS y JavaScript para el desarrollo Web, con estas herramientas puedes construir portales web rápidamente con un resultado aceptable, por ejemplo podrás construir un portal responsivo, bootstap tambien incluye controles como botones, barras de navegación, tablas, ventanas emergentes, con estilos CSS

Para poder aprovechar todas estas herramientas necesitas conocer cómo funcionan y como usarlas, hay muchos ejemplos en la web y en su página https://getbootstrap.com/docs/4.0/getting-started/introduction/

El elemento más elemental que debes aprender de bootstrap es su grid o rejilla que permite acomodar elementos HTML en orden y resposivos

Vamos a ver un ejemplo:

En el sitio debemos referenciar a bootstrap:

<link href="bootstrap-4.0.0-dist\css\bootstrap.min.css" rel="stylesheet" media="screen">
<script src="bootstrap-4.0.0-dist\js\bootstrap.min.js"></script>

Listo ya tenemos todo para hacer nuestro ejemplo:

El elemento contenedor de bootstrap debe tener la clase container:

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

Dentro del div con clase container pueden existir una o muchas filas, cada una es un div con la clase "row" que indica que es una fila

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

Bootstrap maneja una rejilla de 12 columnas, dentro cada fila o div con clase row se insertan las columnas, cada una es un div con una clase CSS que indica cuantas posiciones o columnas ocupa, el numero maximo de posiciones o columnas es 12, por ejemplo puede existir una sola columna con 12 posiciones o 2 que ocupen 6 posiciones cada una:

<div class="container"> ... 
    <div class="row" > 
        <div class="col-md-12"></div>
    </div>
    <div class="row"> 
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
    </div>
    <div class="row"> 
        <div class="col-md-12"></div>
        <div class="col-md-2"></div>
        <div class="col-md-10"></div>
    </div>
</div>

Existen más configuraciones para diseñar una rejilla o grid de bootstra, otros tipos de contenedores, etc pero como el objetivo es ser pragmatico y rapido con esto sera suficiente para que tengas una idea, si quieres saber mas te recomiendo este tutorial http://librosweb.es/libro/bootstrap_3/

En resumen: Bootstrap se usa para diseñar gran parte de un sitio web desde los botones, posiciones de elementos, colores, etc, mucha de la funcionalidad que otorga es atraves de clases por lo que lo único que tienes que hacer es conocerlas y usarlas, en otros casos tambien tambien tendras que usar su libreria de Javascript por ejemplo para trabajar con modals.

Blog Logo

Giovanni Crescencio Ahuactzi

Soy Gyo un blogero que disftruta de la tecnologia


Published

Image

Gyo&Joe

Blog personal de Gyo

Back to Overview