2. Bootstrap を使用したテキストの中央揃えの使用: テキストの作成"/> 2. Bootstrap を使用したテキストの中央揃えの使用: テキストの作成">
ホームページ > 記事 > ウェブフロントエンド > 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
使用方法:
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 サイトの他の関連記事を参照してください。