编程 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获取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="form"及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