En el enlace anterior podrán descargar los archivos y verán la documentación de la librería que nos ayudará en la aceleración dejando en segundo plano temas de css.
Para esto mi editor es Sublime Text 2 y tengo un proyecto generado llamado "support":
Paso 1: Creamos el archivo Layout.
Nos dirigimos a la carpeta app/views/layouts ahí crearemos un archivo que lo llamaré bootstrap.html.erb, con esto tenemos para el proyecto un nuevo layout llamado "bootstrap", en los futuros controladores que generes le agregaras una propiedad layout para asignarle el nombre del layout a cargarse siempre.
Paso 2: generamos un controlador y le asignamos el layout.
Abrimos un terminal y nos dirigimos a la carpeta del proyecto generado y ejecutamos el siguiente comando para generar un nuevo controlador que lo llamaré "default".rails g controller default index
Al ejecutar esto, se generarán varios archivos y carpetas pero por ahora solo nos interesa los archivos controlador "default" y vista "index".
En la imagen anterior se observa el controlador con su respectiva vista, abrimos el controlador y vemos el método index que habíamos dicho por defecto en el comando anterior, sobre este método esta una linea donde le decimos que este controlador se cargará el layout que deseemos.
Si queremos que todos los controladores carguen un layout que preparemos para un determinado proyecto hay que siempre agregar esa linea.
Paso 3: Preparamos el bootstrap de twitter con Ruby on Rails
Descargamos los archivos de bootstrap de su sitio web oficial: http://twitter.github.com/bootstrap/Primero vamos a intentar solo con los archivos CSS los ubicaremos en la carpeta stylesheets de app/assets/stylesheets
El archivo que creamos en el paso 1 agregamos los css de la librería que descargamos, quedará de manera similar:
Paso 4: Usando Bootstrap en las vistas de los controladores
Ahora en la vista del default vamos a codificar puro HTML pero al estilo y reglas como las dice Bootstrap, invito a leer un poco sobre este muy buen framework de CSS.
<!-- Contenedor de general-->
<div class="container">
<header>
<!-- Title-->
<div class="row">
<div class="span12">
<h1><a href="#">Twitter BootsTrap</a></h1>
<p>Trabajando con Twitter BootsTrap</p>
</div>
</div>
<!-- Fin del title-->
<!-- Banner-->
<div class="row">
<div class="span12">
<img src="http://lorempixel.com/1170/300/nature" alt="">
</div>
</div>
<!-- Fin del Banner-->
<!-- Inicio del Menu-->
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
<!-- Fin del Menu-->
</header>
<section class="row">
<div class="span12">
<ul class="thumbnails">
<li class="span3">
<div class="thumbnail">
<img src="http://lorempixel.com/260/180/sports/2" alt="" />
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolorum</p>
</div>
</li>
<li class="span3">
<div class="thumbnail">
<img src="http://lorempixel.com/260/180/sports/3" alt="" />
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolorum</p>
</div>
</li>
<li class="span3">
<div class="thumbnail">
<img src="http://lorempixel.com/260/180/sports/4" alt="" />
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolorum</p>
</div>
</li>
<li class="span3">
<div class="thumbnail">
<img src="http://lorempixel.com/260/180/sports/5" alt="" />
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolorum</p>
</div>
</li>
</ul>
</div>
</section>
</div>
<!-- Fin del Contenedor-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Ahora solo queda explotar al máximo las ventajas que tendrán con este buena herramienta y poco a poco vamos tomando soltura para desarrollar nuestro proyecto y themes para diversos proyectos.
