ng2使用bootstrap前端框架

ng2使用bootstrap前端框架
- 安装依赖
- 引入依赖
  - appmodulets
  - indexhtml
- 使用
  - 原生使用方法
  - ng2 component

安装依赖

cnpm i --save bootstrap@4.0.0-alpha.6
cnpm i --save @ng-bootstrap/ng-bootstrap@1.0.0-alpha.21

引入依赖

app.module.ts

...
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({declarations: [AppComponent,...,],imports: [BrowserModule,FormsModule,HttpModule,NgbModule.forRoot()//添加到这里],providers: [...],bootstrap: [AppComponent]
})
export class AppModule { }

index.html

引入bootstrap样式表文件

<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">

使用

在该module下的component中即可自由使用bootstrap样式和component

原生使用方法

按照原有使用方法使用

ng2 component

范例及文档

ng2 angular2 使用bootstrap框架相关推荐

Bootstrap框架和inconfont、font-awesome使用
Bootstrap框架和inconfont.font-awesome使用 iconfont的使用:https://www.cnblogs.com/clschao/articles/10387580.h ...
UI设计实战篇——利用Bootstrap框架制作查询页面的界面
Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太大).尤其是现在的响应时布局(我的理解是页面根据不同的分辨率,采用不 ...
Bootstrap框架中的字形图标的理解
最近项目中准备使用 Bootstrap 框架,看中了Ace Admin 这套皮肤,看其代码的时候,发现使用了字形图标.下面内容来源于网络,根据自己对新知识的学习曲线重新整合了一下: 一,字形图标的定义 ...
Python之flask结合Bootstrap框架快速搭建Web应用
目录前言安装bootstrap扩展模板的继承总结前言 Flask是一个基于Python开发,依赖jinja2模板和Werkzeug WSGI服务的一个微型框架.Werkzeug用来处理Soc ...
将用bootstrap框架的html文件转为eclipse中jsp文件
eclipse中引入bootstrap框架最近跟着我们专业一个很厉害很崇拜的老师捯饬毕设,他让我学自适应框架bootstrap,花了一周时间了解了该框架的基本架构和用法,上去就写html文件,本来 ...
在Bootstrap框架中，form-control的效果
在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名"form-control",将会实现一些设计上的定制效果. 1.宽度 ...
使用BootStrap框架设置全局CSS样式
一.排版标题 HTML 中的所有标题标签,<h1> 到 <h6> 均可使用.另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式. & ...
基于bootstrap框架在ie8以下,兼容媒体查询[css样式]
1 <style type="text/css"> 2 /*基于bootstrap框架在ie8以下,兼容媒体查询*/ 3 .row [class^="col- ...
python web开发 Bootstrap框架基础
文章目录 1. 安装 2. Bootstrap 5 基本应用 learning from <python web开发从入门到精通> Bootstrap 是最受欢迎的前端组件库,用于 HT ...

ng2 angular2 使用bootstrap框架

ng2使用bootstrap前端框架

安装依赖

引入依赖

app.module.ts

index.html

使用

原生使用方法

ng2 component

ng2 angular2 使用bootstrap框架相关推荐

最新文章

热门文章