看程序学bootstrap26-组件之 面板

最新推荐文章于 2020-11-24 19:40:30 发布
最新推荐文章于 2020-11-24 19:40:30 发布
阅读量102 收藏
点赞数
分类专栏： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tujiahao1/article/details/93641589
版权

示例 1 : 基本面板

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<div class="panel panel-default">
  <div class="panel-body">
    面板内容
  </div>
</div>

示例 2 : 面板标题

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="panel panel-default">
  <div class="panel-heading">面板标题</div>
  <div class="panel-body">
    面板内容
  </div>
</div>

示例 3 : 面板脚注

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="panel panel-default">
  <div class="panel-body">
    面板内容
  </div>
  <div class="panel-footer">面板脚注</div>
</div>

示例 4 : 面板颜色

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="panel panel-default">
  <div class="panel-heading">面板标题</div>
  <div class="panel-body">
    面板内容
  </div>
</div>
<div class="panel panel-success">
  <div class="panel-heading">面板标题</div>
  <div class="panel-body">
    面板内容
  </div>
</div>
<div class="panel panel-info">
  <div class="panel-heading">面板标题</div>
  <div class="panel-body">
    面板内容
  </div>
</div>
<div class="panel panel-warning">
  <div class="panel-heading">面板标题</div>
  <div class="panel-body">
    面板内容
  </div>
</div>
<div class="panel panel-danger">
  <div class="panel-heading">面板标题</div>
  <div class="panel-body">
    面板内容
  </div>
