编程 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 相关文章推荐

这些年、我收集的JQuery代码小结

Aug 01 Javascript

JavaScript中的noscript元素属性位置及作用介绍

Apr 11 Javascript

jquery实现一个简单的表单验证实例

Mar 30 Javascript

Node.js Streams文件读写操作详解

Jul 04 Javascript

学习JavaScript图片预加载模块

Nov 07 Javascript

EasyUI Combobox设置默认值获取text的方法

Nov 28 Javascript

Vue2.0组件间数据传递示例

Mar 07 Javascript

AngularJS实现的输入框字数限制提醒功能示例

Oct 26 Javascript

Vue使用高德地图搭建实时公交应用功能（地图 + 附近站点+线路详情 + 输入提示+换乘详情）

May 16 Javascript

vue使用ElementUI时导航栏默认展开功能的实现

Jul 04 Javascript

Angular-UI Bootstrap组件实现警报功能

Jul 16 Javascript

vuex根据不同的用户权限展示不同的路由列表功能

Sep 20 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

PHP中将数组转成XML格式的实现代码

2011/08/08 PHP

php生成二维码的几种方式整理及使用实例

2013/06/03 PHP

php类常量的使用详解

2013/06/08 PHP

用PHP生成excel文件到指定目录

2015/06/22 PHP

php实现源代码加密的方法

2015/07/11 PHP

PHP在同一域名下两个不同的项目做独立登录机制详解

2017/09/22 PHP

thinkPHP3.2.2框架行为扩展及demo示例

2018/06/19 PHP

jQuery 遍历json数组的实现代码

2020/09/22 Javascript

jQuery EasyUI API 中文文档 - ComboGrid 组合表格

2011/10/13 Javascript

JQuery验证工具类搜集整理

2013/01/16 Javascript

JS动态添加与删除select中的Option对象(示例代码)

2013/12/25 Javascript

jQuery实现ajax的叠加和停止(终止ajax请求)

2016/08/08 Javascript

gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)

2016/08/24 Javascript

js当前页面登录注册框,固定div,底层阴影的实例代码

2016/10/04 Javascript

JS 组件系列之 bootstrap treegrid 组件封装过程

2017/04/28 Javascript

vue 粒子特效的示例代码

2017/09/19 Javascript

Vue调试神器vue-devtools安装方法

2017/12/12 Javascript

IE8中jQuery.load()加载页面不显示的原因

2018/11/15 jQuery

基于Node的Axure文件在线预览的实现代码

2019/08/28 Javascript

JavaScript中跨域问题的深入理解

2021/03/04 Javascript

python实现的简单窗口倒计时界面实例

2015/05/05 Python

python轻松查到删除自己的微信好友

2016/01/10 Python

python异常处理和日志处理方式

2019/12/24 Python

python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法

2020/02/26 Python

Python3 操作 MySQL 插入一条数据并返回主键 id的实例

2020/03/02 Python

用CSS3打造HTML5的Logo(实现代码)

2016/06/16 HTML / CSS

烹调加工管理制度

2014/02/04 职场文书

门店业绩提升方案

2014/06/08 职场文书

大学生工作求职信

2014/06/23 职场文书

2014年党风建设工作总结

2014/11/19 职场文书

导游词之西递宏村

2019/12/10 职场文书

win10下go mod配置方式

2021/04/25 Golang

CSS 还能这样玩？奇思妙想渐变的艺术

2021/04/27 HTML / CSS

TV动画《神废柴☆偶像》公布先导PV

2022/03/20 日漫

win10壁纸在哪个文件夹 win10桌面背景图片文件位置分享

2022/08/05 数码科技

postgresql如何找到表中重复数据的行并删除

2023/05/08 MySQL