Bootstrap笔记(十) 图片篇

最新推荐文章于 2023-10-10 22:30:00 发布
最新推荐文章于 2023-10-10 22:30:00 发布
阅读量869 收藏 8
点赞数 1
分类专栏： Bootstrap 文章标签： 前端 bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XI_MILU/article/details/119839748
版权

图片篇

响应式图片

响应式图片指的是图片会随着父元素的宽度自动缩放，最大宽度为图片的原尺寸。制作响应式图片只要在 <img>元素加上 .img-fluid 类别，图片就会套用 max-width:100%; 和 height:auto; 两个属性成为响应式图片。

範例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <title>響應式圖片</title>
</head>
<body>
    <div class="container">
    	<!-- 响应式图片，随父元素自动缩放宽度 -->
        <img src="https://picsum.photos/700/300/?random=1" class="img-fluid">
        <!-- 非响应式图片，不会自动缩放宽度 -->
        <img src="https://picsum.photos/700/300/?random=2">
    </div>
</body>
</html>

在这里插入图片描述

缩图

我们可以使用 .img-thumbnail 类别设定缩图，他会在图片四周加上1px宽度的框线。

範例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <title>縮圖</title>
</head>
<body>
    <div class="container">
        <img src="https://picsum.photos/400/300/?random=1" class="img-thumbnail">
    </div>
</body>
</html>

在这里插入图片描述

框线

  • 我们可以使用下列类别设定框线

    在这里插入图片描述

  • 我们可以使用下列类别设定框线色彩

    在这里插入图片描述

  • 我们可以使用下列类别设定框线圆角

    在这里插入图片描述

  • 框线粗细

    框线粗细共有五种宽度，分别用数字 1 ~ 5 (细 - 粗) 表示，还可以使用数字 0 隐藏框线。ex. .border-0、.border-1、.border-top-2、.border-end-5 等等。

