Bootstrap面板使用方法


Posted in Javascript onJanuary 16, 2017

面板样式是在很多种情况下都可能会使用到的样式之一,例如博客的侧边栏、企业网站的公告栏、栏目列表等。

面板样式除了内容之外,还有一个面板头部可以添加标题,让我们通过这篇文章看看Bootstrap面板样式的使用方法。

Bootstrap面板基本样式

直接调用面板样式也非常容易,只需要通过以下代码即可实现:

<div class="panel panel-default">
 <div class="panel-body">
  Basic panel example
 </div>
</div>

该样式仅仅包含了面板样式的内容部分,而没有加入头部,适用于不需要头部的面板内容。

Bootstrap面板带标题样式

上面提到的面板样式是没有带标题的,在一些情况下不够用,所以Bootstrap面板还提供了带有标题的面板样式,让我们看看应该怎么去使用:

<div class="panel panel-default">
 <div class="panel-heading">
  <h3 class="panel-title">面板标题</h3>
 </div>
 <div class="panel-body">
  面板内容
 </div>
</div>

上面这一部分代码是最为标准的带有标题的面板结构,为了适应阅读设备以及SEO搜索引擎优化元素,最好将标题放入h1-h5的标签中。

Bootstrap面板带注脚样式

如果一些解释说明类的文字无法在面板标题很好地表现出来,可以通过注脚的形式来进行说明,Bootstrap面板同样提供了注脚这个样式:

<div class="panel panel-default">
 <div class="panel-body">
  面板内容
 </div>
 <div class="panel-footer">面板注脚</div>
</div>

通过主次关系来进行标题或者是注脚的选择,是用好面板组件的关键。

Bootstrap面板有意义的样式

和其他Bootstrap组件一样,Bootstrap面板样式同样具有有意义的样式,通过引用这几个样式可以将该面板的作用直观展现出来,同样也是那几种颜色和样式名称:

<div class="panel panel-primary">主要面板样式</div>
<div class="panel panel-success">成功面板样式</div>
<div class="panel panel-info">信息面板样式</div>
<div class="panel panel-warning">警告面板样式</div>
<div class="panel panel-danger">危险面板样式</div>

Bootstrap面板与表格结合

如果你需要在面板中引入表格样式,那么也可以很方便地实现:

<div class="panel panel-default">
 <div class="panel-heading">面板标题</div>
 <table class="table">
 表格内容
 </table>
</div>

Bootstrap面板与列表结合

就像开头所说的一样,如果你想要在面板中引入列表,那也真是再合适不过了,通过以下代码便可轻松实现:

<div class="panel panel-default">
 <div class="panel-heading">面板标题</div>
 <div class="panel-body">
  <p>面板内容简介</p>
 </div>
 <ul class="list-group">
  <li class="list-group-item">列表项目1</li>
  <li class="list-group-item">列表项目2</li>
  <li class="list-group-item">列表项目3</li>
  <li class="list-group-item">列表项目4</li>
  <li class="list-group-item">列表项目5</li>
 </ul>
</div>

以上所述是小编给大家介绍的Bootstrap面板使用方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 鼠标滚轮事件
Apr 09 Javascript
关于this和self的使用说明
Aug 01 Javascript
javascript下利用arguments实现string.format函数
Aug 24 Javascript
jquery 取子节点及当前节点属性值的方法
Aug 24 Javascript
js添加select下默认的option的value和text的方法
Oct 19 Javascript
深入浅出讲解ES6的解构
Aug 03 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
Sep 04 Javascript
Json按某个键的值进行排序
Dec 22 Javascript
js中new一个对象的过程
Feb 20 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
JavaScript原型链中函数和对象的理解
Jun 16 Javascript
codeMirror插件使用讲解
Jan 16 #Javascript
微信小程序 图片边框解决方法
Jan 16 #Javascript
微信小程序 scroll-view隐藏滚动条详解
Jan 16 #Javascript
微信小程序 video详解及简单实例
Jan 16 #Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 #Javascript
微信小程序 登录实例详解
Jan 16 #Javascript
微信小程序 传值取值的几种方法总结
Jan 16 #Javascript
You might like
第十四节 命名空间 [14]
2006/10/09 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
实现PHP中session存储及删除变量
2018/10/15 PHP
Javascript 读书笔记索引贴
2010/01/11 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
2013/11/06 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
2015/05/06 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
jQuery mobile 移动web(6)
2015/12/20 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
2016/11/30 Javascript
微信小程序 本地存储及登录页面处理实例详解
2017/01/11 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
AngularJS中table表格基本操作示例
2017/10/10 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
详解javascript对数组和json数组的操作
2019/04/15 Javascript
浅析Vue 防抖与节流的使用
2019/11/14 Javascript
python中sleep函数用法实例分析
2015/04/29 Python
Django admin实现图书管理系统菜鸟级教程完整实例
2017/12/12 Python
python对视频画框标记后保存的方法
2018/12/07 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
公务员职务工作的自我评价
2013/11/01 职场文书
中专毕业生的自我鉴定
2013/12/01 职场文书
求职自荐信怎么写
2014/03/06 职场文书
青春寄语大全
2014/04/09 职场文书
工作保证书范文
2014/04/29 职场文书
入职担保书怎么写
2014/05/12 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
2014年节能工作总结
2014/12/18 职场文书
开会通知短信大全
2015/04/20 职场文书
交通处罚决定书
2015/06/24 职场文书
2019邀请函格式及范文
2019/05/20 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书
golang 实现时间戳和时间的转化
2021/05/07 Golang