编程 Javascript

Bootstrap基本组件学习笔记之面板(14)

Posted in Javascript onDecember 08, 2016

直接看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/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>面板</title>
</head>
<body>
<div class="container">
 <div class="page-header">
 <h1>面板</h1>
 </div>
 <div class="col-lg-3">
 <div class="panel panel-default">
 <div class="page-header">
 <h3>面板头部</h3>
 </div>
 <div class="panel-body">
 <p>内容内容内容内容内容内容内容内容内容内容</p>
 </div>
 <div class="panel-footer">
 <p>面板尾部</p>
 </div>
 </div>
 </div>
 <div class="col-lg-3">
 <div class="panel panel-default">
 <div class="page-header">
 <h3>面板头部</h3>
 </div>
 <div class="panel-body">
 <p>内容内容内容内容内容内容内容内容内容内容</p>
 </div>
 <div class="panel-footer">
 <p>面板尾部</p>
 </div>
 </div>
 </div>
 <div class="col-lg-3">
 <div class="panel panel-default">
 <div class="page-header">
 <h3>面板头部</h3>
 </div>
 <div class="panel-body">
 <p>内容内容内容内容内容内容内容内容内容内容</p>
 </div>
 <div class="panel-footer">
 <p>面板尾部</p>
 </div>
 </div>
 </div>
 <div class="col-lg-3">
 <div class="panel panel-default">
 <div class="page-header">
 <h3>面板头部</h3>
 </div>
 <div class="panel-body">
 <p>内容内容内容内容内容内容内容内容内容内容</p>
 </div>
 <div class="panel-footer">
 <p>面板尾部</p>
 </div>
 </div>
 </div>
</div>
</body>
</html>

效果如下：

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Bootstrap基本组件学习笔记之面板(14)

- Author -

kikay

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

判断控件是否已加载完成的代码

Feb 24 Javascript

Jquery 监视按键，按下回车键触发某方法的实现代码

May 11 Javascript

JS+CSS实现的拖动分页效果实例

May 11 Javascript

jquery事件的ready()方法使用详解

Nov 11 Javascript

jQuery查找节点方法完整实例

Sep 13 Javascript

深入了解JavaScript的逻辑运算符（与、或）

Dec 20 Javascript

angularjs自定义过滤器demo示例

Aug 24 Javascript

vue中如何实现后台管理系统的权限控制的方法步骤

Sep 05 Javascript

JS实现音量控制拖动

Jan 15 Javascript

js实现图片实时时钟

Jan 15 Javascript

JS实现盒子拖拽效果

Feb 06 Javascript

Openlayers学习之地图比例尺控件

Sep 28 Javascript

Bootstrap基本组件学习笔记之缩略图(13)

Dec 08 #Javascript

Bootstrap基本组件学习笔记之分页(12)

Dec 08 #Javascript

浅谈Node.js：fs文件系统模块

Dec 08 #Javascript

Bootstrap基本插件学习笔记之模态对话框(16)

Dec 08 #Javascript

概述BootStrap中role="form"及role作用角色

Dec 08 #Javascript

Bootstrap基本插件学习笔记之标签切换(17)

Dec 08 #Javascript

Bootstrap基本插件学习笔记之Popover提示框(19)

Dec 08 #Javascript

You might like

全国FM电台频率大全 - 15 山东省

2020/03/11 无线电

如何利用php+mysql保存和输出文件

2006/10/09 PHP

php smarty模板引擎的6个小技巧

2014/04/24 PHP

ThinkPHP让分页保持搜索状态的方法

2014/07/02 PHP

javascript实现动态模态绑定grid过程代码

2014/09/22 Javascript

Bootstrap入门书籍之（五）导航条、分页导航

2016/02/17 Javascript

又一枚精彩的弹幕效果jQuery实现

2016/07/25 Javascript

AngularJS $modal弹出框实例代码

2016/08/24 Javascript

jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法

2016/11/23 Javascript

jquery实现瀑布流效果 jquery下拉加载新数据

2016/12/12 Javascript

AngularJS使用ng-class动态增减class样式的方法示例

2017/05/18 Javascript

从零开始封装自己的自定义Vue组件

2018/10/09 Javascript

Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)

2019/11/18 NodeJs

vue keep-alive列表页缓存详情页返回上一页不刷新,定位到之前位置

2019/11/26 Javascript

[15:58]DOTA2国际邀请赛采访专栏：Tongfu.Sansheng&KingJ，DK.rOtk

2013/08/08 DOTA

[01:32]2014DOTA2西雅图邀请赛 CIS我们有信心进入正赛

2014/07/08 DOTA

python字典多键值及重复键值的使用方法(详解)

2016/10/31 Python

python机器人行走步数问题的解决

2018/01/29 Python

django 开发忘记密码通过邮箱找回功能示例

2018/04/17 Python

对Python 3.5拼接列表的新语法详解

2018/11/08 Python

浅析PyTorch中nn.Module的使用

2019/08/18 Python

Python类及获取对象属性方法解析

2020/06/15 Python

python中元组的用法整理

2020/06/15 Python

使用python将微信image下.dat文件解密为.png的方法

2020/11/30 Python

联想C++笔试题

2012/06/13 面试题

经典优秀个人求职信分享

2013/12/12 职场文书

应用英语专业自荐信

2014/01/26 职场文书

淘宝店铺营销方案

2014/02/13 职场文书

会计电算化专业自荐信

2014/03/15 职场文书

2014领导班子“四风问题”对照检查材料思想汇报（执法局）

2014/09/21 职场文书

授权收款委托书范本

2014/10/10 职场文书

简易离婚协议书（范本）

2014/10/25 职场文书

学生保证书

2015/01/16 职场文书

大学生，三分钟即兴演讲稿

2019/07/22 职场文书

初中生入团申请书范文（五篇）

2019/10/16 职场文书

Python爬虫简单介绍一下Xpath及使用

2022/04/26 Python