专栏首页一“技”之长Bootstrap响应式前端框架笔记十五——面板与井

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Bootstrap响应式前端框架笔记十三——警告框与进度条

        在Bootstrap中,使用alert相关类可以实现简洁的警告框控件,示例如下:

    珲少
  • Bootstrap响应式前端框架笔记十二——巨幕与缩略图

        巨幕用于创建一块区域,此区域可以用来展示网页页头或者需要重点提示的地方,使用jumbotron类来创建巨幕,示例如下:

    珲少
  • iOS开发之AdSupport框架使用

        AdSupport从字面意思上理解是用来进行广告支持,这个框架十分简单,里面只有一个类,类中只有一个方法和两个属性。

    珲少
  • bootstrap 面板

    <div class="panel panel-default"> <div class="panel-body"> 这是一个基本的面板 </div> ...

    用户5760343
  • bootstrap collapse

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <m...

    用户5760343
  • bootstrap 面板 常用样式

    <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel...

    用户5760343
  • [前端][css]float left布局换行不正常问题

    最近遇到一个页面布局上的问题,后来模拟了一下还原了下出现的原因。本来大概想实现的布局大概是这样的

    Tuzei
  • Python爬虫获取豆瓣电影并写入excel

    这篇文章主要介绍了Python爬虫获取豆瓣电影并写入excel ,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考...

    python学习教程
  • Position定位

    CSS中position属性是比较常用的元素定位方案,position常用的取值有static、relative、absolute、fixed、sticky、i...

    WindrunnerMax
  • 块级格式化上下文

    BFC块级格式化上下文Block Formatting Context,是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元...

    WindrunnerMax

扫码关注云+社区

领取腾讯云代金券