javascript - 在 Angular 2 中使用 HTML5 主题

标签 javascript html twitter-bootstrap angular ng2-bootstrap

我想知道如何设置使用 bootstrap 和一些 css 和 js 设计的当前主题

我在我的主题中使用以下 css 和 js 文件,我不想像我们在 Angular 1 中那样将其放入 index.html 中,任何人都可以告诉我如何在不影响 Angular 2 的情况下有效导入所有 css 和 js结构和行为。

<link href="assets/plugins/pace/pace-theme-flash.css" rel="stylesheet" type="text/css" />
    <link href="assets/plugins/boostrapv3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css" />
    <link href="assets/plugins/jquery-scrollbar/jquery.scrollbar.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="assets/plugins/bootstrap-select2/select2.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="assets/plugins/switchery/css/switchery.min.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="theme/css/theme-icons.css" rel="stylesheet" type="text/css">
    <link class="main-stylesheet" href="theme/css/theme.css" rel="stylesheet" type="text/css" />
    <link href="theme/css/style.css" rel="stylesheet" type="text/css" />

Js文件

 <script src="assets/plugins/pace/pace.min.js" type="text/javascript"></script>
    <script src="assets/plugins/jquery/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="assets/plugins/modernizr.custom.js" type="text/javascript"></script>
    <script src="assets/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
    <script src="assets/plugins/boostrapv3/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="assets/plugins/jquery/jquery-easy.js" type="text/javascript"></script>
    <script src="assets/plugins/jquery-unveil/jquery.unveil.min.js" type="text/javascript"></script>
    <script src="assets/plugins/jquery-bez/jquery.bez.min.js"></script>
    <script src="assets/plugins/jquery-ios-list/jquery.ioslist.min.js" type="text/javascript"></script>
    <script src="assets/plugins/jquery-actual/jquery.actual.min.js"></script>
    <script src="assets/plugins/jquery-scrollbar/jquery.scrollbar.min.js"></script>
    <script type="text/javascript" src="assets/plugins/bootstrap-select2/select2.min.js"></script>
    <script type="text/javascript" src="assets/plugins/classie/classie.js"></script>
    <script src="assets/plugins/switchery/js/switchery.min.js" type="text/javascript"></script>
    <script src="assets/plugins/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script>

我尝试使用 ng2-bootstrap 和 bootstrap 但无法使其工作。

最佳答案

你的问题是你加载直接 Bootstrap 和 jquery 插件,而不是像 angular-ui-bootstrap 这样的东西。一些 boostrap 东西使用纯 CSS(没有兼容性问题),其他东西使用 jquery/,有时它与 Angular1/2 的工作不稳定,因此像 angular-ui-bootstrap 这样的项目。

<小时/>

尝试 Angular 2 版本 https://ng-bootstrap.github.io/ 然后使用 webpack 加载所有 css 文件(只需将当前项目 css 文件放在同一个 css 文件夹中)。显然,您需要将现有的 Bootstrap javascript 代码更改为 angular-ui 指令。

关于javascript - 在 Angular 2 中使用 HTML5 主题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40331411/

相关文章:

javascript - `AudioContext().audioWorklet.addModule()`,如何通过 `Blob` 加载?

javascript - 在 if 语句外部使用比较参数

html - Twitter-bootstrap header 标签在 safari 中出现乱码

html - Sibling Selector Hover 仅适用于 Chrome

html - 溢出换行未应用于文本

html - 如何将我的自定义 UI 从 PSD 添加到 Bootstrap?

css - AngularJS 中的模式服务允许我调整模式弹出窗口的大小

javascript优化多个reduce和map从嵌套对象中提取数据

javascript - 如何正确删除行?

javascript - 如何嵌套数据绑定(bind)文本