月別: 2015年8月

Bootstrapを使ってみる Button編

BootstrapのButtonについて公式のページをみながら試してみる。
まずはボタンから

公式ページのドキュメント

http://getbootstrap.com/css/#buttons

<a>タグと<button>タグに適用することで、
今風なボタンが手軽に表現できます

ボタンの色

button-1

タグのclassにbtnとbtn-*****の2つを指定します。
*****は内容に応じて以下ソースを参考に変更

activeを指定するとさらに深い色合いになります。
active

サイズ

ボタンの大きさを変更できる
大きい順に btn-lg > 通常 > btn-sm > btn-xs です。
sizes

ボタンの幅を親のタグ要素の幅いっぱいに広げる
block

disable

非活性のオプションにも対応しています。
マウスを重ねるとカーソルのアイコンも変わります。

disable

Bootstrapを使ってみる 準備編

デザインフレームワークのBootStrapを勉強してみる。

とりあえず以下の本家サイトからDLしてくる。

http://getbootstrap.com/getting-started/#examples

DLしたファイルを解凍して
以下のようにindex.htmlを作ります。

3

サンプルコードがDLページの下部にあるので
それをコピペして貼り付けましょう。
めんどくさい方は以下コピペして保存。

index.htmlをブラウザで開くと
フォントが変わっているのがわかります。
上がBootstrap適用あり、下が適用なし

20150829-2