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 相关文章推荐
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
Oct 11 Javascript
如何学习Javascript入门指导
Nov 01 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
Jul 04 Javascript
JS中自定义定时器让它在某一时刻执行
Sep 02 Javascript
使用Promise解决多层异步调用的简单学习心得
May 17 Javascript
Bootstrap CSS组件之按钮组(btn-group)
Dec 17 Javascript
使用原生的javascript来实现轮播图
Feb 24 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 Javascript
JavaScript解析及序列化JSON的方法实例分析
Jan 04 Javascript
微信小程序实现拖拽功能
Sep 26 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 cdata 处理(详细介绍)
2013/07/05 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
JS获取鼠标选中的文字
2016/08/10 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
2016/09/28 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
jQuery Masonry瀑布流布局神器使用详解
2017/05/25 jQuery
ztree简介_动力节点Java学院整理
2017/07/19 Javascript
weex slider实现滑动底部导航功能
2017/08/28 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
JQuery表单元素取值赋值方法总结
2020/05/12 jQuery
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
[59:35]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第一场 1月8日
2021/03/11 DOTA
Python SQL查询并生成json文件操作示例
2018/08/17 Python
pandas求两个表格不相交的集合方法
2018/12/08 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
护理自我鉴定范文
2013/10/06 职场文书
网游商务专员求职信
2013/10/15 职场文书
建筑工程专业毕业生自荐信
2013/10/19 职场文书
广告学专业毕业生自荐信
2014/05/28 职场文书
副主任竞聘演讲稿
2014/08/18 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
横店影视城导游词
2015/02/06 职场文书
bootstrapv4轮播图去除两侧阴影及线框的方法
2022/02/15 HTML / CSS
利用Python多线程实现图片下载器
2022/03/25 Python