使用引导CSS和JS
编辑该页面使用引导CSS和JS
这篇文章解释了如何安装和集成引导CSS框架在Symfonyob娱乐下载应用程序中使用Webpack安可。首先,能够进一步定制的东西,我们会安装引导
:
1 2 3 4 5
#如果你用纱包管理器美元纱添加引导- dev#如果你使用npm包管理器美元npm安装引导——save-dev
导入引导风格
现在,引导
在你的生活node_modules /
目录,您可以从任何进口Sass或JavaScript文件。例如,如果你已经有了global.scss
文件,导入:
1 2 3 4 5 6 7
/ /资产/风格/ global.scss/ /自定义一些引导变量美元主:变黑(# 428 bca,20%);/ / node_modules ~让你参考的东西@ import“~引导/ scss /引导”;
就是这样!这个进口node_modules /引导/ scss / bootstrap.scss
文件到global.scss
。你甚至可以定制先引导变量!
提示
如果你不需要所有引导的功能,您可以包括特定的文件引导
目录而不是——如。~引导/ scss /警报
。
导入引导JavaScript
首先,安装所需的JavaScript依赖性引导您的应用程序所使用的版本:
1 2 3 4 5 6 7
#如果你用纱包管理器# (jQuery只是需要版本引导前5)美元纱添加jquery @popperjs /核心- dev#如果你使用npm包管理器# (jQuery只是需要版本引导前5)美元npm安装jquery核心——save-dev @popperjs /
现在,需要引导从任何你的JavaScript文件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
/ / app.js常量$ =需要(jquery的);/ /这个“修改”jquery模块:添加行为/ /引导模块导出/不返回任何值需要(“引导”);/ /也可以包括特定/ /要求(“引导/ js / dist /工具提示”);/ /要求(“引导/ js / dist /弹出窗口”);$ (文档时(函数(){$ (“[data-toggle = "窗"]”).popover ();});
使用引导和涡轮增压
如果您使用的是引导与涡轮驱动,允许JavaScript加载在每个页面的变化,包装的初始化涡轮:负载
事件监听器:
1 2 3 4 5 6 7 8 9 10
/ / app.js/ /等待涡轮驱动负载文档.addEventListener (“涡轮:负载”,函数(e){/ /这使全球引导工具提示让tooltipTriggerList = [] .slice.call (文档.querySelectorAll (“[data-bs-toggle = "提示"]”))让tooltipList = tooltipTriggerList.map (函数(tooltipTriggerEl){返回新工具提示(tooltipTriggerEl)});});
使用其他引导/ jQuery插件
如果你需要使用jQuery插件和jQuery一起工作得很好,您可能需要使用安可autoProvidejQuery ()这些插件方法知道在哪里找到jQuery。然后,您可以包括所需的JavaScript和CSS像正常:
1 2 3 4 5 6 7
/ /……/ /需要的JavaScript需要(“bootstrap-star-rating”);/ /需要2所需的CSS文件需要(“bootstrap-star-rating / css / star-rating.css”);需要(“bootstrap-star-rating /主题/ krajee-svg / theme.css”);
这项工作,包括代码示例,许可下Creative Commons冲锋队3.0许可证。
TOC
版本
版本: