Tutorial de Bootstrap

Twitter Bootstrap es el marco de interfaz de usuario más popular en los últimos tiempos. Es un marco de primer front-end móvil elegante, intuitivo y potente para un desarrollo web más rápido y sencillo. Utiliza HTML, CSS y Javascript. Este tutorial le enseñará los conceptos básicos de Bootstrap Framework con el que puede crear proyectos web con facilidad. El tutorial está dividido en secciones como Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components y Bootstrap Plugins. Cada una de estas secciones contiene temas relacionados con ejemplos simples y útiles.

¿Por qué aprender Bootstrap?

Mobile first approach - Bootstrap 3, el marco consiste en los primeros estilos de Mobile en toda la biblioteca en lugar de en archivos separados.
Browser Support - Es compatible con todos los navegadores populares.

Easy to get started- Con solo el conocimiento de HTML y CSS, cualquiera puede comenzar con Bootstrap. Además, el sitio oficial de Bootstrap tiene una buena documentación.
Responsive design- El CSS sensible de Bootstrap se ajusta a computadoras de escritorio, tabletas y móviles. Más sobre el diseño receptivo se encuentra en el capítulo Bootstrap Responsive Design.

Proporciona una solución limpia y uniforme para crear una interfaz para desarrolladores.
Contiene componentes incorporados hermosos y funcionales que son fáciles de personalizar.
También proporciona personalización basada en web.
Y lo mejor de todo es que es de código abierto.

Hola mundo usando Bootstrap.

Solo para darle un poco de emoción sobre Bootstrap, le daré un pequeño programa convencional Bootstrap Hello World. Puede probarlo usando el enlace Demo.

<!DOCTYPE html>
<html>
   
   <head>
      <title>Bootstrap 101 Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      
      <!-- Bootstrap -->
      <link href = "css/bootstrap.min.css" rel = "stylesheet">
      
      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      
      <!--[if lt IE 9]>
      <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
      
   </head>
   
   <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src = "https://code.jquery.com/jquery.js"></script>
      
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src = "js/bootstrap.min.js"></script>
      
   </body>
</html>

Aplicaciones de Bootstrap

ScaffoldingBootstrap proporciona una estructura básica con sistema de cuadrícula, estilos de enlace y antecedentes. Esto se trata en detalle en la secciónBootstrap Basic Structure
CSSBootstrap viene con la función de configuración CSS global, elementos HTML fundamentales con estilo y mejorados con clases extensibles y un sistema de cuadrícula avanzado. Esto se cubre en detalle en la secciónBootstrap with CSS.
ComponentsBootstrap contiene más de una docena de componentes reutilizables creados para proporcionar iconografía, menús desplegables, navegación, alertas, ventanas emergentes y mucho más. Esto se cubre en detalle en la secciónLayout Components.
JavaScript Plugins- Bootstrap contiene más de una docena de complementos personalizados de jQuery. Puede incluirlos todos fácilmente, o uno por uno. Esto se trata en detalle en la secciónBootstrap Plugins.
Customize - Puede personalizar los componentes de Bootstrap, MENOS variables y complementos de jQuery para obtener su propia versión.

Audiencia

Este tutorial ha sido preparado para cualquiera que tenga un conocimiento básico de HTML y CSS y tenga ganas de desarrollar sitios web. Después de completar este tutorial, se encontrará con un nivel moderado de experiencia en el desarrollo de proyectos web utilizando Twitter Bootstrap.

Prerrequisitos

Antes de comenzar con este tutorial, asumimos que ya conoce los conceptos básicos de HTML y CSS. Si no conoce bien estos conceptos, le sugeriremos que consulte nuestro breve tutorial sobre HTML Tutorial y CSS Tutorial.