Bootstrap中实现图片圆角效果

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

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

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.    <title>Bootstrap 实例 - 图像</title>  
  5.    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">  
  6.    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>  
  7.    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>  
  8. </head>  
  9. <body>  
  10.   
  11. <img src="/wp-content/uploads/2014/06/download.png"   
  12.    class="img-rounded">  
  13. <img src="/wp-content/uploads/2014/06/download.png"   
  14.    class="img-circle">  
  15. <img src="/wp-content/uploads/2014/06/download.png"   
  16.    class="img-thumbnail">  
  17. </body>  
  18. </html>    

       

 显示结果如下：

<img> 类
以下类可用于任何图片中。
.img-rounded 为图片添加圆角 (IE8 不支持)
.img-circle 将图片变为圆形 (IE8 不支持)
.img-thumbnail 缩略图功能
.img-responsive 图片响应式 (将很好地扩展到父元素)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/367646.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

java 唯一索引冲突_JPA merge联合唯一索引无效问题解决方案

java 唯一索引冲突_JPA merge联合唯一索引无效问题解决方案

问题JPA的merge()操作 是合并的意思&#xff0c;就是当保存的实体时&#xff0c;根据主键id划分&#xff0c;如果已存在&#xff0c;那么就是更新操作&#xff0c;如果不存在&#xff0c;就是新增操作但是这个仅针对 主键id 划分&#xff0c;对联合唯一索引 无效&#xff0c;两…
阅读更多...
Spring MVC测试框架入门–第1部分

Spring MVC测试框架入门–第1部分

最新推出的主要Spring框架是Spring MVC测试框架&#xff0c;Spring Guys声称它是“一流的JUnit支持&#xff0c;可通过流畅的API测试客户端和服务器端Spring MVC代码” 1 。 在这个博客以及下一个博客中&#xff0c;我将看一看Spring的MVC测试框架&#xff0c;并将其应用于我现…
阅读更多...
metaclass

metaclass

用metaclass来指定类C的元类是MyTypeclass MyType:def __init__(cls, *args, **kwargs):print(here!)#由于metaclassMyType&#xff0c;所以执行到这一步的时候&#xff0c;会调用MyType的构造函数 class C(metaclassMyType):def __init__(self):pass对象后面跟()&#xff0c;是…
阅读更多...
Bootstrap中的条纹进度条使用案例

Bootstrap中的条纹进度条使用案例

创建一个条纹的进度条的步骤如下&#xff1a;1.添加一个带有 class .progress 和 .progress-striped 的 <div>2.接着在上面的 <div> 内&#xff0c;添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中&#xff0c;* 可以是succes…
阅读更多...
LM拟合算法

LM拟合算法

一、 Levenberg-Marquardt算法 &#xff08;1&#xff09;ya*e.^(-b*x)形式拟合 clear all % 计算函数f的雅克比矩阵&#xff0c;是解析式 syms a b y x real; fa*exp(-b*x); Jsymjacobian(f,[a b]); % 拟合用数据。参见《数学试验》&#xff0c;p190&#xff0c;例2 % data_1…
阅读更多...
java的前生今世_HBaseGC的前生今世－身世篇

java的前生今世_HBaseGC的前生今世－身世篇

网易视频云是网易倾力打造的一款基于云计算的分布式多媒体处理集群和专业音视频技术&#xff0c;提供稳定流畅、低时延、高并发的视频直播、录制、存储、转码及点播等音视频的PAAS服务&#xff0c;在线教育、远程医疗、娱乐秀网易视频云是网易倾力打造的一款基于云计算的分布式…
阅读更多...
CapeDwarf – Java EE上的Google App Engine

CapeDwarf – Java EE上的Google App Engine

我有很多爱好。 从早期的Java EE规范一路走来&#xff0c;并通过Java EE 7进行了“云”之旅&#xff0c;我很好奇看到新宣布的CapeDwarf项目有哪些库存&#xff0c;可以在内部引入Google的平台即服务&#xff0c;提供“ Google App Engine ” 。 到目前为止的故事 我确实使用了…
阅读更多...
windows 服务中托管asp.net core

windows 服务中托管asp.net core

在windows 服务中托管asp.net core SDK 2.1.300 官方示例 1、添加运行标识符xml <PropertyGroup> <TargetFramework>netcoreapp2.1</TargetFramework> <RuntimeIdentifier>win7-x64</RuntimeIdentifier> </PropertyGroup> 2、添加包引用 d…
阅读更多...
Bootstrap插件之-按钮插件

Bootstrap插件之-按钮插件

按钮 button.js 按钮的功能很丰富。通过控制按钮的状态或创建一组按钮并形成一些新的组件&#xff0c;例如工具条。 跨浏览器兼容性 在页面多次加载之间&#xff0c;Firefox 仍然保持表单控件的状态&#xff08;禁用状态和选择状态&#xff09;。一个解决办法是设置autocomplet…
阅读更多...
第二周读书笔记——《构建之法》

第二周读书笔记——《构建之法》

