使用Bootstrap4写项目遇到的问题总结

关于工具提示框组件的使用
1.页面引入需要的html代码后，需在js文件添加初始化工具提示的代码

$('[data-toggle="tooltip"]').tooltip();

2.出现该错误 Uncaught TypeError: Bootstrap’s tooltips require Popper.js，如图：

解决方法：需要引入popper.js文件
在cmd（命令提示符）中输入npm install popper.js --save，下载该文件，并在html文件中引入bootstrap.js之前引入popper.js\dist\umd路径下的popper.js

注：popper官网中介绍的npm下载方法，使用npm i @popperjs/core 下载的文件是不一样的，引入该文件@popperjs\core\dist\umd路径下的popper.js会出现以下报错：
TypeError: u is not a constructor

关于页面按设备width相应地显示和隐藏元素的用法
隐藏元素，只需对该元素使用d-none该类或这些类之一（d-{xs,sm,md,lg,xl}-none）

原因是类更改display属性的值 ，其中值是以下之一：

• none
• inline
• inline-block
• block
• table
• table-cell
• table-row
• flex
• inline-flex

相关文档说明

关于使用插件iscroll.js实现导航条的滑动
水平滑动需要设置滑动方向

  var myScroll = new IScroll('.tab_box',{
        /*设置水平滑动，不允许垂直滑动*/
        scrollX: true, scrollY: false
    });

其它注意事项

设置导航栏的高度时，应设置其中子元素的高度，不然导航栏的高度固定了，在屏幕尺寸变小时，其中子元素无法撑开下面的元素，如下：