Bootstrap入门(十五)组件9:面板组件

虽然不总是必须,但是某些时候你可能需要将某些 DOM 内容放到一个盒子里。对于这种情况,可以试试面板组件。

1.基本实例

2.带标题的面板

3.情景效果

4.代表格的面板

5.带列表组的面板

先引入本地的CSS文件

<link href="bootstrap.min.css" rel="stylesheet">

1.基本实例

我们先来创建一个基本的面板实例,在容器div中新建一个属性为panel,样式制定为默认样式的面板,主体内容要用到panel-body

     <div class="container">
<div class="panel panel-default">
<div class="panel-body">
HELLO WORLD!
</div>
</div>
     </div>

效果

2.带标题的面板

有时候我们需要用标题来帮助显示panel-heading

     <div class="container">
<div class="panel panel-default">
         <div class="panel-heading">
标题
</div>
<div class="panel-body">
HELLO WORLD!
</div>
</div>
     </div>

效果

同理,既然有标题,也会有脚注

     <div class="container">
<div class="panel panel-default">
<div class="panel-body">
HELLO WORLD!
</div>
         <div class="panel-footer panel-danger">
            www.test.com
         </div>
</div>
     </div>

效果

3.情景效果

也就是把默认的样式修改为其他,比如panel-info

(还有其他,比如panel-primary,panel-success,panel-danger等

       <div class="panel panel-info">
<div class="panel-heading panel-success">
标题
</div>
<div class="panel-body">
HELLO WORLD!
</div>
<div class="panel-footer panel-danger">www.test.com</div>
</div>

效果

4.代表格的面板

为面板中不需要边框的表格添加 .table 类,是整个面板看上去更像是一个整体设计。

如果是带有 .panel-body 的面板,我们为表格的上方添加一个边框,看上去有分隔效果。

        <div class="panel panel-default">
<div class="panel-heading">
列表
</div>
<div class="panel-body">
HELLO WORLD!
</div>
<table class="table">
<thead>
<tr class="active">
<th>标题</th>
<th>标题</th>
<th>标题</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr class="info">
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr class="success">
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr class="success">
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</tbody>
</table>
</div>

效果(其中<tr>标签的class可以修改,这里的第二行就改为了info)

5.带列表组的面板

(就是结合了<ul><li>标签的面板)

       <div class="panel panel-default">
<div class="panel-heading">
标题
</div>
<div class="panel-body">
HELLO WORLD!
</div>
<ul class="list-group">
<li class="list-group-item">
hello1
</li>
<li class="list-group-item">
hello2
</li>
<li class="list-group-item">
hello3
</li>
</ul>
</div>

效果:

Bootstrap入门(十五)组件9:面板组件的更多相关文章

  1. Bootstrap<基础十五> 输入框组

    Bootstrap 支持的另一个特性,输入框组.输入框组扩展自 表单控件.使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 通过向输入域添加前缀和后缀的内容,您可以向用户输 ...

  2. Bootstrap入门(五)表单

    Bootstrap入门(五)表单   先引入本地的CSS文件  <link href="css/bootstrap.min.css" rel="stylesheet ...

  3. BootStrap入门教程 (三) :可重用组件(按钮,导航,标签,徽章,排版,缩略图,提醒,进度条,杂项)

    上讲回顾:Bootstrap的基础CSS(Base CSS)提供了优雅,一致的多种基础Html页面要素,包括排版,表格,表单,按钮等,能够满足前端工程师的基本要素需求. Bootstrap作为完整的前 ...

  4. 25、手把手教你Extjs5(二十五)Extjs5常用组件--form的基本用法

    Extjs Form是一个比较常用的控件,主要用来显示和编辑数据的,今天这篇文章将介绍Extjs Form控件的详细用法,包括创建Form.添加子项.加载和更新数据.验证等. Form和Form Ba ...

  5. Android笔记(五十五) Android四大组件之一——ContentProvider,使用系统提供的ContentProvider

    因为在Android中,存储系统联系人姓名和电话是存在与不同的ContentProvider中的,具体如何查找,可以从Android的源代码中查看,在android.providers包中列出了所有系 ...

  6. Android入门(十五)通知

    原文链接:http://www.orlion.ga/663/ 1.通知的基本用法 创建通知的步骤,首先需要一个NotificationManager来对通知进行管理,可以调用Context的getSy ...

  7. [WebGL入门]十五,为多边形涂抹颜色(顶点颜色的指定)

    注:文章译自http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上[lufy:].另外.鄙人webgl研究还不够深入.一些专业词语.假设翻译有误.欢迎大家指 ...

  8. Spring入门(十五):使用Spring JDBC操作数据库

    在本系列的之前博客中,我们从没有讲解过操作数据库的方法,但是在实际的工作中,几乎所有的系统都离不开数据的持久化,所以掌握操作数据库的使用方法就非常重要. 在Spring中,操作数据库有很多种方法,我们 ...

  9. Bootstrap 学习笔记6 列表组面板嵌入组件

    列表组组件: 面板组件:

  10. Bootstrap <基础二十五>警告(Alerts)

    警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个 ...

随机推荐

  1. Android Studio的使用(三)--包不分级、修改包名

    1.如果不喜欢将包逐级展开的话,可以将每一个包名都完整展现出来,只需要勾选Flatten Packages. 2.修改包名 3.填写新的包名 4.点击确认

  2. asp.net mvc 文件压缩下载

    压缩文件相关的类: public class ZIPCompressUtil { public static Tuple<bool, Stream> Zip(string strZipTo ...

  3. Hibernate---第一个helloworld程序 (XML版本, annotation版本)

    Hibernate作为JPA的一种实现,jpa的注解已经是hibernate的核心,hibernate只提供了一些补充,而不是两套注解.hibernate对jpa的支持够足量,在使用hibernate ...

  4. (中等) POJ 2948 Martian Mining,DP。

    Description The NASA Space Center, Houston, is less than 200 miles from San Antonio, Texas (the site ...

  5. IOS开发中重写init方法使用需谨慎

    IOS开发中重写init方法使用需谨慎 今天在写一个小软件的时候出现一点问题,这个软件的功能是搜索全国学校,首页就是搜索输入框,在框中输入完要查询的学校所在省份,点击buttom后就会跳转到对应的视图 ...

  6. Ext分页之php中,真分页显示

    这是我经过很多天调试的真分页显示Ext组件 显示页面ext.php <html> <head> <meta http-equiv="Content-Type&q ...

  7. ios开发获取SIM卡信息

    .加入一个Framework(CoreTelephony.framework). .引入头文件 #import<CoreTelephony/CoreTelephonyDefines.h> ...

  8. css padding和margin的百分比

    前段时间我同事对于margin和padding应用百分比值似乎有些误解,觉得可能是个普遍问题,所以觉得有必要拿出来单独写一下. margin和padding都可以使用百分比值的,但有一点可能和通常的想 ...

  9. iOS开发——闪光灯

    还是那句很欠揍的话,没啥难度,直接上代码. // //  ViewController.m //  Demo—闪光灯 // //  Created by yyt on 16/4/21. //  Cop ...

  10. LPC2478时钟模块详解

    时钟框图如上图,系统时钟来源分别是内部4M的RC振荡器和外置晶振,RTC模块在某些情况下也可以作为主时钟,经过系统时钟选择s\de时钟需要经过PLL倍频(或者不倍频),处理过的PLL输出USB时钟分频 ...