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>

效果如下:

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

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

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

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=&quot;form&quot;及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