HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Bootstrap Empezar

❮ Anterior Próximo ❯

¿Qué es Bootstrap?

  • Bootstrap es un marco front-end gratuito para un desarrollo web más rápido y fácil
  • Bootstrap incluye plantillas de diseño basadas en HTML y CSS para tipografía, formularios, botones, tablas, navegación, modales, carruseles de imágenes y muchos otros, así como complementos de JavaScript opcionales.
  • Bootstrap también le brinda la capacidad de crear fácilmente diseños receptivos

¿Qué es el Diseño Web Responsivo?

El diseño web receptivo se trata de crear sitios web que se ajusten automáticamente para verse bien en todos los dispositivos, desde teléfonos pequeños hasta computadoras de escritorio grandes.

Ejemplo de arranque

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
</div>

Historial de arranque

Bootstrap fue desarrollado por Mark Otto y Jacob Thornton en Twitter y lanzado como un producto de código abierto en agosto de 2011 en GitHub.

¡En junio de 2014, Bootstrap fue el proyecto número 1 en GitHub!

¿Por qué usar Bootstrap?

Ventajas de Bootstrap:

  • Fácil de usar: cualquier persona con conocimientos básicos de HTML y CSS puede comenzar a usar Bootstrap
  • Funciones receptivas: el CSS receptivo de Bootstrap se ajusta a teléfonos, tabletas y computadoras de escritorio
  • Enfoque móvil primero: en Bootstrap 3, los estilos móviles primero son parte del marco central
  • Compatibilidad con navegadores: Bootstrap es compatible con todos los navegadores modernos (Chrome, Firefox, Internet Explorer, Edge, Safari y Opera)

Versiones de arranque

Este tutorial sigue a Bootstrap 3 , que se lanzó en 2013. Sin embargo, también cubrimos versiones más nuevas; Bootstrap 4 (lanzado en 2018) y Bootstrap 5 (lanzado en 2021) .

Bootstrap 5 es la versión más reciente de Bootstrap ; con nuevos componentes, hojas de estilo más rápidas, mayor capacidad de respuesta, etc. Es compatible con las últimas versiones estables de todos los principales navegadores y plataformas. Sin embargo, Internet Explorer 11 y anteriores no son compatibles.

Las principales diferencias entre Bootstrap 5 y Bootstrap 3 y 4 es que Bootstrap 5 ha cambiado a JavaScript en lugar de jQuery .

Nota: Bootstrap 3 y Bootstrap 4 todavía son compatibles con el equipo para correcciones de errores críticos y cambios en la documentación, y es perfectamente seguro continuar usándolos. Sin embargo, NO se les agregarán nuevas características.

¿Dónde obtener Bootstrap?

Hay dos formas de comenzar a usar Bootstrap en su propio sitio web.

Usted puede:

  • Descarga Bootstrap desde getbootstrap.com
  • Incluir Bootstrap desde un CDN

Descargando Bootstrap

Si desea descargar y alojar Bootstrap usted mismo, vaya a getbootstrap.com y siga las instrucciones allí.

CDN de arranque

Si no desea descargar y alojar Bootstrap usted mismo, puede incluirlo desde una CDN (red de entrega de contenido).

MaxCDN proporciona compatibilidad con CDN para CSS y JavaScript de Bootstrap. También debe incluir jQuery:

CDN máx.:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Una ventaja de usar Bootstrap CDN:
muchos usuarios ya han descargado Bootstrap de MaxCDN cuando visitan otro sitio. Como resultado, se cargará desde el caché cuando visiten su sitio, lo que conduce a un tiempo de carga más rápido. Además, la mayoría de las CDN se asegurarán de que una vez que un usuario solicite un archivo, se sirva desde el servidor más cercano, lo que también conduce a un tiempo de carga más rápido.

jQuery
Bootstrap usa jQuery para complementos de JavaScript (como modales, información sobre herramientas, etc.). Sin embargo, si solo usa la parte CSS de Bootstrap, no necesita jQuery.

Crear la primera página web con Bootstrap

1. Agregue el tipo de documento HTML5

Bootstrap utiliza elementos HTML y propiedades CSS que requieren el tipo de documento HTML5.

Incluya siempre el tipo de documento HTML5 al principio de la página, junto con el atributo lang y el juego de caracteres correcto:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 3 es móvil primero

Bootstrap 3 está diseñado para responder a los dispositivos móviles. Los estilos móviles primero son parte del marco central.

Para garantizar una representación adecuada y el zoom táctil, agregue la siguiente <meta>etiqueta dentro del <head>elemento:

<meta name="viewport" content="width=device-width, initial-scale=1">

La width=device-widthparte establece el ancho de la página para seguir el ancho de pantalla del dispositivo (que variará según el dispositivo).

La initial-scale=1parte establece el nivel de zoom inicial cuando el navegador carga la página por primera vez.

3. Contenedores

Bootstrap también requiere un elemento contenedor para envolver el contenido del sitio.

Hay dos clases de contenedores para elegir:

  1. La .containerclase proporciona un contenedor de ancho fijo receptivo
  2. La .container-fluidclase proporciona un contenedor de ancho completo , que abarca todo el ancho de la ventana gráfica.
.envase
.contenedor-fluido

Dos páginas básicas de Bootstrap

El siguiente ejemplo muestra el código para una página básica de Bootstrap (con un contenedor de ancho fijo receptivo):

Ejemplo

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>

El siguiente ejemplo muestra el código para una página básica de Bootstrap (con un contenedor de ancho completo):

Ejemplo

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>

❮ Anterior Próximo ❯