首页 > 其他 > 详细

Bootstrap中面板的使用

时间:2015-08-17 06:22:39      阅读:249      评论:0      收藏:0      [点我收藏+]

基本面板:

<div class="panel panel-default">

     <div class="panel-body">基本的面板</div>

</div>

 

不带title的面板标题:

<div class="panel panel-default">

<div class="panel-heading">不要title的面板标题</div>

<div class="panel-body">基本的面板</div>

</div>

 

带标题的面板:由<h1>到<h6>来修饰:

<div class="panel panel-default">

<div class="panel-heading"><h3 class="panel-title">带title的面板标题</h3></div>

<div class="panel panel-body">带title的面板内容</div>

</div>

 

带语境色彩的面板:

<div class="panel panel-primary/panel-info/panel-success/panel-warning/panel-danger">

<div class="panel-heading">面板标题</div>

<div class="panel-body">面板</div>

</div>

 

带表格的面板:

<div class="panel panel-default">

<div class="panel-heading">带表格的面板标题</div>

<div  class="panel-body">带表格的面板内容</div>

<table class="table">

          <tr><th>名称</th><th>数量</th></tr>

           <tr><td>手机</td><td>8</td></tr>

           <tr><td>电脑</td><td>4</td></tr>

        </table>

</div>

 

带列表组的面板:

<div class="panel panel-default">

<div class="panel-heading">带列表组的标题</div>

<div class="panel-body">带列表组的内容</div>

<ul class="list-group">

<li class="list-group-item">第一项列表组</li>

<li class="list-group-item">第二项列表组</li>

</ul>

</div>

 

大致效果预览图:

技术分享

 

Bootstrap中面板的使用

原文:http://www.cnblogs.com/professional-NET/p/4735390.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!