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. ブロック要素のブートストラップ ボタンを作成します

使用:

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

操作:

クラス属性を保持し、 .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 無効なボタン

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

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