文章/答案/技术大牛

发布

社区首页 >问答首页 >使用角组件将引导模板集成到角度项目中

问使用角组件将引导模板集成到角度项目中
EN

Stack Overflow用户

提问于 2019-05-03 07:39:25

回答 3查看 6K关注 0票数 1

由于我不是一个前端开发人员，而且我正在从头开始构建一个web应用程序，所以我下载了一个引导模板，并试图将它集成到一个简单的角项目中(由角CLI生成)。

我所做的是：

在index.html中复制模板的app.component.html文件：

app.component.html

<!DOCTYPE HTML>
<!--
    Parallelism by HTML5 UP
    html5up.net | @ajlkn
    Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
    <head>
        <title>Parallelism by HTML5 UP</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <link rel="stylesheet" href="assets/css/main.css" />
        <noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
    </head>
    <body class="is-preload">

        <!-- Wrapper -->
            <div id="wrapper">

                <!-- Main -->
                    <section id="main">

                        <!-- Items -->
                            <div class="items">

                                <div class="item intro span-2">
                                    <h1>Parallelism</h1>
                                    <p>A responsive portfolio site<br />
                                    template by HTML5 UP</p>
                                </div>

                                <article class="item thumb span-1">
                                    <h2>You really got me</h2>
                                    <a href="assets/images/fulls/01.jpg" class="image"><img src="assets/images/thumbs/01.jpg" alt=""></a>
                                </article>

                                <article class="item thumb span-2">
                                    <h2>Ad Infinitum</h2>
                                    <a href="assets/images/fulls/02.jpg" class="image"><img src="assets/images/thumbs/02.jpg" alt=""></a>
                                </article>

                                <article class="item thumb span-1">
                                    <h2>Different.</h2>
                                    <a href="assets/images/fulls/03.jpg" class="image"><img src="assets/images/thumbs/03.jpg" alt=""></a>
                                </article>

                                <article class="item thumb span-1">
                                    <h2>Elysium</h2>
                                    <a href="assets/images/fulls/04.jpg" class="image"><img src="assets/images/thumbs/04.jpg" alt=""></a>
                                </article>

                                <article class="item thumb span-3">
                                    <h2>Kingdom of the Wind</h2>
                                    <a href="assets/images/fulls/05.jpg" class="image"><img src="assets/images/thumbs/05.jpg" alt=""></a>
                                </article>

                                <article class="item thumb span-1">
                                    <h2>The Pursuit</h2>
                                    <a href="assets/images/fulls/06.jpg" class="image"><img src="assets/images/thumbs/06.jpg" alt=""></a>
                                </article>

                                <article class="item thumb span-2">
                                    <h2>Boundless</h2>
                                    <a href="assets/images/fulls/07.jpg" class="image"><img src="assets/images/thumbs/07.jpg" alt=""></a>
                                </article>

                                <article class="item thumb span-2">
                                    <h2>The Spectators</h2>
                                    <a href="assets/images/fulls/08.jpg" class="image"><img src="assets/images/thumbs/08.jpg" alt=""></a>
                                </article>

                            </div>

                        <!-- Items -->
                            <div class="items">

                                <article class="item thumb span-3"><h2>Kingdom of the Wind</h2><a href="assets/images/fulls/05.jpg" class="image"><img src="assets/images/thumbs/05.jpg" alt=""></a></article>
                                <article class="item thumb span-1"><h2>The Pursuit</h2><a href="assets/images/fulls/06.jpg" class="image"><img src="assets/images/thumbs/06.jpg" alt=""></a></article>
                                <article class="item thumb span-2"><h2>Boundless</h2><a href="assets/images/fulls/07.jpg" class="image"><img src="assets/images/thumbs/07.jpg" alt=""></a></article>
                                <article class="item thumb span-2"><h2>The Spectators</h2><a href="assets/images/fulls/08.jpg" class="image"><img src="assets/images/thumbs/08.jpg" alt=""></a></article>
                                <article class="item thumb span-1"><h2>You really got me</h2><a href="assets/images/fulls/01.jpg" class="image"><img src="assets/images/thumbs/01.jpg" alt=""></a></article>
                                <article class="item thumb span-2"><h2>Ad Infinitum</h2><a href="assets/images/fulls/02.jpg" class="image"><img src="assets/images/thumbs/02.jpg" alt=""></a></article>
                                <article class="item thumb span-1"><h2>Different.</h2><a href="assets/images/fulls/03.jpg" class="image"><img src="assets/images/thumbs/03.jpg" alt=""></a></article>
                                <article class="item thumb span-2"><h2>Kingdom of the Wind</h2><a href="assets/images/fulls/05.jpg" class="image"><img src="assets/images/thumbs/05.jpg" alt=""></a></article>
                                <article class="item thumb span-1"><h2>Elysium</h2><a href="assets/images/fulls/04.jpg" class="image"><img src="assets/images/thumbs/04.jpg" alt=""></a></article>

                            </div>

                    </section>

                <!-- Footer -->
                    <section id="footer">
                        <section>
                            <p>This is <strong>Parallelism</strong>, a responsive portfolio site template by <a href="http://html5up.net">HTML5 UP</a>. Free for personal
                            and commercial use under the <a href="http://html5up.net/license">Creative Commons Attribution</a> license.</p>
                        </section>
                        <section>
                            <ul class="icons">
                                <li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
                                <li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
                                <li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
                                <li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
                                <li><a href="#" class="icon fa-envelope"><span class="label">Email</span></a></li>
                            </ul>
                            <ul class="copyright">
                                <li>&copy; Untitled</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
                            </ul>
                        </section>
                    </section>

            </div>

        <!-- Scripts -->
            <script src="assets/js/jquery.min.js"></script>
            <script src="assets/js/jquery.poptrox.min.js"></script>
            <script src="assets/js/browser.min.js"></script>
            <script src="assets/js/breakpoints.min.js"></script>
            <script src="assets/js/util.js"></script>
            <script src="assets/js/main.js"></script>

    </body>
</html>

当然，我已经将模板的资产复制到资产文件夹中，并修改了文件路径。

这种类型的东西很管用。

以下是我的问题：

这种集成引导模板的方法会导致错误吗？
我这样做对吗？
如果没有，你愿意告诉我我做错了什么吗？

angular

html

css

bootstrap-4

回答 3

Stack Overflow用户

发布于 2019-05-03 10:21:52

对于角2+，类似的问题被回答为这里。

是的，这是可能的，但你将不得不做一些调整。

模板

首先，如果您的js脚本插件可用，请通过npm导入它们。

npm安装(插件名称)-保存

或您可以在项目中添加这些脚本js文件，然后必须编辑angular.json以包含js插件(js & css)，例如如下所示：

更新

"styles": ["styles.css", "assets/css/noscript.css"], "scripts":["assets/js/jquery.min.js","assets/js/jquery.poptrox.min.js","assets/js/browser.min.js","assets/js/breakpoints.min.js","assets/js/util.js","assets/js/main.js"],

将样式和脚本的路径放到数组中

然后，您应该将主模板css文件添加到预定义的styles.css中(您可以在项目创建时自动在style.css中添加所有main.css内容)

接下来，您应该将页面拆分为组件(查看组件和“标记”组件)。

现在关于自定义应用开发：

将您的自定义js添加到.component.js - css中，在.component.css - html中添加到.component.html中。

更新

看看这，我用你的模板创建了一个示例应用程序。你可以进一步编辑它。

票数 6

Stack Overflow用户

发布于 2019-05-03 11:07:58

有两种具体的实现方法，

使用ng引导程序(五-靴带)。
创建一个新的角度应用程序。只需在angular.json或index.html上包括引导资源js文件、css文件和jquery。然后，您可以从引导网站获取所需的html并实现您的解决方案。

如果你被困在任何地方，我可以帮你:)

嘿，我在我的项目中使用了非常相似的解决方案。(第二条路)

你问题的答案，

你不需要复制整页。当您将引导资源导入index.html时，您可以进入组件。例如，您可以拥有一个header.componenet、一个footer.componenet和一个body.componenet，因此维护起来更容易。
你做错了一点，因为你没有用角度来实现它。
上面回答了。

票数 2

Stack Overflow用户

发布于 2020-03-10 09:45:55

这是一个角引导初学者代码。它包含3个布局开始。最新的角度和引导。

源代码：准备使用角引导模板

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/55965266

复制

相似问题

问使用角组件将引导模板集成到角度项目中
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用角组件将引导模板集成到角度项目中EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用角组件将引导模板集成到角度项目中
EN