• 目录

面板Panel

阅读量: 672 编辑

面板 Panel

一、Panel 使用介绍

  • 面板的使用，常用来做页面按块划分、组合

  • class="panel"

    • panel-heading

    • panel-body

    • panel-footer

    • 颜色样式：panel-default、panel-primary、panel-success、panel-info、panel-warning、panel-danger

二、代码实战

代码的详细解读，可以参考视频教程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link href="./res/bootstrap.min.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="./res/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="./res/bootstrap.min.js"></script>

</head>
<body>
    <h1>Panel</h1>

    <div class="panel panel-default" style="width:400px;margin-left:15px;">
        <div class="panel-heading">我是标题</div>
        <div class="panel-body" style="height:300px;">我是内容区</div>
        <div class="panel-footer">我是注脚</div>
    </div>

    <div class="panel panel-danger" style="width:400px;margin-left:15px;">
        <div class="panel-heading">我是标题</div>
        <div class="panel-body" style="height:300px;">我是内容区</div>
        <div class="panel-footer">我是注脚</div>
    </div>

</body>
</html>
  • 目录