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

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="form"及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