angular5集成bootstrap4


第一步. 开发环境集成

》安装node.js 和 Angular Cli

//全局安装 Angular Cli
$ npm install -g @angular/cli
//安装后确认是否安装成功
$ node -v
$ npm -v
$ ng -v
//可以选择性的增加淘宝镜像,如果npm使用失败时使用 cnpm
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

第二步.创建新项目

》创建项目

cmd 打开终端,进入想要创建项目的目录下:运行以下命令创建项目名为demo的新项目

$ ng new demo
//目录下会生成一个demo文件夹 这个过程可能时间会很长,需要等待
       》启动新项目
//进入项目目录
$ cd demo
// ng serve 为启动项目命令  --open 会打开机器的默认浏览器 并访问localhost:4200/
$ ng serve --open

这个时候浏览器中可以看到如下图所示界面:

 

第三步.集成bootstrap

》安装依赖包
$ npm install bootstrap@4.0.0-beta.2 popper.js jquery --save
》新增导航栏实例
//新增一个组件 生成4个文件并更新 app.moudle.ts 文件(自动引入组件并声明)
$ ng g c components/common/nav
》配置angular routes 路由 并修改app.component.html 文件

》bootstrap4 starter template

starter template 地址 :https://v4.bootcss.com/docs/4.0/examples/starter-template/

查看网页源码,将 nav标签里面的内容粘贴到 nav.component.html中

》引入js和样式 css

将bootstrap jquery popper.js 的js引入到angular.json 代码如下:

"styles": [
   "src/styles.css" 
],            
"scripts": [
    "node_modules/jquery/dist/jquery.min.js", 
    "node_modules/popper.js/dist/umd/popper.min.js", 
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

将样式 css 引入styles.css中:

@import "../node_modules/bootstrap/dist/css/bootstrap.css";

重启服务,将看到类似如下页面:

 

 

打赏

未经允许不得转载:五二零九 » angular5集成bootstrap4

赞 (0)
分享到:更多 ()