首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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>

效果如下：

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

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

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

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

- Author -

kikay

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

Javascript 相关文章推荐
9个javascript语法高亮插件 推荐
Jul 18 Javascript
jQuery 常见学习网站与参考书
Nov 09 Javascript
两种WEB下的模态对话框 （asp.net或js的分别实现）
Dec 02 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
Dec 10 Javascript
JS交换变量的方法
Jan 21 Javascript
AngularJS的内置过滤器详解
May 14 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 Javascript
JavaScript轮播停留效果的实现思路
May 24 Javascript
vue+element UI实现树形表格
Dec 29 Vue.js
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
美国购物网站(1542) SLi Minor 2020(63) 新加坡购物网站(41) 韩国购物网站(27) 英国购物网站(954) 巴西购物网站(71) 加拿大购物网站(185) 中国购物网站(172) 香港购物网站(84) 爱尔兰购物网站(30)
You might like
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
PHP图片添加水印功能示例小结
2016/10/03 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
PHP FileSystem 文件系统常用api整理总结
2019/07/12 PHP
JavaScript 动态改变图片大小
2009/06/11 Javascript
JavaScript中的函数重载深入理解
2014/08/04 Javascript
jquery代码实现简单的随机图片瀑布流效果
2015/04/20 Javascript
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
2015/08/26 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
jQuery 遍历map()方法详解
2016/11/04 Javascript
JS实现图片上传预览功能
2016/11/21 Javascript
Vue中保存用户登录状态实例代码
2017/06/07 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
详解如何在webpack中做预渲染降低首屏空白时间
2018/08/22 Javascript
解决vue移动端适配问题
2018/12/12 Javascript
vue实现点击按钮下载文件功能
2019/10/11 Javascript
[02:18]《我与DAC》之工作人员：为了热爱DOTA2的玩家们
2018/03/28 DOTA
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
python实现基本进制转换的方法
2015/07/11 Python
Python在线运行代码助手
2016/07/15 Python
详解 Python 与文件对象共事的实例
2017/09/11 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
python 模拟创建seafile 目录操作示例
2019/09/26 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
美国一家主营日韩美妆护肤品的在线商店：iMomoko
2016/09/11 全球购物
TripAdvisor印尼站：全球领先的旅游网站
2018/03/15 全球购物
巴西独家产品和现场演示购物网站：Shoptime
2019/07/11 全球购物
英国领先的游戏零售商：GAME
2019/09/24 全球购物
高级3D打印市场：Gambody
2019/12/26 全球购物
应届护士推荐信
2013/11/16 职场文书
无子女夫妻离婚协议书（4篇）
2014/10/20 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书