投稿日:

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

＜グリッドシステム＞

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

ポイント１

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

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

<div class=”container”>

   <div class=”row”>

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

    </div>

</div>

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

ポイント２

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

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

 

それでは・・・

投稿日:

Bootstrapの使い方　①

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

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

＜使い方１＞

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

↑

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

＜使い方２　ＷＰのheader.php＞

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

＜使い方３　固定ページとsidebar.php＞

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

続きはまたあとで・・