编程 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 Select标记中options操作方法集合

Oct 22 Javascript

AlertBox 弹出层信息提示框效果实现步骤

Oct 11 Javascript

jQuery中first()方法用法实例

Jan 06 Javascript

JavaScript通过prototype给对象定义属性用法实例

Mar 23 Javascript

jQuery实现div拖拽效果实例分析

Feb 20 Javascript

Bootstrap教程JS插件弹出框学习笔记分享

May 17 Javascript

利用node.js实现反向代理的方法详解

Jul 24 Javascript

vue router学习之动态路由和嵌套路由详解

Sep 21 Javascript

微信小程序自定义复选框实现代码实例

Sep 04 Javascript

解决echarts图表使用v-show控制图表显示不全的问题

Jul 19 Javascript

vue+iview分页组件的封装

Nov 17 Vue.js

echarts柱状图背景重叠组合而非并列的实现代码

Dec 10 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数组随机排序实现方法

2015/06/13 PHP

ThinkPHP表单令牌错误的相关解决方法分析

2016/05/20 PHP

dotopAlert 提示用户需安装播放器的代码

2012/09/17 Javascript

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

2013/12/20 Javascript

javascript中的取反再取反~~没有意义

2014/04/06 Javascript

javascript中几个容易混淆的概念总结

2015/04/14 Javascript

JS实现选择TextArea内文本的方法

2015/08/03 Javascript

js实现点击图片自动提交action的简单方法

2016/10/16 Javascript

React组件的三种写法总结

2017/01/12 Javascript

详解Jquery EasyUI tree 的异步加载（遍历指定文件夹，根据文件夹内的文件生成tree）

2017/02/11 Javascript

整理关于Bootstrap过渡动画的慕课笔记

2017/03/29 Javascript

Angularjs根据json文件动态生成路由状态的实现方法

2017/04/17 Javascript

React-Native 组件之 Modal的使用详解

2017/08/08 Javascript

详解webpack与SPA实践之开发环境搭建

2017/12/18 Javascript

解决Linux无法正常安装与卸载Node.js的方法

2018/01/19 Javascript

vue项目中使用tinymce编辑器的步骤详解

2018/09/11 Javascript

Vue-不允许嵌套式的渲染方法

2018/09/13 Javascript

微信小程序实现无限滚动列表

2020/05/29 Javascript

微信小程序 wepy框架与iview-weapp的用法详解

2019/04/10 Javascript

node读写Excel操作实例分析

2019/11/06 Javascript

JS实现扫码枪扫描二维码功能

2020/01/03 Javascript

jQuery 实现扁平式小清新导航

2020/07/07 jQuery

Openlayers实现点闪烁扩散效果

2020/09/24 Javascript

Python实现删除文件但保留指定文件

2015/06/21 Python

python数据处理——对pandas进行数据变频或插值实例

2020/04/22 Python

Python实现http接口自动化测试的示例代码

2020/10/09 Python

SISLEY希思黎官方旗舰店：享誉全球的奢华植物美容品牌

2018/04/25 全球购物

迷你唐卡软皮鞋：Minnetonka Moccasin

2018/05/01 全球购物

电子商务专业自我鉴定

2013/12/18 职场文书

小学生作文评语大全

2014/04/21 职场文书

开幕式邀请函

2015/01/31 职场文书

团员个人总结

2015/02/26 职场文书

ThinkPHP5和ThinkPHP6的区别

2021/03/31 PHP

详解Spring事件发布与监听机制

2021/06/30 Java/Android

Nginx 路由转发和反向代理location配置实现

2021/11/11 Servers

js前端面试常见浏览器缓存强缓存及协商缓存实例

2022/06/21 Javascript