码迷,mamicode.com
首页 > Web开发 > 详细

Angular5学习笔记 - 集成Bootstrap、Jquery、Tether(三)

时间:2018-01-26 23:00:20      阅读:719      评论:0      收藏:0      [点我收藏+]

标签:npm   nta   query   4.0   jquer   链接   less   learn   集成   

一、添加配置

cnpm i bootstrap jquery tether --save

添加后效果

技术分享图片

二、配置添加样式和js的引用

打开.angular-cli.json文件,在styles和scripts中添加链接。

需要注意添加的链接是下划线开头的目录

      "styles": [
        "styles.css",
        "../node_modules/_bootstrap@4.0.0@bootstrap/dist/css/bootstrap.min.css"
      ],
      "scripts": [
        "../node_modules/_jquery@3.3.1@jquery/dist/jquery.min.js",
        "../node_modules/_tether@1.4.3@tether/dist/js/tether.min.js",
        "../node_modules/_bootstrap@4.0.0@bootstrap/dist/js/bootstrap.min.js"
      ],

技术分享图片

三、修改Html测试效果

打开src/app/app.component.html文件修改内容为

<div class="container">
  <h1>Hello World</h1>
</div>

四、重启服务查看运行效果

文字有向右偏移

技术分享图片

 

参考:

http://study.163.com/course/courseLearn.htm?courseId=1004486002#/learn/video?lessonId=1048905052&courseId=1004486002

 

Angular5学习笔记 - 集成Bootstrap、Jquery、Tether(三)

标签:npm   nta   query   4.0   jquer   链接   less   learn   集成   

原文地址:https://www.cnblogs.com/chuancheng/p/8361207.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!