Bootstrap <基础八>图片

最新推荐文章于 2024-07-28 20:27:10 发布
最新推荐文章于 2024-07-28 20:27:10 发布
阅读量60 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/lansy/p/4380536.html
版权

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

  • .img-rounded：添加 border-radius:6px 来获得图片圆角。
  • .img-circle：添加 border-radius:500px 来让整个图片变成圆形。
  • .img-thumbnail：添加一些内边距（padding）和一个灰色的边框。

请看下面的实例演示：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 图片</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/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> 类

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

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

响应式图片

通过在 <img> 标签添加 .img-responsive 类来让图片支持响应式设计。 图片将很好地扩展到父元素。

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

实例

<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre">

转载于:https://www.cnblogs.com/lansy/p/4380536.html

anpochi7793
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap鼠标悬停图片遮罩特效
06-16
接下来，我们可以创建一个图片容器，使用Bootstrap的`<figure>`和`<img>`标签，并添加一个`<div>`作为遮罩层。为了实现悬停效果，我们可以用CSS来控制遮罩层的显示和隐藏。以下是一个简单的HTML示例： ```html ...
Bootstrap3制作图片轮播效果
09-02
<h3>图片标题</h3> <p>描述内容...</p> </div> ``` **步骤五：创建轮播控制器** 添加两个链接，分别表示“向前”和“向后”操作，使用`carousel-control`类，以及`left`和`right`类来指定方向。 ```html <a ...
bootstrap简单样式
亦是此间少年的博客
08-01 284
** 媒体查询 ** 媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。 下面我们来通过一个案例来讲解一下什么是媒体查询： <style> /* 当浏览器的宽度在 200到 699px，采用下面这个样式*/ @media screen and (max-width: 699px) and (m...
（6）Bootstrap——图片
qq_41841658的博客
01-22 165
1.Bootstrap提供了三个可对图片应用简单样式的class： 类 描述 .img-rounded 添加border-radius:6px来获得图片圆角 .img-circle 添加border-radius :50%来让整个图片变成圆形 .img-thumbnail 添加一些内边距（padding）和一个灰色的边框 以下代码使用了上述的样式class: <!DOCTYPE html> <html lang="en"> <head>
php如何让img显示为圆形,css如何将图片设置为圆形图片
weixin_36269334的博客
03-10 1314
css将图片设置为圆形图片的方法：可以利用border-radius属性来设置圆形图片，代码如【border-radius:50%】。border-radius属性允许我们为元素添加圆角边框。本文操作环境：windows10系统、css 3、thinkpad t480电脑。属性介绍：border-radius 属性允许我们为元素添加圆角边框。语法：border-radius: 1-4 length...
boostrap
03-03 133
Bootstrap图片 在本章中，我们将学习 Bootstrap 对图片的支持。Bootstrap 提供了三个可对图片应用简单样式的 class： .img-rounded：添加border-radius:6px来获得图片圆角。 .img-circle：添加border-radius:50%来让整个图片变成圆形。 .img-thumbnail：添加一些内边距（pad...
Bootstrap中实现图片圆角效果
weixin_39037804的博客
09-20 2433
Bootstrap 对图片的支持。Bootstrap 提供了三个可对图片应用简单样式的 class： .img-rounded：添加 border-radius:6px 来获得图片圆角。 .img-c...
Bootstrap<基础六> 表单
03-18 112
Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。 表单布局 Bootstrap 提供了下列类型的表单布局： 垂直表单（默认） 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤： 向父 <form> 元素添加...
Bootstrap <基础五>表格
03-17 105
Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素： 标签描述 <table> 为表格添加基础样式。 <thead> 表格标题行的容器元素（<tr>），用来标识表格列。 <tbody> 表格主体中的表格行的容器元素（<tr>...
bootstrap 点击图片 弹框变大
05-22
通常，我们可以使用 `<img>` 标签，并添加必要的 Bootstrap 类来实现基础样式。例如： ```html <div class="container"> <div class="row"> <div class="col-md-6"> <img src="images/your-image.jpg" class=...
Bootstrap的图片轮播示例代码
09-03
`<ol class="carousel-indicators">`定义了指示器，`<div class="carousel-inner">`包含了三个`<div class="item">`，每个`item`内包含一个图片。左右导航箭头允许用户手动切换图片。 4. **示例二**： 这个简化的...
详解Bootstrap四种图片样式
09-02
在 Bootstrap 中，图片处理是其基础元素之一，通过预定义的 CSS 类，我们可以轻松地调整图片的样式，使其适应不同的设计需求。 Bootstrap 提供了四种图片样式类： 1. `.img-rounded`： 这个类添加了一个 `border-...
【React 】开发环境搭建详细指南
lph159的博客
07-24 1187
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
vue el-select的下拉树形结构 带检索功能
Jokerxiuka的博客
07-26 172
【代码】vue el-select的下拉树形结构。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 212
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
新手vue学习问题汇总（自用）（长期更新）
最新发布
lapiii的博客
07-28 253
是 ES6 模块语法，用于导出模块的默认成员。在 Vue.js 中，通常用来导出一个组件对象，使其可以在其他文件中被导入并使用。
Vue3可媲美Element Plus Tree组件实战之移除节点
felix_alone2012的博客
07-25 615
《Element Plus Tree - 自定义节点内容》示例中介绍了移除节点的用法，个人觉得作为提供给用户API，应该遵循迪米特法则，把功能实现的细节封装在组件内部，而提供给用户最简单的操作方式，同时在此基础上支持用户的扩展。因此，在API使用的人性化方便，个人觉得element plus做的并不优秀。为此，我们自定义tree组件时对用户API可以设计的更人性化些。
Angular由一个bug说起之八：实践中遇到的一个数据颗粒度的问题
KenkoTech的博客
07-24 749
之所以使用这种比较直接的方式是因为项目中的数据类型已经确定，而且对数字的处理逻辑没有统一在一个文件中。这是大型项目经常遇到的问题，起到相同作用的代码因为一些小的差别而分别写在管理各自功能的文件里。文件存入数据库，这样我们就可以统一维护一个表，不管是前端来处理数据还是后端来处理都能遵守相同的规则。针对这篇文章提到的数字缩写的问题，可以有两种处理方案。来展示数据的功能，这些数据根据不同的类型和单位会为其加上前缀、后缀或者省略小数。
<html> <head> <title>登录界面</title> <!-- 引入 Bootstrap --> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> .divForm{ position: absolute; width: 300px; height: 280px; top: 30%; left: 40%; margin-top: 1px; margin-left: 5px; } .title{ width:100%; height:50px; font-size:38px; line-height:50px; margin-bottom:20px; font-family: 华文宋体; color: cornflowerblue; } </style> </head> <body> <div class="divForm"> <form method="post" action="${pageContext.request.contextPath}/login/judgeLogin"> <div class="title" >   欢 迎 登 录</div> <div class="form-group has-success has-feedback"> <label class="control-label">  用户名：   <input type="text" class="form-control" name="userName" id="userName" autocomplete="off" placeholder="请输入用户名"> </label> </div> <div class="form-group has-success has-feedback"> <label class="control-label">  密码： <input type="password" class="form-control" name="userPwd" id="userPwd" autocomplete="off" placeholder="请输入密码"> </label> </div> <div > <a onclick="jumpRegister()">    注册账号</a>            <button type="submit" class="btn btn-primary">登录</button> </div> </form> </div> <script> function jumpRegister() { window.location = "${pageContext.request.contextPath}/register/index"; } </script> </body> </html>在此基础上添加一个图片背景
06-03
可以在样式中添加以下代码，以实现图片背景： ``` body { background-image: url("your_image_path"); background-size: cover; background-position: center; } ``` 其中，`your_image_path` 指的是你要添加的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值