Question

我试图在我的angular2应用程序中使用一些引导程序类但出现问题并且引导程序无效。我使用以下命令安装了bootstrap。

npm install bootstrap@4.0.0-alpha.6 --save

然后我在index.html中包含了bootstrap.min.css和bootstrap.min.js.

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

<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

我是否需要进行更多配置才能使引导工作。

下面的面板和类不起作用。

    <div class="panel panel-primary">
  <div class="panel-heading">
    Register
  </div>
  <div class="panel-body">
    <form (ngSubmit) = "save()" [formGroup]="userForm">
      <fieldset>
        <div class="form-group">
          <label class="col-md-2 control-label" for="firstNameId">First Name</label>
          <div class="col-md-8">
            <input class="form-control"
                  id="firstNameId" 
                  type="text" 
                  placeholder="First Name (required)" 
                  formControlName="firstName">
          </div>  
        </div>
        <div class="form-group">
          <label class="col-md-2 control-label" for="lastNameId">Last Name</label>
          <div class="col-md-8">
            <input class="form-control"
                  id="lastNameId" 
                  type="text" 
                  placeholder="last Name (required)" 
                  formControlName="lastName">
          </div>  
        </div>
        <div class="form-group">
          <div class="col-md-4 col-md-offset-2">
            <span>
              <button class="btn btn-primary" type="submit" [disabled]="!userForm.valid">Save</button>
            </span>
          </div>
        </div>
      </fieldset>
    </form>
  </div>
</div>

Answer 1

引用CSS文件（Bootstrap或其他）的方式取决于您正在使用的模块加载器。

SystemJS。如果Boostrap的路径正确（在<link href="">标记中），您的代码应该正常工作。

Webpack。使用webpack，您可以使用导入JavaScript文件的相同语法导入CSS文件，即import 'path/to/my/styles.css'（假设您使用TypeScript编码，而不是ES5编码）。

Answer 2

您的面板类在bootstrap 4中不起作用。它们被卡替换。 http://v4-alpha.getbootstrap.com/components/card/

bootstrap不在Angular2中工作

2 个答案: