Bootstrap每天必学之面板
1、面板
面板（Panels）是Bootstrap框架新增的一个组件，其主要作用就是用来处理一些其他组件无法完成的功能。同样在不同的版本中具有不同的源码：
☑ Less版本：对应的源码文件是 panels.less
☑ Sass版本：对应的源码文件是 _panels.scss
☑ 编译后的Bootstrap：对应bootstrap.css文件第4995行～第5302行
2、面板–基础面板
基础面板非常简单，就是一个div容器运用了“panel”样式，产生一个具有边框的文本显示块。由于“panel”不控制主题颜色，所以在“panel”的基础上增加一个控制颜色的主题“panel-default”，另外在里面添加了一个“div.panel-body”来放置面板主体内容：
<div class="panel panel-default"> <div class="panel-body">我是一个基础面板，带有默认主题样式风格</div> </div>
运行效果如下：
原理分析：
“panel“主要对边框，间距和圆角做了一定的设置：
/bootstrap.css文件第4995行～第5005行/
.panel {
margin-bottom: 20px;
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-body {
padding: 15px;
}
3、面板–带有头和尾的面板
基础面板看上去太简单了，Bootstrap为了丰富面板的功能，特意为面板增加“面板头部”和“页面尾部”的效果：
☑ panel-heading：用来设置面板头部样式
☑ panel-footer：用来设置面板尾部样式
<div class="panel panel-default"> <div class="panel-heading">图解CSS3</div> <div class="panel-body">…</div> <div class="panel-footer">作者：大漠</div> </div>
运行效果如下：
原理分析：
panel-heading和panel-footer也仅仅间距和圆角等样式进行了设置：
/bootstrap.css文件第5006行～第5030行/
.panel-heading {
padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.panel-heading > .dropdown .dropdown-toggle {
color: inherit;
}
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 16px;
color: inherit;
}
.panel-title > a {
color: inherit;
}
.panel-footer {
padding: 10px 15px;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
4、面板–彩色面板
在基础面板一节中了解到，panel样式并没有对主题进行样式设置，而主题样式是通过panel-default来设置。在Bootstrap框架中面板组件除了默认的主题样式之外，还包括以下几种主题样式，构成了一个彩色面板：
☑ panel-primary：重点蓝
☑ panel-success：成功绿
☑ panel-info:信息蓝
☑ panel-warning：警告黄
☑ panel-danger：危险红
使用方法就很简单了，只需要在panel的类名基础上增加自己需要的类名：
<div class="panel panel-default"> <div class="panel-heading">图解CSS3</div> <div class="panel-body">…</div> <div class="panel-footer">作者：大漠</div> </div> <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.css文件第5195行～第5302行。
5、面板–面板中嵌套列表组
在上一节，我们介绍了如何在面板中放置表格，现在我们来学习如何在面板中放置列表组，我们简单的来看一个示例：
<div class="panel panel-default"> <div class="panel-heading">图解CSS3</div> <div class="panel-body"> <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性 </p> <ul class="list-group"> <li class="list-group-item">我是列表项</li> <li class="list-group-item">我是列表项</li> <li class="list-group-item">我是列表项</li> </ul> </div> <div class="panel-footer">作者：大漠</div> </div>
运行效果如下：
优化代码：
和嵌套表格一样，如果你觉得这样有间距不好看，你完全可以把列表组提取出来：
<div class="panel panel-default"> <div class="panel-heading">图解CSS3</div> <div class="panel-body">…</div> <ul class="list-group"> <li class="list-group-item">我是列表项</li> <li class="list-group-item">我是列表项</li> <li class="list-group-item">我是列表项</li> </ul> <div class="panel-footer">作者：大漠</div> </div>
运行效果如下：
同样的道理，Bootstrap将嵌套在面板中的列表组做了一定的样式优化。具体源码可以查看bootstrap.css文件第5031行～第5053行。
本文系列教程整理到：Bootstrap基础教程 专题中，欢迎点击学习。
如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程
以上针对面板，分别介绍了基础面板、彩色面板等，帮助大家更全面的学习Bootstrap面板，希望大家从中得到收获。
相关推荐
-
Bootstrap源码解读媒体对象、列表组和面板（10）
媒体对象 基础媒体对象 例如: <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placehold.it/350x150" alt="..."> </a> <div class="media-bo
-
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
这是一款基于Bootstrap的Metro风格的后台管理面板应用,Bootstrap Metro Dashboard的UI是基于Twitter Bootstrap样式的,同时使用了jQuery 1.9.1和jQuery UI组件,非常适合做网站的后台管理系统界面. Bootstrap Metro Dashboard介绍 Bootstrap Metro Dashboard使用了以下jQuery插件: fullcalendar.min.js jquery.chosen.min.js jquery
-
Bootstrap面板使用方法
面板样式是在很多种情况下都可能会使用到的样式之一,例如博客的侧边栏.企业网站的公告栏.栏目列表等. 面板样式除了内容之外,还有一个面板头部可以添加标题,让我们通过这篇文章看看Bootstrap面板样式的使用方法. Bootstrap面板基本样式 直接调用面板样式也非常容易,只需要通过以下代码即可实现: <div class="panel panel-default"> <div class="panel-body"> Basic panel
-
Bootstrap基本组件学习笔记之面板(14)
直接看Bootstrap面板例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bo
-
浅析Bootstrap组件之面板组件
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 面板组件主要作用是用来处理一些其他组件无法完成的功能,在不同的版本中具有不同的源码: LESS:panels.less SASS:_panels.scss 基础面板非常简单,就是一个div容器中运用了类.panel的样式,产生一个具有边框的文本显示块,由于panel不控制主题颜色,所以在.panel基础上增加一个控制
-
Bootstrap面板（Panels）的简单实现代码
本文实例为大家分享了Bootstrap面板展示的具体代码,供大家参考,具体内容如下 一.基本的面板 html代码 <!DOCTYPE html> <html> <head> <title>Bootstrap list-group</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap.mi
-
Bootstrap面板学习使用
本文实例为大家分享了Bootstrap面板的具体实现代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=&qu
-
Bootstrap每天必学之面板
1.面板 面板(Panels)是Bootstrap框架新增的一个组件,其主要作用就是用来处理一些其他组件无法完成的功能.同样在不同的版本中具有不同的源码: ☑ Less版本:对应的源码文件是 panels.less ☑ Sass版本:对应的源码文件是 _panels.scss ☑ 编译后的Bootstrap:对应bootstrap.css文件第4995行-第5302行 2.面板–基础面板 基础面板非常简单,就是一个div容器运用了"panel"样式,产生一个具有边框的文本显示块.由于&
-
Bootstrap每天必学之导航条(二)
一.基础导航条 在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class="nav">)基础上添加类名"navbar-nav" 第二步:在列表外部添加一个容器(div),并且使用类名"navbar"和"navbar-default" <div class="navbar navbar-default"> <!-- 导航条标题--> <
-
Bootstrap每天必学之折叠（Collapse）插件
折叠(Collapse)插件可以很容易地让页面区域折叠起来.无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项. 如果您想要单独引用该插件的功能,那么您需要引用 collapse.js,或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 一.用法 下表列出了折叠(Collapse)插件用于处理繁重的伸缩的 class: 您可以通过以下两种方式使用折叠(Collapse)插件: 通过 data 属性:
-
Bootstrap每天必学之导航组件
在bootstrap框架中将导航独立出来成为一个导航组件,根据不同的版本,可以找到相应的源码: LESS: navs.less SASS: _navs.scss 标签形导航,也称选项卡导航 标签形导航是通过.nav-tabs样式来实现的,在制作标签形导航时需要在原导航类名为.nav的容器上追加类名.nav-tabs <ul class="nav nav-tabs"> <li><a href="#">导航标题1</a>
-
Bootstrap每天必学之警告框插件
警告框(Alert)消息大多是用来想终端用户显示诸如警告或确认消息的信息.使用警告框(Alert)插件,您可以向所有的警告框消息添加可取消(dismiss)功能. 如果您想要单独引用该插件的功能,那么您需要引用 alert.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 一.用法 您可以有以下两种方式启用警告框的可取消(dismissal)功能: 1.通过 data 属性:通过数据 API(Dat
-
Bootstrap每天必学之表单
本文主要讲解的是表单,这个其实对于做过网站的人来说,并不陌生,而且可以说是最为常用的提交数据的Form表单.本文主要来讲解一下内容: 1.基本案例 2.内联表单 3.水平排列的表单 4.被支持的控件 5.静态控件 6.控件状态 7.控件尺寸 8.帮助文本 基本案例 单独的表单控件会被自动赋予一些全局样式.所有设置了.form-control的<input>.<textarea>和<select>元素都将被默认设置为width: 100%;.将label和前面提到的这些
-
Bootstrap每天必学之简单入门
在上一篇文章中主要是简单的介绍了一下Bootstrap,这篇文章进一步了解相关内容,为之后的学习打下基础. 从Visual Studio 2013前不久的更新中看,微软是将Bootstrap3的新版本加入到了VS当中,所以学习Bootstrap3也没什么顾虑了. 一.下载BootStrap 官网的文件很详细简单,对于下载来说也有多种方式.对于我们开发者来说,估计最简单的方式就是直接下载编译和压缩后的CSS.JavaScript文件,另外还包含字体文件,但是不包含文档和源码文件.打开解压包之后可以
-
Bootstrap每天必学之日期控制
一个成熟的框架,日期控制是少不了的,在网上也有很多日期控制可以选择,而主框架用了bootstrap,日期控制也当前要用它自己的, 控件地址:http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm GitHub上开源地址:https://github.com/smalot/bootstrap-datetimepicker 在使用datetimepicker之前,先要经过以下几个步骤 1.引用JS脚本库 <script src="
-
Bootstrap每天必学之下拉菜单
一.下拉菜单(基本用法) 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,它对应的文件: ☑ LESS版本:对应的源码文件为 dropdowns.less ☑ Sass版本:对应的源码文件为 _dropdowns.sass ☑ 编译后的Bootstrap版本:查看bootstrap.css文件第3004行-第3130行 在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版本
-
Bootstrap每天必学之级联下拉菜单
本文将介绍自定义的bootstrap级联下拉菜单,主要应用场合有省市级关联菜单等等,那么就先拿这个例子来讲,当然其他场景的关联菜单也同样适用.说实话,封装好一个通用的组件还是需要花费很多精力的和时间的,所谓通用,自然要考虑周全,叹!这次整理的Bootstrap关联select,里面也涉及到了很多jquery.ajax.springMVC等等知识点,可谓包罗万象! 首先,请允许我代表该自定义组件做一番小小的介绍. "hi,你好,我叫yunm.combox.js,主人给我起的名字,其实呢,挺俗的.我