miércoles, 10 de octubre de 2012

Snippets Zen-Codding & Bootstrap

No deja de sorprenderme SublimeText pero al integrarlo al framework de twitter  Bootstrap puedes armar todo el html en segundos, aqui les dejo algunas lineas para crear estas estructuras.

Menu Navegación

div.navbar>div.navbar-inner>div.container>div.nav-collapse>ul.nav>li*8>a{links $}[href="#"]

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
      <div class="nav-collapse">
        <ul class="nav">
          <li><a href="">links 1</a></li>
          <li><a href="">links 2</a></li>
          <li><a href="">links 3</a></li>
          <li><a href="">links 4</a></li>
          <li><a href="">links 5</a></li>
          <li><a href="">links 6</a></li>
          <li><a href="">links 7</a></li>
          <li><a href="">links 8</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Contenedor

div#container>div.row-fluid>div.span8+div.span4

<div id="container">
  <div class="row-fluid">
    <div class="span8"></div>
    <div class="span4"></div>
  </div>
</div>

Carrusel

div#myCarousel.carousel.slide>div.carousel-inner>div.item.active+div.item*2(a.carousel-control.left[href=#myCarousel][data-slide=prev]{&lsaquo;}+a.carousel-control.right[href=#myCarousel][data-slide=next]{&rsaquo;})

<div id="myCarousel" class="carousel slide">
  <div class="carousel-inner">
    <div class="item active"></div>
    <div class="item"></div>
    <div class="item"></div>
    <a href="#myCarousel" class="carousel-control left" data-slide="prev">&lsaquo;</a>
    <a href="#myCarousel" class="carousel-control right" data-slide="next">&rsaquo;</a>
  </div>
</div>

No hay comentarios:

Publicar un comentario