ブートストラップ学習(3)_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

ブートストラップ学習(3)_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:34 AM

Bootstrap Images

Bootstrap は画像をサポートしています。 Bootstrap には、画像に単純なスタイルを適用できる 3 つのクラスが用意されています:

.img-rounded: border-radius:6px を追加して、画像の角を丸くします。

.img-circle: border-radius:500px を追加して、画像全体を円形にします。

.img-thumbnail: パディングとグレーの境界線を追加します。

次のデモ例を参照してください:

<!DOCTYPE html><html><head>   <title>Bootstrap 实例 - 图像</title>   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script></head><body><img src="/wp-content/uploads/2014/06/download.png"    class="img-rounded"><img src="/wp-content/uploads/2014/06/download.png"    class="img-circle"><img src="/wp-content/uploads/2014/06/download.png"    class="img-thumbnail"></body></html>

ログイン後にコピー

表示される結果は次のとおりです:

クラス

以下のクラスは任意の画像で使用できます。

クラスの説明.img-rounded画像に丸い角を追加します (IE8 ではサポートされていません).img-circle 画像を円に変換します (IE8 ではサポートされていません) . img-thumbnailサムネイル関数.img-sensitive画像応答型(親要素まで拡張されます)

丸みを帯びた画像

<!DOCTYPE html><html>  <head>    <meta name="viewport" content="width=device-width, initial-scale=1">    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  </head>  <body style = "background-color:black">    <div class="container" style = "color:white">      <h2>图片</h2>      <p> .img-rounded 类为图片添加圆角 (IE8 不支持):</p>                  <img src="1.jpg" class="img-rounded" alt="Cinque Terre" width="304" height="236">     </div>    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>  </body></html>

ログイン後にコピー

効果は以下の通りです:

丸い写真

<!DOCTYPE html><html>  <head>    <meta name="viewport" content="width=device-width, initial-scale=1">    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  </head>  <body style = "background-color:black">    <div class="container" style = "color:white">      <h2>图片</h2>      <p> .img-rounded 类为图片添加圆角 (IE8 不支持):</p>                  <img src="1.jpg" class="img-circle" alt="Cinque Terre" width="304" height="236">     </div>    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>  </body></html>

ログイン後にコピー

効果は下の写真の通りです

サムネイル

<!DOCTYPE html><html>  <head>    <meta name="viewport" content="width=device-width, initial-scale=1">    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  </head>  <body style = "background-color:black">    <div class="container" style = "color:white">      <h2>图片</h2>      <p> .img-thumbnail 类可制作图片缩略图:</p>                  <img src="1.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236">     </div>    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>  </body></html>

ログイン後にコピー

効果は下の写真の通りです:

レスポンシブ写真

投稿者: < img> .img-sensitive クラスをタグに追加して、画像をレスポンシブデザインに対応させます。画像は親要素まで適切に展開されます。

.img-sensitive クラスは、max-width: 100%; and height: auto; スタイルを画像に適用します:

<!DOCTYPE html><html>  <head>    <meta name="viewport" content="width=device-width, initial-scale=1">    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  </head>  <body style = "background-color:black">    <div class="container" style = "color:white">      <h2>图片</h2>      <p> .img-thumbnail 类可制作图片缩略图:</p>                  <img src="1.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">     </div>    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>  </body></html>

ログイン後にコピー

効果は以下の通りです

ブートストラップ学習(1):

学習 (2):

謝辞: 読んでいただきありがとうございます。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。