En todo estás vos



Para empezar

Información sobre el proyecto y cómo empezar a usar BAstrap.

1. Información

Antes de usar, se avisa que es necesario tener conocimientos de HTML y CSS.

Información sobre su uso

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.

3. Qué está incluido

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.

Secciones

Layout

Estilos globales para dar formato a la tipografía, fondo, estilos de enlaces, sistema de grilla y dos layouts simples.

Estilos CSS

Estilos para elementos HTML comunes como tipografía, código, tablas, formularios, y botones. También incluye un set de Glyphicons.

Componentes

Estilos básicos para componentes comunes como pestañas, pills, barras de navegación, alertas, encabezados y más.

JavaScript

Similar a Componentes, estos plugins son componentes interactivos para cosas como tooltips, popovers, modals y más.

Lista de componentes

Juntas, las secciones de Componentes y JavaScript proveen los siguientes elementos de interfaz:

  • Grupos de botones
  • Dropdowns de botones
  • Pestañas, pastillas y listas de navegación
  • Barras de navegación
  • Etiquetas
  • Badges
  • Encabezados de página y "hero unit"
  • Miniaturas
  • Alertas
  • Barras de progreso
  • Modals
  • Dropdowns
  • Tooltips
  • Popovers
  • Accordion
  • Carousel
  • Typeahead

4. Template HTML básico

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:

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>Template BAstrap</title>
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   </head>
  7.   <body>
  8.     <h1>Hello, world!</h1>
  9.     <script src="http://code.jquery.com/jquery.js"></script>
  10.   </body>
  11. </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:

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>Template BAstrap</title>
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <!-- Bootstrap -->
  7.     <link href="http://www.buenosaires.gob.ar/estilos/BAStrap/css/bootstrap.css" rel="stylesheet" media="screen">
  8.     <link href="http://www.buenosaires.gob.ar/estilos/BAStrap/css/bootstrap-responsive.css" rel="stylesheet">
  9. 	  <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'>
  10.   </head>
  11.   <body>
  12.     <div class="gcba-fixed-top">
  13.       <div class="header-gcba">
  14.           <div class="header-inner">
  15.             <div class="container">
  16.               <div id="logo">Buenos Aires Ciudad</div>
  17.               <h2 class="slogan">En todo estás vos</h2>
  18.             </div>
  19.           </div>
  20.       </div>
  21.     </div>
  22.     <h1>Hello, world!</h1>
  23.     <footer class="footer">
  24.       <hr class="footer-ba">
  25.     </footer>
  26.     <script src="http://www.buenosaires.gob.ar/estilos/BAStrap/js/jquery.js"></script>
  27.     <script src=http://www.buenosaires.gob.ar/estilos/BAStrap/js/bootstrap.min.js"></script>
  28.   </body>
  29. </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.