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

JavaScript 编程引入命名空间的方法

Jun 29 Javascript

jquery last-child 列表最后一项的样式

Jan 22 Javascript

基于JavaScript实现获取鼠标点击位置坐标的方法

Apr 12 Javascript

根据身份证号自动输出相关信息(籍贯,出身日期,性别)

Nov 15 Javascript

jquery的live使用注意事项

Feb 18 Javascript

JS小游戏之极速快跑源码详解

Sep 25 Javascript

jQuery制作圣诞主题页面更像是爱情影集

Aug 10 Javascript

headjs实现网站并行加载但顺序执行JS

Nov 29 Javascript

jquery插入兄弟节点的操作方法

Dec 07 Javascript

详解AngularJS中$filter过滤器使用(自定义过滤器)

Feb 04 Javascript

Angular2学习教程之TemplateRef和ViewContainerRef详解

May 25 Javascript

vue+element使用动态加载路由方式实现三级菜单页面显示的操作

Aug 04 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

php使用数组填充下拉列表框的方法

2015/03/31 PHP

win7安装php框架Yii的方法

2016/01/25 PHP

Laravel使用swoole实现websocket主动消息推送的方法介绍

2019/10/20 PHP

js获取单选按钮的数据

2006/11/27 Javascript

jQuery select控制插件

2009/08/17 Javascript

JS+css 图片自动缩放自适应大小

2013/08/08 Javascript

轻松创建nodejs服务器（10）：处理上传图片

2014/12/18 NodeJs

jQuery中closest()函数用法实例

2015/01/07 Javascript

jQuery插件animateSlide制作多点滑动幻灯片

2015/06/11 Javascript

jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码

2015/08/24 Javascript

js实现div模拟模态对话框展现URL内容

2016/05/27 Javascript

NodeJS整合银联网关支付（DEMO）

2016/11/09 NodeJs

如何提高javascript加载速度

2016/12/26 Javascript

Vue computed计算属性的使用方法

2017/07/14 Javascript

vue axios数据请求及vue中使用axios的方法

2018/09/10 Javascript

vscode 配置vue+vetur+eslint+prettier自动格式化功能

2020/03/23 Javascript

小程序中的箭头函数的具体使用

2020/06/19 Javascript

快速解决Vue、element-ui的resetFields()方法重置表单无效的问题

2020/08/12 Javascript

Python中itertools模块用法详解

2014/09/25 Python

Python内置函数OCT详解

2016/11/09 Python

python学习教程之使用py2exe打包

2017/09/24 Python

python读写配置文件操作示例

2019/07/03 Python

Python 解析库json及jsonpath pickle的实现

2020/08/17 Python

LN-CC美国：伦敦时尚生活的缩影

2019/02/19 全球购物

Nike瑞士官网：Nike CH

2021/01/18 全球购物

第一范式（1NF）、第二范式（2NF）和第三范式（3NF）之间的区别是什么？

2016/04/28 面试题

动态密码技术

2012/10/18 面试题

2014年应届大学生毕业自我鉴定

2014/01/31 职场文书

《湘夫人》教学反思

2014/02/21 职场文书

班干部演讲稿

2014/04/24 职场文书

小小商店教学反思

2014/04/27 职场文书

书法大赛策划方案

2014/06/04 职场文书

初中教师个人总结

2015/02/10 职场文书

中学生勤俭节约倡议书

2015/04/29 职场文书

Java spring单点登录系统

2021/09/04 Java/Android

MySQL数据库Innodb 引擎实现mvcc锁

2022/05/06 MySQL