文档章节

Bootstrap响应式前端框架笔记六——图片与其他辅助类

珲少
 珲少
发布于 2016/12/08 16:12
字数 554
阅读 41
收藏 1

Bootstrap响应式前端框架笔记六——图片与其他辅助类

    在页面中插入图片,Bootstrap框架中定义了3中图片的Css类样式,分别为圆角图片img-rounded类,圆形图片img-circle类和带边框的图片img-thumbnail类,示例如下:

		<p>设置img-rounded类可以使图片显示圆角,img-circle类可以使图片显示圆形,img-thumbnail可以为图片加上边框</p>
		<img src="image/test.png" class="img-rounded" />
		<img src="image/test.png" class="img-circle" />
		<img src="image/test.png" class="img-thumbnail" />

效果如下图所示:

    text-xxx相关类定义了一些常用的字体颜色,示例如下:

		<p class="text-muted">正常文字</p>
		<p class="text-primary">重要文字</p>
		<p class="text-success">成功文字</p>
		<p class="text-info">详情文字</p>
		<p class="text-warning">警告文字</p>
		<p class="text-danger">危险文字</p>

效果如下图所示:

与上面文字颜色的类相对应,Bootstrap中也定义了一组背景颜色类,示例如下:

		<p class="bg-muted">正常背景</p>
		<p class="bg-primary">重要背景</p>
		<p class="bg-success">成功背景</p>
		<p class="bg-info">详情背景</p>
		<p class="bg-warning">警告背景</p>
		<p class="bg-danger">危险背景</p>

效果如下:

使用caret类可以方便的创建倒三角图案,示例如下:

		<p>使用caret类可以创建一个倒三角图案</p>
		<span class="caret"></span>

效果如下:

使用show和hidden类可以进行标签的显示与隐藏,示例如下:

		<p class="hidden">show和hidden可以进行便签的显示与隐藏</p>

Bootstrap中还提供了一些与响应类开发相关的类,开发者可以设置某些元素在某个尺寸的屏幕中可见或者隐藏,也可以设置某个元素在浏览器或打印机上可见或隐藏,如下:

屏幕尺寸响应式类:

显示设备响应式类:

   另外,本篇博客中所有的实例代码及显示效果,在如下地址中,需要的可以自行对照学习。

http://zyhshao.github.io/bootStrapDemo/images.html

前端学习新人,有志同道合的朋友,欢迎交流与指导,QQ群:541458536

© 著作权归作者所有

共有 人打赏支持
珲少

珲少

粉丝 844
博文 380
码字总数 447278
作品 0
上海
iOS工程师
Bootstrap响应式前端框架笔记十二——巨幕与缩略图

Bootstrap响应式前端框架笔记十二——巨幕与缩略图 巨幕用于创建一块区域,此区域可以用来展示网页页头或者需要重点提示的地方,使用jumbotron类来创建巨幕,示例如下: 效果如下: 除了使用...

珲少
2016/12/14
232
0
十大前端开发框架(下)

本文由伯乐在线 -厉瑶 翻译。未经许可,禁止转载! 英文出处:Site Point。欢迎加入翻译组。 在《十大前端开发框架(上)》中我们了解了跟Bootstrap相关的一系列前端开发框架,如果你对于Boo...

伯乐在线
2013/07/01
0
0
Bootstrap响应式前端框架笔记十五——面板与井

Bootstrap响应式前端框架笔记十五——面板与井 Bootstrap中的面板由pannel相关类来创建,一个完整的面板分为面板头部、面板体和面板注脚,并且Bootstrap中默认定义了一些面板风格,示例如下:...

珲少
2016/12/22
22
0
Bootstrap响应式前端框架笔记十七——下拉列表交互

Bootstrap响应式前端框架笔记十七——下拉列表交互 为dropdown-toggle类添加data-toggle="dropdown"属性可以实现其下拉列表功能的绑定,示例如下: 点击此按钮后,可以自动实现下拉列表的显示...

珲少
2016/12/27
101
0
Bootstrap响应式前端框架笔记十一——分页与标签

Bootstrap响应式前端框架笔记十一——分页与标签 在开发搜索结果页、列表页时通常会使用到分页器控件,Bootstrap中提供了方便的类来进行分页器的创建,示例如下: 效果如下: 为li元素添加d...

珲少
2016/12/13
58
0

没有更多内容

加载失败,请刷新页面

加载更多

Bytom资产发行与部署合约教程

比原项目仓库: Github地址:https://github.com/Bytom/bytom Gitee地址:https://gitee.com/BytomBlockchain/bytom 发行资产 在比原链上发行资产比较方便快捷,使用节点的dashboard图形界面...

比原链Bytom
12分钟前
0
0
Ext ComboBox 实现下拉多选,全选,反选

Ext ComboBox下拉选中-全选反选逻辑处理 Ext ComboBox 实现下拉多选,全选,反选 方法一: 代码 var me = this;var isMultiSelect = true;//是否设置为下拉多选me.selectValues = [];//保存...

javaART
15分钟前
0
0
Swoole Windows 版(4.2.1)

https://pan.baidu.com/s/1uTm77_cp4kn0_xMgO1DpIw Swoole Windows 版(内部版本,swoole-4.2.1,php-7.1,必须为64位系统,Win7或更高版本)。 解压后,将 $dir/bin 目录,设置到 系统的环境...

老查
17分钟前
0
0
美团点评上市受追捧,成中国第四大互联网企业

从建立到上市,蔚来用了不到4年,拼多多3年,趣头条更是仅用了2年3个月。在这波中概股上市浪潮中,等待了漫长8年的美团点评也终于迎来登陆资本市场的时刻。20日上午,美团创始人兼CEO王兴终于...

Mr_zebra
18分钟前
0
0
Mysql-mybatis批量插入

话不多说直接上代码吧 <insert id="batchSave" >insert into table_name (`name`,age)values<foreach collection="list" index="index" item="item" open="(" separator="," close=......

落叶清风
24分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部