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

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Ejercicio Con Bootstrap

Încărcat de

Drepturi de autor:

Formate disponibile

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

S-ar putea să vă placă și