• 附录7-使用bootstrap组件

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

    目录

    1  下拉菜单 Dropdown

    2  导航条 Navbar

    3  模态框 Modal

    4  tab栏 Tabs

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

     

    1  下拉菜单 Dropdown

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

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

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

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

    按照解决方案搞一下

    发现可以正常使用了

    2  导航条 Navbar

    搞一个这个

    引入库后进行复制

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <link rel="stylesheet" href="bootstrap-5.1.3-dist/css/bootstrap.min.css">
    9. head>
    10. <body>
    11.     <nav class="navbar navbar-expand-lg navbar-light bg-light">
    12.         <div class="container-fluid">
    13.           <a class="navbar-brand" href="#">Navbar scrolla>
    14.           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
    15.             <span class="navbar-toggler-icon">span>
    16.           button>
    17.           <div class="collapse navbar-collapse" id="navbarScroll">
    18.             <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
    19.               <li class="nav-item">
    20.                 <a class="nav-link active" aria-current="page" href="#">Homea>
    21.               li>
    22.               <li class="nav-item">
    23.                 <a class="nav-link" href="#">Linka>
    24.               li>
    25.               <li class="nav-item dropdown">
    26.                 <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    27.                   Link
    28.                 a>
    29.                 <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
    30.                   <li><a class="dropdown-item" href="#">Actiona>li>
    31.                   <li><a class="dropdown-item" href="#">Another actiona>li>
    32.                   <li><hr class="dropdown-divider">li>
    33.                   <li><a class="dropdown-item" href="#">Something else herea>li>
    34.                 ul>
    35.               li>
    36.               <li class="nav-item">
    37.                 <a class="nav-link disabled">Linka>
    38.               li>
    39.             ul>
    40.             <form class="d-flex" role="search">
    41.               <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
    42.               <button class="btn btn-outline-success" type="submit">Searchbutton>
    43.             form>
    44.           div>
    45.         div>
    46.       nav>
    47. body>
    48. <script src="bootstrap-5.1.3-dist/js/bootstrap.min.js">script>
    49. html>

    导航条出来了

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

    3  模态框 Modal

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <link rel="stylesheet" href="bootstrap-5.1.3-dist/css/bootstrap.min.css">
    9. head>
    10. <body>
    11.     
    12.     <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    13.     Launch demo modal
    14.     button>
    15.   
    16.     
    17.     <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    18.     <div class="modal-dialog">
    19.         <div class="modal-content">
    20.         <div class="modal-header">
    21.             <h5 class="modal-title" id="exampleModalLabel">Modal titleh5>
    22.             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">button>
    23.         div>
    24.         <div class="modal-body">
    25.             ...
    26.         div>
    27.         <div class="modal-footer">
    28.             <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Closebutton>
    29.             <button type="button" class="btn btn-primary">Save changesbutton>
    30.         div>
    31.         div>
    32.     div>
    33.     div>
    34. body>
    35. <script src="bootstrap-5.1.3-dist/js/bootstrap.min.js">script>
    36. html>

    打开网页后有一个按钮

    点击按钮后出现模态框

    4  tab栏 Tabs

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <link rel="stylesheet" href="bootstrap-5.1.3-dist/css/bootstrap.min.css">
    9. head>
    10. <body>
    11.     <ul class="nav nav-tabs" id="myTab" role="tablist">
    12.         <li class="nav-item" role="presentation">
    13.           <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">Homebutton>
    14.         li>
    15.         <li class="nav-item" role="presentation">
    16.           <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">Profilebutton>
    17.         li>
    18.         <li class="nav-item" role="presentation">
    19.           <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">Contactbutton>
    20.         li>
    21.       ul>
    22.       <div class="tab-content" id="myTabContent">
    23.         <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...div>
    24.         <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...div>
    25.         <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...div>
    26.       div>
    27. body>
    28. <script src="bootstrap-5.1.3-dist/js/bootstrap.min.js">script>
    29. html>

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

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

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

    之后简单改一下 

    1. <div class="row">
    2.             <nav class="navbar navbar-expand-lg navbar-light bg-light">
    3.                 <div class="container-fluid">
    4.                   <a class="navbar-brand" href="#">阿里百秀a>
    5.                   <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
    6.                     <span class="navbar-toggler-icon">span>
    7.                   button>
    8.                   <div class="collapse navbar-collapse" id="navbarScroll">
    9.                     <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
    10.                       <li class="nav-item">
    11.                         <a class="nav-link active" aria-current="page" href="#">首页a>
    12.                       li>
    13.                       <li class="nav-item">
    14.                         <a class="nav-link" href="#">新闻a>
    15.                       li>
    16.                       <li class="nav-item">
    17.                         <a class="nav-link" href="#">生活a>
    18.                       li>
    19.                       <li class="nav-item">
    20.                         <a class="nav-link" href="#">自然a>
    21.                       li>
    22.                       <li class="nav-item">
    23.                         <a class="nav-link" href="#">科技a>
    24.                       li>
    25.                       <li class="nav-item">
    26.                         <a class="nav-link" href="#">奇趣a>
    27.                       li>
    28.                       <li class="nav-item">
    29.                         <a class="nav-link" href="#">美食a>
    30.                       li>
    31.                     ul>
    32.                     <form class="d-flex" role="search">
    33.                       <input class="form-control me-2" type="search" placeholder="搜索" aria-label="Search">
    34.                       <button class="btn btn-outline-success" type="submit" style="width:5rem;">搜索button>
    35.                     form>
    36.                     <ul class="navbar-nav my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px">
    37.                         <li class="nav-item">
    38.                           <a class="nav-link" href="#">登陆a>
    39.                         li>
    40.                         <li class="nav-item">
    41.                           <a class="nav-link" href="#">注册a>
    42.                         li>
    43.                       ul>
    44.                   div>
    45.                 div>
    46.               nav>
    47.         div>

    就变成这样了

    之后我们在点击登陆后出现模态框，先搞一个模态框，模态框是不影响其他元素的，所以写在body的最底下就好了

    之后把登录的a标签链接到这个模态框

    这样点击登录后就可以出现一个模态框

  • 相关阅读:
    js实现星空雨随鼠标移动
    Mycat2.0搭建教程
    【历史上的今天】8 月 6 日：拯救了苹果的微软投资；万维网首次公开亮相；AWK 作者出生
    企业安全—DevSecOps概述详情
    十分钟教会你如何使用VitePress搭建及部署个人博客站点
    简单入门linux【一】初识linux
    光伏无人机吊装技术的优势及应用前景
    atcoder ABC 232 B~E题解
    vmware for linux 下载和安装
    Android AMS——ATMS解析（四）
  • 原文地址：https://blog.csdn.net/potato123232/article/details/127126182