twitter-bootstrap-3 Tutorial
Empezando con twitter-bootstrap-3

Angular 2 AngularJS asp.net-mvc CSS HTML JavaScript jQuery PHP Ruby on Rails twitter-bootstrap
Buscar..


Observaciones

Bootstrap es un marco web de front-end gratuito y de código abierto para diseñar sitios web y aplicaciones web. Contiene plantillas de diseño basadas en HTML y CSS para tipografía, formularios, botones, navegación y otros componentes de la interfaz, así como también extensiones de JavaScript opcionales. A diferencia de muchos marcos web, solo se ocupa del desarrollo de aplicaciones para usuario.

Bootstrap es el segundo proyecto más destacado en GitHub, con casi 100,000 estrellas y casi 45,000 tenedores.

Versiones

Versión Fecha de lanzamiento
3.3.7 2016-07-25

Instalación

  • Descarga directa - enlace de descarga
  • CDN - llegar aquí
  • Bower - bower install bootstrap [leer]
  • NPM - npm install bootstrap [leer]
  • Compositor - el composer require twbs/bootstrap [leer]
  • Personalizar : si tiene su propia configuración, puede personalizarla aquí .
  • Sass - Para proyectos relacionados con Sass puede obtenerlo aquí .

Uso 

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

La referencia al archivo bootstrap js se realiza utilizando una etiqueta de script justo encima de la etiqueta del cuerpo (ver más abajo). También tenga en cuenta que bootstrap está utilizando jQuery para la mayoría de los widgets, como el carrusel de acordeón, etc. así que haga referencia al archivo bootstrap js debajo del archivo jQuery js.

**Muestra** 
<!DOCTYPE html>
<html lang="en">

<head>

  <title>Form Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>

  <div class="container">
    <h2>Form Email</h2>
    <form role="form">
      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email">
      </div>
      <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" placeholder="Enter password">
      </div>
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>

Hola Mundo

La siguiente página HTML ilustra una página simple de Hello World usando Bootstrap 3 .

La página contiene una barra de navegación de ancho completo con enlaces de ejemplo y un control desplegable. La barra de navegación aprovecha las primeras capacidades móviles de Bootstrap. Comienza a colapsarse en las vistas móviles y se vuelve horizontal a medida que aumenta el ancho de la ventana gráfica disponible.

Además, se ha utilizado un elemento jumbotron para mostrar información destacada. 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Hello World</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>

    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <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="#">Hello, World!</a>
            </div>


            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</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><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="jumbotron">
            <h1>Bootstrap</h1>
            <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
            <p><a class="btn btn-primary btn-lg">Learn more</a></p>
        </div>
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Instalación y arranque de Bootstrap.

Introducción
¿Así que quieres comenzar a usar bootstrap para tu proyecto? ¡Genial! entonces vamos a empezar ahora mismo !.

¿Qué es bootstrap? Bootstrap es una biblioteca de código abierto los que se podrá utilizar para hacer proyectos de respuesta sorprendentes con el uso de diseño de respuesta y el código sencillo. El diseño responsivo es una filosofía de diseño en la que el diseño del sistema (la representación y el diseño) responde / se adapta según el diseño del dispositivo. La razón principal para mantener su diseño sensible es aumentar el alcance de su aplicación a una base de usuarios más grande utilizando una variedad de dispositivos.
Instalación
Bootstrap se puede instalar de muchas maneras diferentes y para diferentes tipos de proyectos. En la siguiente lista, he colocado algunos enlaces de descarga y tutoriales sobre cómo instalar bootstrap
descargar enlaces

  • Descarga directa - enlace de descarga
  • CDN - llegar aquí
  • Bower - bower install bootstrap [leer]
  • NPM - npm install bootstrap [leer]
  • Compositor - el composer require twbs/bootstrap [leer]
  • Personalizar : si tiene su propia configuración, puede personalizarla aquí .
  • Sass - Para proyectos relacionados con Sass, puede obtenerlo [aquí] [1].

Información básica
Así que ahora has instalado bootstrap en tu proyecto. Y ahora es el momento de comenzar a usar las grandes ventajas de bootstrap. Primero le voy a decir algo sobre el uso básico de bootstrap, luego le mostraré algunos ejemplos pequeños y al final le daré un ejemplo de código de inicio que puede usar como plantilla de inicio.

El sistema de red
Bootstrap utiliza un sistema de rejilla. Este sistema de rejilla normalmente consta de 12 columnas. Cada una de estas 12 columnas tiene el mismo ancho pero puede tener alturas diferentes.

Así que tenemos un sistema de rejilla que consta de 12 columnas. Podemos usar estas columnas para construir nuestro sitio web básico. Digamos que queremos lograr el siguiente diseño:

