A continuación veremos como empezar con Bootstrap, así como algunos aspectos básicos de configuracíón. También veremos la estructura de archivos y un ejemplo de como usarlo.
Descargar Bootstrap
Puedes descargar la última versión de Bootstrap desde la web oficial http://getbootstrap.com/, al hacer click te llevar a una ventana como la siguiente ...
Ahí puedes ver dos botones:
- Download Bootstrap: Al hacer click en este botón puedes descargar los archivos básicos de bootstrap que contienen los compilados CSS, Javascript y las fuentes.
- Download Source: Al hacer click en este botón puedes descargar la librería completa de Bootstrap desde Github, el cual contiene la librería less.js para el desarrollo de hojas de estilos CSS. Para el desarrollo de estilos CSS mediante LESS es necesario compilar los archivos .less para convertirlos a .css. Para compilar archivos LESS a CSS, Bootstrap recomienda el compilador recess.
Para una mejor comprensión del tutorial, vamos a utilizar la versión ya compilada de bootstrap que podemos descargar haciendo click en el botón "Download Bootstrap", una vez descargado extraiga la carpeta del archivo .zip. Abre la carpeta y podrás ver la siguiente estructura ...
Como puedes ver hay CSS compilado y JS, así como la versiones minificadas, es decir, bootstrap.min.* y las fuentes de Glyphicons.
A continuación abre un editor de código y crea un archivo guardándolo como index.html en la carpeta que extraiste de bootstrap y pégale el siguiente código ...
<!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">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hola Mundo</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
En el código puedes ver la inclusión de los archivos jquery.js, bootstrap.min.js y bootstrap.min.css, esto ya nos permitirá empezar a utilizar las herramientas de bootstrap, el uso de jquery es imprescindible, si abres el archivo en el navegador podrás ver una plantilla lista para desarrollar con bootstrap.
No hay comentarios:
Publicar un comentario