编程 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中的this关键字介绍与使用实例

Jun 21 Javascript

js实现适用于素材网站的黑色多级菜单导航条效果

Aug 24 Javascript

js实现随屏幕滚动的带缓冲效果的右下角广告代码

Sep 04 Javascript

jquery如何获取元素的滚动条高度等实现代码

Oct 19 Javascript

DWR3 访问WEB元素的两种方法实例详解

Jan 03 Javascript

正则验证小数点后面只能有两位数的方法

Feb 28 Javascript

vue.js全局API之nextTick全面解析

Jul 07 Javascript

layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例

Sep 22 Javascript

详解Web使用webpack构建前端项目

Sep 23 Javascript

详解node child_process模块学习笔记

Jan 24 Javascript

vue项目如何监听localStorage或sessionStorage的变化

Jan 04 Vue.js

vue首次渲染全过程

Apr 21 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="form"及role作用角色

Dec 08 #Javascript

Bootstrap基本插件学习笔记之标签切换(17)

Dec 08 #Javascript

Bootstrap基本插件学习笔记之Popover提示框(19)

Dec 08 #Javascript

You might like

php获取远程图片体积大小的实例

2013/11/12 PHP

Codeigniter的一些优秀特性总结

2015/01/21 PHP

php使用curl并发减少后端访问时间的方法分析

2016/05/12 PHP

JavaScript 变量命名规则

2009/09/23 Javascript

json-lib出现There is a cycle in the hierarchy解决办法

2010/02/24 Javascript

jQuery获取注册信息并提示实现代码

2013/04/21 Javascript

js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS

2013/11/18 Javascript

配置Grunt的Task时通配符支持和动态生成文件名问题

2015/09/06 Javascript

jQuery使用$.ajax进行即时验证实例详解

2015/12/11 Javascript

AngularJS变量及过滤器Filter用法分析

2016/11/22 Javascript

BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析

2016/12/01 Javascript

jQuery倒计时代码(超简单)

2017/02/27 Javascript

基于Vue生产环境部署详解

2017/09/15 Javascript

JavaScript实现HTML5游戏断线自动重连的方法

2017/09/18 Javascript

详解Vue项目编译后部署在非网站根目录的解决方案

2018/04/26 Javascript

js实现点击展开隐藏效果（实例代码）

2018/09/28 Javascript

python实现获取序列中最小的几个元素

2014/09/25 Python

python 采集中文乱码问题的完美解决方法

2016/09/27 Python

django中的HTML控件及参数传递方法

2018/03/20 Python

如何分离django中的媒体、静态文件和网页

2019/11/12 Python

python通过文本在一个图中画多条线的实例

2020/02/21 Python

python 通过文件夹导入包的操作

2020/06/01 Python

PyTorch: Softmax多分类实战操作

2020/07/07 Python

Python全局变量与global关键字常见错误解决方案

2020/10/05 Python

用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案

2021/03/03 Python

Spartoo西班牙官网：法国时尚购物网站

2018/03/27 全球购物

高中生校园生活自我评价

2013/09/19 职场文书

毕业生实习鉴定

2013/12/11 职场文书

护理毕业生自荐信范文

2013/12/22 职场文书

前台文员岗位职责

2013/12/28 职场文书

《浅水洼里的小鱼》听课反思

2014/02/28 职场文书

社区春季防火方案

2014/06/02 职场文书

初中差生评语

2014/12/29 职场文书

人事行政助理岗位职责

2015/04/11 职场文书

贷款收入证明范本

2015/06/12 职场文书

嵌入式Redis服务器在Spring Boot测试中的使用教程

2021/07/21 Redis