手动装bootstrap ,亲测可行,带上源码

1.首先,引用react-bootstrap 官方的一句话

由于 React-Bootstrap 不依赖于具体的 Bootstrap 版本, 所以发行包中不包括任何 css。尽管使用这些组件时，一些样式表是必须的。 如何选择和加载 bootstrap 样式文件由使用者决定，最简单的办法就是从 CDN 上加载最新的样式表文件。

他们居然希望我们可以引用link标签,但是在Vue 的打包过程中,因为他是单文件,我就没有看到过.或者在index.html页面?

react确实可以!

 2.接下去我们安装具体的包

1.bootstrap

npm install bootstrap

2.react-bootstrap

 npm install react-bootstrap --save

3.bootstrap 需要的两个包

https://blog.csdn.net/mei12656276/article/details/88904619

这里具体讲了bootstrap到底各个文件是用来做什么的.

基本上可以这么理解他的文件

css 就是 布局

js  就是组件

然后我们编译js,就需要两个额外的包

jquery和Popper 这两个js文件.他不会自主引入,需要我们帮他引入

 

经过 测试 npm i 只能安装 本package中引用的文件,这样就很不合理.  其实bootstrap这样是不合理的,他们应该附带这些.

npm i @popperjs/core

npm  install jquery

npm install popper.js

好像bootstrap需要的是popper.js,而不是@popperjs/core   但是我进入它的官网确实显示这些,或许在bootstrap5.0会改变,我引用的是4.5.

毕竟需要版本升级的嘛!

 

当你装上这些的东西的时候,恭喜你已经半个成功了,当我在

他是正常的.

我不知道他引入的是css,还是js,那么总之,接下去我们引入几个组件和布局样式应用一下,看下具体的反应.

这里有两个问题

1.react-bootstrap是不是代替了bootstrap.js

那么css 其实就是布局

2.我引入的是css还是js

测试下

 

结果.经过测试,css 就是局部

 

引入正常使用

还有就是jquery

这里 我们首先有个问题怎么引入jquery

我们引入jquery

接下去我们对bootstrap的jquery 进行测试

最终,我们确定了 bootstrap.js对应的就是,这些的就是动作,而并不是组件的样式和html标签.

https://github.com/noenif/React-_Study/tree/master/src中,