学习总结

1.导航栏

// 导航条按钮
<button class="btn" data-toggle="collapse" data-target="#list">折叠</button>
// 导航条
<div id="list" class="collapse">
       <nav class="navbar navbar-expand-sm bg-light">
              <ul class="navbar-nav">
                       <li  class="nav-item">
                             <a class="nav-link" href="#">link1</a>
                       </li>
                       <li  class="nav-item">
                             <a class="nav-link" href="#">link2</a>
                       </li>
                       <li  class="nav-item">
                             <a class="nav-link" href="#">link3</a>
                       </li>
              </ul>
       </nav>
</div>

fixed-top和fixed-bottom可以实现导航栏的固定

2.手风琴

<div id="parent">
         <div class="card">
                 <div class="card-header">
                          <a href="#d1" data-toggle="collapse">card1</a>
                 </div>
                 <div class="collapse" id="d1" data-parent="#parent">
                          <div class="card-body">
                                    card1 page
                          </div>
                 </div>
         </div>
         <div class="card">
                 <div class="card-header">
                          <a href="#d2" data-toggle="collapse">card2</a>
                 </div>
                 <div class="collapse" id="d2" data-parent="#parent">
                          <div class="card-body">
                                    card2 page
                          </div>
                 </div>
         </div>
         <div class="card">
                 <div class="card-header">
                          <a href="#d3" data-toggle="collapse">card3</a>
                 </div>
                 <div class="collapse" id="d3" data-parent="#parent">
                          <div class="card-body">
                                    card3 page
                          </div>
                 </div>
         </div>         
</div>

data-parent自定义属性实现点击只显示一个内容区域

3.sass使用前提

1. 安装node.js解释器

2. 安装scss编译程序 npm install -g node-sass

   由于网速等原因，npm可能下载失败，此时需要使用cnpm镜像下载

   ①查看当前下载地址：npm config get registry
   ②修改下载地址为淘宝镜像：npm config set registry https://registry.npm.taobao.org/
   ③下载cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org
   ④下载node-sass包：cnpm install -g node-sass
   ⑤还原npm下载地址：npm config set registry https://registry.npmjs.org/

   中途可能存在权限问题，无法正常加载，此时以管理员身份运行powershell或开发工具，输入get-ExecutionPolicy用于查看状态，状态为Restricted，表示禁止，修改状态：set-ExecutionPolicy
   RemoteSigned 选择A:[全部] 更改状态，重新查看状态。如果编译软件还是不行，在编译软件中执行一次更改权限

3. 在命令行运行scss转换程序 node-sass scss文件位置 转换后的css文件放置位置

4.轮播

<div id="carouselID" class="carousel slide" data-ride="carousel">
     <div class="carousel-inner">
          <div class="carousel-item">
                 <img src="./img/banner1.jpg">
          </div>
          <div class="carousel-item">
                 <img src="./img/banner2.jpg">
          </div>
          <div class="carousel-item">
                 <img src="./img/banner3.jpg">
          </div>
     </div>
     // 左侧箭头
     <a class="carousel-control-prev" data-slide="prev" href="#carouselID"> 
           <span class="carousel-control-prev-icon"></span>
     </a>
     // 右侧箭头
     <a class="carousel-control-next" data-slide="next" href="#carouselID">
          <span class="carousel-control-next-icon"></span>
     </a>
    // 轮播指示器
     <ul class="carousel-indicators">
           <li data-target="#carouselID" data-slide-to="0"  class="active"></li>
           <li data-target="#carouselID" data-slide-to="1"></li>
           <li data-target="#carouselID" data-slide-to="2"></li>
     </ul>
</div>

心得体会

boot学习的第三天，着重学习boot的组件，涉及到js的内容，以前有所涉猎，但没有进行全面的学习，对页面中出发的事件和事务的处理感觉很有意思。并且进行了scss环境的准备，能力还不足，需要提高。