ブートストラップ学習(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 までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Java チュートリアル

1673

CakePHP チュートリアル

1429

Laravel チュートリアル

1333

PHP チュートリアル

1278

C# チュートリアル

1257

Related knowledge

HTML：構造、CSS：スタイル、JavaScript：動作 Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTML、CSS、およびJavaScriptの未来：Web開発動向 Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTMLの未来：ウェブデザインの進化とトレンド Apr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要 Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML対CSSおよびJavaScript：Webテクノロジーの比較 Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

HTML：それはプログラミング言語か何か他のものですか？ Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTMLを超えて：Web開発のための重要なテクノロジー Apr 26, 2025 am 12:04 AM

強力な機能と優れたユーザーエクスペリエンスを備えたWebサイトを構築するには、HTMLだけでは十分ではありません。次のテクノロジーも必要です。JavaScriptは、Webページに動的とインタラクティブ性を与え、リアルタイムの変更がDOMを操作することで達成されます。 CSSは、美学とユーザーエクスペリエンスを向上させるために、Webページのスタイルとレイアウトを担当しています。 React、Vue.JS、Angularなどの最新のフレームワークとライブラリは、開発効率とコード組織構造を改善します。