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:

<!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.