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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 18 Javascript
javascript Object与Function使用
Jan 11 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
Oct 20 Javascript
不使用浏览器运行javascript代码的方法
Jul 24 Javascript
jQuery使用之标记元素属性用法实例
Jan 19 Javascript
jQuery操作表单常用控件方法小结
Mar 23 Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
浅谈vuepress 踩坑记
Apr 18 Javascript
详解Vue中watch的高级用法
May 02 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
Jul 24 Javascript
Vue使用axios引起的后台session不同操作
Aug 14 Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
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
消息持续发送的完整例子
2006/10/09 PHP
杏林同学录(四)
2006/10/09 PHP
PHP面向对象法则
2012/02/23 PHP
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
DWZ table的原生分页浅谈
2013/03/01 Javascript
js如何实现设计模式中的模板方法
2013/07/23 Javascript
jquery实现submit提交表单
2015/02/03 Javascript
Angularjs 创建可复用组件实例代码
2016/10/09 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
2017/03/04 Javascript
微信小程序开发之入门实例教程篇
2017/03/07 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
2019/09/21 Javascript
Vue 实现输入框新增搜索历史记录功能
2019/10/15 Javascript
微信小程序静默登录的实现代码
2020/01/08 Javascript
[04:32]DOTA2著名解说配音敌法师 现场专访海涛怒切假腿
2013/12/20 DOTA
Python中常见的数据类型小结
2015/08/29 Python
Python yield 使用方法浅析
2017/05/20 Python
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
python打造爬虫代理池过程解析
2019/08/15 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
总监职责范文
2013/11/09 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
工作求职信
2014/07/04 职场文书
违反交通法规检讨书
2014/09/10 职场文书
九一八事变演讲稿范文
2014/09/14 职场文书
道德模范事迹材料
2014/12/20 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书
go开发alertmanger实现钉钉报警
2021/07/16 Golang
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis