附录7-使用bootstrap组件

最新推荐文章于 2024-06-03 20:31:46 发布

Suyuoa

最新推荐文章于 2024-06-03 20:31:46 发布

阅读量1k

点赞数

分类专栏： JavaScript笔记文章标签： bootstrap javascript 前端

本文链接：https://blog.csdn.net/potato123232/article/details/127126182

版权

JavaScript笔记专栏收录该内容

69 篇文章 5 订阅

订阅专栏

本文档介绍了如何使用Bootstrap创建网页组件，包括下拉菜单、导航条、模态框和tab栏。在实践中遇到的问题如`Popper__namespace.createPopper is not a function`错误也得到了解决，通过引入必要的库和调整代码实现各组件的正常工作。此外，展示了如何在阿里百秀网站中应用Bootstrap的导航条，并添加了登录功能，点击登录后弹出模态框供用户操作。

摘要由CSDN通过智能技术生成

我们简单用几个，在使用bootstrap的时候，一般我们会将css与js都引入进来

4 tab栏 Tabs

5 在阿里百秀中使用bootstrap组件

点击下拉菜单会会出现一些子选项

使用是将示例代码复制进你的代码中

打开网页发现可以出现按钮，但是点击之后会报错

使用框架报错是很正常的现象，这个时候我们去搜一下这个问题，发现别人也有过同样的问题并给出了解决方案

上图转自【Bootstrap 5.13 - Uncaught TypeError: Popper__namespace.createPopper is not a function】的解决方法_杏雨1969的博客-CSDN博客

按照解决方案搞一下

发现可以正常使用了

搞一个这个

引入库后进行复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-5.1.3-dist/css/bootstrap.min.css">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">Navbar scroll</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarScroll">
            <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  Link
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled">Link</a>
              </li>
            </ul>
            <form class="d-flex" role="search">
              <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
          </div>
        </div>
      </nav>
</body>
<script src="bootstrap-5.1.3-dist/js/bootstrap.min.js"></script>
</html>

导航条出来了

这个导航条是响应式的，把屏幕缩小会变成这样

模态框需要你搞一个按钮激活它，下面也有按钮激活的案例，我们直接粘贴

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-5.1.3-dist/css/bootstrap.min.css">
</head>
<body>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch demo modal
    </button>
  
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            ...
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
        </div>
    </div>
    </div>
</body>
<script src="bootstrap-5.1.3-dist/js/bootstrap.min.js"></script>
</html>

打开网页后有一个按钮

点击按钮后出现模态框

4 tab栏 Tabs

在文档中的Navs & tabs中搜索JavaScript behavior可以找到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-5.1.3-dist/css/bootstrap.min.css">
</head>
<body>
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
          <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
        </li>
      </ul>
      <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
      </div>
</body>
<script src="bootstrap-5.1.3-dist/js/bootstrap.min.js"></script>
</html>

5 在阿里百秀中使用bootstrap组件

在第一行的前面我们加入一行，然后里面放上导航条

由于导航条也是响应式的，所以可以直接来用

之后简单改一下

<div class="row">
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container-fluid">
                  <a class="navbar-brand" href="#">阿里百秀</a>
                  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                  </button>
                  <div class="collapse navbar-collapse" id="navbarScroll">
                    <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
                      <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">首页</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#">新闻</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#">生活</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#">自然</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#">科技</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#">奇趣</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#">美食</a>
                      </li>
                    </ul>
                    <form class="d-flex" role="search">
                      <input class="form-control me-2" type="search" placeholder="搜索" aria-label="Search">
                      <button class="btn btn-outline-success" type="submit" style="width:5rem;">搜索</button>
                    </form>
                    <ul class="navbar-nav my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px">
                        <li class="nav-item">
                          <a class="nav-link" href="#">登陆</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">注册</a>
                        </li>
                      </ul>
                  </div>
                </div>
              </nav>
        </div>

就变成这样了