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

javascript自执行函数之伪命名空间封装法

Dec 25 Javascript

基于jquery的文本框与autocomplete结合使用(asp.net+json)

May 30 Javascript

Node.js的特点和应用场景介绍

Nov 04 Javascript

jQuery构造函数init参数分析续

May 13 Javascript

jQuery取得iframe中元素的常用方法详解

Jan 14 Javascript

JS+CSS3制作炫酷的弹窗效果

Nov 08 Javascript

jQuery编写网页版2048小游戏

Jan 06 Javascript

javascript 数组排序与对象排序的实例

Jul 17 Javascript

jQuery实现的导航条点击后高亮显示功能示例

Mar 04 jQuery

layui radio点击事件实现input显示和隐藏的例子

Sep 02 Javascript

解决Layui数据表格显示无数据提示的问题

Nov 14 Javascript

JS浏览器BOM常见操作实例详解

Apr 27 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

如何提高MYSQL数据库的查询统计速度 select 索引应用

2007/04/11 PHP

apache php模块整合操作指南

2012/11/16 PHP

javascript 哈希表(hashtable)的简单实现

2010/01/20 Javascript

js常用排序实现代码

2010/12/28 Javascript

JQuery插件iScroll实现下拉刷新，滚动翻页特效

2014/06/22 Javascript

jQuery实现大转盘抽奖活动仿QQ音乐代码分享

2015/08/21 Javascript

Bootstrap Table的使用总结

2016/10/08 Javascript

jQuery焦点图左右转换效果

2016/12/12 Javascript

根据Bootstrap Paginator改写的js分页插件

2016/12/25 Javascript

Vue非父子组件通信详解

2017/06/12 Javascript

highcharts 在angular中的使用示例代码

2017/09/20 Javascript

让网站自动生成章节目录索引的多个js代码

2018/01/07 Javascript

深入理解Node module模块

2018/03/26 Javascript

Vue 让元素抖动/摆动起来的实现代码

2018/05/31 Javascript

vue和webpack打包项目相对路径修改的方法

2018/06/15 Javascript

浅谈Vue项目骨架屏注入实践

2019/08/05 Javascript

vue项目启动出现cannot GET /服务错误的解决方法

2020/04/26 Javascript

Python的Flask站点中集成xhEditor文本编辑器的教程

2016/06/13 Python

Python数据分析之如何利用pandas查询数据示例代码

2017/09/01 Python

Python读写docx文件的方法

2018/05/08 Python

tensorflow实现简单的卷积网络

2018/05/24 Python

python人民币小写转大写辅助工具

2018/06/20 Python

python中单下划线_的常见用法总结

2018/07/10 Python

Django进阶之CSRF的解决

2018/08/01 Python

python爬虫基础教程：requests库（二）代码实例

2019/04/09 Python

css3实现六边形边框的实例代码

2019/05/24 HTML / CSS

Html5新增标签有哪些

2017/04/13 HTML / CSS

SCHIESSER荷兰官方网站：德国内衣专家

2020/10/09 全球购物

网络书店创业计划书

2014/02/07 职场文书

《桂林山水》教学反思

2014/02/08 职场文书

通信工程求职信

2014/07/16 职场文书

三八活动策划方案

2014/08/17 职场文书

医学检验专业自荐信

2014/09/18 职场文书

2015年仓库管理员工作总结

2015/04/21 职场文书

2015年秋季运动会前导词

2015/07/20 职场文书

CSS实现多个元素在盒子内两端对齐效果

2021/03/30 HTML / CSS