文档章节

Bootstrap响应式前端框架笔记十五——面板与井

珲少
 珲少
发布于 2016/12/22 20:44
字数 489
阅读 36
收藏 0

Bootstrap响应式前端框架笔记十五——面板与井

    Bootstrap中的面板由pannel相关类来创建,一个完整的面板分为面板头部、面板体和面板注脚,并且Bootstrap中默认定义了一些面板风格,示例如下:

<p>标准样式的面板</p>
			<div class="panel panel-default">
				<div class="panel-heading">
					面板标题
				</div>
				<div class="panel-body">
					面板内容.........
				</div>
				<div class="panel-footer">
					面板注脚..........
				</div>
			</div>
			<div class="panel panel-primary">
				<div class="panel-heading">
					面板标题
				</div>
				<div class="panel-body">
					面板内容.........
				</div>
				<div class="panel-footer">
					面板注脚..........
				</div>
			</div>
			<div class="panel panel-success">
				<div class="panel-heading">
					面板标题
				</div>
				<div class="panel-body">
					面板内容.........
				</div>
				<div class="panel-footer">
					面板注脚..........
				</div>
			</div>
			<div class="panel panel-info">
				<div class="panel-heading">
					面板标题
				</div>
				<div class="panel-body">
					面板内容.........
				</div>
				<div class="panel-footer">
					面板注脚..........
				</div>
			</div>
			<div class="panel panel-warning">
				<div class="panel-heading">
					面板标题
				</div>
				<div class="panel-body">
					面板内容.........
				</div>
				<div class="panel-footer">
					面板注脚..........
				</div>
			</div>
			<div class="panel panel-danger">
				<div class="panel-heading">
					面板标题
				</div>
				<div class="panel-body">
					面板内容.........
				</div>
				<div class="panel-footer">
					面板注脚..........
				</div>
			</div>

效果如下:

面板中也可以追加列表组,是的面板更具扩展性,示例如下:

        <p>在面板中追加列表组</p>
		<div class="panel panel-danger">
				<div class="panel-heading">
					面板标题
				</div>
				<div class="panel-body">
					面板内容.........
				</div>
				<div class="list-group">
					<div class="list-group-item">数据</div>
					<div class="list-group-item">数据</div>
					<div class="list-group-item">数据</div>
					<div class="list-group-item">数据</div>
				</div>
			</div>

效果如下:

    Bootstrap中还定义了一种样式Well,其效果类似嵌入界面内,示例如下:

			<p>Well效果</p>
			<div class="well">
				这里是内容!!!!!!!
			</div>

效果如下:

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

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

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

© 著作权归作者所有

共有 人打赏支持
珲少

珲少

粉丝 862
博文 386
码字总数 463183
作品 0
上海
iOS工程师
私信 提问
十大前端开发框架(上)

本文由伯乐在线 -厉瑶 翻译。未经许可,禁止转载! 英文出处:site point。欢迎加入翻译组。 编者按:考虑到英文原文的长度以及可读性,十大前端开发框架将分成上下两部分呈现给大家。上半部...

伯乐在线
2013/07/16
0
0
Bootstrap响应式前端框架笔记十七——下拉列表交互

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

珲少
2016/12/27
101
0
Bootstrap响应式前端框架笔记五——按钮

Bootstrap响应式前端框架笔记五——按钮 Bootstrap中预设了default,primary,info,warning,danger和link6种按钮风格,示例如下: 效果如下: 可以为按钮元素添加btn-lg,btn-sm,btn-xs类...

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

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

珲少
2016/12/13
58
0
Bootstrap响应式前端框架笔记十四——媒体对象与列表组

Bootstrap响应式前端框架笔记十四——媒体对象与列表组 在移动开发中经常会使用到列表,使用媒体对象可以方便的创建列表中每一行元素,常规的媒体对象实例如下:

珲少
2016/12/20
51
0

没有更多内容

加载失败,请刷新页面

加载更多

Docker的系统资源限制及验证

1 、限制容器的资源 默认情况下, 容器没有资源限制 ,可以使用主机内核调度程序允许的尽可能多的给定资源。 Docker 提供了控制容器可以 使用多少内存或 CPU 的方法 ,设置 docker run 命令的...

微笑向暖wx
15分钟前
1
0
Redis5.0之Stream案例应用解读

非常高兴有机会和大家在这里交流Redis5.0之Stream应用。今天的分享更多的是一个抛砖引玉,欢迎大家提出更多关于Redis的思考。 首先,我们来个假设,这里有个杯子,这个杯子是去年我老婆送的,...

中间件小哥
16分钟前
1
0
阿里开发者们的第20个感悟:好的工程师为人写代码,而不仅是为编译器

1月17日,好的工程师为人写代码,而不仅是为编译器。这是我们送给开发者的第20个感悟。 李响,作为开源项目etcd作者更为开发者所熟知。etcd是2013年由李响,Brandon Philips, Alex Polvi 所发...

阿里云官方博客
17分钟前
1
0
Linux vmstat命令详解

导读 Linux命令千千万,而我们在日常工作中真真切切用到的命令应该不超过50个,在接下来的日子里,我会对我经常使用的命令,以及使用过程中不熟悉的命令进行一个总结,一是自我总结,加深记忆...

问题终结者
17分钟前
1
0
MacOS Docker安装及使用

MacOS Docker 安装 Homebrew 安装 macOS 我们可以使用 Homebrew 来安装 Docker。 Homebrew 的 Cask 已经支持 Docker for Mac,因此可以很方便的使用 Homebrew Cask 来进行安装: # 安装命令...

火力全開
18分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部