読者です 読者をやめる 読者になる 読者になる

masalibの日記

システム開発、運用と猫の写真ブログです

Railsでtwitter bootstrapをやってみた その2

自分は猫の動画・アプリ紹介サイト
つくっているのですが
デザインの部分でかなり躓いています
 
今まではCSSやHTMLはデザインだからいいや
と避けていた部分です
 
具体的に苦労しているのは
フッターです
たがだかフッターに
苦労しています
 
application.html.erbに
共通のフッターを作成しました
 

                  <li><%= link_to "Link3", "/path3"  %></li>
                </ul>
              </div><!--/.well -->
            </div><!--/span-->
        </div><!--/row-->
      </div><!--/content-->
    </div>

    <!--footer-->
      <%= render "shared/footer" %>
    <!--/footer-->


    <!-- Javascripts
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <%= javascript_include_tag "application" %>

  </body>
</html>

そのファイルの中で
footerのタグの部分の色を変えたかったのですが

    <footer>
      <div class='container'>
        <div class='row'>
          <div class='span10'>
            <div class='row'>
              <div class='span3'>
                <h4>Product</h4>
                <ul class='unstyled'>
                  <li>

 
あれ・・・どうやってやるの?
クラスを記述してやればいいのか?
それともcssを記述すればいいの?
twwiterbootのLESSファイルを修正しなければ
いけないのか
それすらわかりませんでした
 
結局、LESSを修正することにより
色が変わることがわかりました
 

@black: #000000;
@grayDarker:            lighten(@black, 16%);
@grayDark:              lighten(@black, 32%);
@gray:                  lighten(@black, 48%);
@grayLight:             lighten(@black, 64%);
@grayLighter:           lighten(@black, 80%);
@white:                 lighten(@black, 96%);
@orange: #f89406;

.hero-unit {
  background-color: lighten(@orange, 30%);
  margin-top: 19px;
  >h1 {
    font-size: 24px;
  }
}

footer {
  background-color: lighten(@black, 5%);
}

 
f:id:masalib:20120809234733j:plain

参考URL
http://twitter.github.com/bootstrap/less.html

CSSとLESSの勉強をしないと
まともなサイトが作れそうもないな~