Bootstrap

Tema 5: Bootstrap
1. Instalacin
Vamos a su pgina web y le damos a descargar. Slo nos queda referenciarlo (atencin, porque
bootstrap 3 no funciona con versiones de JQuery 3.x):
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.theme.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/scripts.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/jqueryui.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
2. El sistema de malla (Grid)

Normalmente, se suele dividir el contenido de las pginas en 12 columnas. Las columnas se
definen con su clase, que es de la forma col-md-4 donde:
Md es el tamao del dispositivo.

o xs: para mviles.
o sm: para tablets.
o md: para pantallas medianas.
o lg: para pantallas grandes.
4 es el nmero de columnas que ocupa:
o 1,2,,11.
3. Plantilla
3.1 HTML
<!doctype html>
<html>
<head>
<title>Bootstrap Project</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.theme.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/scripts.js"></script>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-
BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script type="text/javascript" src="js/jqueryui.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body onload="popover()" data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-default navbar-fixed-top">
<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>
</button>

<a class="navbar-brand" href="#">Bootstrap test</a>
</div>

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

<ul class="nav navbar-nav">

<li class="active"><a href="#">Item Activo<span class="sronly">(current)</span></a></li>

<li><a href="#">Item Inactivo</a></li>

<li><a href="#seccion1">Seccion1</a></li>
<li><a href="#seccion2">Seccion2</a></li>

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">Men Desplegable <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>

<li role="separator" class="divider"></li>
<li><a href="#">Item separado</a></li>
</ul>
</li>
</ul>

<button type="button" class="btn btn-default navbar-btn">Iniciar sesin</button>

<button class="btn btn-primary" type="button">
Mensajes <span class="badge">4</span>
</button>

<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Buscar">
</div>
<button type="submit" class="btn btn-default">Buscar</button>
</form>
</div>
</div>
</nav>
<div class="container-fluid">

<ol class="breadcrumb">
<li><a href="#">Udemy</a></li>
<li><a href="#">Curso desarrollo web</a></li>
<li class="active">Bootstrap</li>
</ol>
<h2>Alertas</h2>
<div class="alert alert-success" role="alert">Felicidades, eres el visitante 999999999</div>
<div class="alert alert-info" role="alert">Se ha actualizado el estado</div>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span ariahidden="true">×</span></button>
<strong>Cuidado!</strong> Se ha perdido la conexin con el servidor.
</div>
<div class="alert alert-danger" role="alert">Los datos introducidos son erroneos</div>
<h2>Barra de progreso</h2>

<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" ariavaluenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
20% Completado
</div>
</div>
<h2>Vdeo responsive</h2>

<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item"
src="https://www.youtube.com/embed/bvKT11Krn4o"></iframe>
</div>
<h2>Malla</h2>

<div class="row">
<div class="col-md-6 box">contenido 6</div>
<div class="col-md-6 box">contenido 6</div>
</div>
<div class="row">
<div class="col-md-4 box">content</div>
</div>
<h2>Formulario</h2>

<form>
<label for="username">Usuario</label>
<input type="text" class="form-control" name="username"/>
<label for="password">Contrasea</label>
<input type="password" class="form-control" name="password"/>
<label for="sel1">Select list (select one):</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<br>
<label for="sel2">Mutiple select list (hold shift to select more than one):</label>
<select multiple class="form-control" id="sel2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox"/> Mantener conectado
</label>
</div>
<input type="submit" class="btn btn-default" name="login" value="Iniciar Sesion"/>
</div>
</form>
<h2>Tabla</h2>

<table class="table table-bordered">
<tr>
<th>Nombre</th>
<th>Edad</th>
</tr>
<tr>
<td>Sergio</td>
<td>22</td>
</tr>
<tr class="success">
<td>Fernando</td>
<td>27</td>
</tr>
<tr class="info">
<td>Juan</td>
<td>57</td>
</tr>
<tr class="warning">
<td>Pedro</td>
<td>34</td>
</tr>
<tr class="danger">
<td>Sara</td>
<td>65</td>
</tr>
</table>

<h2>Paginacion</h2>
<nav>
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span ariahidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
<li class="disabled"><a href="#">2 <span class="sr-only">(current)</span></a></li>
<li class="disabled"><a href="#" aria-label="Previous"><span ariahidden="true">»</span></a></li>
</ul>
</nav>

<h2>Etiquetas</h2>
<span class="label
<span class="label
<span class="label
<span class="label
<span class="label
<span class="label
label-default">Default</span>
label-primary">Primary</span>
label-success">Success</span>
label-info">Info</span>
label-warning">Warning</span>
label-danger">Danger</span>


<h2>Jumbotron</h2>
<div class="jumbotron">
<h1>Titulo</h1>
<p>Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample
Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample </p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

<h2>Miniaturas</h2>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img class="img-responsive" src="images/thumbnail.png">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id
elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id
elit.</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#"
class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
elit.</p>
</div>
</div>
</div>
elit.</p>
</div>
</div>
</div>
</div>

<h2>Paneles</h2>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-info">
</div>
Panel content
</div>
</div>
<div class="panel panel-primary">
</div>
Panel content
</div>
</div>
<div class="panel panel-success">
</div>
Panel content
</div>
</div>
<div class="panel panel-warning">
</div>
Panel content
</div>
</div>
<div class="panel panel-danger">
</div>
Panel content
</div>
</div>

<h2>Caja</h2>
<div class="well">TEXTO</div>

<h2>Iconos</h2>
<button class="btn btn-info">
<span class="glyphicon glyphicon-calendar"></span>Calendario
</button>

<h2>Popup</h2>
<button class="btn btn-danger" data-toggle="modal" data-target="#myModal">
Ventana emergente
</button>
<div class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span ariahidden="true">×</span></button>
<h4 class="modal-title">Ttulo</h4>
</div>
<div class="modal-body">
<h4>Popover</h4>
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" datacontent="Some content" data-placement="top">Hover over me</a>
<h4>Tooltips</h4>
<p><button style="margin:7px 15px 17px 0;" type="button" class="btn btn-success" datatoggle="tooltip" data-placement="bottom" title="" data-original-title="Hooray!">Hover over
me</button></p>
<h4>Texto</h4>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at
eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor
fringilla.</p>
eros.</p>
fringilla.</p>
eros.</p>
fringilla.</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</button>
</div>
</div>
</div>
</div>
<h2>Plegable</h2>
<button class="btn btn-default" data-toggle="collapse" data-target="#colapsedText">Ver</button>
<div id="colapsedText" class="collapse">
Lorem ipsum dolor text....
</div>

<h2>Galera</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>

<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/img_chania.jpg" alt="Chania">
</div>
<div class="item">
<img src="images/img_chania2.jpg" alt="Chania">
</div>
<div class="item">
<img src="images/img_flower.jpg" alt="Flower">
</div>
<div class="item">
<img src="images/img_flower2.jpg" alt="Flower">
</div>
</div>

<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">

<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

<h2>ScrollSpy</h2>
<div id="seccion1" class="ssContainer">
<h3>Seccion 1</h3>
</div>
<div id="seccion2" class="ssContainer">
<h3>Seccion 2</h3>
</div>
</div>
</body>
</html>
3.2 CSS
body {
padding-top: 50px;
padding-bottom: 70px;
}
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
3.3 JS
function popover(){
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
$('[data-toggle="tooltip"]').tooltip();
});
}

Bootstrap

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Bootstrap

Загружено:

Авторское право:

Доступные форматы

Tema 5: Bootstrap

2. El sistema de malla (Grid)

Md es el tamao del dispositivo.

<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">

Вам также может понравиться