昨日の続き。
- Flex ユーティリティクラスと .col-auto をうまく使えば、行に収まるだけコンテンツが入るようになる
- フォーム内のヘルプテキストは .form-text を指定する
- ヘルプテキストをインラインで表示したければ .form-text.text-muted を指定する
- ヘルプテキストは、aria-describedby 属性を使用して関連するフォームコントロールに明示的に関連付ける
- Bootstrap ではバリデーションも用意。バリデーションの判定は、:invalid と :valid 疑似クラスを使った判定と、required 属性を使った判定がある
- フィードバック文章は .invalid-feedback のクラスを指定する
- クロスブラウザで一貫したラジオボタンやチェックボックス、セレクトボックス、レンジ、ファイル選択などの見た目にするために、.custom-control とその他のクラスが用意されている
- カスタマイズするフォームコントロールには画像を使うが、これは Open Iconic から base64 を組み込んだ SVG アイコンを使用している
- セレクトボックスはカスタマイズしたクラスしかなく、.custom-select を指定する
