Información sobre el proyecto y cómo empezar a usar BAstrap.
Antes de usar, se avisa que es necesario tener conocimientos de HTML y CSS.
Recomendamos no bajarse los archivos de BAstrap, sino usarlos desde nuestros servidores, para mantener una experiencia unificada y permitir la actualización de estilos en el tiempo.
BAstrap tiene HTML, CSS, y JS para todo tipo de usos, pero se pueden resumir en las categorías que se ven en la navegación de esta documentación.
Estilos globales para dar formato a la tipografía, fondo, estilos de enlaces, sistema de grilla y dos layouts simples.
Estilos para elementos HTML comunes como tipografía, código, tablas, formularios, y botones. También incluye un set de Glyphicons.
Estilos básicos para componentes comunes como pestañas, pills, barras de navegación, alertas, encabezados y más.
Similar a Componentes, estos plugins son componentes interactivos para cosas como tooltips, popovers, modals y más.
Juntas, las secciones de Componentes y JavaScript proveen los siguientes elementos de interfaz:
Para empezar a usar BAstrap, usaremos un template básico de HTML que incluye todo lo mencionado en la estructura de archivos.
Acá hay un archivo HTML típico:
<!DOCTYPE html> <html> <head> <title>Template BAstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h1>Hello, world!</h1> <script src="http://code.jquery.com/jquery.js"></script> </body> </html>
Para hacer de esto un template BAstrapizado, simplemente incluí los archivos CSS y JS necesarios, y agregué el código de header y footer:
<!DOCTYPE html> <html> <head> <title>Template BAstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="http://www.buenosaires.gob.ar/estilos/BAStrap/css/bootstrap.css" rel="stylesheet" media="screen"> <link href="http://www.buenosaires.gob.ar/estilos/BAStrap/css/bootstrap-responsive.css" rel="stylesheet"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,700,800,300' rel='stylesheet' type='text/css'> </head> <body> <div class="gcba-fixed-top"> <div class="header-gcba"> <div class="header-inner"> <div class="container"> <div id="logo">Buenos Aires Ciudad</div> <h2 class="slogan">En todo estás vos</h2> </div> </div> </div> </div> <h1>Hello, world!</h1> <footer class="footer"> <hr class="footer-ba"> </footer> <script src="http://www.buenosaires.gob.ar/estilos/BAStrap/js/jquery.js"></script> <script src=http://www.buenosaires.gob.ar/estilos/BAStrap/js/bootstrap.min.js"></script> </body> </html>
¡Y listo! Con esos archivos agregados, podés empezar a desarrollar cualquier sitio o aplicación con BAstrap. Ya estarán incluidos el encabezado y el pie con la identidad del Gobierno.
Entrá a la sección de Layout para ver cómo estructurar páginas.