【对一些实例的看法】 “我写了二叉树的遍历算法实现&#xff0c;在这里&#xff0c;二叉树是数据结构&#xff0c;遍历的实现细节是算法。C程序就是结果。但是这个程序有什么实际用处呢&#xff1f;在Java和其他一些语言中&#xff0c;似乎没有指针&#xff0c;那我可以不必了…
阅读更多...
java springmvc 数据库事务_事务的简单回顾_JavaEE框架(Maven+SpringMvc+Spring+MyBatis)全程实战教程_Java视频-51CTO学院...

java springmvc 数据库事务_事务的简单回顾_JavaEE框架(Maven+SpringMvc+Spring+MyBatis)全程实战教程_Java视频-51CTO学院...

SpringMVCSpring MVC属于SpringFrameWork的后续产品&#xff0c;已经融合在Spring Web Flow里面。Spring MVC 分离了控制器、模型对象、分派器以及处理程序对象的角色&#xff0c;这种分离让它们更容易进行定制。SpringSpring是一个开源框架&#xff0c;Spring是于2003 年兴起的…
阅读更多...
异步重试模式

异步重试模式

当您有一段经常失败且必须重试的代码时&#xff0c;此Java 7/8库提供了丰富且不引人注目的API&#xff0c;并提供了针对此问题的快速且可扩展的解决方案&#xff1a; ScheduledExecutorService scheduler Executors.newSingleThreadScheduledExecutor(); RetryExecutor execu…
阅读更多...
前端 ---jQuery的补充

前端 ---jQuery的补充

15-jQuery补充 jquery内容补充 jquery除了咱们上面讲解的常用知识点之外&#xff0c;还有jquery 插件、jqueryUI知识点 jqueryUI 官网&#xff1a; https://jqueryui.com/ jqueryUI 中文网&#xff1a; http://www.jqueryui.org.cn/ jquery插件内容包含 官网demo&#xff1a; h…
阅读更多...
[软件工程]自我介绍----一个小菜鸡的自我介绍(C++版 手动偷笑~)

[软件工程]自我介绍----一个小菜鸡的自我介绍(C++版 手动偷笑~)

#include “iostream” using namespace std; class Lee : protected MyMother,protected MyFather { private:string ChineseName("李怡龙");string EnglishName("Lee");int age 20;string university("青海大学计算机系");string level("…
阅读更多...
用Java编写Hadoop MapReduce任务

用Java编写Hadoop MapReduce任务

尽管Hadoop框架本身是使用Java创建的&#xff0c;但MapReduce作业可以用许多不同的语言编写。 在本文中&#xff0c;我将展示如何像其他Java项目一样&#xff0c;基于Maven项目在Java中创建MapReduce作业。 准备示例输入 让我们从一个虚构的商业案例开始。 在这种情况下&#…
阅读更多...
java 大二学期总结报告_大二学生自我总结「」

java 大二学期总结报告_大二学生自我总结「」

大二学生导师工作总结转眼间&#xff0c;我们的大二学年就这样结束了&#xff0c;在迎接新的一学期前我们来写一份自我总结吧。下面是小编搜集整理的大二学生自我总结&#xff0c;欢迎阅读。更多资讯尽在自我总结栏目!大二学生自我总结回顾大学二年,通过良师的教导和自身的刻苦…
阅读更多...
windows下揪出java程序占用cpu很高的线程

windows下揪出java程序占用cpu很高的线程

背景 天天搞java&#xff0c;这些监控也都知道&#xff0c;用过&#xff0c;但也没往细里追究。因为也没碰见这种问题&#xff0c;这次还是静下来走一遍流程吧。与网上基本一致&#xff0c;不过我区分了下linux和windows的不一样。我感觉基本是程序写成死循环了或者大对象分配多…
阅读更多...
jquery -input事件

jquery -input事件

input输入框的change事件&#xff0c;要在input失去焦点的时候才会触发 $(input[namemyInput]).change(function() { ... }); 在输入框内容变化的时候不会触发change&#xff0c;当鼠标在其他地方点一下才会触发用下面的方法会生效&#xff0c;input [html] view plain copy$(&…
阅读更多...
Bootstrap中的下拉列表

Bootstrap中的下拉列表

下拉列表&#xff08;select&#xff09;注意&#xff0c;很多原生选择菜单单 - 即在 Safari 和 Chrome 中 - 的圆角是无法通过修改 border-radius 属性来改变的。复制<select class"form-control"><option>1</option><option>2</option&…
阅读更多...
Spring集成：轻量级集成方法

Spring集成：轻量级集成方法

当今的应用程序希望能够访问企业环境中的所有业务&#xff0c;而无需考虑与绝望的系统无缝集成的应用程序技术。 可以通过使用中间件技术对各种系统进行布线来实现这种集成。 集成平台使应用程序可以相互共享信息的环境&#xff0c;从而使体系结构具有高度的互操作性。 Spring…
阅读更多...
最新文章

Copyright @ 2022~2023