20200821 王维

学习总结

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环境的准备,能力还不足,需要提高。

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1