新しいMacbook。
AirじゃなくてProにして本当によかった犬吉です。

バッテリーが長持ちするだけで、ここまでストレスが無いなんて!!!
今思えば、Airの時は電源・バッテリー確保ばかりに気を使ってたな。。。

cssページ編だけで5分割しちゃった!!
ドキュメントって読むだけで大変でござる。

目次

  1. 概要 – Overview
  2. グリッドシステム – Grid system
  3. 文字 – Typography
  4. コード – Code
  5. 表組み – Tables
  6. フォーム – Forms
  7. ボタン – Buttons
  8. 画像 – Images
  9. 補助 – Helper classes
  10. レスポンシブ – Responsive utilities
  11. Lessを使う – Using Less
  12. Sassを使う – Using Sass

赤字が今回の内容

フォーム – Forms

Basic example

全てのフォームの要素には基本的なCSSスタイリングがされているのでござる。




ここに補助テキストをいれたりする。

 

<input>や <textarea>の項目ごとに、div.form-groupで囲って、横幅100%にしたい入力だけ.form-controlをつけています。

基本、細々とclassをつけなくてもOKになってますね。

Inline form

.form-inlineをつけると、.form-groupがインラインブロックになって水平に並ぶようですね。
ただし、横幅768pxまでの話。

スクリーンリーダー向けの話もいくつか書いてますね、気になる方はドキュメント見てね。

Horizontal form

よくあるレイアウトですよね。.form-horizontalで下記のようなレイアウトになる。

 Supported controls

フォーム周りは多くのパターンがあるけど、
それらはHTML5自体がサポートしてるから、それつかってね。

Inputs

text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, ついでに colorなどなど

type属性であらかた対応できる。

Textarea

textareaタグにrows属性入れれば行数を調整できます。

 

Checkboxes and radios

チェックボックスやラジオボタンのdisabled属性にも対応。

チェックボックス

divに.checkboxをつけて各項目を囲む。disabledの場所は合わせて.disabledもつける。

ラジオボタン

divに.radioをつけて各項目を囲む。disabledの場所は合わせて.disabledもつける。

インライン版

水平に並べるときは.checkbox-inlineを使う。

ラベル無し

フォームのレイアウトによっては、ラベルなんて要らない場合があります。
そのときは下記のようにする。.aria-labelなどを使ってスクリーンリーダーへの配慮も忘れずに。

Selects

セレクトメニューの角が丸いのは仕方ないのさ。

基本

multiple版

 Static control

ただのテキストをいれたい場合は、pタグに.form-control-staticをつける。

ただのテキスト@example.com

 Focus state

フォーム要素のフォーカス時には、box-shadowでのスタイルを付けてるよ。
青くモワッなるのがそうですね、。

 

Disabled state

disabled属性をつけると、下記のようになる。

Disabled fieldsets

いちいちdisabledをつけてくのが大変な場合。
<fieldset>タグにかけば、そのグループ内の要素は全部disabledになるよ。

 

※IEやオペラの為にjavascriptで対応してる部分があるようです。

Readonly state

readonly属性つけると、disabledとおなじく入力無効になるよ。
確認画面とかでつかうのかな?

Validation states

フォームといえばバリデート 。その際のメッセージ用classたち。
.has-success、.has-warning、.has-errorを.form-groupといっしょにつけて、ラベル部分には.control-labelをつける。

 With optional icons

バリデートの時に、アイコンを表示させたい!そんな要望を叶えるclassたち

(成功:スクリーンリーダー向けのメッセージ)
(警告:スクリーンリーダー向けのメッセージ)
(エラー:スクリーンリーダー向けのメッセージ)

@

(成功:スクリーンリーダー向けのメッセージ)

あと、.form-horizontalとか.form-inlineの時、スクリーンリーダー向けの例も書いてるけど、それは公式参照ってことで。

Control sizing

.input-lgや.col-lg-*を使うと、サイズ調整できる。





 Horizontal form group sizes

.form-horizontalのレイアウトの時は、.form-group-lg もしくは .form-group-smをつかって調整する必要がある。

 

Column sizing

いままでの前提を考えると、なんでわざわざ?とは思うけど。
グリッドレイアウトで横並びにしてもイケるよ。

 

Help text

説明書きは、spanに.help-blockをつけて下記のようになる。

注目すべきところは、aria-describedby=”helpBlock”の部分かな。ちゃんとhelp-blockと関連付けされてる。

アクセシビリティって面倒くさいね!

.help-block。一行に収まらない場合は、折り返すよ

 ボタン – Buttons

 Button tags

ボタンとしてのタグは<a>、<button>、<input>。

※後から登場するナビゲーション用のコンポーネントは、buttonタグにしか対応してない。

※<a>タグをボタンとして使うならrole=”button”をつける。

※クロスブラウザを意識するなら、buttonタグをなるべく使ってね。

Options

これらを使って、ボタンの見た目を調整してね。

.btnは全共通。
追加で以下のclassを足す。

.btn-primary

.btn-primary

.btn-success

.btn-info

.btn-warning

.btn-danger

.btn-link

Sizes

サイズ調整は以下のclass

.btn-lg

.btn-sm

.btn-xs

.btn-block

Active state

.activeを足すと、ボタンがアクティブ状態の見た目になる。

aタグも、buttonタグも両方効く。

Disabled state

無効状態にするには、

buttonタグには、プロパティ追加でdisabled=”disabled”。

aタグは、クラス追加で.disabled。

※aタグの方は、一部レガシーなブラウザでマウスオーバー時にポインターが変化しなかったりするみたい。

今日はこのへんで

つづきはまた後日

Trackbacks/Pingbacks

  1.  【cssページ編 2/5】Bootstrapのドキュメントを読んでみた | 8bit8px フロントエンドエンジニア備忘録 by LuckyDogWorks

Comments are closed.