Contents:

Angularv4.初体验


1333 浏览 5 years, 2 months

12 Bootstrap for Angular -- ngx bootstrap

版权声明: 转载请注明出处 http://www.codingsoho.com/

12 -- Bootstrap for Angular -- ngx bootstrap

使用版本 v3.3.7

https://valor-software.com/ngx-bootstrap/#/

安装

npm install ngx-bootstrap --save

添加css到index.html

<link href="[https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css](https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css)" rel="stylesheet">

添加导航栏

https://getbootstrap.com/docs/3.3/components/#navbar-default

添加到文件 app.component.html

直接拷贝的内容下拉功能并不工作。

参考 https://valor-software.com/ngx-bootstrap/#/dropdowns

在app.module.ts添加

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';

@NgModule({
  imports: [BsDropdownModule.forRoot(),...]
})

修改html为一下格式

  • li 添加添加drowndown
  • a 添加dropdownToggle
  • ul 添加*dropdownMenu

collapsed场景有点特殊，这个后面再解决

        <li class="dropdown" dropdown>
          <a href="#" dropdownToggle class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul *dropdownMenu class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>