家にローテーブルしかなく、あぐらスタイルに疲れ、
イスに座って作業したくなってきた犬吉です。

Bootstrapのドキュメントを読んでみたシリーズ CSS編の4記事目です。

目次

  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

赤字が今回の内容

画像 – Images

 Responsive images

画像を、レスポンシブにするには.img-responsiveをつける。

ブラウザサイズに合わせて伸縮します。

Image shapes

画像に以下のクラスをつける。

img-rounded

test

img-circle

test

img-thumbnail

test

補助 – Helper classes

あると便利なclass郡。

Contextual colors

色付きテキスト用のclass。pタグなどにつける。
リンクにも適用できる。

text-mutedでこの色

text-primaryでこの色

text-successでこの色

text-infoでこの色

text-warningでこの色

text-dangerでこの色

Contextual backgrounds

テキストの背景に、色をつける。

.bg-primaryでこの背景色になる

.bg-successでこの背景色になる

.bg-infoでこの背景色になる

.bg-warningでこの背景色になる

.bg-dangerでこの背景色になる

Close icon

.closeをつけるとバツ印のアイコンが表示される。

Carets

.caretで下向き三角アイコンが表示される。

 

 Quick floats

.pull-leftと.pull-rightで左と右にfloat。

内部で!importantが指定してあるので、優先順位がこんがらがった時に使う。

Center content blocks

.center-block。中央寄せのclass。

と指定してあるだけのclass。
ミックスイン用って感じ。

Clearfix

.clearfixでclearfixになるよ。ってなんか説明として変だね。

Showing and hiding content

コンテンツの表示・非表示を切り替える際に使うclass。

.showで表示、.hiddenで非表示(存在ごと消える)、.invisibleで非表示(存在はある)。

Screen reader and keyboard navigation content

.skip-navigationは、スクリーンリーダー用のclass。スクリーンリーダーってhtmlをたどってを上から順に読み上げるだけだから、聞きたくないナビゲーション部分の読み上げをスキップしたい方のためのclass。

内容としては、.sr-onlyと.sr-only-focusableを合わせて書いても同じ。

Image replacement

.text-hideは、テキストが非表示になる。いわゆる画像置換用のクラス。

見た目上はcssでの背景画像だけにしたいって時に使う。