编程 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 面向对象重载

May 13 Javascript

javascript中将Object转换为String函数代码 (json str)

Apr 29 Javascript

jQuery基础语法实例入门

Dec 23 Javascript

Node.js实现文件上传

Jul 05 Javascript

基于jQuery实现的打字机效果

Jan 16 Javascript

详解vue-cil和webpack中本地静态图片的路径问题解决方案

Sep 27 Javascript

vue 纯js监听滚动条到底部的实例讲解

Sep 03 Javascript

微信开发之微信jssdk录音功能开发示例

Oct 22 Javascript

vue-cli3 DllPlugin 提取公用库的方法

Apr 24 Javascript

详解用async/await来处理异步

Aug 28 Javascript

JavaScript回调函数callback用法解析

Jan 14 Javascript

VSCode Vue开发推荐插件和VSCode快捷键(小结)

Aug 08 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

YB217、YB235、YB400浅听

2021/03/02 无线电

php 生成静态页面的办法与实现代码详细版

2010/02/15 PHP

php采用curl模仿登录人人网发布动态的方法

2014/11/07 PHP

学习php设计模式 php实现备忘录模式(Memento)

2015/12/09 PHP

理解JavaScript中的事件

2006/09/23 Javascript

javascript中对对层的控制

2006/12/29 Javascript

关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法

2010/11/30 Javascript

FusionCharts图表显示双Y轴双(多)曲线

2012/11/22 Javascript

关于JavaScript与HTML的交互事件

2013/04/12 Javascript

JQuery设置和去除disabled属性的5种方法总结

2013/05/16 Javascript

jQuery操作Select的Option上下移动及移除添加等等

2013/11/18 Javascript

js实现文本框中输入文字页面中div层同步获取文本框内容的方法

2015/03/03 Javascript

jQuery验证插件validation使用指南

2015/04/21 Javascript

javascript实现tab切换的两个实例

2015/11/05 Javascript

【经验总结】编写JavaScript代码时应遵循的14条规律

2016/06/20 Javascript

ES6中参数的默认值语法介绍

2017/05/03 Javascript

AngularJs 最新验证手机号码的实例,成功测试通过

2017/11/26 Javascript

MVVM框架下实现分页功能示例

2018/06/14 Javascript

微信小程序实现图片上传

2019/05/23 Javascript

在vue中把含有html标签转为html渲染页面的实例

2019/10/28 Javascript

Vue v-bind动态绑定class实例方法

2020/01/15 Javascript

[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19

2018/08/21 DOTA

用python登录Dr.com思路以及代码分享

2014/06/25 Python

python简单实现旋转图片的方法

2015/05/30 Python

python函数装饰器用法实例详解

2015/06/04 Python

Python修改MP3文件的方法

2015/06/15 Python

Python爬虫实例扒取2345天气预报

2018/03/04 Python

Django + Uwsgi + Nginx 实现生产环境部署的方法

2018/06/20 Python

利用Python如何批量更新服务器文件

2018/07/29 Python

Pycharm2020最新激活码|永久激活(附最新激活码和插件的详细教程)

2020/09/29 Python

HTML里显示pdf、word、xls、ppt的方法示例

2020/04/14 HTML / CSS

小女主人连衣裙：Little Mistress

2017/07/10 全球购物

《月迹》教学反思

2014/02/19 职场文书

房屋出租委托书格式

2014/09/23 职场文书

表扬稿表扬信的格式及范文

2019/06/24 职场文书

Python 阶乘详解

2021/10/05 Python