您现在的位置是:php教程网 > 编程技术 >

[db:作者] 2019-09-10 00:30 PHP学习

angular怎么引入bootstrap?

angular中引入bootstrap的方法:方法一、找到index.html直接添加样式引用链接。方法二、打开Angular.json文件找到style和scripts两个配置节。并将bootstrap的样式引入到styles中。

angular中引入bootstrap样式的方法:

引入样式

方法一:

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

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

1 (2).jpg

方法二:

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

2.jpg

验证

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>

3.jpg

以上就是angular怎么引入bootstrap?的详细内容,更多请关注html中文网其它相关文章!

上一篇:上一篇:php与javascript的区别有哪些?

下一篇:下一篇:html中如何调用javascript?