Bootstrap学习（3）_html/css_WEB-ITnose-html tutorial-php.cn

Rumah

hujung hadapan web

html tutorial

Bootstrap学习（3）_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:34 AM

Bootstrap 图片

　　 Bootstrap 对图片的支持。Bootstrap 提供了三个可对图片应用简单样式的 class：

.img-rounded：添加 border-radius:6px 来获得图片圆角。

.img-circle：添加 border-radius:500px 来让整个图片变成圆形。

.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。

请看下面的实例演示：

<!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  class="img-rounded lazy"  src="/static/imghwm/default1.png"  data-src="/wp-content/uploads/2014/06/download.png"  alt="Bootstrap学习（3）_html/css_WEB-ITnose" ><img  class="img-circle lazy"  src="/static/imghwm/default1.png"  data-src="/wp-content/uploads/2014/06/download.png"  alt="Bootstrap学习（3）_html/css_WEB-ITnose" ><img  class="img-thumbnail lazy"  src="/static/imghwm/default1.png"  data-src="/wp-content/uploads/2014/06/download.png"  alt="Bootstrap学习（3）_html/css_WEB-ITnose" ></body></html>

显示结果如下：

类

以下类可用于任何图片中。

类描述

.img-rounded	为图片添加圆角 (IE8 不支持)
.img-circle	将图片变为圆形 (IE8 不支持)
.img-thumbnail	缩略图功能
.img-responsive	图片响应式 (将很好地扩展到父元素)

圆角的图片

      <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">        <div style="color:white">      <h2 id="图片">图片</h2>      <p> .img-rounded 类为图片添加圆角 (IE8 不支持):</p>                  <img class="img-rounded lazy" src="/static/imghwm/default1.png" data-src="1.jpg" alt="Cinque Terre"    style="max-width:90%"  style="max-width:90%">     </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>

效果如下图所示：

圆形的图片

<!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 id="图片">图片</h2>      <p> .img-rounded 类为图片添加圆角 (IE8 不支持):</p>                  <img class="img-circle lazy"  src="/static/imghwm/default1.png"  data-src="1.jpg"  alt="Cinque Terre"    style="max-width:90%"  style="max-width:90%">     </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 id="图片">图片</h2>      <p> .img-thumbnail 类可制作图片缩略图:</p>                  <img class="img-thumbnail lazy"  src="/static/imghwm/default1.png"  data-src="1.jpg"  alt="Cinque Terre"    style="max-width:90%"  style="max-width:90%">     </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>

效果如下图所示：

响应式图片

通过在 Bootstrap学习（3）_html/css_WEB-ITnose 标签添加 .img-responsive 类来让图片支持响应式设计。图片将很好地扩展到父元素。

.img-responsive 类将 max-width: 100%; 和 height: auto; 样式应用在图片上：

      <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">        <div style="color:white">      <h2 id="图片">图片</h2>      <p> .img-thumbnail 类可制作图片缩略图:</p>                  <img class="img-responsive lazy" src="/static/imghwm/default1.png" data-src="1.jpg" alt="Cinque Terre"    style="max-width:90%"  style="max-width:90%">     </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>

效果如下图所示

　　Bootstrap学习（1）：

Bootstrap学习（2）：

　　致谢：感谢您的阅读！

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

Peranan HTML: Penstrukturan Kandungan WebApr 11, 2025 am 12:12 AM

Peranan HTML adalah untuk menentukan struktur dan kandungan laman web melalui tag dan atribut. 1. HTML menganjurkan kandungan melalui tag seperti, menjadikannya mudah dibaca dan difahami. 2. Gunakan tag semantik seperti, dan lain -lain untuk meningkatkan kebolehcapaian dan SEO. 3. Mengoptimumkan kod HTML boleh meningkatkan kelajuan pemuatan laman web dan pengalaman pengguna.

HTML dan Kod: Melihat lebih dekat pada istilahApr 10, 2025 am 09:28 AM

Htmlisaspecifictypeofcodefocusedonstructuringwebcontent, manakala "kod" secara meluas ini

HTML, CSS, dan JavaScript: Alat penting untuk pemaju webApr 09, 2025 am 12:12 AM

HTML, CSS dan JavaScript adalah tiga tiang pembangunan web. 1. HTML mentakrifkan struktur laman web dan menggunakan tag seperti, dan sebagainya. 2. CSS mengawal gaya laman web, menggunakan pemilih dan atribut seperti warna, saiz font, dan lain-lain.

Peranan HTML, CSS, dan JavaScript: Tanggungjawab TerasApr 08, 2025 pm 07:05 PM

HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.

Adakah HTML mudah belajar untuk pemula?Apr 07, 2025 am 12:11 AM

HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.

Apakah contoh tag permulaan dalam html?Apr 06, 2025 am 12:04 AM

Anexampleofastartartingtaginhtmlis, yangbeginsaparagraph.startingtagsareessentialinhtmlasttheyinitiateelements, definetheirtypes, andarecrucialforstructuringwebpagesandconstructionthedom.

Bagaimana cara menggunakan susun atur flexbox CSS untuk mencapai penjajaran yang berpusat pada kesan segmentasi garis putus -putus dalam menu?Apr 05, 2025 pm 01:24 PM

Bagaimana untuk merancang kesan segmentasi garis bertitik di menu? Semasa merancang menu, biasanya tidak sukar untuk menyelaraskan kiri dan kanan antara nama hidangan dan harga, tetapi bagaimana pula dengan garis bertitik atau titik di tengah ...

Apakah elemen HTML yang digunakan oleh editor kod dalam talian untuk melaksanakan input kod?Apr 05, 2025 pm 01:21 PM

Analisis elemen HTML dalam editor kod web Banyak editor kod dalam talian membolehkan pengguna memasukkan kod HTML, CSS, dan JavaScript. Baru -baru ini, seseorang mencadangkan ...

See all articles