zoukankan      html  css  js  c++  java
  • Bootstrap历练实例:面板的标题

    面板标题

    我们可以通过以下两种方式来添加面板标题:

    • 使用 .panel-heading class 可以很简单地向面板添加标题容器。to easily add a heading container to your panel.
    • 使用带有 .panel-title class 的 <h1>-<h6> 来添加预定义样式的标题。

    下面的实例演示了这两种方式:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Bootstrap历练实例:面板的标题</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-wdith,initial-scale=1.0" />
    <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
    </head>
    <body>
    <div style="padding:20px">
    <div class="panel panel-default">
    <div class="panel-heading">
    不带title的panel
    </div>
    <div class="panel-body">
    这是面板的主体
    </div>
    </div>
    <div class="panel panel-default">
    <div class="panel-heading">
    <h2 class="panel-title">带title的panel</h2>
    </div>
    <div class="panel-body">
    这是面板的主体
    </div>
    </div>
    </div>

    <script src="jQuery/jquery-2.1.4.js"></script>
    <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    </body>
    </html>

  • 相关阅读:
    shared pointer
    realsense数据分析
    cmake log
    Qt自定义类添加qvector报错
    Java csv
    opencv C++ mask_rcnn
    realsense data
    Test
    ubuntu18 bluebooth
    LSTM_Model
  • 原文地址:https://www.cnblogs.com/melao2006/p/5001497.html
Copyright © 2011-2022 走看看