twitter-bootstrap Tutorial
Empezando con el twitter-bootstrap
Buscar..
Observaciones
Bootstrap es un marco HTML, CSS y JavaScript que se utiliza para crear sitios web que se crean utilizando un primer paradigma móvil, así como un diseño web sensible (RWD). Utiliza una combinación de clases de CSS prefabricadas y JavaScript para hacer una variedad de cosas en la web. Incluye elementos tales como una cuadrícula sensible y personalizada que permite ver los sitios web en cualquier pantalla, una barra de navegación desplegable que es capaz de responder e incluso cosas simples que pueden requerir mucho tiempo, como botones, formularios y acordeones prefabricados para nombrar un pocos.
Bootstrap puede ser útil por las siguientes razones:
Ahorro de tiempo : Bootstrap presenta muchas cosas que están preconfiguradas, y que simplemente necesitan ser llamadas cuando se escribe un código. Esto ahorra una cantidad de tiempo considerable y puede reducir considerablemente el tiempo necesario para codificar un sitio web.
Diseñado pensando en el diseño web sensible : Bootstrap permite que los desarrolladores web no se preocupen por crear cosas que se amplíen con el tamaño de su pantalla, ya que Bootstrap usa un diseño móvil y sensible que les permite crear cosas que funcionarán en cualquier pantalla tamaño.
Simplifica el proceso de diseño : Bootstrap viene premontado con elementos que tienen buenas prácticas de diseño. Esto puede ser útil para aquellos cuyas habilidades de diseño web no son tan buenas, o para aquellos que ven el diseño como una tarea tediosa, ya que muchas de las clases de Bootstrap son estéticamente agradables y excelentes para mirar.
Esta sección debe mencionar cualquier tema grande dentro de twitter-bootstrap y vincular a los temas relacionados. Dado que la Documentación para twitter-bootstrap es nueva, es posible que deba crear versiones iniciales de esos temas relacionados.
Versiones
| Versión | Fecha de lanzamiento |
|---|---|
| 4.0 | 2999-01-01 |
| 3.3.7 | 2016-07-25 |
| 3.3.6 | 2015-11-24 |
| 3.3.5 | 2015-06-15 |
| 3.3.4 | 2015-03-16 |
| 3.3.1 | 2014-11-12 |
| 3.3.0 | 2014-10-29 |
| 3.2.0 | 2014-06-26 |
| 3.1.0 | 2014-01-30 |
| 3.0 | 2013-08-19 |
| 2.3 | 2013-02-07 |
| 2.2 | 2012-10-29 |
| 2.1 | 2012-08-20 |
| 2.0 | 2012-02-01 |
| 1.0 | 2011-08-18 |
Instalación / Configuración
Descargando:
- Descargue Bootstrap directamente o clone, etc. desde el repositorio de GitHub
- Descarga tu versión personalizada de Bootstrap desde documentos oficiales
- Instalar con bower:
bower install bootstrap - Instalar con npm:
npm install bootstrap - Instalar con el compositor: el
composer require twbs/bootstrap
La estructura de archivos 
Instalación:
Dentro de su página HTML, incluya CSS, JS de Bootstrap y la dependencia de jQuery (pre versión 3, al menos a partir de la última versión de Bootstrap). Tenga en cuenta que si planea utilizar las funciones de JavaScript de Bootstrap, su referencia jQuery debe aparecer antes de su referencia bootstrap.js dentro de su HTML.
Puede utilizar sus archivos instalados de Bootstrap de la sección anterior, o hacer referencia a un CDN provisto por los creadores de Bootstrap (enlaces tomados de Getting Started with Bootstrap ):
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Una página web muy básica de Bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Plantilla Básica
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title> <!-- The title of the Website -->
<!-- Reference to Bootstrap's CSS file -->
<!-- This is the line to reference the bootstrap's Stylesheet -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<!--[endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- Referencing jQuery (necessary for Bootstrap JavaScript plugins(bootstrap.min.js) to work) -->
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Referencing Javascript Bootstrap Plugin to Facilitate Bootstrap Animations and functionalities. -->
<!-- (Necessary to run Bootstrap) -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Cuando usar Bootstrap
Bootstrap es un marco de opinión para HTML, CSS y Javascript. Contiene un estilo y una funcionalidad básicos para lo que se han aceptado los elementos [Interfaz de usuario], como elementos de formulario, botones, ventanas modales y elementos de navegación.
Bootstrap es un marco web sensible, lo que significa que está diseñado para adaptar el diseño y el diseño para tamaños de pantalla grandes y pequeños, como dispositivos móviles, tabletas y computadoras de escritorio, todo en un solo código.
Uno de los conceptos fundamentales de Bootstrap es el marco de la cuadrícula. Al aplicar clases a elementos HTML, es posible crear diseños complejos utilizando una cuadrícula básica de doce columnas. Por ejemplo, un diseño de cuatro columnas podría adaptarse a dos columnas en dispositivos de tableta y una columna en dispositivos móviles. La cuadrícula utiliza media queries , un método CSS para apuntar a tamaños de pantalla específicos, para lograr esto.
Bootstrap funciona particularmente bien si:
- El diseño personalizado no es una prioridad
- Se siente más cómodo editando HTML y agregando clases que creando CSS personalizado
- Se siente cómodo utilizando un marco que tendrá muchas similitudes visuales con muchos otros sitios web
Bootstrap puede ser utilizado por aquellos que son nuevos en HTML, CSS y Javascript, ya que la documentación es excelente. Sin embargo, hay una curva de aprendizaje para aquellos que no están del todo cómodos con las tres tecnologías básicas utilizadas por Bootstrap (HTML, CSS y Javascript).
Es posible comprar o descargar temas de Bootstrap para modificar el estilo o la funcionalidad de Bootstrap. También es posible utilizar Bootstrap como punto de partida, con personalización de CSS y Javascript.
Página web básica utilizando componentes bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>
</p>
</div>
</div> <!-- /container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>