引导程序在Angular2中不起作用

Question

I was trying to use some bootstrap classes in my angular2 app but something is going wrong and bootstrap is not working. I have installed bootstrap using the below command.

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

Then i have included the bootstrap.min.css and bootstrap.min.js in index.html.

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

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

Do I need to do any more configuration to make the bootstrap work.

Below panel and classes are not working.

    <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

The way to reference a CSS file (Bootstrap or other) depends on which module loader you're using.

SystemJS. Your code should be working, provided the path to Boostrap is correct (in your <link href=""> tag).

Webpack. With webpack, you can import CSS files using the same syntax you import JavaScript files, ie import 'path/to/my/styles.css' (this is assuming you're coding in TypeScript, not ES5).

Answer 2

Your panel class will not work in bootstrap 4. They are replaced with cards. http://v4-alpha.getbootstrap.com/components/card/