Stackblitz: How to import Bootstrap CSS framework

问题:

I just found the amazing Stackblitz online VS Code editor. I created an Angular project and under dependencies installed the Bootstrap CSS framework but how should I import Bootstrap in to my project? Usually I do it by adding this line of code to angular-cli.json:

"../node_modules/bootstrap/dist/css/bootstrap.min.css"

But how does it work on Stackblitz?

Thanks

回答1:

In dependencies add "bootstrap" then click enter.

then write following line in styles.css in src folder

@import '~bootstrap/dist/css/bootstrap.min.css';

回答2:

try this :

style.css

@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css')

It will load all your glyphicon icons

回答3:

In angular.json:

"styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
],

For me works just fine.

回答4:

1. Open styles files at: src/styles.css

2. Add this line: @import url('https://unpkg.com/bootstrap/dist/css/bootstrap.min.css');

3. Click DEPENDENCIES menu at left of screen. There is an input says: 'enter js/css cdn url'

4. Write: https://code.jquery.com/jquery-3.3.1.slim.min.js and hit enter.
5. Write : https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js and hit enter.

Now you can use most of the bootstrap component like buttons and modal etc...

回答5:

Check this StackBlitz example : https://stackblitz.com/edit/angular-wkc7ix?file=styles.css

It does have a angular-cli.json file and a style.css file

angular-cli.json :

{
  "apps": [{
    "styles": ["styles.css"]
  }]
}

style.css :

@import "bootstrap/dist/css/bootstrap.min.css";

回答6:

1. Enter bootstrap at the enter package name input field of Dependencies section.
2. Add "node_modules/bootstrap/dist/css/bootstrap.min.css" to the styles section of angular.json file.

回答7:

Quite an old question but anyway this will be helpful for any one looking to include bootstrap in Stackblitz.

Step 1: Go to app.module.ts and write

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

Stackblitz will automatically prompts you for installing ng-bootstrap module.

Step 2: Add NgbModule in imports array.

imports:      [ BrowserModule, FormsModule, NgbModule ],

Step 3: In your styles.css

@import '~bootstrap/dist/css/bootstrap.min.css';

Now you should be getting glyphicons in your Angular project.