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获取ckeditor编辑器的值(实现代码)
Nov 18 Javascript
js中array的sort()方法使用介绍
Feb 20 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
Feb 11 Javascript
JavaScript中ES6字符串扩展方法
Aug 26 Javascript
详解基于javascript实现的苹果系统底部菜单
Dec 02 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 Javascript
element-ui 关于获取select 的label值方法
Aug 24 Javascript
Vue事件修饰符native、self示例详解
Jul 09 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 Javascript
JavaScript实现多文件下载方法解析
Aug 07 Javascript
Vue和React有哪些区别
Sep 12 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
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
Javascript valueOf 使用方法
2008/12/28 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
JS判断移动端访问设备并加载对应CSS样式
2014/06/13 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
总结js函数相关知识点
2018/02/27 Javascript
axios的拦截请求与响应方法
2018/08/11 Javascript
jQuery滑动效果实现方法分析
2018/09/05 jQuery
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
JS实现排行榜文字向上滚动轮播效果
2019/11/26 Javascript
python list语法学习(带例子)
2013/11/01 Python
Python实现SVN的目录周期性备份实例
2015/07/17 Python
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
详解Python3中yield生成器的用法
2015/08/20 Python
Python 文件处理注意事项总结
2017/04/10 Python
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
Flask模板引擎之Jinja2语法介绍
2019/06/26 Python
python实现的批量分析xml标签中各个类别个数功能示例
2019/12/30 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
使用phonegap创建联系人的实现方法
2017/03/30 HTML / CSS
英国在线自行车店:Merlin Cycles
2018/08/20 全球购物
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
JAVA中的关键字有什么特点
2014/03/07 面试题
企业行政文员岗位职责
2013/12/03 职场文书
家长对小学生的评语
2014/01/28 职场文书
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS
Pytorch使用shuffle打乱数据的操作
2021/05/20 Python
详解运行Python的神器Jupyter Notebook
2021/06/03 Python
聊聊mysql都有哪几种分区方式
2022/04/13 MySQL
mysql拆分字符串作为查询条件的示例代码
2022/07/07 MySQL