menú - ancho completo
barra lateral - 1/3 de la pantalla
Contenido principal 2/3 de la pantalla.
Pie de página - ancho completo

El menú
Primero vamos a mirar el menú. Como sabemos el sistema de rejilla funciona con 12 columnas. Como queremos que el menú sea de ancho completo, tenemos que colocar el menú en las 12 columnas. Se verá como el siguiente ejemplo. 

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    Menu
</div>

Al dar al menú una clase col-lg-12 indicamos lo siguiente:
col - La columna en el nombre de clase significa columnas.
lg : el lg en el nombre de clase representa el ancho de la pantalla, en este caso grande.
12 : el 12 en el nombre de clase representa el número de columnas que queremos que posea nuestro menú. ya que en este caso queremos el menú en todo el ancho obtenemos todas las 12 columnas (12/12)

Ya que hemos usado 12 de las 12 columnas para nuestro menú, todo después del menú se configurará en una nueva fila.

La barra lateral
El segundo elemento que queremos agregar a nuestra plantilla es la barra lateral. Ahora, como he dicho, queremos que la barra lateral sea 1/3 de la pantalla. Entonces, lo que vamos a hacer es dividir las 12 columnas en 3. que es 4. Ahora sabemos cuántas columnas queremos llenar para llegar a 1/3 de la pantalla. Siga el código de abajo. 

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
    The sidebar
</div>

Lo mismo que con el menú solo ahora nuestro número de cols difiere del menú.
col - La columna en el nombre de clase significa columnas.
lg : el lg en el nombre de clase representa el ancho de la pantalla, en este caso grande.
4 - el 12 en el nombre de clase representa el número de columnas que queremos que posea nuestra barra lateral. ya que en este caso queremos que la barra lateral llene 1/3 de la pantalla, así que solo tomaremos 4 de las 12 columnas (4/12)

El contenido
Ahora en esta fila todavía tenemos 8 columnas a la izquierda junto a nuestra barra lateral. Así que ahora vamos a llenarlos con nuestro contenido. Vea el código de ejemplo a continuación 

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
    The sidebar
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
    The main content
</div>

Ahora que hemos llenado las 8 columnas restantes de nuestras 12 columnas en esta fila, la siguiente sección comenzará nuevamente en una nueva fila con 12 columnas.

El pie de página
El pie de página es, de nuevo, igual que el menú será un bloque de ancho completo en la pantalla, así que cogeremos las 12 columnas de esta fila de nuestro pie de página, consulte el código de ejemplo a continuación. 

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
    The sidebar
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
    The main content
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The footer
</div>i are described below.

Así que ahora hemos creado, con solo un archivo html muy pequeño, nuestra primera plantilla bootstrap. Pero esto es lo más básico. Normalmente, formaríamos este código un poco más para darle la experiencia completa de arranque. Algunas de estas experiencias se describen a continuación.

Uso de filas y contenedores Como he dicho en el ejemplo simple anterior, bootstrap usa filas de 12 columnas. cuando una fila se llena con 12 columnas bootstrap comenzará en una nueva fila. La mejor manera de mostrar estas filas es usando clases de fila. También usaremos una clase de contenedor. Esto es como una etiqueta de cuerpo, en este contenedor colocaremos todo nuestro código. Puede elegir entre un contenedor o una clase de fluido de contenedor. La única diferencia es que la clase de contenedor fluido utiliza el ancho completo de una pantalla y la clase de contenedor no. Un ejemplo de estas características básicas es abajo. 

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            The menu consisting of 12 columns
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            The sidebar consisting of 4 columns
        </div>
        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
            The main content consisting of 8 columns
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            The footer consisting of 12 columns
        </div>
    </div>
</div>

Así que ahora hemos hecho una plantilla de página completa con bootstrap. De hecho, es muy simple, pero empiece por lo básico y más adelante podrá usar todo tipo de clases y funcionalidades de bootstrap. Última cosa. Los nombres de las columnas lg - md - sm y xs en las clases corresponden, como he dicho al ancho de la página. LarGe, MeDium, Small y XSmall. No olvide que puede usar eso para igualar el estilo de las columnas de manera diferente en diferentes anchos cambiando la cantidad de columnas. ¡Recuerde que una fila completa consta de 12 columnas!

Para obtener más información, visite: http://getbootstrap.com/ <br? Para ver buenos ejemplos, visite: http://expo.getbootstrap.com o http://bootsnipp.com/

Si desea que agregue más información o si se le presentan algunos problemas, ¡hágamelo saber! ¡Y feliz codificación para todos ustedes!



Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow