编程 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操作CheckBoxList实现全选/反选(在客服端完成)

Feb 02 Javascript

javascript Array.prototype.slice的使用示例

Nov 14 Javascript

js实现鼠标感应图片展示的方法

Feb 27 Javascript

js跨浏览器的事件侦听器和事件对象的使用方法

Dec 17 Javascript

jQuery Form 表单提交插件之formSerialize，fieldSerialize，fieldValue，resetForm，clearForm，clearFields的应用

Jan 23 Javascript

Vue.js第三天学习笔记（计算属性computed）

Dec 01 Javascript

Angular 输入框实现自定义验证功能

Feb 19 Javascript

深入理解vue-router之keep-alive

Aug 31 Javascript

react实现菜单权限控制的方法

Dec 11 Javascript

layui的布局和表格的渲染以及动态生成表格的方法

Sep 18 Javascript

JavaScript实现省市联动效果

Nov 22 Javascript

vue3.0搭配.net core实现文件上传组件

Oct 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

PHP比较运算符的详细介绍

2015/09/29 PHP

PHP操作FTP类 (上传、下载、移动、创建等)

2016/03/31 PHP

如何解决PHP获取不到SESSION信息之一般情况

2019/10/10 PHP

找到一点可怜的关于dojo资料，谢谢作者！

2006/12/06 Javascript

基于逻辑运算的简单权限系统(实现) JS 版

2007/03/24 Javascript

Javascript 学习笔记错误处理

2009/07/30 Javascript

手把手教你自己写一个js表单验证框架的方法

2010/09/14 Javascript

jquery选择器、属性设置用法经验总结

2013/09/08 Javascript

不要使用jQuery触发原生事件的方法

2014/03/03 Javascript

javascript实现的一个带下拉框功能的文本框

2014/05/08 Javascript

使用pjax实现无刷新更改页面url

2015/02/05 Javascript

Angularjs分页查询的实现

2017/02/24 Javascript

vue2.0使用swiper组件实现轮播效果

2017/11/27 Javascript

vue v-for 使用问题整理小结

2019/08/04 Javascript

解决Vue 刷新页面导航显示高亮位置不对问题

2019/12/25 Javascript

Vue 401配合Vuex防止多次弹框的案例

2020/11/11 Javascript

python生成验证码图片代码分享

2016/01/28 Python

Python利用itchat对微信中好友数据实现简单分析的方法

2017/11/21 Python

python merge、concat合并数据集的实例讲解

2018/04/12 Python

Python基于生成器迭代实现的八皇后问题示例

2018/05/23 Python

python批量导入数据进Elasticsearch的实例

2018/05/30 Python

pandas实现to_sql将DataFrame保存到数据库中

2019/07/03 Python

python实现爱奇艺登陆密码RSA加密的方法示例详解

2020/05/27 Python

pycharm-professional-2020.1下载与激活的教程

2020/09/21 Python

详解Python遍历列表时删除元素的正确做法

2021/01/07 Python

高校辅导员推荐信范文

2013/12/25 职场文书

学校门卫管理制度

2014/01/30 职场文书

端午节粽子促销活动方案

2014/02/02 职场文书

2014社区三八妇女节活动方案

2014/03/30 职场文书

纪律教育学习心得体会

2014/09/02 职场文书

合同和协议有什么区别？

2014/10/08 职场文书

交通事故代理词范文

2015/05/23 职场文书

小学运动会入场词

2015/07/18 职场文书

青年干部培训班学习心得体会

2016/01/06 职场文书

深入理解go slice结构

2021/09/15 Golang

Nginx安装配置详解

2022/06/25 Servers