Bootstrap に関する詳しい知識を共有する

1. 画像をモバイル対応にする

使用方法: 画像をページの幅に合わせます。

操作: .img-sensitive クラス属性を画像に追加します。

<img src="/images/cat.jpg" class="img-responsive">

2. Bootstrap でテキストを中央揃えにする

使用方法: テキストを中央揃えにします。

操作: center-text クラス属性をテキストに追加します。

<p class="text-center">Hi, I'm Yamei.</p>

追加:

.text-right、.text-left、.text-primary (テキストコンテンツにはプライマリクラスがあります)、.text-success、.text-muted (弱体化)、.text - info、.text-warning、.text-danger

3. Bootstrap ボタンを作成します

使用方法:

Bootstrap 独自のボタン スタイルのボタンを作成します。

操作:

btn クラス属性をテキストに追加します。

<button class="btn">Like</button>

効果は次のとおりです:

4. ブロック要素のブートストラップ ボタンを作成します

使用:

ブロックレベルのボタン (親要素の幅の 100% に拡張) ）。 ブロックレベルのボタンを作成します。ボタンはページ全体に拡張され、ブロックの後の要素は自動的に次の行に移動します (折り返されます)。

原理は次のとおりです (fcc からの画像):

操作:

.btn

クラス属性を保持し、 .btn-block を追加します。

<button class="btn btn-block">Like</button>

効果は次のとおりです:

5. ブートストラップ ボタンの色をレインボーに設定します

使用方法: クラス .btn-primary のオリジナル (青) ボタンを追加します。

操作: .btn

.

btn-blockクラス属性を保持し、.btn-primaryを追加します。

<button class="btn btn-block btn-primary">Like</button>

効果は次のとおりです:

補足:

.btn-danger、.btn-warning (注意して操作するボタン)、.btn-info (ポップアップするボタン)情報)、.btn-default、.btn-link (ボタンをリンクのように見せますが、ボタンの動作は維持します)、.btn-success

大きい、小さい、超小さい

.disabled 無効なボタン

。 .active ボタンがクリックされたかのように表示します

.active

※上記は私がFCCで学んだことを初心者向けにまとめたものです 間違いがあればメッセージをお願いします。それらを指摘してください~

[関連ビデオの推奨:

ブートストラップ チュートリアル

]

以上がBootstrap に関する詳しい知識を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。