adminLTE 教程 -6 多box

多box相比box来说使用的场景并不多

<div class="box box-solid">
	<div class="box-header with-border">
			<h3 class="box-title">Collapsible Accordion</h3>
	</div>
	<!-- /.box-header -->
	<div class="box-body">
			<div class="box-group" id="accordion">
					<!-- we are adding the .panel class so bootstrap.js collapse plugin detects it -->
					<div class="panel box box-primary">
							<div class="box-header with-border">
									<h4 class="box-title">
											<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" class="collapsed">
													Collapsible Group Item #1
											</a>
									</h4>
							</div>
							<div id="collapseOne" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
									<div class="box-body">
											111
									</div>
							</div>
					</div>
					<div class="panel box box-danger">
							<div class="box-header with-border">
									<h4 class="box-title">
											<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="collapsed" aria-expanded="false">
													Collapsible Group Danger
											</a>
									</h4>
							</div>
							<div id="collapseTwo" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
									<div class="box-body">
											222
									</div>
							</div>
					</div>
					<div class="panel box box-success">
							<div class="box-header with-border">
									<h4 class="box-title">
											<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" class="" aria-expanded="true">
													Collapsible Group Success
											</a>
									</h4>
							</div>
							<div id="collapseThree" class="panel-collapse collapse in" aria-expanded="true">
									<div class="box-body">
											33
									</div>
							</div>
					</div>
			</div>
	</div>
	<!-- /.box-body -->
</div>
时间: 2024-10-07 17:35:06

adminLTE 教程 -6 多box的相关文章

adminLTE 教程 -0 基础布局

基础布局. 1.meta没的说 2.引入bootstrap 3.引入字体库,肯定用得到,下载到本地放在plugins下也可以 4.adminLTE子什么的文件肯定需要 5.皮肤skin,可以引入_all...,但是如果只需要一个皮肤的话,比如只需要蓝色,直接引入skin-blue就行,毕竟越简越好 6.兼容IE8的两个js文件 7.jquery没的说 8.fastclick,触摸设备快速点击体验,不想兼容手机可以去掉 9.slimscroll,菜单和页面中的滚动条样式,放上去毕竟好看嘛.(看一下

adminLTE 教程 -2 配置文件 app.js详解

我一般写代码,是设置一个index.html文件,然后在content里面通过ajax请求,动态替换页面内容来实现页面切换,以实现单页面的效果. adminLTE的配置文件是app.js,在页面中引入即可,想修改配置,一般不应该修改配置文件,而是在配置文件之前写一段js代码,通过给变量(adminLTE指定的) AdminLTEOptions  赋值,加载app.js的时候回先检测有没有该变量,优先使用该变量的配置,该变量没有赋值的配置信息再使用app.js里面原有的配置.然后对页面进行配置.如

adminLTE 教程 -4 轮播控件

轮播可以放在首页用来展示需要显示的内容,其实内容没有什么可以讲解的,就是在box下面放了carousel控件. 在adminLTE演示页面搜索Carousel <div class="box box-solid"> <div class="box-header with-border"> <h3 class="box-title">Carousel</h3> </div> <!--

adminLTE 教程 -1 基础

先介绍一下adminLTE的官方网站:adminLTE官方网站 和github:adminLTE的github 演示地址:adminLTE演示地址 大家可以在上面的官方网站或者github上下载源码 adminLTE是基于bootstrap3的前端框架,并且将bootstrap3进行修改来适应自身的样式. adminLTE除了可以使用bootstrap3的大多数样式之外,自身也提供了一些非常实用的样式包装,并且在样式演示中已经基本罗列出来了. adminLTE的js是基于jquery2. adm

adminLTE 教程 -7 进度条

其实进度条需要注意的几点: 1.横竖 style="width: 40%" or  style="height: 40%" 2.样式:progress-bar-success 3.宽度:progress-sm 4.动态效果:active <div class="box box-solid"> <div class="box-header with-border"> <h3 class="

css3弹性盒display:box和flex的完整好教程

1.flexbox-CSS3弹性盒模型flexbox布局完整版教程(转)2.CSS3盒模型display:box详解(转)

AxureRP7.0基础教程系列 部件详解 List Box 列表选择框

原型库网站-讲师金乌原创发布,可自由转载,请注明出处! Axure中文官网:www.AxureRP.cn   <AxureRP7.0部件详解> List Box 列表选择框 常用案例 替代下拉列表 如果你想让用户查看所有选项而不需要点击选择的话,就使用列表选择框替代下拉列表. 多选 与下拉列表不同的是,列表选择框允许用户对选项进行多选. 编辑列表选择框 编辑列表选择框 项目的添加.删除.排序和批量添加操作,和下拉列表框都是一样的.唯一不同的是,列表选择框可以设置为允许多项选择. 列表选择框案例

Windows10下配置虚拟机Virtual Box安装CentOS(Linux)详细教程

引言:在日常生活中,我们最常用PC操作系统的就是Windows和MacOS,但是有时我们在学习和工作中也要接触Linux操作系统,或者是在这个系统下工作,或者仅仅是学习一些Linux的基础知识,但如果我们为此特意去为我们的电脑安装Linux系统,而我们习惯的windows或者macOS可能会被覆盖掉(当然也是可以实现双系统并存的),而使我们原来的系统丢失或者无法正常的使用,所以就有了虚拟机这个东西,它可以使我们在现有的系统上模拟.隔离出来一个新的完整计算机系统,使我们既可以体验新的操作系统,也可

Kidney自得其乐版CSS教程 Chapter2 Box Model

Chapter 2 Box Model Version Update Note 1.0 2016-5-31 首次添加.欢迎在评论中指出错误,一经核实,立即修订,且注明贡献者. 1.元素的分类        1.1 替换元素 替换元素就是替身元素,它替别人占个位,它不是普通的标签,它代表某种元件. 例如:<img> <source><input><embed>……        1.2 非替换元素 大部分元素都是非替换元素. 从形式上看非替换元素是一对标签,替