Estilos
Encabezado
h1. Texto referencia small
h2. Texto referencia small
h3. Texto referencia small
h4. Texto referencia small
h5. Texto referencia small
h6. Texto referencia small
<h1>h1. Texto referencia</h1>
<h2>h2. Texto referencia</h2>
<h3>h3. Texto referencia</h3>
<h4>h4. Texto referencia</h4>
<h5>h5. Texto referencia</h5>
<h6>h6. Texto referencia</h6>
Cuerpo
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. → 21 px
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. → 16 px | 1 em
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
Énfasis
Esta línea de texto es tratada como impresión fina
El siguiente fragmento de texto es mostrado como texto en negrita
El siguiente fragmento de texto es mostrado como texto en cursiva
<p>Esta línea de texto es tratada como impresión fina</p>
<p>El siguiente fragmento de texto es <strong>mostrado como texto en negrita</strong></p>
<p>El siguiente fragmento de texto es <i>mostrado como texto en cursiva</i></p>
Cita
“Todas las áreas del Gobierno tendrán un plan de comunicación e información que será publicado y actualizado en forma permanente”
— Marcelo Fitipaldi
<blockquote>
<p> “Todas las áreas del Gobierno tendrán un plan de comunicación e información que será publicado y actualizado en forma permanente”</p>
— <cite>Marcelo Fitipaldi</cite>
</blockquote>
Listas
Lista sin orden
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit lorem ipsum dolor sit.
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit lorem ipsum dolor sit.
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit lorem ipsum dolor sit.
<ul>
<li>Lorem ipsum dolor sit <strong>amet</strong>.</li>
<li>Consectetur adipiscing elit <strong>lorem ipsum dolor sit</strong>.</li>
<li>Lorem ipsum dolor sit <strong>amet</strong>.</li>
<li>Consectetur adipiscing elit <strong>lorem ipsum dolor sit</strong>.</li>
<li>Lorem ipsum dolor sit <strong>amet</strong>.</li>
<li>Consectetur adipiscing elit <strong>lorem ipsum dolor sit</strong>.</li>
</ul>
Lista ordenada
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit lorem ipsum dolor sit.
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit lorem ipsum dolor sit.
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit lorem ipsum dolor sit.
<ol>
<li>Lorem ipsum dolor sit <strong>amet</strong>.</li>
<li>Consectetur adipiscing elit <strong>lorem ipsum dolor sit</strong>.</li>
<li>Lorem ipsum dolor sit <strong>amet</strong>.</li>
<li>Consectetur adipiscing elit <strong>lorem ipsum dolor sit</strong>.</li>
<li>Lorem ipsum dolor sit <strong>amet</strong>.</li>
<li>Consectetur adipiscing elit <strong>lorem ipsum dolor sit</strong>.</li>
</ol>
Lista de descripción
- Listas descriptivas
- Una lista descriptiva es perfecta para la definición de términos.
- Euismod
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
<dl>
<dt>Listas descriptivas</dt>
<dd>Una lista descriptiva es perfecta para la definición de términos.</dd>
<dt>Euismod</dt>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
Tablas
El objetivo de las tablas es mostrar una serie de datos en forma ordenada, organizado en filas y columnas.
# | Nombre | Apellido | Nombre de usuario |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Nombre</th>
<th>Apellido</th>
<th>Nombre de usuario</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Tabla con separador de filas
# | Nombre | Apellido | Nombre de usuario |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<table class="table table-striped">
</table>
Tabla con buscador
* Requiere ListJs http://www.listjs.com/
# | Nombre | Apellido | Nombre de usuario |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird | |
4 | Steve | Otto | @mdq |
5 | Peter | Thornton | @slim |
6 | John | Big Bird | @twitter2 |
<div id="usuarios">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Nombre</th>
<th>Apellido</th>
<th>Nombre de usuario</th>
</tr>
</thead>
<tbody class="list">
<tr>
<th scope="row">1</th>
<td class="nombre">Mark</td>
<td class="apellido">Otto</td>
<td class="usuario">@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td class="nombre">Jacob</td>
<td class="apellido">Thornton</td>
<td class="usuario">@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td class="nombre">Larry</td>
<td class="apellido">the Bird</td>
<td class="usuario">@twitter</td>
</tr>
</tbody>
</table>
</div>
Javascript relacionado
var options = {
valueNames: [ 'nombre', 'apellido', 'usuario' ]
};
var userList = new List('usuarios', options);
Tabla con bordes
# | Nombre | Apellido | Nombre de usuario |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<table class="table table-bordered">
</table>
Tabla con colores
# | Nombre | Apellido | Nombre de usuario |
---|---|---|---|
1 | Jacob | Thornton | @fat |
3 | Mark | Otto | @mdo |
4 | Jacob | Thornton | @fat |
5 | Larry | the Bird |
<tr class="info">
<th scope="row">1</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr class="success">
<th scope="row">3</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr class="warning">
<th scope="row">4</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr class="danger">
<th scope="row">5</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
Tabla con hover
# | Nombre | Apellido | Nombre de usuario |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<table class="table table-hover">
......
</table>
Ejemplo de formulario
Los formulario permite que el usuario cargue datos y sean enviados al servidor. Es el medio ideal para realizar logueos, establecer contacto, sacar turnos, etc.
<form>
<div class="form-group">
<label for="exampleInputEmail1">Dirección Email</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Contraseña</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Contraseña">
</div>
<div class="form-group">
<p>Adjuntar archivo:</p>
<input type="file" id="exampleInputFile" class="inputfile">
<label for="exampleInputFile">Seleccionar archivo</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Campo de verificación (Check)
</label>
</div>
<button type="submit" class="btn btn-primary">Enviar</button>
</form>
Estado de validación
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Campo de entrada con éxito</label>
<input type="text" class="form-control" id="inputSuccess2">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Campo de entrada pequeño con éxito</label>
<input type="text" class="form-control input-sm" id="inputSuccess2">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Campo de entrada con advertencia</label>
<input type="text" class="form-control" id="inputWarning2">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Campo de entrada con error</label>
<input type="text" class="form-control" id="inputError2">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
Campos especiales
<div class="form-group">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Acción</button>
<ul class="dropdown-menu">
<li><a href="#">Acción 1</a></li>
<li><a href="#">Acción 2</a></li>
<li><a href="#">Acción 3</a></li>
<li class="divider"></li>
<li><a href="#">Acción 4</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control">
</div>
</div>
<div class="form-group">
<div class="input-group">
<input class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-default" type="button">IR!</button>
</span>
</div>
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Nombre de usuario" aria-describedby="basic-addon1">
</div>
<!-- -->
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" placeholder="Nombre de usuario" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Nombre de usuario del receptor" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@ejemplo.com</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<div class="input-group"/>
<span class="input-group-addon" id="basic-addon3">https://ejemplo.com/usuarios/</span/>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"/>
</div/>
Botones
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info disabled">Disabled</button>
<button type="button" class="btn btn-info disabled state-loading">Cargando</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-map-marker"></span> Boton con ícono</button>
Tamaños de botones
<button type="button" class="btn btn-primary btn-lg">...</button>
<button type="button" class="btn btn-default btn-lg">...</button>
<button type="button" class="btn btn-primary">...</button>
<button type="button" class="btn btn-default">...</button>
<button type="button" class="btn btn-primary btn-sm">...</button>
<button type="button" class="btn btn-default btn-sm">...</button>
<button type="button" class="btn btn-primary btn-xs">...</button>
<button type="button" class="btn btn-default btn-xs">...</button>
Imágenes
<img src="#" alt="" class="img-rounded">
<img src="#" alt="" class="img-circle">
Clases auxiliares
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
Pie de página fijo.
Esta clase se utiliza en casos donde el contenido es poco, ocasionando que el pie de página pierda su posicion en la parte inferior.
<footer class="main-footer sticky-footer">
<div class="container">
.......
</div>
</footer>
Componentes
Botón con desplegable
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Default <span>class="caret"></span></button>
<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>
</div>
Grupo de botones
Pestañas
<ul class="nav nav-tabs">
<li role="presentation" class="active">Inicio</li>
<li role="presentation">Perfil</li>
<li role="presentation">Mensajes</li>
</ul>
Barra de navegación
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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="#"><img src="img/argentinagob.svg" height="50" alt=""></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<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">Desplegable <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>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
<li>
<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>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
BreadCrumb - Referencia de ubicación
<ol class="breadcrumb">
<li>Inicio</li>
<li>Sección</li>
<li class="active">Artículo</li>
</ol>
Paginación
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
Contenido
Grupo de lista
- Cras justo odio
- Dapibus ac facilisis in
- 14 Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item"><span class="badge">14</span> Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
Panel
Panel link no destacado
Este es el título del link
Panel links no destacados con descripción
Ministerio de Economía
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
<div class="panel panel-default">
<div class="panel-body">
Ejemplo de panel básico
</div>
</div>
<!-- -- >
<a class="panel panel-default" href="#">
<div class="panel-body">
<h3>Este es el título del link</h3>
</div>
</a>
<!-- -- >
<a class="panel panel-default" href="#">
<div class="panel-body">
<h3>Ministerio de Economía</h3>
<p class="text-muted">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
</div>
</a>
Panel links destacados con iconos y descripción
Ministerio de Economía
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
Panel links destacados con fotos
Este es el título del link
Panel Noticia Destacada
El Ministro Fitipaldi asistió a la apertura de la Semana Verde Internacional, en Berlín
<a class="panel panel-default panel-icon" href="#">
<div class="panel-heading"><i class="fa fa-file"></i></div>
<div class="panel-body">
<h3>Ministerio de Economía</h3>
<p class="text-muted">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
</div>
</a>
<!-- -- >
<a class="panel panel-default panel-md" href="#">
<div style="background-image:url('./img/placeholder.png');" class="panel-heading"></div>
<div class="panel-body">
<time>Jueves 14 de Enero del 2016</time>
<h4>El Ministro Fitipaldi asistió a la apertura de la Semana Verde Internacional, en Berlín</h4>
</div>
</a>
Panel con estado cargando
<div class="panel panel-default panel-icon panel-primary margin-40 panel-loading" href="#">
<div class="panel-heading"></div>
<div class="panel-body">
<h2>¿Este es tu número de CUIT?</h2>
<p class="h2"><strong>2222324252</strong></p>
<p>lo calculamos a partir de tus datos pero no siempre coincide</p>
<p><a href="cuit-ingresado.html" class="btn btn-primary btn-block">Si, es mi número de cuit</a></p>
</div>
<div class="panel-footer">
<a href="cuit-no-coincidente.html">Si no es tu número de cuit, ingresá el numero correcto</a>
</div>
</div>
Wells
Utilice el well para darle un efecto de inserción a un elemento .
Texto referencia.
<div class="well well-lg">
<h1>Texto referencia.</h1>
</div>
Etiquetas
Default Primary Success Info Warning Danger
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
Etiqueta numérica
Resaltar facilmente los elementos nuevos o no leídos mediante la adición de un span class="badge" a los enlaces, navs, y otros elementos.
Bandeja de entrada 42
<a href="#">Bandeja de entrada <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Mensajes <span class="badge">4</span>
</button>
Alertas
<div class="alert alert-success" role="alert">Mensaje</div>
<div class="alert alert-info" role="alert">Mensaje</div>
<div class="alert alert-warning" role="alert">Mensaje</div>
<div class="alert alert-danger" role="alert">Mensaje</div>
Alertas con ícono
¿Ya iniciaste tu tramite?
Seguí el estado del trámite en linea
Línea gratuíta 0800-999-0209
Servicio Gratuíto de Orientación y Asesoramiento al Ciudadano
<div class="alert alert-warning">
<div class="media">
<div class="media-left">
<i class="fa fa-arrow-circle-o-right fa-fw fa-4x"></i>
</div>
<div class="media-body">
<h4>¿Ya iniciaste tu tramite? </h4>
<p class="margin-0">Seguí el <a href="http://www.mininterior.gov.ar/tramitesyservicios/estado-tramite-dni.php" target="_blank">estado del>trámite en linea</a></p>
</div>
</div>
</div>
<div class="alert alert-info">
<div class="media">
<div class="media-left">
<i class="fa fa-phone fa-fw fa-4x"></i>
</div>
<div class="media-body">
<h4><a href="">Línea gratuíta 0800-999-0209 </a></h4>
<p class="margin-0">Servicio Gratuíto de Orientación y Asesoramiento al Ciudadano</p>
</div>
</div>
</div>
Barra de progreso
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Completado</span>
</div>
</div>
Colores de fondo
<span class="bg-primary"></span>
<span class="bg-success"></span>
<span class="bg-info"></span>
<span class="bg-warning"></span>
<span class="bg-danger"></span>
Jumbotron
Hola mundo!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Jumbotron con barra superior
Hola mundo!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt enim tempora at voluptas labore asperiores blanditiis similique laudantium placeat molestiae aut quam nisi sint atque, ullam consequuntur perspiciatis eum fuga.
<section class="jumbotron" style="background-image: url('img/modernizacion.jpg');">
<div class="jumbotron_bar">
<div class="container">
<div class="row">
<div class="col-md-12">
<ol class="breadcrumb pull-left">
<li><a href="">Argentina</a></li>
<li class="active"><span>Ministerio de Ejemplo</span></li>
</ol>
<ul class="list-inline pull-right">
<li><a href="#" class="search"><i class="glyphicon glyphicon-search"></i>Buscar en el área</a></li>
<li><a href="#">Institucional</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
Elemento multimedia
Estilos de objetos abstractos para la construcción de diversos tipos de componentes (como los comentarios de blogs, tweets, etc.) que ofrecen una imagen de la izquierda o alineado a la derecha junto con el contenido textual.
Encabezado
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="http://placehold.it/100x100" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Encabezado</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
Videos Responsivos
Relación de aspecto 16:9
Relación de aspecto 4:3
Relación de aspecto 1:1
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/XYPJDCoR6nw"></iframe>
</div>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/XYPJDCoR6nw"></iframe>
</div>
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/XYPJDCoR6nw"></iframe>
</div>
Javascript
Modal
Iniciar demo de modal
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn btn-primary" data-toggle="modal">Iniciar demo de modal</a>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Título de modal</h4>
</div>
<div class="modal-body">
<p>Texto de referencia…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
<button type="button" class="btn btn-primary">Guardar Cambios</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Nota de ayuda sobre elemento
<button type="button" class="btn btn-link" data-toggle="tooltip" data-placement="left" title="Nota a la izquierda">Nota a la izquierda</button>
<button type="button" class="btn btn-link" data-toggle="tooltip" data-placement="top" title="Nota superior">Nota superior</button>
<button type="button" class="btn btn-link" data-toggle="tooltip" data-placement="bottom" title="Nota inferior">Nota inferior</button>
<button type="button" class="btn btn-link" data-toggle="tooltip" data-placement="right" title="Nota a la derecha">Nota a la derecha</button>
Información contextual
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">A la derecha</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Arriba</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">Abajo</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">A la derecha</button>