カテゴリー: BootStrap

BootStrapを使ってみる Form 前編

今度は入力フォーム
正直見た目としてはあまり代わり映えしないけど。
前半は各Formの基本から

基本形はform-groupクラスで囲ってラベル等をグルーピング、
Inputタグにform-coltrolクラスを指定する

・form-groupに属するlabelをクリックしてもinputタグ領域をクリックするのと同等の動きをする。
・横幅はWidth100%なので、このままでは横には並べられない(※横に並べる方法は後編で)

ちなみにソースに書かれたplaceholderはHTML5の新機能

              

Text入力

20151125_01

              

TextArea

20151125_06

              

File入力

20151125_02

              

チェックボックス

20151125_03

              

ラジオボタン

20151125_05

              

リスト

20151125_04

              

後編に続く

Bootstrapを使ってみる Table編

まずは基本形

20151108_01

これはtableタグにtableクラスを指定しただけの状態。
これだけで何かシャープな感じがする。
コードは以下

theadとtbodyのタグを指定してヘッダと表データを明確に区別すると
表示も変わります。
表内のデータはthタグを指定すると強調されます。

20151108_02

 

table-striped

table-stripedクラスを追加で指定すると、
奇数行に背景色が付くようになる。

20151108_03

 

table-bordered

table-borderedクラスを追加で指定すると、枠線が付き、
従来のテーブル表示に近い形に

20151108_04

 

table-hover

table-hoverクラスを追加で指定すると、
マウスカーソルを合わせた行の色が変わるようになる。
もちろんマウスカーソルを外すと元の色に戻る

20151108_04

 

Condensed table

table-condensedクラスを追加で指定すると、
通常に比べてコンパクトな表になる。
公式の説明みると各Cellのpaddingが半分になっている模様

20151108_05

 

Contextual classes

tr、td、thにクラスを指定することでbuttonの時のように色付けが可能。
trで行単位。
td、thでセル単位に色付けが可能
指定可能なクラスは以下

    • active
      success
      info
      warning
      danger
  • 20151108_06

    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