範例1: 框线设定与颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <title>框線與顏色</title>
    <style>
    	/* 设定容器宽度 */
        .container {
            width: 1200px;
        }
        /* 设定区块长度、宽度与背景色，并为区块间增加一点间隔 */
        .container div {
            width: 300px;
            height: 200px;
            background-color: rgb(234, 240, 180);
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="border border-primary"></div>
        <div class="border-top border-secondary"></div>
        <div class="border-end border-success"></div>
        <div class="border-bottom border-danger"></div>
        <div class="border-start border-warning"></div>
        <div class="border border-info"></div>
        <div class="border border-light"></div>
        <div class="border border-dark"></div>
        <div class="border border-white"></div>
    </div>
</body>
</html>

在这里插入图片描述

範例2: 框线圆角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <title>框線圓角</title>
</head>
<body>
    <div class="container">
        <img src="https://picsum.photos/400/300/?random=1" width="40%" class="border rounded">
        <img src="https://picsum.photos/400/300/?random=2" width="40%" class="border rounded-top">
        <img src="https://picsum.photos/400/300/?random=3" width="40%" class="border rounded-end">
        <img src="https://picsum.photos/400/300/?random=4" width="40%" class="border rounded-circle">
        <img src="https://picsum.photos/400/300/?random=5" width="40%" class="border rounded-pill">
        <img src="https://picsum.photos/400/300/?random=6" width="40%" class="border rounded-0">
    </div>
</body>
</html>

圆角

  1. 四个角呈现圆角
  2. 上方两个角呈现圆角
  3. 右方两个角呈现圆角
  4. 显示成圆形(图片长宽一样才会是圆形)
  5. 显示成椭圆形
  6. 四个角都不呈现圆角

範例2: 框线粗细

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <title>框線粗細與隱藏框線</title>
    <style>
        .container {
            width: 1200px;
        }
        .container div {
            width: 300px;
            height: 200px;
            background-color: rgb(234, 240, 180);
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="border border-1 border-primary"></div>
        <div class="border border-2 border-primary"></div>
        <div class="border border-3 border-primary"></div>
        <div class="border border-4 border-primary"></div>
        <div class="border border-5 border-primary"></div>
        <div class="border border-0 border-primary"></div>
        <div class="border border-top-0 border-primary"></div>
        <div class="border border-end-0 border-primary"></div>
        <div class="border border-bottom-0 border-primary"></div>
        <div class="border border-start-0 border-primary"></div>
    </div>
</body>
</html>

在这里插入图片描述

图片对齐方式

  • 图片靠左对齐
    我们可以使用 .float-start 类别来让图片靠左对齐。

  • 图片靠右对齐
    我们可以使用 .float-end 类别来让图片靠右对齐。

  • 图片水平置中
    Bootstrap中可以透过下列两种方法实现图片水平置中:

    1. 使用 .mx-auto 和 .d-block 两个类别

      .d-block
      Bootstrap預設➡️display: block;

      .mx-auto (x軸的 margin 都設為 auto )
      Bootstrap預設➡️margin-left: auto; margin-right: auto;

    2. 在外层<div>加上 .text-center 类别

範例1: 图片靠左和靠右对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <title>圖片靠左和靠右對齊</title>
</head>
<body>
    <div class="container">
    	<!-- 图片靠左对齐 -->
        <img src="https://picsum.photos/100/100/?random=1" width="30%" class="float-start">
        <!-- 图片靠右对齐 -->
        <img src="https://picsum.photos/100/100/?random=2" width="30%" class="float-end">
    </div>
</body>
</html>

在这里插入图片描述

範例2: 图片水平置中(使用.mx-auto 和 .d-block)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <title>圖片水平置中</title>
</head>
<body>
    <div class="container">
    	<!-- 图片水平置中 -->
        <img src="https://picsum.photos/100/100/?random=1" width="30%" class="mx-auto d-block">
    </div>
</body>
</html>

在这里插入图片描述

範例3: 图片水平置中(使用.text-center)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <title>圖片水平置中</title>
</head>
<body>
	<!-- 图片水平置中 -->
    <div class="container text-center">
        <img src="https://picsum.photos/100/100/?random=1" width="30%">
    </div>
</body>
</html>

在这里插入图片描述

XI_MILU
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap：文字排版与图片样式
2401_84094979的博客
04-19 578
默认设置：Bootstrap 4 默认的font-size为 16px,为 1.5。默认的为 “Helvetica Neue”, Helvetica, Arial, sans-serif。此外，所有的元素。
Bootstrap 关于列表、表单、图片的使用
qq_27460209的博客
04-13 556
列表: <ul class="list-inline"> <li>首页</li> <li>岗位课</li> <li>商城</li> <li>关于我们</li> </ul> <dl class="dl-horizontal"> <dt>购...
bootstrap----导航栏 图片布局
sunnyboysix的博客
11-29 6058
bootstrap----导航栏 图片布局
Bootstrap卡片图文列表布局样式代码
ICode联盟
01-29 233
Bootstrap卡片图文列表布局样式代码，一个简单的demo。
BootStrap图片横向小图排列，点击图片放大，图片右上角显示删除按钮
最新发布
qq_47189438的博客
10-10 743
.NET MVC中图片横向排列，利用bootstrap Modal实现点击图片预览大图，图片右上角显示删除按钮。
Bootstrap 图片及缩略图
Charge8的博客
01-31 5680
一、图片形状    1、通过为 &lt;img&gt; 元素添加以下相应的类，可以让图片呈现不同的形状。 .img-rounded：添加 border-radius:6px 来获得图片圆角。 .img-circle：添加 border-radius:50% 来让整个图片变成圆形。 .img-thumbnail：添加一些内边距（padding）和一个灰色的边框。 &lt;img src="...
Bootstrap基本样式学习笔记之图片(6)
09-01
这篇“Bootstrap基本样式学习笔记之图片(6)”将深入探讨如何使用Bootstrap来定制和优化图片样式。 首先，Bootstrap图片基本样式通常涉及以下几种类型： 1. **原始图片**: 默认情况下，Bootstrap中的图片会保持其...
整理关于Bootstrap过渡动画的慕课笔记
08-30
在本篇笔记中，我们将深入探讨如何在Bootstrap中使用过渡动画，以及它们在不同组件中的应用。 首先，Bootstrap提供了一个名为`transition.js`的JavaScript插件，该插件负责处理所有组件的过渡动画。为了启用这些...
bootstrap读书笔记之CSS组件（上）
09-01
在本篇“bootstrap读书笔记之CSS组件（上）”中，我们将深入探讨Bootstrap中的CSS组件，特别是图标、下拉菜单和按钮组。 一、图标字体 Bootstrap 3 包含了超过200个免费的Glyphicons图标，这些图标实际上是一种...
整理关于Bootstrap列表组的慕课笔记
08-30
本篇文章将深入探讨Bootstrap列表组的基础知识、应用场景以及一些扩展功能。 1. **基础列表组** 基础列表组是Bootstrap中最基本的形式，它去除了HTML原生列表`<ul>`或`<ol>`中的点状或数字标记，添加了特定的CSS...
Bootstrap3.0学习笔记之特殊的效果（显示隐藏、消除浮动、关闭按钮等）
09-22
本文介绍了8款bootstrap3.0中特殊的效果，包括1.关闭按钮 2.Carets 3.快速设置浮动 4.内容区域居中 5.清除浮动 6.显示或隐藏内容 7.针对屏幕阅读器的内容 8.图片替换，非常的实用，是篇非常不错的文章，推荐给大家。
仿京东产品展示的特效一下
10-22
JQuery 仿京东商城产品展示切换及放大效果、放大功能参考了JQZOOM插件、本特效综合图片切换与图片放大两项技术于一身，非常适合于产品类、图片类网站使用，本特效运行效果可看上图。鼠标点击之后能让点击过的小图片锁定高亮。左右两个按钮点击在任何时候在小图展示区域都展示同样的小图，小图数目不会随着按钮的点击而在小图展示区域出现空缺。
jquery照片墙源码
11-09
jquery照片墙，实用的代码，来下把。
超酷的照片墙展示效果
12-21
描述：结合淡入淡出、旋转、缩放、倾斜及3D效果，照片快速左侧切入，旋转3D效果. 参考示例：http://www.jq22.com/jquery-info5225
超炫JQuery照片墙特效
11-04
超炫JQuery照片墙特效
Bootstrap(折叠+列表组&轮播图实现&图文区)
qq_64001795的博客
05-08 437
书籍列表 <div class="col-md-3 aa" style="background-color: #8FD19E; "> <div id="accordion"> <div class="card"> <div class="card-header" id="headingOne"> <h5 class="mb-0"> <button class="btn
Bootstrap系列之图片（Image）
老__L的博客
05-27 3553
图片（Image）
bootstrap图片怎么横向布局_版面设计布局不恰当之“版面零碎不统一”的解决思路...
weixin_33476081的博客
12-25 591
信息内容这么多，但是还是要整齐美观！-请对齐标准线！造成版面零碎的原因，很可能在于各项内容没有对齐。对齐是布局的一项基本工作。把各自的标准线对齐，才能方便读者阅读，从设计层面上让读者感受到“经过认真整理了”。下面介绍一下如何将很多内容美观地对齐的小窍门。1/想把版面整理得很清爽-请将子版面的边缘对齐吧!版面的划分，有纵向的也有竖向的，请将其对齐在一条直线上！本想做出具有动感的很活泼的设计，在这个过...
Bootstrap-表单和图片
One By One
12-14 182
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css"> </head>...
bootstrap笔记
08-31
以下是一些关于 Bootstrap 的笔记： 1. 栅格系统：Bootstrap 提供了一个灵活的栅格系统，可以方便地创建响应式布局。通过将页面分割成12个列，可以轻松地在不同屏幕尺寸下进行布局。 2. CSS 组件：Bootstrap 提供...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值