12. 制作自己的网页

Bootstrap4入门

优酷频道 技术频道

制作自己的网页

知识点

  • 进度小结,总结一下之前的知识

参考网页:

https://getbootstrap.com/docs/4.0/

https://getbootstrap.com/docs/4.0/content/typography/#display-headings

实战演习

<html lang="zh-cmn-Hans">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/bootstrap-4.0.0-dist/css/bootstrap.min.css">

    <title>小马视频频道</title>

    <style>
        .myheader {
            background: url(header.png);
            background-size: myheader
        }
    </style>
</head>

<body>
    <header>
        <div class="myheader text-dark text-center py-5">
            <h1 class="display-3 mb-3">小马视频</h1>
            <a href="//i.youku.com/komavideo" target="_blank" class="btn btn-primary btn-lg">优酷频道</a>
            <a href="//www.youtube.com/channel/UC5sgzai6AyPWLM7-hblV9oA" target="_blank" class="btn btn-danger btn-lg">Youtube频道</a>
        </div>
    </header>
    <main>
    </main>
    <footer>
    </footer>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="/bootstrap-4.0.0-dist/others/jquery-3.2.1.slim.min.js"></script>
    <script src="/bootstrap-4.0.0-dist/others/popper-1.12.9.min.js"></script>
    <script src="/bootstrap-4.0.0-dist/js/bootstrap.min.js"></script>
</body>

</html>

课程文件

https://gitee.com/komavideo/LearnBootstrap4

小马视频频道

http://komavideo.com