Angular 中引入BootStrap

由于Bootstrap官方目前并没有发布Angular的相关类库进行支持,当前Angular只能引用使用Bootstrap相关的样式。无法使用Bootstrap自带的脚本逻辑。以下以Angular7和Bootsrap4.2为例进行demo验证。

环境搭建

首先执行以下两个命令创建angular项目和组件

ng new AngularDemo //创建项目 

ng g c bootstrapdemo // 创建组件 

然后执行

npm install bootstrap // 安装最新的bootstrap组件

执行过程中发现警告 bootstrap以来jquery 和popper.js

npm i jquery popper.js

引入样式

方法一:

找到index.html直接添加样式引用

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

方法二:

打开Angular.json文件找到 project->architect->builder->options 下的style和scripts两个配置节。并将bootstrap的样式引入到styles中。由于angular只能引用bootstrap样式,所以scripts不需要引用bootstrap相关脚本(引用了也不生效)。

验证

copy 一段最简单的bootstrap栅格做个验证。

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
    <div class="row">
      <div class="col-12 col-md-8">.col-12 .col-md-8</div>
      <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    </div>

    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
    <div class="row">
      <div class="col-6 col-md-4">.col-6 .col-md-4</div>
      <div class="col-6 col-md-4">.col-6 .col-md-4</div>
      <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    </div>

    <!-- Columns are always 50% wide, on mobile and desktop -->
    <div class="row">
      <div class="col-6">.col-6</div>
      <div class="col-6">.col-6</div>
    </div>

原文地址:https://www.cnblogs.com/liyong-blackStone/p/10195169.html

时间: 2024-09-27 10:51:48

Angular 中引入BootStrap的相关文章

Angular中使用bootstrap样式

Angular中使用bootstrap样式 Angular中引入bootstrap的方法 ? 方法1:在Angular.json中的styles数组中添加bootstrap路径 如下所示: "styles": [ "src/styles.css", "./node_modules/bootstrap/dist/css/bootstrap.min.css" ] 这里需要注意路径问题,不同Angular版本下,Angular.json的位置可能有所不

Vue中引入bootstrap导致的CSS问题

最近在进行vue.js+webpack进行模块化开发的时候,遇到一个奇怪的问题. 问题是这样的: 1. 在main.js文件中引入bootstrap的js和css. 2. 自己写了一个Header.vue模块,其中的导航条使用的bootstrap的class和自己的class. <ul class="navbar-nav my-navBar" id="my-navBar"> 3. 在Header.vue中定义了一些ul li 和 a 标签的样式. ul.

如何在jsp中引入bootstrap

如何在jsp中引入bootstrap包: 1.首先在http://getbootstrap.com/上下载Bootstrap的最新版. 您会看到两个按钮: Download Bootstrap:下载 Bootstrap.点击该按钮,您可以下载 Bootstrap CSS.JavaScript 和字体的预编译的压缩版本.不包含文档和最初的源代码文件. Download Source:下载源代码.点击该按钮,您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript

在Vue-cli项目中引入Bootstrap

(1)到bootstrap官网下载所需版本的bootstrap.zip文件. (2)将bootstrap.min.css以及bootstrap.min.js解压到assets文件夹,另外还需要将fonts字体文件夹解压到src文件夹下面. (3)在main.js文件中通过 import './assets/bootstrap.min.css' import './assets/bootstrap.min' 引入bootstrap,引入完成之后,就可以在组件中使用bootstrap了. 另外需要注

在HTML网页中引入Bootstrap前端框架

Bootstrap百度百科介绍: Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成. 这是优雅的分割线..................................

django中引入bootstrap

总体的目录结构如下图:mysite 是我创建的一个项目 一.首先在你的项目文件夹下创建一个名为 static 的目录 ,并把下载好的bootstrap目录拷到static目录下. 二.打开settings.py文件,在文件的最后添加如下内容: STATIC_URL = '/static/' STATIC_ROOT = os.path.join(BASE_DIR, 'collectstatic') STATICFILES_DIRS = (os.path.join(BASE_DIR, "static

在grails app中引入bootstrap和jquery依赖

在layouts的模板文件 <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css"> <g:javascript library="jquery" plugin="jquery"/> 使用本地bootstrap,图标一直不能正常显示,有点麻烦 BootStrap.groovy,加

angualr引入bootstrap部分效果失效。

周末没事儿做,闲着也是闲着,就看了一下angular的项目开发的视频,按照视频中的例子一步一步的做,发现一个问题,(视频中讲的跟自己实际中做的都不一样,视频中的东西一步就可以通过,自己做的话,步步报错,说笑的),还是发现了一些问题的. 比如说angular中引入jQuery和bootstrap,npm i jquery -- save 和npm i bootstrap --save 命令可以引入, 只引入了,不能使用,因为angular中使用的typescript语法, 所以还要用以下的命令加进

如何在前端项目中引用bootstrap less?

在基于bootstrap css框架的前端项目开发中,如果有grunt build系统,那么工作流是:客制化less,在less中定义自己的 CSS,同时可以随意引用bootstrap中预定义好的css类,一旦保存文件,grunt则开始重新构建,生成最后的生产文件.问题是: 如何能够在自己的客制less文件中引入bootstrap的less变量或者mixin呢? 比如:我如何能够实现在屏幕尺寸在@screen-md时,将所有的图片隐藏呢? 对于这个场景,假设项目目录结构如下: > bower_c