Ejercicio Con Bootstrap

Ejercicio con Bootstrap
1. Si no lo has hecho, descarga Bootstrap de la pgina oficial.

2. Comenzamos un nuevo proyecto creando la estructura
bsica de carpetas: al descomprimir nuestro paquete zip de
bootstrap, ya tendremos las carpetas css, js y fonts:
3. Creamos nuestro archivo index.html en la carpeta raz de
nuestro proyecto.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Iniciando con bootstrap</title>

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



</head>
<body>
<h1>Hello, world!</h1>

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

<script src="js/bootstrap.min.js"></script>
</body>
</html>
4. Navbar / Barra de navegacin
Vamos a crear una barra de navegacin:
Le hemos aplicado las clases predefinidas en el css de bootstrap para las barras
con el nombre navbar. Hemos aadido la clase navbar-inverse por el estilo.
5. Submens
<div class="navbar navbar-inverse">
<a class="navbar-brand" href="#">Ejemplo de navegacion</a>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Inicio</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
Para crear un submen recurrimos tambin a una clase preestablecida denominada

dropdown y la aplicamos a nuestro nuevo objeto de lista li, creando luego los elementos
del submen con etiquetas <ul>, algo as:
6. Carrousel
Bootstrap incluye un slider JavaScript muy llamativo llamado carrousel. Puedes agregar
cualquier otro slider JavaScript, pero para este tutorial vamos a utilizar el propio de bootstrap
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle = "dropdown">Submenu
<b class="caret"></b></a>
<div
class="carousel slide">
<ulid="myCarousel"
class="dropdownmenu">
<ol
class="carousel-indicators">
<li><a href="#">Item 1</a></li>
<li data-target="#myCarousel"
<li><a
href="#">Item 2</a></li> data-slide-to="0" class="active"></li>
<li
data-target="#myCarousel"
data-slide-to="1"></li>
<li class="divider"></li>
</ol>
<li><a href="#">Item1</a></li>
<div class="carousel-inner">
</ul>
<div class="item active">
</li>
<img src="img/imagen1.jpg" alt="">
class="carousel-caption">
que para algo<div
lo trae.
Buscamos una o dos imgenes que queramos colocar en el slider
<h1>Probando
principal y las guardamos
en una nueva BOOTSTRAP</h1>
carpeta con nombre img. Luego vamos al cdigo y
<p>IZQUIERDA</p>
creamos una nueva caja(div) para nuestro slider, y agregamos este cdigo que luego detallo:
</div>
</div>
<div class="item">
<img src="img/imagen2.jpg" alt="">
<div class="carousel-caption">
<h1>Probando BOOTSTRAP</h1>
<p>DERECHA</p>
</div>
</div>
</div>
</div>
7.Cuadricula (Grid)
A continuacin vamos a decidir que distribucin va a tener nuestra pgina, tenemos que tener
en cuenta cuantas columnas vamos a utilizar en nuestra pgina, y de que tamao las
queremos. Bootstrap incluye un sistema responsivo de hasta 12 columnas, que viene a ser
que si una columna no cabe en el tamao de tu pantalla de movil, esta automticamente
pasar a estar debajo, siguiendo un orden de izquierda a derecha, esto es super interesante,
ya que sin programar NADA, tenemos automticamente un tipo de pgina para pc, otro para
tablet y otro para smartphone.
Podemos decidir el tamao de nuestras columnas de manera simple. Para este ejemplo
vamos a crear primero un ttulo de la pgina sin tamao definido, y le aplicamos la clase,
tambin de bootstrap text-center para centrarla, y luego debajo 3 columnas de tamao
3+6+3. De esta forma:
<h1 class="text-center">Cuadricula de rejillas</h1>
<div class="row">
<div class="col-lg-3">3</div>
</div>

Ejercicio Con Bootstrap

Cargado por

Copyright:

Formatos disponibles

Ejercicio Con Bootstrap

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Ejercicio Con Bootstrap

Cargado por

Copyright:

Formatos disponibles

Ejercicio con Bootstrap

1. Si no lo has hecho, descarga Bootstrap de la pgina oficial.

Para crear un submen recurrimos tambin a una clase preestablecida denominada

También podría gustarte