Bootstrap~Panel和Table在我们对一个页面进行设计时,分块是必须的,没有一个网站是一栏而下的,除非你是在看小说,否则你的页面设计一定是分块的,即它由于多个panel组件,在bootstrap里叫到栅格系统,而在每行每列进行宏观的布局后,就是在每一个大块里建立小块,而小块可以使用Panel来实现,下面看个例子
<div class="panel panel-default"> <div class="panel-heading">Panel heading without title</div> <div class="panel-body"> Panel content </div></div>
这是最简单的格式了,它运行后的效果
其实在我们设计自己的系统时,如果panel运行得当,也可以快速的建立一个页面,如下
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