bootstrap-----面板

最新推荐文章于 2018-12-31 15:03:47 发布

xiaohai_ada

最新推荐文章于 2018-12-31 15:03:47 发布

阅读量421

点赞数

文章标签： bootstrap 面板

本文链接：https://blog.csdn.net/xiaohai_ada/article/details/52688515

版权

  The panel assembly is used to insert DOM component into a box.

1> We can user the following two ways to add the panel header:
  Frist ,using .panel-heading class can easily add a heading container to your panel.
  Second ,使用带有 .panel-title class 的 <h1>-<h6> 来添加预定义样式的标题
2> panel-primary,panel-success,panel-info,panel-warning,panel-danger,panel-default
  每个panel带着着不同的颜色
3> 带表格的面板：
  <table class="table">
4> 带列表组的面板
  <ul class="list-group">
   <li class="list-group-item">1</li>
   <li class="list-group-item">2</li>

<div class="panel panel-default">
		<div class="panel-heading">
			the header of panel
		</div>
		<!-- 
		上面所示与下面效果一致
		<div class="panel-heading">
			<h1 class="panel-title">
				带有 title 的面板标题
			</h1>
		</div>
		 -->
		<div class="panel-body">
			this is a basic panel.
		</div>
		<div class="panel-footer">
			the footer of panel
		</div>
	</div>