skillup

技術ブログ

UI デザイン

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

投稿日:2016年5月2日 更新日:

自分はデザインセンスが壊滅的なので、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を指定しておく必要があります。)

参考

とほほのBootstrap 3入門

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

-UI, デザイン
-

執筆者:


comment

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

関連記事

no image

laravel Mix

Contents1 laravel Mix2 インストール laravel Mix 実務でlessを使っていて便利なのですが、コンパイルをatomのプラグインで行っていました。 ※保存されると自動的に …

no image

画面系小ネタposition:sticky+datalist(プルダウン+自由入力)

画面系の小さい小ネタなど。 Contents1 position:sticky2 datalist(プルダウン+自由入力) position:sticky ヘッダーに関して画面をスクロールすると、付い …

no image

cssでのmax,minや画像の配置に関して

主に画像なんかで使われるんですが、max(min)-width(height)などの使い方に関して。 えーmax(min)はどういうときに使われるかというとまず可変な要素に対して使われることが多いです …

no image

ワンポイント画像系のcssでの実装

主にリストやリンクなどのワンポイントアイコン系の画像をどう実装するかについて。 Contents1 list-style2 background-image3 Font Awesome4 after5 …

no image

CSSでのtableについて

tableで気を付けたいポイントなど。 Contents1 ボーダー表示2 テーブルの背景色とボーダーのスタイル3 tableのレイアウト3.1 table-layout auto3.2 table- …