Bootstrap Introducción
Objetivos
Bootstrap es el framework front-end más popular y ya ha lanzado su tercera versión (v3.0.0). Este tutorial te guiará para comenzar a aprender Bootstrap 3.
También verás cómo usar las características del framework para personalizarlo y hacerlo diferente, como usar cuadrículas para crear diseños, crear navegación con nav, usar carousel para crear diapositivas, y agregar plugins de terceros como complementos sociales y Google Maps.
Qué es Bootstrap
Bootstrap es un framework front-end para el desarrollo rápido de aplicaciones web y sitios web.
En el desarrollo web moderno, hay varios componentes que son necesarios en casi todos los proyectos web.
Bootstrap te proporciona todos estos módulos básicos: Grid, Typography, Tables, Forms, Buttons y Responsiveness.
Además, hay muchos otros componentes front-end útiles, como Dropdowns, Navigation, Modals, Typehead, Pagination, Carousal, Breadcrumb, Tabs, Thumbnails, Headers, etc.
Con esto, puedes montar un proyecto web y hacer que funcione más rápido y con mayor facilidad.
Además, dado que todo el framework está basado en módulos, puedes personalizarlo con tus propios fragmentos de CSS, o incluso con una gran reorganización después de iniciado el proyecto.
Se basa en varias mejores prácticas. Creemos que es un buen momento para comenzar a aprender desarrollo web moderno. Una vez que domines los conocimientos básicos de HTML y JavaScript/jQuery, podrás aplicarlos en el desarrollo web.
Aunque también hay críticas de que todos los proyectos construidos con Bootstrap se ven iguales, y de que puedes construir un sitio web sin necesidad de saber mucho de HTML + CSS. Pero debemos comprender que Bootstrap es un framework genérico, como cualquier otra cosa genérica, necesitas personalizarlo para hacerlo único. Cuando quieras personalizarlo, necesitarás profundizar; sin una buena base de HTML + CSS no es viable.
Por supuesto, además de Bootstrap, hay muchos otros buenos frameworks front-end. Cuál usar es una elección del desarrollador, pero Bootstrap definitivamente vale la pena probarlo.
Por quéen el proyectousar Bootstrap?
Descargar y comprender la estructura de archivos
Puede desdehttps://github.com/twbs/bootstrap/archive/v3.0.0.zipohttps://github.com/twbs/bootstrap/releases/download/v3.0.0/bootstrap-3.0.0-dist.zipdescargar Bootstrap Version 3.0.0. Nosotros usamos la primera, pero también puedes usar la segunda.
Además, el código que proporcionamos para descargar incluye una carpeta de código bootstrap descargada a través del primer enlace. También contiene el custom.css, que es el CSS original utilizado para personalizar Bootstrap.
Después de descomprimir, verás que dentro de la carpeta raíz bootstrap-3.0.0 hay algunos archivos y carpetas.
Los principales archivos CSS - bootstrap.css y su versión simplificada bootstrap-min.css, se encuentran en la carpeta 'css' dentro de la carpeta 'dist' en la carpeta raíz bootstrap-3.0.0.
Dentro de 'dist', hay una carpeta 'js' que contiene el principal archivo JavaScript bootstrap.js y su versión simplificada.
En la carpeta raíz, hay una carpeta 'js' separada que contiene diferentes plugins de JavaScript en diferentes archivos.
Dentro de 'assets' en la carpeta raíz, encontrarás otra carpeta 'js'. Aquí se colocan html5shiv.js, el shim de HTML5, para obtener soporte de IE8. También hay un archivo respond.min.js, para soportar consultas de medios en IE8. Esta carpeta también contiene jquery.js, del cual dependen los plugins js de Bootstrap.
En la misma carpeta, hay una carpeta 'ico' que contiene iconos de favicon y varios iconos para dispositivos móviles.
La carpeta 'css' en la misma ruta contiene los archivos CSS de la documentación.
Las carpetas '_includes' y '_layouts' contienen algunos archivos de estructura de diseño predeterminados que pueden ser útiles para la creación rápida de prototipos.
La carpeta 'less' dentro de la carpeta raíz contiene algunos archivos .less. Estos archivos serán útiles si deseas desarrollar con LESS.
En la carpeta raíz, hay algunos archivos. Algunos son archivos HTML para el prototipado básico, y otros son bower.json y browserstack.json para compilación basada en Bower. Además, hay composer.json y un archivo YAML _config.yml.
Además de descargar desde los enlaces proporcionados, también puedes usar el siguiente comando para compilar todos los archivos CSS y JS:
$ bower install bootstrap
Puedes clonar el repositorio Git de Bootstrap
git clone git://github.com/twbs/bootstrap.git
En este tutorial, solo descargamos el archivo Zip, no lo utilizamos.
Una vez que hayas aprendido este tutorial, te animamos a instalar el framework a través de Bower para entender cómo funciona.
NetDNA proporciona versiones compiladas y simplificadas de CSS, JS y otros CSS de temas de Bootstrap. Puedes hacer referencia a ellos mediante las siguientes declaraciones.
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
Desarrollo con Bootstrap v3.0.0
HTML básico
A continuación se muestra la estructura HTML básica que se utilizará en nuestro proyecto.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap V3 template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="bootstrap-3.0.0/dist/css/bootstrap.min.css.html" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="bootstrap-3.0.0/assets/js/html5shiv.js.html"></script>
<script src="bootstrap-3.0.0/assets/js/respond.min.js.html"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap-3.0.0/dist/js/bootstrap.min.js.html"></script>
</body>
</html>
Ten en cuenta que los archivos agregados a la plantillahtml5shiv.js y respond.min.js se utilizan para obtener soporte de IE8. Estos archivos ya se han agregado en Bootstrap versión 3.
Hemos colocado la carpeta bootstrap-3.0.0 dentro de la carpeta twitter-bootstrap en la carpeta raíz del servidor web. Todos los archivos HTML que creemos se colocarán dentro de twitter-bootstrap. Mencionamos esto para simplificar nuestro proceso de desarrollo.
Personalización
Vamos apersonalizar el estilo de los marcos CSS para que sean distintivosPor lo tanto, sin dañar los archivos CSS originales (ubicados en la carpeta dist de bootstrap-3.0.0), crearemos un archivo CSS independiente llamado custom.css en la misma carpeta. Luego, en el archivo HTML, hacemos referencia a este archivo CSS justo después del archivo CSS original. De esta manera, podemos sobrescribir los estilos predeterminados que queremos cambiar, pero si Bootstrap se actualiza, el archivo CSS original también se actualizará sin romper nuestra personalización. Le recomendamos que haga lo mismo durante su desarrollo.
Crear navegación
Para crear una navegación, agrega el siguiente código en el archivo HTML, justo después de la etiqueta de apertura de body.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<ul class="nav navbar-nav">
<li><a href="new.html" class="navbar-brand">
<img src="logo.png.html"></a></li>
<li class="active"><a href="../index.html">Home</a></li>
<li><a href="price.html">Price</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="dropdown">
<a href="../index.html" class="dropdown-toggle" data-toggle="dropdown">Social<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="socials"><g:plusone annotation="inline" width="150"></g:plusone></li>
<li class="socials"><div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="The pixel width of the plugin" data-height="The pixel height of the plugin" data-colorscheme="light" data-layout="standard" data-action="like" data-show-faces="true" data-send="false"></div></li>
<li class="socials"><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></li>
</ul>
</li>
</ul>
</nav>
Para la navegación, Bootstrap usa la clase 'navbar' a nivel de contenedor. Por lo tanto, se asigna al elemento nav que contiene toda la navegación.
Hemos usado la clase 'navbar-inverse' para cambiar el color predeterminado de la barra de navegación, usando oscuro en lugar del claro predeterminado. La clase 'navbar-fixed-top' asegura que la barra de navegación permanezca fija en la parte superior cuando desplazamos hacia abajo en la página HTML.
En Bootstrap V3.0.0, el uso de role="navigation" al crear la navegación es una novedad.Bootstrap recomienda hacerlo para que la barra de navegaciónsea fácilmente accesible.。
En este punto, agregamos 'padding-top: 80px;' al body en el archivo custom.css. Los píxeles que agregue como relleno superior al body pueden variar, pero a menos que haga esto, la parte superior del contenido después de la barra de navegación quedará oculta.
Dentro del contenedor nav, tenemos una lista desordenada con clases 'nav' y 'navbar-nav'. Dentro de esta lista desordenada, cada elemento de lista contiene un enlace de la navegación.
La clase 'navbar-brand' se utiliza para mostrar el nombre de la marca. Ya hemos usado una imagen. Debido a que la altura de la imagen es mayor que la altura de la línea base de la barra de navegación, aquí hacemos algunas personalizaciones. Aumentamos la propiedad 'line-height' de '.navbar-nav>li>a' de los 20px predeterminados originales a 50px, y cambiamos el tamaño de fuente a 16px.
En el enlace más a la derecha, hemos añadido un menú desplegable. Para la clase 'dropdown' añadida al li correspondiente, justo después, añadimos un ancla con las clases 'dropdown-toggle' y 'caret'. Este ancla contiene realmente el texto del ancla social de nuestro proyecto. Este li contiene una lista desordenada, y cada elemento de lista anidado en la lista contiene un enlace que se muestra en el menú desplegable.
En el menú desplegable hemos añadido los plugins sociales. El primer li contiene el marcado de Google Plus, el segundo li contiene el marcado de Facebook, y el tercer li contiene el marcado que muestra el botón de Twitter y algunos scripts js.
Además, debe añadir el siguiente marcado y script después de la etiqueta de apertura de body para que el botón de Facebook funcione.
<div id="fb-root"></div>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Para que el botón de Twitter funcione, añadimos el siguiente script antes de la etiqueta de cierre de body.
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
Usamos los siguientes estilos para añadir algunos estilos adicionales a los botones sociales con la clase 'socials'.
.socials {
padding: 10px;
}
Así queda completa nuestra navegación.
Crear diapositivas con carrusel
Para crear una presentación de diapositivas debajo de la barra de navegación en la página de inicio del proyecto, usaremos el siguiente marcado.
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="computer.jpg.html" alt="...">
<div class="carousel-caption">
<h1>Large Desktops are everywhere</h1>
<p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
</div>
</div>
<div class="item">
<img src="mobile.jpg.html" alt="...">
<div class="carousel-caption">
<h1>Mobiles are outnumbering desktops</h1>
<p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
</div>
</div>
<div class="item">
<img src="cloud1.jpg.html" alt="...">
<div class="carousel-caption">
<h1>Enterprises are adopting Cloud computing fast</h1>
<p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="../index.html" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="../index.html" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
En el carrusel hay cuatro partes. El contenedor principal se define con una etiqueta div con la clase 'carousel slide'.
Luego hay una lista ordenada con la clase 'carousel-indicators'. Cada elemento de lista dentro de ol representa una diapositiva. Cuando la página se carga, la diapositiva cargada por defecto tiene la clase 'active'. Al renderizarse, las verá como pequeños círculos debajo del título.
Luego, cada diapositiva (imagen) se coloca en una etiqueta div con la clase 'item'. Cada elemento está anidado en un div con la clase 'carousel-caption'. carousel-caption contiene algún marcado que se muestra como subtítulo junto con la imagen. El párrafo contiene un h1 y un botón; también puede incluir su propio marcado.
La última parte se utiliza para controlar la diapositiva siguiente/anterior. Esto se define con las clases 'left' y 'carousel-control' para la anterior, y con las clases 'right' y 'carousel-control' para la siguiente.
Las clases 'icon-prev' e 'icon-next' se utilizan para los iconos de siguiente y anterior.
Hemoshecho algunas personalizaciones en el carrusel predeterminado. Queremos que el subtítulo, los indicadores y los iconos de siguiente/anterior se representen unos píxeles por encima de su posición predeterminada.
Para lograrlo, añadimos los siguientes estilos en el archivo custom.css.
.carousel-inner .item .carousel-caption {
position:absolute;
top: 200px
}
.carousel-indicators {
position: absolute;
top: 400px;
}
.navbar {
margin-bottom:0;
}
.navbar-nav>li>a {
line-height: 50px;
font-size: 16px
}
También personalizamos h1, añadiéndole un margen inferior de 30 píxeles.
h1 {
margin-bottom: 30px
}
Imágenes responsivas
Es posible que haya notado que en cada imagen de la presentación de diapositivas hemos usado la clase 'img-responsive'. Esta es una función nueva en Bootstrap v3.0.0.Al usar la clase 'img-responsive' en la etiqueta img, Bootstrap hace que la imagen sea responsiva.。
Crear cuadrículas
Debajo de la presentación de diapositivas, usamos una cuadrícula para colocar el contenido. Para comenzar una cuadrícula, use un div con la clase 'container'. Tenga en cuenta que vamos a desarrollar un sitio web responsivo; a diferencia de versiones anteriores de Bootstrap, aquí el contenedor tiene una sola clase y es responsivo por defecto.
El div contenedor anida varios divs con la clase 'row' (tres en la primera fila, seis en la segunda fila), que se utilizan para crear las filas de la cuadrícula de Bootstrap.
Cada fila tiene un div con la clase 'col-x-y', que se usa para crear columnas. El valor de x puede ser: xs para dispositivos móviles, sm para tabletas, md para portátiles y pantallas de escritorio más pequeñas, lg para pantallas de escritorio grandes. Este es el primer método. El valor de y puede ser cualquier entero positivo, pero el número total de columnas en la cuadrícula no debe superar 12. En nuestro proyecto, por simplicidad, hemos usado lg, pero ya que lo hemos hecho, es posible que desee tomar un teléfono o una tableta para ver el sitio del proyecto y comparar.
En un tutorial posterior, tendremos un tutorial completo sobre el sistema de cuadrícula de Bootstrap para explorar sus fascinantes características responsivas.
En este ejemplo, queremos que las tres columnas de la primera fila tengan el mismo ancho, por lo que usamos 'col-lg-4' para todas las columnas. En la segunda fila, queremos que las seis columnas tengan el mismo ancho, por lo que usamos 'col-lg-2' para todas las columnas.
A continuación se muestra el marcado de la cuadrícula que contiene dos filas: la primera fila tiene tres columnas y la segunda fila tiene seis columnas.
<div class="row barone"> <div class="col-lg-2"> <p><img src="../wp-content/uploads/2013/10/php.png"></p> </div> <div class="col-lg-2"> <p><img src="../wp-content/uploads/2013/10/mysql-logo.jpg"></p> </div> <div class="col-lg-2"> <p><img src="../wp-content/uploads/2013/10/javascript-logo.png"></p> </div> <div class="col-lg-2"> <p><img src="../wp-content/uploads/2013/10/java.jpg"></p> </div> <div class="col-lg-2"> <p><img src="../wp-content/uploads/2013/10/postgresql.png"></p> </div> </div>
Terminamos la cuadrícula con un hr y un pie de página con el siguiente marcado.
<hr> <p>Copyright@2013-14 by ToDo App.</p>
Usar tablas
En la página price.html de nuestro proyecto, usamos una tabla para presentar una tabla de precios, el marcado se muestra a continuación.
<table class="table table-bordered">
<thead>
<tr>
<th>Features</th>
<th>Individual</th>
<th>Small Team</th>
<th>Medium Team</th>
<th>Enterprise</th>
</tr>
</thead>
<tbody>
<tr>
<td><h3>No. Of users</h3></td>
<td><span class="badge">One</span></td>
<td><span class="badge">Five</span></td>
<td><span class="badge">Fifteen</span></td>
<td><span class="badge">Unlimited</span></td>
</tr>
<tr>
<td><h3>Pro training</h3></td>
<td><span class="badge">No</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>Forum Support</h3></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>In person support</h3></td>
<td><span class="badge">No</span></td>
<td><span class="badge">No</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>Weekly webinars</h3></td>
<td><span class="badge">No</span></td>
<td><span class="badge">No</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>Price</h3></td>
<td><button type="button" class="btn btn-warning btn-lg">$9/Month</button></td>
<td><button type="button" class="btn btn-warning btn-lg">$19/Month</button></td>
<td><button type="button" class="btn btn-warning btn-lg">$49/Month</button></td>
<td><button type="button" class="btn btn-warning btn-lg">$99/Month</button></td>
</tr>
<tr>
<td></td>
<td><button type="button" class="btn btn-success btn-lg">Buy now</button></td>
<td><button type="button" class="btn btn-success btn-lg"">Buy now</button></td>
<td><button type="button" class="btn btn-success btn-lg"">Buy now</button></td>
<td><button type="button" class="btn btn-success btn-lg"">Buy now</button></td>
</tr>
</tbody>
</table>
Usamos las clases 'table' y 'table-bordered' del archivo CSS original de Bootstrap. Pero ya hemos realizado algunas personalizaciones añadiendo el siguiente CSS en customize.csspara hacer algunas personalizaciones y que la tabla se vea diferente.
th {
background-color: #428BCA;
color: #EC8007;
z-index: 10;
text-shadow: 1px 1px 1px #fff;
font-size: 24px;
}
Usar insignias
Usamos la clase 'badge' para mostrar algo de texto en la tabla. Tenemos una clase badge personalizada con el siguiente CSS.
.badge {
background-color: #428BCA;
color: #fff;
font-size: 22px;
}
Para esta página y la página contact.html, añadimos otra regla CSS en customize.css.
.container > h1 {
text-align: center;
}
Esto alinea h1 al centro.
Usar formularios
En el archivo contact.html, creamos tres columnas; en la primera columna, incrustamos un formulario. El formulario usa los estilos predeterminados.
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="email" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="name" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="country" class="col-lg-2 control-label">Country</label>
<div class="col-lg-10">
<select>
<option>USA</option>
<option>India</option>
<option>UK</option>
<option>Autralia</option>
</select>
</div>
</div>
<div class="form-group">
<label for="desc" class="col-lg-2 control-label">Message</label>
<div class="col-lg-10">
<textarea rows="5" cols="50"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
La clase 'form-horizontal' mantiene el formulario alineado horizontalmente.Tenga en cuenta que, para facilitar la accesibilidad, se añade role="form". Esta es una característica nueva en la versión 3.0.0.
Para posicionar cada control de formulario, Bootstrap 3.0.0 usa una nueva clase 'form-group'.
En la segunda columna de la cuadrícula de esta página, simplemente colocamos algo de texto.
Agregar Google Maps
En la página contact.html, en la tercera columna de la cuadrícula, agregamos Google Map (Google Maps). Para hacer esto, usamos el siguiente marcado.
<div id="map_canvas"></div> </div>
El siguiente código js se añade dentro de la cabecera del archivo HTML.
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(23.244066, 87.861276),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
Antes del js mencionado anteriormente, debe añadir la siguiente etiqueta de script.
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
Para que el mapa se renderice correctamente, debe añadir los siguientes estilos en custom.css.
#map_canvas {
width: 400px;
height: 400px;
}
Así es como se crea un proyecto simple basado en Bootstrap V3.0.0. Pero solo hemos tocado la superficie; los capítulos posteriores lo explicarán con más detalle.
Otras extensiones