bootstrap 学习笔记(5)---- 图片和响应式工具
(一)响应式图片:
在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive
类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;
、 height: auto;
和 display: block;
属性,从而让图片在其父元素中更好的缩放。
注意:如果需要让使用了 .img-responsive
类的图片水平居中,请使用 .center-block
类,不要用 .text-center
代码:<img src="..." class="img-responsive" alt="Responsive image">
2、
图片形状:通过为 <img>
元素添加以下相应的类,可以让图片呈现不同的形状。
跨浏览器兼容性 请时刻牢记:Internet Explorer 8 不支持 CSS3 中的圆角属性。
代码:<img src="..." alt="..." class="img-rounded">( 带弧度的正方形)
<img src="..." alt="..." class="img-circle">(圆形)
<img src="..." alt="..." class="img-thumbnail">(有边框的圆形,这个图片要生效必须设置图片有颜色,才能显示出来)
3、辅助类
a 情景文本颜色:通过颜色来展示意图,bootstrap提供了一组工具类。这个类可以应用于链接,并且在鼠标经过时颜色还可以加深,就像默认的链接一样。
代码:<p class="text-muted">...</p>
类名有:.text-muted .text-primary .text-success .text-info .text-warning .text-danger
b 背景颜色:和情境文本颜色类一样,使用任意背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深,就像上面所讲的文本颜色类一样。
类名有:.bg-primary .bg-success .bg-info .bg-warning .bg-danger
c 关闭按钮:通过使用一个象征关闭的图标,可以让模态框和警告框消失。
代码:<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
d 三角符号 : 通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意,向上弹出式菜单中的三角符号是反方向的。
代码:<span class="caret"></span>
e 清除浮动 通过为父元素添加 .clearfix
类可以很容易地清除浮动(float
)。这里所使用的是 Nicolas Gallagher 创造的 micro clearfix 方式。此类还可以作为 mixin 使用。
代码:<div class="clearfix">...</div>
f 隐藏和显示 .show .hidden
(二)响应式工具
.img-responsive .table-responsive 是两个响应式表格和响应式图片的类。
bootstrap 学习笔记(5)---- 图片和响应式工具的更多相关文章
- Bootstrap学习笔记(8)--响应式导航栏
说明: 1. 响应式导航栏,就是右上角的三道杠,点一下下方出现隐藏的导航栏.如果屏幕够大就显示所有的导航选项,如果屏幕小比如手机,就显示部分,剩下的放到三道杠里隐藏. 2. 外面套一个大的div,其实 ...
- Bootstrap(6)辅组类和响应式工具
一.辅助类 Bootstrap 在布局方面提供了一些细小的辅组样式,用于文字颜色以及背景色的设置.显示关闭图标等等. 1.情景文本颜色 各种色调的字体 <p class="text-m ...
- 学习笔记1--响应式网页+Bootstrap起步+全局CSS样式
一.学习之前要了解一些背景知识: 在2g时代,3g时代,4g时代,早期的网页浏览设备,功能机,智能机.(本人最喜欢的透明肌,和古典黑莓机) 1.什么是响应式网页? Responsive Web Pag ...
- bootstrap快速入门笔记(九)-响应式工具
一,可用的类 超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面 (≥992px) 大屏幕桌面 (≥1200px) .visible-xs-* 可见 隐藏 隐藏 隐藏 ...
- Bootstrap学习笔记1
Bootstrap在线手册 http://v3.bootcss.com,这里有详细的说明.参考.示例. Bootstrap为许多前端常用的功能都做了封装.预定义,可以直接使用. Bootstrap支持 ...
- 第二百三十六节,Bootstrap辅组类和响应式工具
Bootstrap辅组类和响应式工具 学习要点: 1.辅组类 2.响应式工具 本节课我们主要学习一下 Bootstrap 的辅组类和响应式工具,辅助类提供了一组类来辅 组页面设计,而响应式工具则利用媒 ...
- Bootstrap学习笔记系列5------Bootstrap图片显示
通过添加一下的class来实现bootstrap对图片的支持 img-round 通过border-radius:6px 来获得图片圆角 img-circle 通过border-radius:50%来 ...
- Bootstrap图片支持响应式
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 图片:响应式图片
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- cocos2d-x step by step(2) 鼠标事件,键盘事件,等等事件
各种小控件加载进去了,那么问题来了,这些东西如何接受事件呢? good job,let us find the answer 首先我们去看文档,官方尼玛有好多文档,而且大,全,详细,感觉还是不错的 h ...
- Redis 数据结构解析和命令指南
命令參考文档:redis commands - 你或许已经知道Redis并非简单的key-value存储.实际上他是一个数据结构server.支持不同类型的值. 也就是说.你不必只把字符串当作键所指向 ...
- hdu 5389 Zero Escape (dp)
题目:http://acm.hdu.edu.cn/showproblem.php? pid=5389 题意:定义数根:①把每一位上的数字加起来得到一个新的数,②反复①直到得到的数仅仅有1位.给定n,A ...
- PPAPI插件的动态创建、改动、删除
一旦你完毕了PPAPI插件的开发,实际使用时可能会有下列需求: 动态创建PPAPI插件 删除PPAPI插件 改变PPAPI插件的尺寸 实现起来非常easy,从JS里直接訪问DOM(BOM)就可以.以下 ...
- sql 表的部分字段查找 的结果集
传统sql从多个对象中获得的list<Object> ,可以这样处理(利用Map) List list = query.getList(sql); //封装成BB类型 List< ...
- Solaris Samba服务器与DNS服务
用于文件传输的协议,类似于ftp,ssh,只是它比其他两个好用. Samba协议 NetBIOS :一种编程接口. SMB:server message block .主要作为Microsoft网络通 ...
- 简单理解javascript中的原型对象,实现对之间共享属性和行为
javascript中提供了构造函数.可以方便的创建对象. 典型的构造函数例如以下: function Person(name, age) { this.name = name; this.age = ...
- vs2012停止调试长时间不响应问题解决方法
在vs2012命令提示符下,运行devenv.exe /resetuserdata又一次设置下环境解决.
- 小printf的故事:什么是真正的程序员?
http://kb.cnblogs.com/page/570194/ 作者: 削微寒 来源: 博客园 发布时间: 2017-06-06 10:03 阅读: 33004 次 推荐: 98 原 ...
- 如何设置快捷键(File Search)
window->preferences->General->keys. 找到File Search(有搜索框的,可以搜索),然后在下方 Binding按下ctrl +h .