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

js控制表单操作的常用代码小结

Aug 15 Javascript

js实现简单的星级选择器提交效果适用于评论等

Oct 18 Javascript

给文字加上着重号的JS代码

Nov 12 Javascript

jquery动态改变form属性提交表单

Jun 03 Javascript

JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例

Feb 13 Javascript

简述Jquery与DOM对象

Jul 10 Javascript

jQuery Validate插件实现表单强大的验证功能

Dec 18 Javascript

jQuery给指定的table动态添加删除行的操作方法

Oct 12 Javascript

jQuery简单实现遍历单选框的方法

Mar 06 Javascript

详解nuxt sass全局变量(公共scss解决方案)

Jun 27 Javascript

Vue使用vue-draggable 插件在不同列表之间拖拽功能

Mar 12 Javascript

利用 JavaScript 实现并发控制的示例代码

Dec 31 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

destoon实现商铺管理主页设置增加新菜单的方法

2014/06/26 PHP

php中常量DIRECTORY_SEPARATOR用法深入分析

2014/11/14 PHP

PHP获取当前日期及本周一是几月几号的方法

2017/03/28 PHP

PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法

2017/11/10 PHP

JavaScript 输入框内容格式验证代码

2010/02/11 Javascript

poshytip 基于jquery的插件主要用于显示微博人的图像和鼠标提示等

2012/10/12 Javascript

js截取字符串的两种方法及区别详解

2013/11/05 Javascript

详解JavaScript中undefined与null的区别

2014/03/29 Javascript

node.js超时timeout详解

2014/11/26 Javascript

jQuery往textarea中光标所在位置插入文本的方法

2015/06/26 Javascript

JavaScript函数中关于valueOf和toString的理解

2016/06/14 Javascript

AngularJS内建服务$location及其功能详解

2016/07/01 Javascript

AngularJS 自定义指令详解及示例代码

2016/08/17 Javascript

jQuery操作复选框(CheckBox)的取值赋值实现代码

2017/01/10 Javascript

javascript 正则表达式分组、断言详解

2017/04/20 Javascript

JS点击缩略图整屏居中放大图片效果

2017/07/04 Javascript

JavaScript 程序错误Cannot use 'in' operator to search的解决方法

2017/07/10 Javascript

JavaScript判断浏览器和hack滚动条的写法

2017/07/23 Javascript

浅析Vue.js 中的条件渲染指令

2018/11/19 Javascript

js tab栏切换代码实例解析

2019/09/03 Javascript

Vue使用Proxy代理后仍无法生效的解决

2020/11/13 Javascript

[00:32]2018DOTA2亚洲邀请赛OpTic出场

2018/04/03 DOTA

Python实现方便使用的级联进度信息实例

2015/05/05 Python

python 开发的三种运行模式详细介绍

2017/01/18 Python

Python二维码生成识别实例详解

2019/07/16 Python

python 函数的缺省参数使用注意事项分析

2019/09/17 Python

django序列化serializers过程解析

2019/12/14 Python

python实现将列表中各个值快速赋值给多个变量

2020/04/02 Python

前端面试必备之CSS3的新特性

2017/09/05 HTML / CSS

CSS3的Border-radius轻松制作圆角

2012/12/24 HTML / CSS

UNIX特点都有哪些

2016/04/05 面试题

导游实习生自荐书

2014/01/28 职场文书

客户接待方案

2014/02/26 职场文书

合同审查法律意见书

2015/06/04 职场文书

关于办理居住证的介绍信模板

2019/11/27 职场文书

LayUI+Shiro实现动态菜单并记住菜单收展的示例

2021/05/06 Javascript