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 相关文章推荐
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
Dec 25 Javascript
Array.prototype.slice 使用扩展
Jun 09 Javascript
javascript中的循环语句for语句深入理解
Apr 04 Javascript
jQuery学习总结之jQuery事件
Jun 30 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
JavaScript实现简单的拖动效果
Jul 02 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
Javascript实现找不同色块的游戏
Jul 17 Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 Javascript
Openlayers绘制地图标注
Sep 28 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
如何把PHP转成EXE文件
2006/10/09 PHP
PHP实现获取图片颜色值的方法
2014/07/11 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
vue的Virtual Dom实现snabbdom解密
2017/05/03 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
vue中本地静态图片路径写法
2018/03/06 Javascript
vue中使用input[type=&quot;file&quot;]实现文件上传功能
2018/09/10 Javascript
Vue基础配置讲解
2019/11/29 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
Python中map和列表推导效率比较实例分析
2015/06/17 Python
Python编程实现蚁群算法详解
2017/11/13 Python
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
Python实现从SQL型数据库读写dataframe型数据的方法【基于pandas】
2019/03/18 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
python脚本监控logstash进程并邮件告警实例
2020/04/28 Python
Python爬虫之Selenium多窗口切换的实现
2020/12/04 Python
python常量折叠基础知识点讲解
2021/02/28 Python
智能旅行箱:Horizn Studios
2018/04/30 全球购物
俄罗斯第一家多品牌在线奢侈品精品店:Aizel.ru
2020/09/06 全球购物
爽歪歪广告词
2014/03/20 职场文书
安全标语口号
2014/06/09 职场文书
员工团队活动方案
2014/08/28 职场文书
机关干部三严三实心得体会
2014/10/13 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
教育读书笔记
2015/07/02 职场文书
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python