Bootstrap ②正しい使い方とポイント

<グリッドシステム>

Bootstrapのグリッドデザインは、基本的に横幅940px(固定エリア12グリッドにあわせる)の中に段組をする必要があります。しかし、複雑な段組をする場合は少し注意点があるので簡単に記しておきます。

ポイント1

・グリッドシステムで複雑な段組をするなら、

container => row => col => row => col と入れ子にする。

<div class=”container”>

   <div class=”row”>

      <div class=”col-{prefix}”></div>

    </div>

</div>

*row が何段目であっても、配下のcolの幅が合計は12グリッドである。

ポイント2

コンテンツはcontainerクラスかcolクラスの内部に記述するようにすること。rowの中には書いてはいけません。

注意点:spanはBootstrap 2系では使えませんので覚えておきましょう。

 

それでは・・・

Bootstrapの使い方 ①

BootstrapはレスポンシブデザインWEBデザインに対応しているCSSフレームワークです。Bootstrapで開発を行うと、作業スピードが速くなったり、見栄えも整えられて初心者にも人気のアプリケーションです。

今回は簡単な使い方と記すとともに、WPでBootstrapを行う際の注意点を書いていきたいと思います。

<使い方1>

  ダウンロード:http://getbootstrap.com/

上記からダウンロードして、必要なソースコードをコピペしてください。

<使い方2 WPのheader.php>

ヘッダー部分のナビゲーションは、タイトル画像と横並びにしたい場合はあまりcolは使えない。(デザインによるが・・・)

<使い方3 固定ページとsidebar.php>

containar、rowは固定ページに一つ書き、閉じタグはsidebar.phpに書けば一度ですむので覚えておいた方がよい。

続きはまたあとで・・