Bootstrap <基础八>图片

简介: 原文:Bootstrap 图片 Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来获得图片圆角。 .img-circle:添加 border-radius:500px 来让整个图片变成圆形。
原文: 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="/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">

 
目录
相关文章
|
7月前
|
前端开发
|
4天前
|
前端开发
BootStrap 5 保姆级教程(三):表格 & 图片
BootStrap 5 保姆级教程(三):表格 & 图片
|
8月前
|
前端开发 JavaScript
Bootstrap 图片样式
Bootstrap 图片样式
30 0
|
前端开发
解决BootStrap轮播图片中图片大小和父div不一致问题
解决BootStrap轮播图片中图片大小和父div不一致问题
636 0
解决BootStrap轮播图片中图片大小和父div不一致问题
|
前端开发 Java Python
Bootstrap学习笔记3--图片样式
看到他们一个个的编辑器用起来感觉好炫酷,心想一定要找个最最最适合自己的软件。抱着这种心态把所有编辑器轮流安装用了一圈。可安装完才想起来,公司最近查的紧,严禁使用未申报的软件,回过头来还是接着用Sublime Text3吧...
138 0
|
前端开发 容器
【BootStrap】图片样式、辅助类样式和CSS组件 -附源码(2)
【BootStrap】图片样式、辅助类样式和CSS组件 -附源码
107 0
【BootStrap】图片样式、辅助类样式和CSS组件 -附源码(2)
|
前端开发
【BootStrap】图片样式、辅助类样式和CSS组件 -附源码(1)
【BootStrap】图片样式、辅助类样式和CSS组件 -附源码
180 0
【BootStrap】图片样式、辅助类样式和CSS组件 -附源码(1)
|
开发框架 前端开发 测试技术
17-Bootstrap 全局 css 样式-图片,响应式工具|学习笔记
快速学习17-Bootstrap 全局 css 样式-图片,响应式工具
117 0
|
前端开发 开发者
Bootstrap响应式前端框架笔记六——图片与其他辅助类
Bootstrap响应式前端框架笔记六——图片与其他辅助类
253 0
Bootstrap响应式前端框架笔记六——图片与其他辅助类
|
前端开发
Bootstrap系列 -- 23. 图片
     图像在网页制作中也是常要用到的元素,在Bootstrap框架中对于图像的样式风格提供以下几种风格:   1、img-responsive:响应式图片,主要针对于响应式设计  2、img-rounded:圆角图片  3、img-circle:圆形图片  4、img-thumbnai...
793 0

热门文章

最新文章