ブートストラップで角を丸くする方法

ブートストラップで丸い角を実装する方法: まず、対応するコード ファイルを開き、次にクラス スタイル " "クラスに直接追加するだけです。

推奨事項: 「ブートストラップ チュートリアル 」

このチュートリアルの動作環境: Windows 10 システム、ブートストラップ バージョン 3.0 , この方法は、すべてのブランドのコンピューターに適用できます。

#Bootstrap は、丸い角、円形のアバター、レスポンシブ画像を実装します

Bootstrap は、<img class="img-circle lazy" src="/static/imghw/default1.png" data-src="img.jpg" alt="ブートストラップで角を丸くする方法" > クラスに次の 4 つのスタイルを提供します。

• .img-rounded: 角が丸い (IE8 ではサポートされていません)、border-radius:6px を追加して画像の角が丸い;

• .img-circle:circle ( IE8 ではサポートされていません）、border-radius:50% を追加して画像全体を円形にします。

• .img-thumbnail: サムネイル機能。パディングと灰色の境界線を追加します。

• .img-sensitive: 画像の応答性 (親要素に合わせて適切にスケールされます)。

#使用方法:

クラス スタイルをクラスに直接追加するだけです:

<img  class="img-circle lazy" src="/static/imghw/default1.png" data-src="img.jpg" alt="ブートストラップで角を丸くする方法" >

効果は次のとおりです:

画像からさまざまなスタイルを使用することで得られる効果を確認できます。画像の加工は非常に簡単で便利です。場合によっては、必要に応じて、たとえば、内側のマージンとグレーの境界線を持つ円形のアバターを使用する必要がある場合、円とサムネイルの 2 つのスタイルを重ね合わせることができ、その効果は上の円のサムネイルの図のようになります。

img-sensitive

画像をレスポンシブにします。いわゆる応答性とは、ある要素が変化すると応答性も変化し、適応効果が得られることを意味します。 上の図の 2 つのレスポンシブ画像コードは次のとおりです。

<figure style="width: 150px;height: 150px;"> 
  <figcaption>responsive(150*150)</figcaption> 
  <img class="img-responsive  lazy"  src="/static/imghw/default1.png"  data-src="img.jpg"    alt="头像"/> 
 </figure> 
<figure style="width: 100px;height: 100px;"> 
  <figcaption>responsive(100*100)</figcaption> 
  <img class="img-responsive  lazy"  src="/static/imghw/default1.png"  data-src="img.jpg"    alt="头像"/> 
 </figure>

ここでは画像のサイズを設定しませんが、画像を囲む要素のサイズを設定します。図が 150px*150px であっても 100px*100px であっても、画像は親要素の図まで十分に拡張できます。

以上がブートストラップで角を丸くする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。