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

免费空间广告万能消除代码

Sep 04 Javascript

用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1

Feb 23 Javascript

javascript window对象属性整理

Oct 24 Javascript

JQuery 插件模板制作jquery插件的朋友可以参考下

Mar 17 Javascript

jQuery插件 selectToSelect使用方法

Oct 02 Javascript

js检测离开或刷新页面时表单数据是否更改的方法

Aug 02 Javascript

B/S(Web)实时通讯解决方案分享

Apr 06 Javascript

js-FCC算法-No repeats please字符串的全排列(详解)

May 02 Javascript

原生JS实现 MUI导航栏透明渐变效果

Nov 07 Javascript

vue二级菜单导航点击选中事件的方法

Sep 12 Javascript

微信小程序基于canvas渐变实现的彩虹效果示例

May 03 Javascript

typescript编写微信小程序创建项目的方法

Jan 29 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

日本收入最高的漫画家：海贼王作者版税年收入高达8.45亿元

2020/03/04 日漫

终于听上了直流胆调频

2021/03/02 无线电

PHP如何透过ODBC来存取数据库

2006/10/09 PHP

PHP配置心得包含MYSQL5乱码解决

2006/11/20 PHP

php中防止恶意刷新页面的代码小结

2012/10/31 PHP

PHP常用特殊运算符号和函数总结(php新手入门必看)

2013/02/02 PHP

PHP获取当前url的具体方法全面解析

2013/11/26 PHP

php+highchats生成动态统计图

2014/05/21 PHP

PHP生成RSS文件类实例

2014/12/05 PHP

PHP封装的HttpClient类用法实例

2015/06/17 PHP

CodeIgniter连贯操作的底层原理分析

2016/05/17 PHP

PHP编程计算文件或数组中单词出现频率的方法

2017/05/22 PHP

PHP钩子与简单分发方式实例分析

2017/09/04 PHP

JS画5角星方法介绍

2013/09/17 Javascript

开启Javascript中apply、call、bind的用法之旅模式

2015/10/28 Javascript

Jquery插件之Fancybox丰富的弹出层效果附源码下载

2015/12/02 Javascript

JavaScript校验Number(4,1)格式的数字实例代码

2017/03/13 Javascript

原生js封装自定义滚动条

2017/03/24 Javascript

bootstrap可编辑下拉框jquery.editable-select

2017/10/12 jQuery

Vue实现搜索和新闻列表功能简单范例

2018/03/16 Javascript

微信小程序实现预览图片功能

2020/10/22 Javascript

细说Vue组件的服务器端渲染的过程

2019/05/30 Javascript

微信小程序实现日期格式化和倒计时

2020/11/01 Javascript

用Python编写一个简单的Lisp解释器的教程

2015/04/03 Python

python tornado微信开发入门代码

2018/08/24 Python

使用python客户端访问impala的操作方式

2020/03/28 Python

python 实用工具状态机transitions

2020/11/21 Python

Pycharm 解决自动格式化冲突的设置操作

2021/01/15 Python

五个2015 年最佳HTML5 框架

2015/11/11 HTML / CSS

财务经理的岗位职责

2013/12/17 职场文书

简历上的自我评价怎么写

2014/01/28 职场文书

部队万能检讨书

2014/02/20 职场文书

保险公司晨会主持词

2014/03/22 职场文书

竞选文艺委员演讲稿

2014/04/28 职场文书

新教师教学工作总结

2015/08/14 职场文书

SpringDataJPA在Entity中常用的注解介绍

2021/12/06 Java/Android