编程 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 27 Javascript

神奇的代码通杀各种网站-可随意修改复制页面内容

Jul 17 Javascript

js(jQuery)获取时间的方法及常用时间类搜集

Oct 23 Javascript

Javascript实现鼠标右键特色菜单

Aug 04 Javascript

jQuery实现的跨容器无缝拖动效果代码

Jun 21 Javascript

jQuery实现页面点击后退弹出提示框的方法

Aug 24 Javascript

jQuery为动态生成的select元素添加事件的方法

Aug 29 Javascript

js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数

Oct 25 Javascript

jQuery Validate设置onkeyup验证的实例代码

Dec 09 Javascript

基于axios封装fetch方法及调用实例

Feb 05 Javascript

vue 动态组件(component :is) 和 dom元素限制(is)用法说明

Sep 04 Javascript

在antd Form表单中select设置初始值操作

Nov 02 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 危险函数全解析

2009/09/09 PHP

php 目录与文件处理-郑阿奇(续)

2011/07/04 PHP

php算法实例分享

2015/07/14 PHP

我整理的PHP 7.0主要新特性

2016/01/07 PHP

JavaScript RegExp方法获取地址栏参数(面向对象)

2009/03/10 Javascript

jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法

2010/10/22 Javascript

基于jQuery的图片剪切插件

2011/08/03 Javascript

7个去伪存真的JavaScript面试题

2016/01/07 Javascript

浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题

2016/10/10 Javascript

Vue关于数据绑定出错解决办法

2017/05/15 Javascript

详解JavaScript调用栈、尾递归和手动优化

2017/06/03 Javascript

jQuery实现碰到边缘反弹的动画效果

2018/02/24 jQuery

JavaScript实现动态生成表格

2020/08/02 Javascript

React Native登录之指纹登录篇的示例代码

2020/11/03 Javascript

如何正确解决VuePress本地访问出现资源报错404的问题

2020/12/03 Vue.js

jquery实现鼠标悬浮弹出气泡提示框

2020/12/23 jQuery

[54:26]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第一场 12.10

2020/12/12 DOTA

python中引用与复制用法实例分析

2015/06/04 Python

用tensorflow搭建CNN的方法

2018/03/05 Python

Python中循环后使用list.append()数据被覆盖问题的解决

2018/07/01 Python

python查看列的唯一值方法

2018/07/17 Python

Python如何发布程序的详细教程

2018/10/09 Python

Python算法中的时间复杂度问题

2019/11/19 Python

Python 实现数组相减示例

2019/12/27 Python

pytorch自定义二值化网络层方式

2020/01/07 Python

解决python-docx打包之后找不到default.docx的问题

2020/02/13 Python

基于python爬取链家二手房信息代码示例

2020/10/21 Python

基于CSS3的animation属性实现微信拍一拍动画效果

2020/06/22 HTML / CSS

Qoo10马来西亚：全球时尚和引领潮流的购物市场

2016/08/25 全球购物

自我评价的写作规则

2014/01/06 职场文书

护理助产毕业生的求职信

2014/03/02 职场文书

优秀党务工作者事迹材料

2014/05/07 职场文书

2015年全国爱耳日活动总结

2015/02/27 职场文书

交心谈心活动总结

2015/05/11 职场文书

Nginx 负载均衡是什么以及该如何配置

2021/03/31 Servers

如何在C++中调用Python

2021/05/21 Python