skillup

技術ブログ

UI デザイン

Bootstrapまとめ 主に段組み関連の知識について

投稿日:

自分はデザインセンスが壊滅的なので、Bootstrapにいろいろと頼っております。

最初は仕事でちょこっと使う機会があり、見よう見まねでやっていましたが、理屈がわからないと応用がきかないこともあるため、ここでまとめておきます。

bootstrapとは?

改めて説明の必要もないですが、レスポンシブデザインに対応したHTML/CSS/JavaScriptのフレームワークです。

読み込ませ方

本家(http://getbootstrap.com/)からダウンロードし、CSSとJavaScriptに下記ソースを追加してあげればOKです。

.minがついているものはサイズが小さいですが、中を修正したりができないので自分はcssに関してはminではないものを使っています。

bootstrapの内部の解説

container

bootstrapはコンテンツ全体をcontainerでくくるという使い方を想定しています。これによりデバイスに応じた、幅やマージン設定などが可能になります。

グリッドシステム

bootstrapでは横幅を12個の幅に等分し、その比によってコンテナを分割しています。このようなシステムをグリッドシステムといいます。

またグリッドシステムの応用として複数の入れ子(複数段の縦をそろえる)にしたり、一定の間隔(オフセット)をあけることもできます。

入れ子

オフセット

 

左寄せ、中央寄せ、右寄せ

グリッドレイアウト以前にもっと単純な文字よせ、段落よせがあります。

文字よせ

text-right,text-center,text-leftなど

段落よせ

段落のブロック全体を左や右にフロートしたり、中央揃えにします。

pull-left,pull-right,center-block(このプロパティを使うときはwidthを指定しておく必要があります。)

参考

http://www.tohoho-web.com/ex/bootstrap.html

http://greenapple-room.com/conc/user/TwitterBootstrap/bootstrap_02.html

「UIまで手の回らないプログラマのためのBootstrap3実用ガイド」

-UI, デザイン
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

フォーカス時のみ書き込み可能になるHTML要素について。contenteditableなど

通常はただのテーブル(or普通のHTML)ですが、クリックするとinputになり、入力が可能になる手法について。 contenteditableなど 普通のHTML要素に [crayon-5c4924 …

no image

AngularJS カスタムディレクティブ

AngularはHTMLの中にng-clickなどと書いておけばイベントを紐づけて、特定動作時にメソッドを呼び出すことができます。 これをオリジナルで自作することができます。 customer_dir …

no image

HTML/JS/JavaScriptのキャッシュ機能の無効化に関して

AngularJSを使っていまして、更新したのにキャッシュ機能が働いていてブラウザでは変更が反映されてない・・・なんてことがちょいつづき、キャッシュを無効化する機能を調査しました。 まず通常のHTML …

no image

メインで使う画像のcssについて

CSSについていろいろと勉強したんですが、画像の使いに関して結構てこずったんでポイントをまとめておこうかと。 画像といっても商品の画像などワンポントでなくメインで使うタイプのものです。 imgタグをd …

no image

Angularモジュール間の読み込み

Angularで以前こちらで、複数のコントロールに分ける方法を書きましたが、コントローラーだけでなく、Factory,ServiceなどいろいろなタイプのサービスがAngularにはあります。 プログ …