Bootstrap 面板(Panels)

2017-08-19 09:02:29 来源: 点击:站内收藏

本章将讲解 Bootstrap 面板(Panels)。面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板,只需要向 div 元素添加 class .panel 和 class .panel-default 即可,如下面的实例所示:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 默认的面板</title>
<link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="panel panel-default">
   <div class="panel-body">
      这是一个基本的面板
   </div>
</div>
<br>
<div class="panel panel-default">
   <div class="panel-heading">
      <h3 class="panel-title">
         带有 title 的面板标题
      </h3>
   </div>
   <div class="panel-body">
      面板内容
   </div>
</div>
<br>
<div class="panel panel-success">
   <div class="panel-heading">
      <h3 class="panel-title">色彩面板标题</h3>
   </div>
   <div class="panel-body">
      这是一个带色彩的基本的面板
   </div>
</div>
<br>
<div class="panel panel-default">
   <div class="panel-heading">列表组面板标题</div>
      <div class="panel-body">
         <p>这是一个基本的面板内容。这是一个基本的面板内容。
         这是一个基本的面板内容。这是一个基本的面板内容。
         这是一个基本的面板内容。这是一个基本的面板内容。
		 这是一个基本的面板内容。这是一个基本的面板内容。
         </p>
   </div>
   <ul class="list-group">
      <li class="list-group-item">免费域名注册</li>
      <li class="list-group-item">免费 Window 空间托管</li>
      <li class="list-group-item">图像的数量</li>
      <li class="list-group-item">24*7 支持</li>
      <li class="list-group-item">每年更新成本</li>
   </ul>
</div>
</body>
</html>

面板标题

使用 .panel-heading class 可以很简单地向面板添加标题容器。

使用带有 .panel-title class 的 h1-h6 来添加预定义样式的标题。

带语境色彩的面板

使用语境状态类 panel-primary、panel-success、panel-info、panel-warning、panel-danger,来设置带语境色彩的面板

相关热词搜索:
评论正在载入