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

window.open被浏览器拦截后的自定义提示效果代码

Nov 19 Javascript

javascript 冒泡排序正序和倒序实现代码

Dec 14 Javascript

js操作iframe兼容各种主流浏览器示例代码

Jul 22 Javascript

onkeyup，onkeydown和onkeypress的区别介绍

Oct 21 Javascript

一个jquery实现的不错的多行文字图片滚动效果

Sep 28 Javascript

返回顶部按钮响应滚动且动态显示与隐藏

Oct 14 Javascript

JS onkeypress兼容性写法详解

Apr 27 Javascript

JQuery 传送中文乱码问题的简单解决办法

May 24 Javascript

JavaScript+CSS相册特效实例代码

Sep 07 Javascript

彻底揭秘keep-alive原理(小结)

May 05 Javascript

js实现微信聊天界面

Aug 09 Javascript

vue使用v-model进行跨组件绑定的基本实现方法

Apr 28 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

C#使用PHP服务端的Web Service通信实例

2014/04/08 PHP

获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft （For:IE5＋ FF1 ）[

2006/12/22 Javascript

JavaScript Konami Code 实现代码

2009/07/29 Javascript

一个简单的javascript类定义例子

2009/09/12 Javascript

js prototype截取字符串函数

2010/04/01 Javascript

关于jQuery参考实例 1.0 jQuery的哲学

2013/04/07 Javascript

Javascript中的五种数据类型详解

2014/12/26 Javascript

ECMAScript6新增值比较函数Object.is

2015/06/12 Javascript

实现高性能JavaScript之执行与加载

2016/01/30 Javascript

AngularJS 单元测试（一）详解

2016/09/21 Javascript

Angular ng-repeat指令实例以及扩展部分

2016/12/26 Javascript

Easyui笔记2：实现datagrid多行删除的示例代码

2017/01/14 Javascript

jquery动态赋值id与动态取id方法示例

2017/08/21 jQuery

使用Vue开发动态刷新Echarts组件的教程详解

2018/03/22 Javascript

webpack 样式加载的实现原理

2018/06/12 Javascript

开发一个Parcel-vue脚手架工具(详细步骤)

2018/09/22 Javascript

谈谈JavaScript中super(props)的重要性

2019/02/12 Javascript

jquery实现动态创建form并提交的方法示例

2019/05/27 jQuery

Layui 动态禁止select下拉的例子

2019/09/03 Javascript

vue 返回上一页,页面样式错乱的解决

2019/11/14 Javascript

react结合bootstrap实现评论功能

2020/05/30 Javascript

用Nodejs实现在终端中炒股的实现

2020/10/18 NodeJs

[01:17:12]职来职往完美电竞专场

2014/09/18 DOTA

Python中Continue语句的用法的举例详解

2015/05/14 Python

pandas中apply和transform方法的性能比较及区别介绍

2018/10/30 Python

python 实现将小图片放到另一个较大的白色或黑色背景图片中

2019/12/12 Python

Python注释、分支结构、循环结构、伪“选择结构”用法实例分析

2020/01/09 Python

Python3.6安装卸载、执行命令、执行py文件的方法详解

2020/02/20 Python

python安装cx_Oracle和wxPython的方法

2020/09/14 Python

canvas烟花特效锦集

2018/01/17 HTML / CSS

巴西最大的运动品牌：Olympikus

2020/07/14 全球购物

心理健康教育心得体会

2013/12/29 职场文书

企业爱心捐款倡议书

2015/04/27 职场文书

2015年小学校长工作总结

2015/05/19 职场文书

2016年习总书记讲话学习心得体会

2016/01/20 职场文书

Win11怎么修改电源模式？Win11修改电源模式的方法

2022/04/05 数码科技