编程 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 相关文章推荐

Extjs学习笔记之九数据模型(上）

Jan 11 Javascript

javascript小数计算出现近似值的解决办法

Feb 06 Javascript

jQuery ajax cache缓存问题

Jul 01 Javascript

引用外部脚本时script标签关闭的写法

Jan 20 Javascript

JavaScript实现计算字符串中出现次数最多的字符和出现的次数

Mar 12 Javascript

深入浅析Node.js 事件循环

Dec 20 Javascript

node.js中fs.stat与fs.fstat的区别详解

Jun 01 Javascript

详细分析jsonp的原理和实现方式

Nov 20 Javascript

使用异步组件优化Vue应用程序的性能

Apr 28 Javascript

vue 搭建后台系统模块化开发详解

May 01 Javascript

浅析Vue中拆分视图层代码的5点建议

Aug 15 Javascript

详解vue beforeEach 死循环问题解决方法

Feb 25 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

一个简易需要注册的留言版程序

2006/10/09 PHP

一周让你学会PHP 不错的学习资料

2009/02/06 PHP

PHP array_push 数组函数

2009/12/26 PHP

CodeIgniter图像处理类的深入解析

2013/06/17 PHP

Smarty foreach控制循环次数的实现详解

2013/07/03 PHP

php curl 上传文件代码实例

2015/04/27 PHP

深入剖析浏览器退出之后php还会继续执行么

2016/05/17 PHP

php数值计算num类简单操作示例

2020/05/15 PHP

学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)

2007/03/10 Javascript

让js弹出窗口居前显示的实现方法

2013/07/10 Javascript

jQuery实现点击图片翻页展示效果的方法

2015/02/16 Javascript

jquery中$each()方法的使用指南

2015/04/30 Javascript

跟我学习javascript的最新标准ES6

2015/11/20 Javascript

jquery捕捉回车键及获取checkbox值与异步请求的方法

2015/12/24 Javascript

jQuery限制图片大小的方法

2016/05/25 Javascript

JS与HTML结合使用marquee标签实现无缝滚动效果代码

2016/07/05 Javascript

flag和jq on 的绑定多个对象和方法(必看)

2017/02/27 Javascript

JavaScript数组_动力节点Java学院整理

2017/06/26 Javascript

vue2.0中set添加属性后视图不能更新的解决办法

2019/02/22 Javascript

仿iPhone通讯录制作小程序自定义选择组件的实现

2019/05/23 Javascript

layer.msg()去掉默认时间,实现手动关闭的方法

2019/09/12 Javascript

Vue之Mixins(混入)的使用方法

2019/09/24 Javascript

微信小程序实现音频文件播放进度的实例代码

2020/03/02 Javascript

JS中==、===你分清楚了吗

2020/03/04 Javascript

tensorflow实现对图片的读取的示例代码

2018/02/12 Python

python3 读写文件换行符的方法

2018/04/09 Python

从运行效率与开发效率比较Python和C++

2018/12/14 Python

联想德国官网：Lenovo Germany

2018/07/04 全球购物

邮政员工辞职信

2014/01/16 职场文书

留学推荐信怎么写

2014/01/25 职场文书

财务整改报告范文

2014/11/05 职场文书

计划生育目标责任书

2015/05/09 职场文书

初中语文教师研修日志

2015/11/13 职场文书

详解用Python把PDF转为Word方法总结

2021/04/27 Python

一文了解MySQL二级索引的查询过程

2022/02/24 MySQL

Mysql外键约束的创建与删除的使用

2022/03/03 MySQL