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自执行函数之伪命名空间封装法
Dec 25 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
May 30 Javascript
Node.js的特点和应用场景介绍
Nov 04 Javascript
jQuery构造函数init参数分析续
May 13 Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
jQuery编写网页版2048小游戏
Jan 06 Javascript
javascript  数组排序与对象排序的实例
Jul 17 Javascript
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
layui radio点击事件实现input显示和隐藏的例子
Sep 02 Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 Javascript
JS浏览器BOM常见操作实例详解
Apr 27 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
如何提高MYSQL数据库的查询统计速度 select 索引应用
2007/04/11 PHP
apache php模块整合操作指南
2012/11/16 PHP
javascript 哈希表(hashtable)的简单实现
2010/01/20 Javascript
js常用排序实现代码
2010/12/28 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
Vue非父子组件通信详解
2017/06/12 Javascript
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
让网站自动生成章节目录索引的多个js代码
2018/01/07 Javascript
深入理解Node module模块
2018/03/26 Javascript
Vue 让元素抖动/摆动起来的实现代码
2018/05/31 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
Python读写docx文件的方法
2018/05/08 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
python人民币小写转大写辅助工具
2018/06/20 Python
python中单下划线_的常见用法总结
2018/07/10 Python
Django进阶之CSRF的解决
2018/08/01 Python
python爬虫基础教程:requests库(二)代码实例
2019/04/09 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
Html5新增标签有哪些
2017/04/13 HTML / CSS
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
网络书店创业计划书
2014/02/07 职场文书
《桂林山水》教学反思
2014/02/08 职场文书
通信工程求职信
2014/07/16 职场文书
三八活动策划方案
2014/08/17 职场文书
医学检验专业自荐信
2014/09/18 职场文书
2015年仓库管理员工作总结
2015/04/21 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS