Cómo empezar con Bootstrap

Tutoriales, consejos y artículos sobre Desarrollo WEB
Avatar de Usuario
Arkanoid
Miembro Especial
Mensajes: 53
Registrado: 16 Oct 2013, 22:06

Cómo empezar con Bootstrap

Mensajepor Arkanoid » 01 Jul 2015, 18:35

Imagen

Bootstrap es un framework o área de trabajo de software libre desarrollado por Twitter para diseñar páginas web rápidamente. El framework es fácil de utilizar y ofrece compatibilidad con dispositivos móviles para crear diseños responsive "mobile first".

Para empezar a utilizar Bootstrap basta con ir a la página oficial y descargar el paquete precompilado o sin compilar para utilizarlo con preprocesadores sass o less.
http://getbootstrap.com/getting-started/#download

El paquete precompilado incluye archivos css javascript y un paquete de fuentes Glyphicons en el que incluye gran variedad dde iconos SVG para incluir directamente en nuestros proyectos. En la página también tenemos varias plantillas que podemos utilizar en forma de ejemplos

Descomprimimos el paquete en nuestro servidor web y empezamos a utilizar el framework

Bootstrap ofrece numerosos componentes que podemos utilizar a través del framework de forma muy fácil:
- Iconos (Glyphicons)
- Menús desplegables
- Botones de todos los tipos y tamaños
- Áreas de texto
- Barras de navegación
- Popups o ventanas modales (javascript)
- Rutas de exploración o Breadcrumbs
- Paginación
- Etiquetas
- Insignias
- Encabezados de página
- Miniaturas
- Alertas
- Barras de progreso con un máximo y un mínimo personalizable
- Objetos de medios
- Listas, paneles
- Objetos embebidos responsive (cómo vídeos de youtube)

- Con twitter Bootstrap también tenemos componentes en javascript:
- Efectos y transiciones
- Ventanas modales,
- Popups para eventos como cuando se pasa el cursor del ratón por encima de un elemento o para colapsar elementos,
- Botones de carga,
- Cajas de selección o CheckBox
- Para nuestras galerías de imágenes podemos usar un carrusel de imágenes que podemos personalizar todo lo que se quiera
http://getbootstrap.com/components/

Si queremos tener el diseño de Bootstrap con nuestros parámetros o configuraciones personalizadas, variables y plugins jQuery, podemos personalizar el paquete
http://getbootstrap.com/customize/

Con FontAwesome podemos aumentar la cantidad de iconos para nuestros diseños
https://fortawesome.github.io/Font-Awesome/

Plantilla básica:
Tenemos que incluir en el head la hoja de estilos css de Bootstrap:

Código: Seleccionar todo

<link href="css/bootstrap.min.css" rel="stylesheet">


Si queremos usar FontAwesome también añadimos:

Código: Seleccionar todo

<link href="css/font-awesome.css" rel="stylesheet" />


Justo antes del </body> añadimos los archivos .js:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Quedando finalmente así:

Código: Seleccionar todo

<!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>


Podemos ver, copiar y modificar muchos ejemplos desde la siguiente dirección:
http://getbootstrap.com/getting-started/#examples

La mejor documentación sobre Bootstrapes en su página oficial, en la que se puede aprender todo el potencial de Bootstrap:

Crear un botón con un icono Glyphicons:

Código: Seleccionar todo

<button type="submit" class="btn btn-primary pull-right">
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>Botón</button>

Solo hace falta cambiar glyphicon-envelope por el icono que queramos. La lista de iconos Glyphicons está en la página oficial de Bootstrap. Con CSS cambiamos el color del icono con la propiedad color.

Icono en campo de texto:

Código: Seleccionar todo

<div class="control-group">
                    <div class="form-group has-feedback">
                            <input type="text" class="form-control" placeholder="Nombre" id="name" required="" data-validation-required-message="Introduce el nombre" aria-invalid="false">
                         <span class="glyphicon glyphicon-user form-control-feedback" aria-hidden="true"></span>
                         <p class="help-block"></p>
                      </div>
</div>


Añadir iconos de FontAwesome:

Código: Seleccionar todo

<i class="fa fa-sliders  fa-5x"></i>

Con fa-xx modificamos el tamaño respecto del original: 1x 2x 3x 4x 5x
La utilidad de Internet Explorer es descargar Firefox ¿La de Firefox será descargar Chrome?

Calificaciones: 0 | 0.00 de media.Calificaciones: 0 | 0.00 de media.Calificaciones: 0 | 0.00 de media.Calificaciones: 0 | 0.00 de media.Calificaciones: 0 | 0.00 de media.Calificaciones: 0 | 0.00 de media.
0,0/ 60votos
  • Temas similares
    Respuestas
    Vistas
    Último mensaje

Volver a “Tutoriales WEB”