Primeros pasos

Aunque existen varias formas de empezar con Bootstrap, quizá la forma más fácil es utilizar la siguiente plantilla HTML:

<!doctype html>
<html lang="en">
  <head>
    <title>Hello, world!</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
  </body>
</html>

Bootstrap se compone de un archivo CSS y varios archivos JavaScript. Adicionalmente necesitamos jQuery. Estamos usando un CDN (Content Delivery Network) que se encarga de alojar y publicar estos archivos en Internet de forma muy eficiente.

En la plantilla estamos utilizando el doctype de HTML5, que es requerido por Bootstrap:

<!doctype html>
<html lang="en">
  ...
</html>

También estamos usando el siguiente meta tag que asegura que el responsive design funcione de manera correcta:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Por último, fíjate que estamos incluyendo los archivos JavaScript al final de la página. Esto permite que el navegador muestre todo el contenido con sus estilos antes de descargar estos archivos.

¿Qué nos ofrece Bootstrap?

Estilos más modernos y consistentes para los elementos básicos de HTML: títulos, párrafos, listas, imágenes, tablas, formularios, etc.
Componentes como barra de navegación, carrusel de imágenes, pestañas, fuente de íconos, paginación, ventanas emergentes (modales), botones y barras de progreso entre otros.
Una grilla para organizar los elementos de nuestra página fácilmente.
Algunas clases de CSS útiles para trabajar con márgenes, paddings, texto y responsive design.

La documentación

PreviousBootstrap 4 NextElementos básicos de HTML

Last updated 2 years ago

<!doctype html> <html lang="en"> <head> <title>Hello, world!</title>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> </head> <body> <h1>Hello, world!</h1>   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> </body> </html>

¿Qué nos ofrece Bootstrap?

Estilos más modernos y consistentes para los elementos básicos de HTML: títulos, párrafos, listas, imágenes, tablas, formularios, etc.

Componentes como barra de navegación, carrusel de imágenes, pestañas, fuente de íconos, paginación, ventanas emergentes (modales), botones y barras de progreso entre otros.

Una grilla para organizar los elementos de nuestra página fácilmente.

Algunas clases de CSS útiles para trabajar con márgenes, paddings, texto y responsive design.