Los últimos tutoriales de desarrollo web
 

Bootstrap Get Started

❮ Anterior Siguiente Capítulo ❯

¿Cuál es Bootstrap ?

  • Bootstrap es un marco frontal de extremo libre para el desarrollo web más rápido y más fácil
  • Bootstrap incluye plantillas de diseño basadas en HTML y CSS para tipografía, formas, botones, tablas de navegación, modales, carruseles de imágenes y muchas otras, así como complementos opcionales de JavaScript
  • Bootstrap también le da la posibilidad de crear fácilmente diseños que responden

¿Cuál es al diseño web?

diseño web sensible es sobre la creación de sitios web que se ajustan automáticamente para quedar bien en todos los dispositivos, desde teléfonos pequeños y grandes escritorios.

Bootstrap Historia

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 en GitHub No.1!

¿Por qué utilizar Bootstrap ?

Ventajas de Bootstrap :

  • Fácil de usar: Cualquier persona con conocimientos simplemente básicos de HTML y CSS puede comenzar a usar Bootstrap
  • Características de respuesta: Bootstrap CSS sensible 's se ajusta a los teléfonos, tabletas y ordenadores de sobremesa
  • Mobile-primer acercamiento: En Bootstrap 3, estilos móviles primer forman parte del marco básico
  • Compatibilidad del navegador: Bootstrap es compatible con todos los navegadores modernos (Chrome, Firefox, Internet Explorer, Safari y Opera)

Dónde obtener Bootstrap ?

Hay dos formas de iniciar el uso Bootstrap en su propio sitio web.

Usted puede:

  • Descargar Bootstrap de getbootstrap.com
  • Incluir Bootstrap de un CDN

descarga de Bootstrap

Si quiere descargar y anfitrión Bootstrap mismo, vaya a getbootstrap.com , y siga las instrucciones allí.

Bootstrap CDN

Si no desea descargar y albergar Bootstrap a sí mismo, puede incluir desde un CDN (Content Delivery Network).

MaxCDN proporcionar apoyo para la CDN Bootstrap CSS 's y JavaScript. También incluya jQuery:

MaxCDN:

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

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

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

Una ventaja de usar el Bootstrap CDN :
Muchos usuarios ya han descargado Bootstrap de MaxCDN se encuentra en otro sitio. Como resultado, se cargará desde la memoria caché cuando visitan su sitio, lo que conduce a la descarga más rápida. Además, la mayoría CDN's se asegurará de que una vez que un usuario solicita un archivo de ella, se sirve desde el servidor más cercano a ellos, que también conduce a la descarga más rápida.

Crear la primera página web con Bootstrap

1. Agregar el tipo de documento HTML 5

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

Siempre incluya el tipo de documento HTML 5 al comienzo 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 por primera

Bootstrap 3 está diseñado para ser sensible a los dispositivos móviles. -Mobile primeros estilos son parte del marco básico.

Para garantizar la prestación adecuada y una función de zoom táctil, añada el siguiente <meta> etiqueta dentro de la <head> elemento:

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

La width=device-width la parte establece el ancho de la página para seguir a la pantalla de una anchura del dispositivo (que variará dependiendo del dispositivo).

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

3. Envases

Bootstrap requiere también un elemento contenedor para envolver los contenidos del sitio.

Hay dos clases de contenedores para elegir:

  1. El .container clase proporciona un recipiente ancho fijo sensible
  2. El .container-fluid clase proporciona un recipiente de ancho total, que abarca toda la anchura de la ventana gráfica

Nota: Los recipientes no son encajables (no se puede poner un recipiente dentro de otro contenedor).

Dos básico Bootstrap Páginas

El siguiente ejemplo muestra el código de una base Bootstrap de página (con un recipiente ancho fijo de respuesta):

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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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>
Inténtalo tú mismo "

El siguiente ejemplo muestra el código de una base Bootstrap de página (con un recipiente ancho total):

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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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>
Inténtalo tú mismo "

❮ Anterior Siguiente Capítulo ❯