文档章节

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

珲少
 珲少
发布于 2016/12/22 20:44
字数 489
阅读 29
收藏 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

© 著作权归作者所有

共有 人打赏支持
珲少

珲少

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

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

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

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

珲少
2016/12/27
101
0
Bootstrap响应式前端框架笔记十二——巨幕与缩略图

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

珲少
2016/12/14
232
0
Bootstrap响应式前端框架笔记九——输入框组

Bootstrap响应式前端框架笔记九——输入框组 将input标签与input-group-addon类组合使用可以为输入框添加前后挂件,需要注意,Bootstrap不支持在输入框控件一侧添加多个挂件,示例如下: 效果...

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

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

珲少
2016/12/13
58
0

没有更多内容

加载失败,请刷新页面

加载更多

设计模式之单例模式

单例模式核心:保证一个类只有一个对象 单例模式分为五种:懒汉式、饿汉式、双重检测锁式、静态内部类式、枚举式 五种模式的特点:懒汉式---线程安全,调用效率高,不能延时加载 饿汉式---线...

森林之下
8分钟前
0
0
markdown语法

这篇博客是本人在使用markdown语法过程中,用于记录一些自己总是会忘记的语法,并且会持续更新; 如何增加批注/备注:>; 这是一条备注/引言 如何手动换行,行末两次空格;

BlackCanary
9分钟前
0
0
redis 设置外网可访问

前提是你已经把redis的端口放到了防火墙计划中,  /sbin/iptables -I INPUT -p tcp --dport 6379 -j ACCEPT /etc/rc.d/init.d/iptables save 更改redis.conf 文件 bind 127.0.0.1prot...

时刻在奔跑
11分钟前
0
0
css3隐藏滚动条

chrome 和Safari .element::-webkit-scrollbar { width: 0 } IE 10+ .element { -ms-overflow-style: none; } Firefox .element { overflow: -moz-scrollbars-none; } firefox这个没试过~啦啦......

呵呵闯
27分钟前
0
0
Poco官方PPT_020-ErrorHandlingAndDebugging双语对照翻译

因工作需要用到这一块的功能,所以直接翻译了一下 此PPT来源于官方文件,地址https://pocoproject.org/documentation.html

CHONGCHEN
31分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部