BootStrap 学習補助クラスと応答性の高いツールの紹介

青灯夜游
リリース: 2018-10-13 17:48:41
転載
1839 人が閲覧しました

この記事では、BootStrap を学習するための補助グループ クラスと応答性の高いツールを紹介します。困っている友人は参考にしていただければ幸いです。ブートストラップ関連のビデオ チュートリアルをさらに学習して入手したい場合は、ブートストラップ チュートリアルにアクセスしてください。

text-* はフォントの色を示し、bg-* はフォントの背景色を示します。

閉じるボタン。close

BootStrap 学習補助クラスと応答性の高いツールの紹介

<button>×</button>
ログイン後にコピー

デフォルトの位置は、親要素の右上隅です。

小さな三角形のアイコン。 Caret

<span></span>
ログイン後にコピー

.pull-left と .pull-right をすばやくフロートする

<p>我是文字</p>
<p>我是文字</p>
ログイン後にコピー

この float は実際には float では、優先順位を強化するために #! important を使用します。

ブロック中心のセンターブロック

<p>我是文字</p>
ログイン後にコピー

クリアフローティングクリアフィックス

<p>我是文字</p>
		

<p>我是文字</p>
ログイン後にコピー
このpはできます掃除が必要なフローティングブロックの前に置くだけです。

表示 (.show) と非表示 (.hidden)

<p>我是文字</p>
		
<p>我是文字</p>
ログイン後にコピー
実際には、表示: ブロックまたはなしを追加すると、1 つ追加されます。重要 優先順位を強化します

レスポンシブ ツール

小さな画面中画面.visible-xs-*ディスプレイ .visible-sm-*Display.visible-md- *Display.visible-lg-*表示.hiddem-xs非表示.hidden-smhidden.hidden-mdhidden表示用コンテンツには、ブロック、インラインブロック、インラインの 3 つのバリエーションがあります。
# 超小型画面

#携帯電話 (

タブレット(≥768px)

デスクトップ(≥992px)

#大画面

デスクトップ (≥1200px)

#.hidden-lg
Hide
追加されたスタイルには、!重要な追加の優先順位が設定されます。


要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。

以上がBootStrap 学習補助クラスと応答性の高いツールの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:csdn.net
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート