在Angular 2中使用HTML5主题

问题描述 投票:0回答:1

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

我在我的主题中使用以下css和js文件,我不想像在角度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,但无法使其正常工作。

javascript html5 twitter-bootstrap angular ng2-bootstrap
1个回答
1
投票

你的问题是你加载直接引导程序以及jquery插件而不是像angular-ui-bootstrap这样的东西。一些boostrap东西使用纯CSS(没有兼容性问题),而其他人使用jquery /,如果使用Angular1 / 2,它可以工作,因此有时像angular-ui-bootstrap这样的项目。


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

© www.soinside.com 2019 - 2024. All rights reserved.