bootstrapアシストクラス
18646 ワード
シナリオテキストの色
意図を色で示すと、Bootstrapはツールクラスのセットを提供します.これらのクラスはリンクに適用でき、デフォルトのリンクのようにマウスが通過すると色が濃くなります.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
class="text-muted">...
class="text-primary">...
class="text-success">...
class="text-info">...
class="text-warning">...
class="text-danger">...
差異の処理
Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a
Conveying meaning to assistive technologies
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the contextual colors are only used to reinforce meaning that is already present in the text/markup), or is included through alternative means, such as additional text hidden with the
.sr-only class. シナリオ背景色
シナリオテキストの色クラスと同様に、任意のシナリオ背景色クラスを使用して要素の背景を設定できます.リンクコンポーネントは、上述したシナリオテキストの色クラスのように、マウスが通過すると色が濃くなります.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
class="bg-primary">...
class="bg-success">...
class="bg-info">...
class="bg-warning">...
class="bg-danger">...
ボタンを閉じる
閉じたアイコンを表すアイコンを使用すると、モードボックスと警告ボックスを消すことができます.
×
三角記号
三角記号を使用すると、要素にドロップダウンメニューの機能があることを示すことができます.なお、上向きポップアップメニューの三角記号は逆方向です.
class="caret">クイックフローティング
クラスを追加することで、任意の要素を左または右にフローティングできます.
!importantは、CSSスタイルの優先度を明確にするために使用される.これらのクラスはmixin(lessドキュメントを参照)としても使用できます. class="pull-left">...
class="pull-right">...// Classes
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
// Usage as mixins
.element {
.pull-left();
}
.another-element {
.pull-right();
}ナビゲーションバーコンポーネントでは使用できません
ナビゲーションバーのコンポーネントを配置するときに、これらのツールクラス:
.navbar-leftまたは.navbar-rightを使用します.詳細については、ナビゲーションバードキュメントを参照してください.コンテンツブロックを中央に配置
任意の要素に
display: blockプロパティを設定し、marginプロパティを使用してコンテンツを中央に配置します.以下に示すクラスはmixinとしても使用できます. class="center-block">...// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}フローティングのクリア
親要素に
.clearfixクラスを追加することで、フローティングを容易にクリアすることができる(float).ここではNicolas Gallagherが創造したmicro clearfix方式を用いている.これらはmixinとしても使用できます.
class="clearfix">...// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage as a mixin
.element {
.clearfix();
}コンテンツの表示または非表示
.showおよび.hiddenクラスは、任意の要素の表示または非表示を強制することができる(スクリーンリーダーにも有効である).これらのクラスは、quick floatsのようなCSSスタイルの優先度の問題を回避するために!importantを使用します.これらのクラスはブロックレベルの要素にのみ機能し、mixinとしても使用できます..hideクラスは依然として利用可能であるが、v 3からスクリーンリーダーに機能しない.0.1バージョンからは使用をお勧めしません..hiddenまたは.sr-onlyを使用してください.さらに、
.invisibleクラスは、要素の可視性のみに影響を与えるために使用することができ、すなわち、要素のdisplay属性は変更されず、この要素はドキュメントフローの配置に影響を与えることができる. class="show">...
class="hidden">...// Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
}
.invisible {
visibility: hidden;
}
// Usage as mixins
.element {
.show();
}
.another-element {
.hidden();
}スクリーンリーダーとキーボードナビゲーション
.sr-onlyクラスは、スクリーンリーダー以外のデバイスにコンテンツを非表示にすることができる..sr-onlyと.sr-only-focusableを併用すると、要素にフォーカスがあるときに再度表示できます(例えば、キーボードナビゲーションを使用するユーザー).アクセス性に従うためのベストプラクティスが必要です.このクラスはmixinとしても使用できます.class="sr-only sr-only-focusable" href="#content">Skip to main content// Usage as a mixin
.skip-navigation {
.sr-only();
.sr-only-focusable();
}画像の置換
.text-hideクラスまたは対応するmixinを使用して、要素のテキスト内容を背景図に置き換えることができます.class="text-hide">Custom heading
// Usage as a mixin
.heading {
.text-hide();
}