title: How to create fluid semantical layout with Twitter Bootstrap using LESS?
body: <p>I want to create fluid layout using LESS and without using Bootstrap grid clasess like .span6 on html code. How can I do this?
  When I wrote without LESS I create layout like this:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
  
  &lt;div class="row-fluid" id="header"&gt;
      &lt;div class="span4 block"&gt;
          &lt;h1 class="title"&gt;Sample Site&lt;/h1&gt;
          &lt;h2 class="sub-title"&gt;Powered by Twitter Bootstrap&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="span6 block"&gt;
          &lt;ul class="nav nav-pills"&gt;
              &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Pages&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Typography&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;UI&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Calendar&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Tables&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="span2 block"&gt;
          &lt;div class="btn-group open"&gt;
              &lt;button class="btn"&gt;Dropdown&lt;/button&gt;
              &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
                  &lt;span class="caret"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;ul class="dropdown-menu"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Change password&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Log in with another user&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Change token&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Log out&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row-fluid" id="slider"&gt;
      &lt;div class="span12 block"&gt;
          &lt;div id="myCarousel" class="carousel slide"&gt;
              &lt;div class="carousel-inner"&gt;
  </code></pre>
  
  <p>Now, my layout looks next way:</p>
  
  <pre><code>&lt;div id="wrap"&gt;
  &lt;div id="header"&gt;
      &lt;div id="logo"&gt;SiteLogo&lt;/div&gt;
      &lt;div id="top-menu"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 2&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div id="logout"&gt;
          &lt;a href="#"&gt;Logout&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="slider"&gt;
  </code></pre>
  
  <p>and what I should write on my .less file if I want to make div#wrap -> .container-fluid,
  div#header -> .row-fluid, div#logo -> .span4, div#top-menu -> .span6, div#logout -> .span2
  without writting this clasess on html code?</p>