全局样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bootstrap全局样式</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="jquery-3.2.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
    <button class="btn btn-default btn-lg">这个第一个按钮</button>
    <button class="btn btn-success btn-sm">这是第二个按钮</button>
    <button class="btn btn-primary active">这个第三个按钮</button>
    <button class="btn btn-info btn-block">这是第四个按钮</button>
    <button class="btn btn-warning"disable="disabled">这个第五个按钮</button>
    <button class="btn btn-danger">这是第六个按钮</button>
    <button class="btn btn-link">这个第七个按钮</button>
    <a class="btn btn-danger" href="">这是a标签所写的按钮效果</a>
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>
<span class="h1">标题一</span>
<span class="h2">标题二</span>
<span class="h3">标题三</span>
<span class="h4">标题四</span>
<span class="h5">标题五</span>
<span class="h6">标题六</span>
<p><mark>慕课网</mark><del>是垂直</del><ins>的互联网IT</ins><u>技能免费学习网站</u><small>以独家视频教程</small><strong>在线编程工具、学习计划</strong>、问答社区为核心特色。
    在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
    <p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。
        在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
    <p class="text-left">慕课网</p>
    <p class="text-center">慕课网</p>
    <p class="text-right">慕课网</p>
    <p class="text-lowercase">HELLO</p>
    <p class="text-uppercase">hello</p>
    <p class="text-capitalize">hello</p>
    <table class="table table-striped table-bordered table-hover">
        <thead>
            <tr>
                <th>标题一</th>
                <th>标题二</th>
                <th>标题三</th>
                <th>标题四</th>
                <th>标题五</th>
            </tr>
        </thead>
        <tbody>
                <tr>
                        <th>内容一</th>
                        <th>内容二</th>
                        <th>内容三</th>
                        <th>内容四</th>
                        <th>内容五</th>
                    </tr>
                    <tr class="active">
                             <th>内容一</th>
                            <th>内容二</th>
                            <th>内容三</th>
                            <th>内容四</th>
                            <th>内容五</th>
                        </tr>
                        <tr class="success">
                                <th>内容一</th>
                                <th>内容二</th>
                                <th>内容三</th>
                                <th>内容四</th>
                                <th>内容五</th>
                            </tr>
                            <tr class="info">
                                    <th>内容一</th>
                                    <th>内容二</th>
                                    <th>内容三</th>
                                    <th>内容四</th>
                                    <th>内容五</th>
                                </tr>
                                <tr class="warning">
                                        <th>内容一</th>
                                        <th>内容二</th>
                                        <th>内容三</th>
                                        <th>内容四</th>
                                        <th>内容五</th>
                                    </tr>
                                    <tr class="danger">
                                            <th>内容一</th>
                                            <th>内容二</th>
                                            <th>内容三</th>
                                            <th>内容四</th>
                                            <th>内容五</th>
                                        </tr>                                                         
        </tbody>
    </table>
</body>
</html>

 

posted @ 2018-03-16 17:17  勤奋的园  阅读(126)  评论(0编辑  收藏  举报