【前端开发】bootstrap框架综合案例（2）

一殊酒

已于 2023-10-04 00:40:29 修改

阅读量600

点赞数 1

分类专栏： 1+Xweb前端考证前端开发文档解析文章标签： bootstrap 前端 html

于 2021-06-17 10:38:45 首次发布

本文链接：https://blog.csdn.net/weixin_48348920/article/details/117984576

版权

文档解析同时被 3 个专栏收录

87 篇文章 1 订阅

订阅专栏

前端开发

55 篇文章 4 订阅

订阅专栏

1+Xweb前端考证

16 篇文章 30 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap 4</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="js/popper.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>

<body>
    <!-- 在（1）处添加巨幕类  -->
    <div class="Jumbotron text-center" style="margin-bottom:0">
        <h1>简洁、直观、强悍的前端开发框架。</h1>
        <p>Bootstrap让web开发更迅速、简单</p>
    </div>
    <!-- 在（2）处添加导航栏类  -->
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
        <!-- 在（3）处添加高亮显示品牌类  -->
        <a class="navbar-brand" href="#">LOGO</a>
        <!-- 在（4）（5）（6）分别添加类，点击button实现折叠导航菜单  -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span></span>
        </button>
        <!-- 在（7）处添加类，是所在div包裹导航内容  -->
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul>
                <li>
                    <a href="#">php</a>
                </li>
                <li>
                    <a href="#">H5和css3</a>
                </li>
                <li>
                    <a href="#">js和jquery</a>
                </li>
            </ul>
        </div>
    </nav>
    <!-- 在（8）处添加固定宽度容器类  -->
    <div class="container" style="margin-top:30px">
        <!-- 在（9）处添加行类  -->
        <div class="row">
            <!-- 在（10）在平板设备上或者屏幕宽度在567px和768px之间的设备上显示为4个栅格  -->
            <div class="col-sm-4">
                <h2>前端响应式框架</h2>
                <h5>logo:</h5>
                <div>
                    图像
                </div>
                <p>Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                <h3><a href="# # #">bootstrap网站</a></h3>
                <p>常用网站</p>
                <ul class="nav nav-pills flex-column">
                    <li>
                        <!-- 在（11）处添加类，设置a标签处于激活状态  -->
                        <a class="nav-link active" href="#">官网</a>
                    </li>
                    <li>
                        <a href="#">百度</a>
                    </li>
                    <li>
                        <a href="#">新浪</a>
                    </li>
                    <li>
                        <!-- 在（12）处添加类，设置a标签处于不可用状态  -->
                        <a class="nav-link disabled" href="#">google</a>
                    </li>
                </ul>
                <hr>
            </div>
            <!-- 在（13）处添加类，在平板设备上或者屏幕宽度在567px和768px之间的设备上显示为8个栅格  -->
            <div class="col-sm-8">
                <h2>html5是html开发的新的标准</h2>
                <h5>关于html5的介绍</h5>
                <div>图像</div>
                <p>HTML5 是下一代的 HTML</p>
                <p>
                    什么是 HTML5？ HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。 HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。 HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
                </p>
            </div>
        </div>
    </div>
</body>

</html>