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>

效果如下:

Bootstrap基本组件学习笔记之面板(14)

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

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=&quot;form&quot;及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