bootstrap-面板

来源：互联网发布：91手机助手 mac 编辑：程序博客网时间：2024/04/30 07:31

默认效果的面板：

<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE-edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Bootstrap 101 Template</title><link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="stylesheet"><link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"></head><body><div class="panel panel-default">  <div class="panel-body"> hello world</div></div><script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script><script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script><script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/npm.js"></script></body></html>

结果：
这里写图片描述

带情景的面板：

<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE-edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Bootstrap 101 Template</title><link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="stylesheet"><link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"></head><body><!-- 加入情景后头部会相应变化 --><div class="panel panel-success">  <!-- 标题 -->  <div class="panel-heading">heading</div>  <div class="panel-body"> hello world</div>  <!-- 脚注 -->  <div class="panel-footer">footer</div></div><script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script><script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script><script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/npm.js"></script></body></html>

结果：
这里写图片描述

代表格的面板：

<div class="panel panel-success">  <!-- 标题 -->  <div class="panel-heading">heading</div>  <div class="panel-body"> hello world</div>  <table class="table">  <thead><th>1</th><th>2</th></thead>  <tr><td>h</td><td>i</td></tr>  <tr><td>h</td><td>i</td></tr>  <tr><td>h</td><td>i</td></tr>  </table>  <!-- 脚注 -->  <div class="panel-footer">footer</div></div>

结果：
这里写图片描述

0 0