bootstrop的练习使用_alibabapuhuitil-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_48690030/article/details/114239235
需要自行下载bootstrop

效果为:
在这里插入图片描述
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap HelloWorld</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>


    <style>
        @font-face {
            font-family: 'webfont';
            font-display: swap;
            src: url('//at.alicdn.com/t/webfont_cc3fjgne1xf.eot'); /* IE9*/
            src: url('//at.alicdn.com/t/webfont_cc3fjgne1xf.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('//at.alicdn.com/t/webfont_cc3fjgne1xf.woff2') format('woff2'),
            url('//at.alicdn.com/t/webfont_cc3fjgne1xf.woff') format('woff'), /* chrome、firefox */
            url('//at.alicdn.com/t/webfont_cc3fjgne1xf.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
            url('//at.alicdn.com/t/webfont_cc3fjgne1xf.svg#AlibabaPuHuiTiL') format('svg'); /* iOS 4.1- */
        }
        svg{
            height: 15px;
            width: 15px;
        }

        .ww{
            margin-left: 20px;
            height: 35px;
            width: 35px;
            margin-top: 10px;
        }

        .q{
            display: inline-block;
            line-height: 35px;
            font-weight: 700;
            font-size: 10px;
        }

        .e{
            font-weight: 700;
        }

        .slide{
            /*height: 600px;*/
        }

        .item{
            /*规定图片 否则大小不同的会上下乱动 */
            display: block;
            width: 100%;
            height: 600px;
            background: no-repeat fixed center;
            position: fixed;
        }

        .table{
            margin-top: 10px;
        }

        tr td{
            text-align: center;
        }

        .navbar{
            margin: 0 10px;
        }

        .slide{
            margin: 0 10px;
            margin-top: 5px;
        }

        nav{
            margin-top: -20px;
            text-align: center;
        }

        hr{
            margin-top: -15px;
        }

        .vv{
            margin-top: -15px;
            text-align: center;
            size: 10px;
            color: #55585a;
        }

        .v{
            margin-top: 5px;
            text-align: center;
            size: 10px;
            color: #55585a;
        }



    </style>
</head>
<body>

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">官网</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页<span class="sr-only">(current)</span></a></li>
                <li><a href="#">自由行</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">跟团游<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">自然保护取区</a></li>
                        <li><a href="#">人间仙境</a></li>
                        <li><a href="#">江南风光</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">点击查看更多风景</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">点击咨询</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="去哪儿">
                </div>
                <button type="submit" class="btn btn-default"><svg t="1614504417949" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1593" width="200" height="200"><path d="M1015.7783 938.2318 723.5205 644.0489c118.8301-156.9516 106.7182-381.4717-36.393-524.5819-156.4109-156.4109-410.0045-156.4109-566.4154 0-156.4109 156.375-156.4109 409.9697 0 566.3805 143.06 143.06 367.404 155.2425 524.3433 36.606l292.3223 294.2136c9.6051 9.6041 25.2221 9.6041 34.8252 0l43.5763-43.5763C1025.4172 963.4519 1025.4172 947.8369 1015.7783 938.2318zM194.9153 613.8132c-114.8621-114.8611-114.8621-301.0826 0-415.9089 114.8631-114.8621 301.0458-114.8621 415.9099 0 114.8631 114.8262 114.8631 301.0478 0 415.9089C495.9611 728.6764 309.7784 728.6764 194.9153 613.8132z" p-id="1594"></path></svg></button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">定制游</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">联系我们<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">地址</a></li>
                        <li><a href="#">邮箱</a></li>
                        <li><a href="#">微博</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">24小时热线电话</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<!--轮播图-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="./image/s1.jpg" alt="...">
        </div>
        <div class="item">
            <img src="./image/s2.jpg" alt="...">
        </div>
        <div class="item">
            <img src="./image/s3.jpg" alt="...">
        </div>
        <div class="item">
            <img src="./image/s4.jpg" alt="...">
        </div>
        <div class="item">
            <img src="./image/s5.jpg" alt="...">
        </div>
        <div class="item">
            <img src="./image/s6.jpg" alt="...">
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

<svg t="1614508715535" class="ww" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="576" width="200" height="200"><path d="M882.607224 620.289332c-32.233122-46.50108-75.778894-81.46643-126.399805-101.611236 22.323425-15.70468 41.104163-36.645618 54.679343-61.067844 15.711843-28.26781 24.01802-60.572564 24.01802-93.420693 0-102.397135-79.284741-185.704492-176.739307-185.704492-13.83817 0-25.097608 11.258415-25.097608 25.097608 0 13.855566 11.259438 25.128307 25.097608 25.128307 69.742411 0 126.482693 60.775178 126.482693 135.478578 0 74.719772-56.739259 135.50723-126.482693 135.50723-13.83817 0-25.097608 11.265578-25.097608 25.112957l0 0.1361c0 13.855566 11.259438 25.128307 25.097608 25.128307 125.46348 0 227.536226 108.816335 227.536226 242.568594 0 13.872962 11.285021 25.159006 25.157983 25.159006 13.83817 0 25.097608-11.286044 25.097608-25.159006C935.958316 730.243583 917.509129 670.644183 882.607224 620.289332zM623.157147 577.673745c-26.348088-18.662035-55.000662-33.399691-85.316108-43.895743 64.020082-38.906102 103.316064-108.150162 103.316064-183.412286 0-118.333082-96.263437-214.604706-214.588333-214.604706-118.358665 0-214.649731 96.271624-214.649731 214.604706 0 40.289612 11.282974 79.585593 32.630165 113.642247 18.054191 28.803 42.605354 52.879348 71.567989 70.318532-30.826076 10.523681-59.94937 25.424042-86.697571 44.369533-29.125341 20.629853-54.761208 45.569872-76.194356 74.126254-44.566008 59.375296-68.122517 130.018216-68.122517 204.28978 0 13.83817 11.258415 25.097608 25.097608 25.097608 13.855566 0 25.128307-11.259438 25.128307-25.097608 0-77.456093 30.202882-150.434198 85.043908-205.489094 54.711066-54.924937 127.125329-85.206614 203.921389-85.283362 2.535753 0.225127 5.117554 0.047072 7.631818-0.515746l1.991354-0.446162c74.719772 1.51347 144.95337 31.659047 198.329021 85.261872 54.815443 55.04978 85.003999 128.013559 85.003999 205.448162 0 13.83817 11.272741 25.097608 25.128307 25.097608 13.83817 0 25.097608-11.259438 25.097608-25.097608 0-74.271564-23.556509-144.913461-68.121494-204.28978C677.918355 623.243617 652.282488 598.303598 623.157147 577.673745zM426.56877 186.002274c90.629113 0 164.362418 73.733305 164.362418 164.363442 0 90.638323-73.733305 164.378791-164.362418 164.378791-90.647533 0-164.393117-73.740468-164.393117-164.378791C262.17463 259.735579 335.921237 186.002274 426.56877 186.002274z" p-id="577"></path><span class="q">我们去哪玩</span></svg>
<table class="table table-hover">
    <tr class="active">
        <td class="e">热门景区排行</td>
        <td class="e">网络投票数</td>
        <td class="e">受欢迎程度</td>
        <td class="e">热点排行</td>
    </tr >
    <tr class="active">
        <td class="e">西安</td>
        <td>13712</td>
        <td>11321</td>
        <td class="e">1</td>
    </tr>
    <tr class="active">
        <td class="e">重庆</td>
        <td>12121</td>
        <td>12411</td>
        <td class="e">2</td>
    </tr>

    <tr class="active">
        <td class="e">北京</td>
        <td>13121</td>
        <td>10411</td>
        <td class="e">3</td>
    </tr>
</table>


<nav aria-label="Page navigation">
    <ul class="pagination">
        <li>
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li>
            <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>
<hr color="#333"/>
<div class="vv">你必须按所想的去生活 否则你只能按生活去想</div>
<div class="v">无人理睬时 坚定信念 有人仰慕时 心如止水</div>
<div></div>
</body>
</html>