bootStrap小结1 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>h元素、p元素、table元素、img元素、其它</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">
    <script src="js/bootstrap.js"></script>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
    <script src="js/jquery-2.0.3.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>

</head>
    
    <body style="background-color: gray;">
<div class="container-fluid" style="background-color: white">
    <span class="label" style="cursor: default">状态</span>
    <span class="label label-info" style="cursor: default">状态</span>
    <span class="label label-danger" style="cursor: default">状态</span>
    <span class="label label-default" style="cursor: default">状态</span>
    <span class="label label-primary" style="cursor: default">状态</span>
    <span class="label label-warning" style="cursor: default">状态</span>
    <span class="label label-success" style="cursor: default">状态</span>
    <br/>
    <span class="help-button" data-rel="popover" data-trigger="hover" data-placement="right"
          data-content="我要的内容" title="我要的标题">hover</span>
    <br/>
    <ol class="breadcrumb">
        <li><a href="#">国家</a></li>
        <li><a href="#">省份</a></li>
        <li><a href="#">城市</a></li>
    </ol>
    <h1 class="page-header">内容</h1>
    <h2 class="page-header">内容</h2>
    <h3 class="page-header">内容</h3>
    <h4 class="page-header">内容</h4>
    <h5 class="page-header">内容</h5>
    <h6 class="page-header">内容</h6>
    <h6 class="page-header text-center">内容</h6>
    <h6 class="page-header text-right">内容</h6>
    <h6 class="page-header text-left">内容</h6>
    <p>
        众里寻他千百度，那人却在灯火阑珊处<br/>
        <del>众里寻他千百度，那人却在灯火阑珊处</del>
        <br/>
        <small>众里寻他千百度，那人却在灯火阑珊处</small>
        <br/>
        <big>众里寻他千百度，那人却在灯火阑珊处</big><br/>
        <em>众里寻他千百度，那人却在灯火阑珊处</em><br/>
        <strike>众里寻他千百度，那人却在灯火阑珊处</strike><br/>
    </p>
    <p>God is Love And Jesus is the son </p>
    <p class="text-lowercase">God is Love And Jesus is the son</p>
    <p class="text-uppercase">God is Love And Jesus is the son</p>
    <p class="text-capitalize">God is Love And Jesus is the son</p>
    <p>天长地久有时尽，此恨绵绵无绝期</p>
    <p class="text-muted">天长地久有时尽，此恨绵绵无绝期</p>
    <p class="text-info">天长地久有时尽，此恨绵绵无绝期</p>
    <p class="text-primary">天长地久有时尽，此恨绵绵无绝期</p>
    <p class="text-success">天长地久有时尽，此恨绵绵无绝期</p>
    <p class="text-warning">天长地久有时尽，此恨绵绵无绝期</p>
    <p class="text-danger">天长地久有时尽，此恨绵绵无绝期</p>
    <p>出师未捷身先死，长使英雄泪满襟</p>
    <p class="bg-primary">出师未捷身先死，长使英雄泪满襟</p>
    <p class="bg-success">出师未捷身先死，长使英雄泪满襟</p>
    <p class="bg-info">出师未捷身先死，长使英雄泪满襟</p>
    <p class="bg-warning">出师未捷身先死，长使英雄泪满襟</p>
    <p class="bg-danger">出师未捷身先死，长使英雄泪满襟</p>
    <p>山重水复疑无路，柳暗花明又一村</p>
    <p class="text-primary bg-primary">山重水复疑无路，柳暗花明又一村</p>
    <ul class="list-unstyled list-inline">
        <li>曹孟德</li>
        <li>刘玄德</li>
        <li>孙权</li>
        <li>袁绍</li>
    </ul>
    <dl class="dl-horizontal">
        <dt>张角</dt>
        <dd>董卓</dd>
    </dl>
    <div class="table-responsive">
        <table class="table table-bordered table-hover table-striped table-condensed">
            <thead>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>非常的长长长长长长长长长长长长长长长长长长长长长长长长长长长长</th>
            <th>111</th>
            <th>111</th>
            <th>111</th>
            <th>111</th>
            </thead>
            <tbody>
            <tr class="active">
                <td>某某</td>
                <td>男</td>
                <td>28</td>
                <td>222</td>
                <td>222</td>
                <td>222</td>
                <td>222</td>
                <td>222</td>
            </tr>
            <tr class="success">
                <td>某某</td>
                <td>女</td>
                <td>63</td>
                <td>222</td>
                <td>222</td>
                <td>222</td>
                <td>222</td>
                <td>222</td>
            </tr>
            <tr class="info">
                <td>某某</td>
                <td>男</td>
                <td>64</td>
                <td>222</td>
                <td>222</td>
                <td>222</td>
                <td>222</td>
                <td>222</td>
            </tr>
            <tr class="warning">
                <td>某某</td>
                <td>男</td>
                <td>64</td>
                <td>222</td>
                <td>222</td>
                <td>222</td>
                <td>222</td>
                <td>222</td>
            </tr>
            <tr class="danger">
                <td>某某</td>
                <td>男</td>
                <td>64</td>
                <td>222</td>
                <td>222</td>
                <td>222</td>
                <td>222</td>
                <td>222</td>
            </tr>
            <tr>
                <td>某某</td>
                <td>男</td>
                <td>64</td>
                <td>222</td>
                <td>222</td>
                <td>222</td>
                <td>222</td>
                <td>222</td>
            </tr>
            </tbody>

        </table>
    </div>
    <img src="fig.jpg" class="img-responsive img-circle"/>
    <img src="fig.jpg" class="img-responsive img-rounded"/>
    <img src="fig.jpg" class="img-responsive img-thumbnail"/>

</div>
</body>
    <script type="text/javascript">
    $(document).ready(function () {
        $('[data-rel=popover]').popover({container: 'body'});

        Init();
    });

    function Init() {

    }
</script>
</html>
posted @ 2018-11-23 15:24  Hello,Code  阅读(147)  评论(0)  编辑  收藏  举报