</div>
涂家豪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap-closable-tab tab可关闭组件
06-10
Bootstrap是一款广泛使用的前端框架，它提供了...通过研究这些文件，你可以学习如何自定义和扩展Bootstrap组件，以及如何将这种功能集成到自己的项目中。这不仅加深了对Bootstrap框架的理解，还提升了前端开发技能。
面板的五个部分
weixin_30859423的博客
10-24 113
//这段代码在VS中执行结果与firebug下有差别，不同之处就是底端工具栏的显示.还有就是标题栏的工具按钮显示有问题 //Ext.get(document.body).update('<div />'); var firstPanel = Ext.create('Ext.panel.Panel', { coll...
Bootstrap 面板
soindy
03-23 1511
整理自慕课笔记 面板（Panels）是Bootstrap框架新增的一个组件，其主要作用就是用来处理一些其他组件无法完成的功能。基础面板基础面板非常简单，就是一个div容器运用了“panel”样式，产生一个具有边框的文本显示块。由于“panel”不控制主题颜色，所以在“panel”的基础上增加一个控制颜色的主题“panel-default”，另外在里面添加了一个“div.panel-body”来放置
BootStrap笔记——面板、嵌入效果
senmu_的博客
11-24 305
面板 1.基本面板 <div class="panel panel-default"> <div class="panel-body"> 这是一个基本的面板 </div> </div> 2.面板标题 <div class="panel panel-default"> <div class="panel-heading"> 不带 title 的面板标题 </div> <di
Bootstrap 面板（Panels）
weixin_33950035的博客
01-28 116
2019独角兽企业重金招聘Python工程师标准>>> ...
startbootstrap-sb-admin-2-master
09-26
这个模板基于 Bootstrap 框架，Bootstrap 是 Twitter 推出的一个开源的用于前端开发的工具集，包括 CSS、JavaScript 和组件，具有响应式设计，能够适应各种屏幕尺寸，从而确保在不同设备上的良好显示效果。...
Axure Bootstrap 3 组件
07-28
一旦导入成功，这些Bootstrap组件就会出现在库面板中，设计师可以拖放它们到工作区，快速搭建具有Bootstrap风格的原型界面。 Bootstrap 3 的关键特性包括： 1. **响应式布局**：Bootstrap 3 提供了一个流式网格...
bootstrap-datepicker-master.zip
03-26
1. **Bootstrap框架**：首先，我们需要了解Bootstrap是Twitter推出的一款开源的前端开发框架，提供了丰富的UI组件，如网格系统、表单、按钮、导航等，帮助开发者快速构建响应式和移动优先的网站。 2. **日期选择器...
Breeze-Free-Bootstrap-Admin-Template：具有Bootstrap 4的免费管理仪表板
02-03
BreezeAdmin-免费-管理模板Breeze Admin是使用Bootstrap 4构建的免费响应式管理模板。该模板具有丰富多彩，引人入胜却又简单而优雅的设计。 模板制作精良，所有组件都整齐，精心设计并布置在模板中。 Breeze Admin...
传感器驱动+imx296驱动+Linux驱动
08-10
传感器驱动+imx296驱动+Linux驱动
ASP校园论坛的设计与实现(源代码+论文).rar
08-10
资源包主要包含以下内容： ASP项目源码：每个资源包中都包含完整的ASP项目源码，这些源码采用了经典的ASP技术开发，结构清晰、注释详细，帮助用户轻松理解整个项目的逻辑和实现方式。通过这些源码，用户可以学习到ASP的基本语法、服务器端脚本编写方法、数据库操作、用户权限管理等关键技术。 数据库设计文件：为了方便用户更好地理解系统的后台逻辑，每个项目中都附带了完整的数据库设计文件。这些文件通常包括数据库结构图、数据表设计文档，以及示例数据SQL脚本。用户可以通过这些文件快速搭建项目所需的数据库环境，并了解各个数据表之间的关系和作用。 详细的开发文档：每个资源包都附有详细的开发文档，文档内容包括项目背景介绍、功能模块说明、系统流程图、用户界面设计以及关键代码解析等。这些文档为用户提供了深入的学习材料，使得即便是从零开始的开发者也能逐步掌握项目开发的全过程。 项目演示与使用指南：为帮助用户更好地理解和使用这些ASP项目，每个资源包中都包含项目的演示文件和使用指南。演示文件通常以视频或图文形式展示项目的主要功能和操作流程，使用指南则详细说明了如何配置开发环境、部署项目以及常见问题的解决方法。 毕业设计参考：对于正在准备毕业设计的学生来说，这些资源包是绝佳的参考材料。每个项目不仅功能完善、结构清晰，还符合常见的毕业设计要求和标准。通过这些项目，学生可以学习到如何从零开始构建一个完整的Web系统，并积累丰富的项目经验。
Unity课程设计报告书PDF
08-10
1.技术需求: 此游戏是在Unity5.3.3上开发出来的，Unity5.3.3可以支持2D、3D场景 的编辑，本游戏是基于3D场景开发的。游戏中的脚本语言使用的是C#, Unity5.3.3中的Monodevelop为脚本编辑提供了平台。 2.功能需求: Flappy Bird 是一款益智类的小游戏，其玩法为:游戏开始后，玩家需间歇 性的点击鼠标，让小鸟向上飞，不会掉下来，并且要穿过随机出现的管道的间隙， 不能碰到管道，碰到就游戏结束，穿过一个管道就可以得到一分。其制作包括对 以下六大功能的需求: (1)当开始游戏后，玩家需要单击指定位置才能开始游戏，否则无法开始: (2)需要通过点击屏幕来控制小鸟的位置，完成使小鸟上下移动的功能: (3)需要对小鸟是否碰到地面或者管道进行判断，从而决定游戏是否结束: (4)需要设置触发器以实现场景的延续，当小鸟碰到触发器，场景中的第一幅 背景便挪到最后一幅的后面，从而实现视觉上场景不断出现的效果: (5)需要对玩家进行记分，并对最高分进行判断和存储: (6)在失败后，需要使玩家通过点击按钮重新开始游戏。
毕业设计，基于ASP+ACCESS开发的民航售票管理系统，内含完整源代码，数据库，毕业论文
08-10
毕业设计，基于ASP+ACCESS开发的民航售票管理系统，内含完整源代码，数据库，毕业论文 随着计算机及网络技术的飞速发展，Internet/Intranet应用在全球范围内日益普及，当今社会正快速向信息化社会前进，信息自动化的作用也越来越大。 从而使我们从繁杂的事务中解放出来，提高了我们的工作效率。 本论文主要阐述一个功能比较强大的企业网站系统的后台操作过程及一些关键技术。该系统信息来源主要由用户直接添加，通过管理员审核后,在网站上发布出来,以供大家查询相关公司信息。本系统主要让社会各界能更好的了解本本企业，欢迎对本企业的发展提出更多宝贵留言。该企业网站系统是前台应用Dreamweaver MX、FireworksMX、Flash MX等软件，后台结合ASP编程技术和Access数据库技术开发出来的。 关键词：用户管理；信息发布；ASP；企业网站
Kubernetes指南+Kubernetes安装全流程，让你彻底学会Kubernetes
08-10
Kubernetes指南+Kubernetes安装全流程，让你彻底学会Kubernetes
ASP+ACCESS在线考试系统设计(源代码+论文).rar
08-10
资源包主要包含以下内容： ASP项目源码：每个资源包中都包含完整的ASP项目源码，这些源码采用了经典的ASP技术开发，结构清晰、注释详细，帮助用户轻松理解整个项目的逻辑和实现方式。通过这些源码，用户可以学习到ASP的基本语法、服务器端脚本编写方法、数据库操作、用户权限管理等关键技术。 数据库设计文件：为了方便用户更好地理解系统的后台逻辑，每个项目中都附带了完整的数据库设计文件。这些文件通常包括数据库结构图、数据表设计文档，以及示例数据SQL脚本。用户可以通过这些文件快速搭建项目所需的数据库环境，并了解各个数据表之间的关系和作用。 详细的开发文档：每个资源包都附有详细的开发文档，文档内容包括项目背景介绍、功能模块说明、系统流程图、用户界面设计以及关键代码解析等。这些文档为用户提供了深入的学习材料，使得即便是从零开始的开发者也能逐步掌握项目开发的全过程。 项目演示与使用指南：为帮助用户更好地理解和使用这些ASP项目，每个资源包中都包含项目的演示文件和使用指南。演示文件通常以视频或图文形式展示项目的主要功能和操作流程，使用指南则详细说明了如何配置开发环境、部署项目以及常见问题的解决方法。 毕业设计参考：对于正在准备毕业设计的学生来说，这些资源包是绝佳的参考材料。每个项目不仅功能完善、结构清晰，还符合常见的毕业设计要求和标准。通过这些项目，学生可以学习到如何从零开始构建一个完整的Web系统，并积累丰富的项目经验。
Hadoop HA高可用手把手部署搭建文档
最新发布
08-10
这是我整理出来的Hadoop HA高可用手把手部署搭建文档
stripe支付demo
08-10
Stripe是由20多岁的两兄弟Patrick Collison和John Collison创办的Stripe为公司提供网上支付的解决方案。Stripe向服务的公司收取每笔交易的2.9%加上30美分的手续费。
对于广度优先搜索的模板
08-10
广度优先搜索（bfs）是c++基础内容之一非常重要。对于一棵树，bfs通过每一步的枚举能枚举出最佳结果 可以练习的题目： [NOIP2002 提高组] 字串变换 [NOI2013] 树的计数 [USACO2.1] 健康的荷斯坦奶牛 Healthy Holsteins [NOIP2010 提高组] 引水入城 [USACO07FEB] Lilypad Pond G [USACO07OCT] Obstacle Course S
asp网上体育用品商店的设计与实现(论文+源代码).rar
08-10
资源包主要包含以下内容： ASP项目源码：每个资源包中都包含完整的ASP项目源码，这些源码采用了经典的ASP技术开发，结构清晰、注释详细，帮助用户轻松理解整个项目的逻辑和实现方式。通过这些源码，用户可以学习到ASP的基本语法、服务器端脚本编写方法、数据库操作、用户权限管理等关键技术。 数据库设计文件：为了方便用户更好地理解系统的后台逻辑，每个项目中都附带了完整的数据库设计文件。这些文件通常包括数据库结构图、数据表设计文档，以及示例数据SQL脚本。用户可以通过这些文件快速搭建项目所需的数据库环境，并了解各个数据表之间的关系和作用。 详细的开发文档：每个资源包都附有详细的开发文档，文档内容包括项目背景介绍、功能模块说明、系统流程图、用户界面设计以及关键代码解析等。这些文档为用户提供了深入的学习材料，使得即便是从零开始的开发者也能逐步掌握项目开发的全过程。 项目演示与使用指南：为帮助用户更好地理解和使用这些ASP项目，每个资源包中都包含项目的演示文件和使用指南。演示文件通常以视频或图文形式展示项目的主要功能和操作流程，使用指南则详细说明了如何配置开发环境、部署项目以及常见问题的解决方法。 毕业设计参考：对于正在准备毕业设计的学生来说，这些资源包是绝佳的参考材料。每个项目不仅功能完善、结构清晰，还符合常见的毕业设计要求和标准。通过这些项目，学生可以学习到如何从零开始构建一个完整的Web系统，并积累丰富的项目经验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值