菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Bootstrap 图片


Bootstrap 图片形状

圆角

Cinque Terre

圆形

Cinque Terre

缩略图

Cinque Terre

圆角

`.img-rounded` 类为图片添加圆角(IE8 不支持圆角)

示例

<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre">
自己动手试一试 »

圆形

`.img-circle` 类将图片塑造成圆形(IE8 不支持圆角)

示例

<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre">
自己动手试一试 »

缩略图

`.img-thumbnail` 类将图片塑造成缩略图

示例

<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
自己动手试一试 »


响应式图片

图片有各种尺寸。屏幕也是。响应式图片会自动调整以适应屏幕尺寸。

通过向 `<img>` 标签添加 `.img-responsive` 类来创建响应式图片。然后图片将很好地缩放到父元素。

`.img-responsive` 类应用于图片`display: block;` 和 `max-width: 100%;` 和 `height: auto;`

示例

<img class="img-responsive" src="img_chania.jpg" alt="Chania">
自己动手试一试 »

图片库

您还可以将 Bootstrap 的网格系统与 `.thumbnail` 类结合使用来创建图片库。

注意:您将在本教程的后面部分学习有关网格系统的更多知识(如何创建具有不同列数的布局)。

示例

 <div class="row">
  <div class="col-md-4">
    <div class="thumbnail">
      <a href="/w3images/lights.jpg">
        <img src="/w3images/lights.jpg" alt="Lights" style="width:100%">
        <div class="caption">
          <p>Lorem ipsum...</p>
        </div>
      </a>
    </div>
  </div>
  <div class="col-md-4">
    <div class="thumbnail">
      <a href="/w3images/nature.jpg">
        <img src="/w3images/nature.jpg" alt="Nature" style="width:100%">
        <div class="caption">
          <p>Lorem ipsum...</p>
        </div>
      </a>
    </div>
  </div>
  <div class="col-md-4">
    <div class="thumbnail">
      <a href="/w3images/fjords.jpg">
        <img src="/w3images/fjords.jpg" alt="Fjords" style="width:100%">
        <div class="caption">
          <p>Lorem ipsum...</p>
        </div>
      </a>
    </div>
  </div>
</div>
自己动手试一试 »

响应式嵌入

也让视频或幻灯片在任何设备上都能正确缩放。

类可以直接应用于 `<iframe>`、`<embed>`、`<video>` 和 `<object>` 元素。

下面的示例通过向 `<iframe>` 标签添加 `.embed-responsive-item` 类来创建一个响应式视频(视频将很好地缩放到父元素)。包含的 `<div>` 定义了视频的纵横比

示例

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>
自己动手试一试 »

什么是宽高比?

图片的纵横比描述了其宽度和高度之间的比例关系。两个常见的视频纵横比是 4:3(20 世纪的通用视频格式)和 16:9(高清电视和欧洲数字电视的通用格式)。

您可以在两个纵横比类之间进行选择

<!-- 16:9 纵横比 -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 纵横比 -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>
自己动手试一试 »

通过练习来测试自己

练习

使用 Bootstrap 类将图片塑造成圆形。

<img src="img_chania.jpg" alt="Chania" class=""> 

开始练习


完整的 Bootstrap 图片参考

有关所有图片类的完整参考,请访问我们的完整 Bootstrap 图片参考

您知道吗?

W3.CSS 是 Bootstrap 的绝佳替代品。

W3.CSS 更小、更快、更易于使用。

如果您想学习 W3.CSS,请访问我们的 W3.CSS 教程


×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持