Front page con Bootstrap

Posted on 16 of julio, 2015 by admin in Bootstrap

De forma introductoria como todos sabemos el front page es la página principal de todo website en este post trataremos de mostrar de forma básica como crear tu propio front page y la forma fácil de utilizar el conocido framework de javascript y css bootstrap.
Para empezar necesitamos descargar de la página oficial de bootstrap el framework ir a la dirección siguiente: http://getbootstrap.com/getting-started/ y descargar, luego de descargar descomprimir en un directorio, para empezar a trabajar.

TABLA DE CONTENIDO:
1. Configurar el Bootstrap
2. Front page
1) Configurar el Bootstrap
Ahora configuraremos el bootstrap esta parte podemos ver en la página oficial que no es difícil solo tenemos que agregar las referencias de los jquery and css para poder utilizar el framework.
Creamos un archivo HTML y el lugar donde descomprimimos el archivo descargado, le pondremos por nombre index.html
Ahora vamos y copiamos de la página principal el temple básico del cual partiremos para crear nuestro front page. Agregamos a nuestro index.html el siguiente témplate:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script rc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

 

Ahora descargamos de la página de jquery la versión de jquery requerida en caso de que no tengamos conexión a internet, y colocamos en el directorio llamado js.
Luego de descargar el archivo modificamos nuestro index.htlm en la parte de script y modificamos: <script rc=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
Sustituimos por la siguiente: <script rc=”js/jquery.min.js”></script> luego de esto abrimos con nuestro browser el archivo index.html para ver si configuramos de forma correcta.
2) Front Page
Ahora con pocas nociones de html podemos empesar:
i) Modificamos primero la etiqueta de la siguiente forma <title>Front Page</title>
ii) Vamos a la etiqueta <body> nuestro div contenedor <div class=”container”></div>
Hasta ahora tendremos lo siguiente:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Front Page</title>

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

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

iii) Ahora agregamos un nav para el front page de la forma siguiente en el div conteiner.


 <div class="header clearfix">
 <nav>
 <ul class="nav nav-pills pull-right">
 <li role="presentation" class="active"><a href="#">Home</a></li>
 <li role="presentation"><a href="#">About</a></li>
 <li role="presentation"><a href="#">Contact</a></li>
 </ul>
 </nav>
 <h3 class="text-muted">Project name</h3>
 </div> 

iv) Ahora agregamos contenidos a nuestro front page


 <div class="jumbotron">
 <h1>Jumbotron heading</h1>
 <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
 <p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p>
 </div>

 <div class="row marketing">
 <div class="col-lg-6">
 <h4>Subheading</h4>
 <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

 <h4>Subheading</h4>
 <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

 <h4>Subheading</h4>
 <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
 </div>

 <div class="col-lg-6">
 <h4>Subheading</h4>
 <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

 <h4>Subheading</h4>
 <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

 <h4>Subheading</h4>
 <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
 </div>
 </div>

Hasta ahora tendremos lo siguiente:


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
 <title>Front Page</title>

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

 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 <!--[if lt IE 9]>
 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 <![endif]-->
 </head>
 <body>
 <div class="container">
 <div class="header clearfix">
 <nav>
 <ul class="nav nav-pills pull-right">
 <li role="presentation" class="active"><a href="#">Home</a></li>
 <li role="presentation"><a href="#">About</a></li>
 <li role="presentation"><a href="#">Contact</a></li>
 </ul>
 </nav>
 <h3 class="text-muted">Project name</h3>
 </div>

 <div class="jumbotron">
 <h1>Jumbotron heading</h1>
 <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
 <p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p>
 </div>

 <div class="row marketing">
 <div class="col-lg-6">
 <h4>Subheading</h4>
 <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

 <h4>Subheading</h4>
 <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

 <h4>Subheading</h4>
 <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
 </div>

 <div class="col-lg-6">
 <h4>Subheading</h4>
 <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

 <h4>Subheading</h4>
 <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

 <h4>Subheading</h4>
 <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
 </div>
 </div>
 </div> 
 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 <script src="js/jquery.min.js"></script>
 <!-- Include all compiled plugins (below), or include individual files as needed -->
 <script src="js/bootstrap.min.js"></script>
 </body>
 </html>

v) Ahora para terminar agregamos un footer:

 <footer class="footer">
 <p>&copy; Company 2014</p>
 </footer>

4) Conclusión
Al final tendremos el siguiente front page siguiente:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
 <title>Front Page</title>

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

 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 <!--[if lt IE 9]>
 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 <![endif]-->
 </head>
 <body>
 <div class="container">
 <div class="header clearfix">
 <nav>
 <ul class="nav nav-pills pull-right">
 <li role="presentation" class="active"><a href="#">Home</a></li>
 <li role="presentation"><a href="#">About</a></li>
 <li role="presentation"><a href="#">Contact</a></li>
 </ul>
 </nav>
 <h3 class="text-muted">Project name</h3>
 </div>

 <div class="jumbotron">
 <h1>Jumbotron heading</h1>
 <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
 <p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p>
 </div>

 <div class="row marketing">
 <div class="col-lg-6">
 <h4>Subheading</h4>
 <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

 <h4>Subheading</h4>
 <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

 <h4>Subheading</h4>
 <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
 </div>

 <div class="col-lg-6">
 <h4>Subheading</h4>
 <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

 <h4>Subheading</h4>
 <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

 <h4>Subheading</h4>
 <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
 </div>
 </div>

 <footer class="footer">
 <p>&copy; Company 2014</p>
 </footer>

 </div> 
 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 <script src="js/jquery.min.js"></script>
 <!-- Include all compiled plugins (below), or include individual files as needed -->
 <script src="js/bootstrap.min.js"></script>
 </body>
 </html>