bootstrap -- css -- 图片
图片样式
.img-rounded:添加 border-radius:6px 来获得图片圆角
.img-circle:添加 border-radius:500px 来让整个图片变成圆形。
img-circle优先级高于img-rounded
<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"> </body>
图片边框
.img-thumbnail:添加一些内边距(padding)和一个灰色的边框。
<img src="/wp-content/uploads/2014/06/download.png"
class="img-rounded img-thumbnail">
<img src="/wp-content/uploads/2014/06/download.png"
class="img-circle img-thumbnail">
图片自适应
img-responsive:让图片支持响应式设计。 图片将很好地扩展到父元素。(图片可随页面大小自动调整宽度)
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
<img src="cinqueterre.jpg" class="img-circle img-thumbnail img-responsive" alt="Cinque Terre" width="304" height="236">
bootstrap -- css -- 图片的更多相关文章
- Bootstrap CSS概览代码文字标注篇
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- (二)Bootstrap CSS 概览
在这一章中,我们将讲解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML 5 文档类型(Doctype) Bootstrap 使用了一些 H ...
- 3.Bootstrap CSS 概述
1.HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 ...
- 2.Bootstrap CSS
Bootstrap CSS 一.Bootstrap CSS概览 移动设备优先 移动设备优先是 Bootstrap 3 的最显著的变化. 在之前的 Bootstrap 版本中(直到 2.x),您需要手动 ...
- Bootstrap 实现图片翻滚
今天给大家带来的是Bootstrap 实现的图片翻滚 效果图如下 点击左右箭头可以实现向左向右转动,这个功能在Bootstrap 官网和菜鸟教程上都有讲解,有点bootstrap基础的都能看明白 ,这 ...
- Bootstrap.css 中请求googleapis.com/css?family 备忘录
问题描述: Web中引入bootstrap.css中头部有访问Google服务器的请求 @import url("//fonts.googleapis.com/css?family=Open ...
- Bootstrap CSS 栅格、代码和表格
一.bootstrap栅格 Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. Bootstrap 网格系统(G ...
- 几种垂直居中的方式及CSS图片替换技术
由于块级元素的高度是可以设置的,所以对于块级元素的垂直居中比较简单. 方法一: 在不定高的情况下,把元素的上下内边距设为同一个值即可实现,即padding :10px 0; 以上方法针对块级元素和 ...
- 利用bootstrap写图片轮播
利用bootstrap写图片轮播 缺点是轮播没有固定样式图片样式会改变外框的大小,所以要再设置 以及左右按钮的style也要从新设置 <div class="carousel slid ...
随机推荐
- python新手中常见疑惑及解答
1 lambda函数 函数格式是lambda keys:express 匿名函数lambda是一个表达式函数,接受keys参数,返回表达式的值.所以不用return,也没有函数名,经常用在需要ke ...
- MATLAB(3)——GUI界面设计入门
作者:桂. 时间:2017-03-01 18:43:35 链接:http://www.cnblogs.com/xingshansi/articles/6485688.html 声明:转载请注明出处, ...
- wxWidgets编程起步
開始学习wxWidgets,上一篇写了"安装wxWidgets遭遇的两大关卡"(简称"前文"). 先推荐一下这两天找到的学习材料. 博客中有一个系列教程,貌似作 ...
- if else 的或(||)
= "node01" ]; then ssh -p2222 root@.xx.xx.xxx else echo "hello world" #当$=='node ...
- C++范围解析运算符::的使用
1.范围解析运算符的作用范围解析运算符 :: 用于标识不同范围内使用的标识符. 2.范围解析运算符的使用1)用于命名空间和类 namespace NamespaceA{ int x; class Cl ...
- 每日英语:For Michael Dell, Saving His Deal Is Just First Step
Michael Dell is set to win a bruising, yearlong battle for control of his company. His next task -- ...
- 关于Snmp的Trap代码开发之坑
最近是被这个snmp的trap给坑了,其实回想起来主要是对这个不了解.特别是对snmp协议研究不够深入, 真的不想看这些协议东西,只想大概知道.结果在开发snmp trap时候被坑了,下面列下自己踩到 ...
- CentOS 7 开放防火墙端口 命令
iptables防火墙 1.基本操作 # 查看防火墙状态 service iptables status # 停止防火墙 service iptables stop # 启动防火墙 servi ...
- mysql linux 区分大小写
查看大小写区分 mysql> show variables like "%case%"; +------------------------+-------+ | Varia ...
- SQLAlchemy数据库连接和初始化数据库
查看版本 >>> import sqlalchemy >>> sqlalchemy.__version__ '1.0.9' 创建连接 from sqlclachem ...