blocks|key|24402|text|在dependencies中添加"bootstrap“，然后单击enter。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|24403|然后在src文件夹中的styles.css中写入以下行|offset|length|style|CODE|BOLD|24404|@import+'~bootstrap/dist/css/bootstrap.min.css';|code-block|syntax|javascript|24405|entityMap^0|0|3|3|B|A|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@$D|R|E|S|F|G]|$D|T|E|U|F|H]]|9|@]|A|$]]|$1|I|3|J|5|K|7|V|8|@]|9|@]|A|$L|M]]|$1|N|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|O|$]]

In dependencies add "bootstrap" then click enter.

then write following line in styles.css in <code>src</code> folder

<pre><code>@import '~bootstrap/dist/css/bootstrap.min.css';
</code></pre>

blocks|key|2480736|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2480737|style.css|offset|length|style|BOLD|2480738|@import+url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css')|code-block|syntax|javascript|2480739|它会加载你所有的图标|2480740|entityMap^0|0|0|9|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@$D|S|E|T|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|U|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

try this :

style.css

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

It will load all your glyphicon icons

blocks|key|2691141|text|在angular.json中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2691142|"styles":+[
++++"node_modules/bootstrap/dist/css/bootstrap.min.css",
++++"styles.css"
],|code-block|syntax|javascript|2691143|对我来说工作得很好。|2691144|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

In angular.json:

<pre><code>"styles": [
 "node_modules/bootstrap/dist/css/bootstrap.min.css",
 "styles.css"
],
</code></pre>

For me works just fine.

blocks|key|26009|text|在屏幕左侧的以下位置打开样式文件：src/styles.css|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|26010|Add此行：@import+url('https://unpkg.com/bootstrap/dist/css/bootstrap.min.css');|unordered-list-item|CODE|26011|
|26012|Click+|26013|+menu。输入内容是：'enter+js/css+cdn+url‘|ordered-list-item|26014|：https://code.jquery.com/jquery-3.3.1.slim.min.js并点击enter。|26015|Write：https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js并按enter。|26016|26017|26018|现在你可以使用像buttons和modal等大多数的bootstrap组件了。|26019|entityMap|0|LINK|mutability|MUTABLE|url|https://getbootstrap.com/docs/4.1/components/buttons/|1|https://getbootstrap.com/docs/4.1/components/modal/|2|https://getbootstrap.com/^0|H|E|0|6|1Y|0|0|0|0|1|1C|0|6|1Y|0|0|0|8|7|0|G|5|1|Q|9|2|0^^$0|@$1|2|3|4|5|6|7|1A|8|@$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1D|8|@$9|1E|A|1F|B|I]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1G|8|@]|D|@]|E|$]]|$1|L|3|M|5|H|7|1H|8|@]|D|@]|E|$]]|$1|N|3|O|5|P|7|1I|8|@]|D|@]|E|$]]|$1|Q|3|R|5|P|7|1J|8|@$9|1K|A|1L|B|I]]|D|@]|E|$]]|$1|S|3|T|5|P|7|1M|8|@$9|1N|A|1O|B|I]]|D|@]|E|$]]|$1|U|3|-4|5|6|7|1P|8|@]|D|@]|E|$]]|$1|V|3|-4|5|6|7|1Q|8|@]|D|@]|E|$]]|$1|W|3|X|5|6|7|1R|8|@]|D|@$9|1S|A|1T|1|1U]|$9|1V|A|1W|1|1X]|$9|1Y|A|1Z|1|20]]|E|$]]|$1|Y|3|-4|5|6|7|21|8|@]|D|@]|E|$]]]|Z|$10|$5|11|12|13|E|$14|15]]|16|$5|11|12|13|E|$14|17]]|18|$5|11|12|13|E|$14|19]]]]

<ol>
<li>Open styles files at: src/styles.css</li>
<li>Add this line: <code>@import url('https://unpkg.com/bootstrap/dist/css/bootstrap.min.css');</code></li>
<li>Click DEPENDENCIES menu at left of screen. There is an input says: 'enter js/css cdn url' </li>
<li>Write: <code>https://code.jquery.com/jquery-3.3.1.slim.min.js</code> and hit enter. </li>
<li>Write :
<code>https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js</code> and hit enter.</li>
</ol>

Now you can use most of the <a href="https://getbootstrap.com/" rel="nofollow noreferrer">bootstrap</a> component like <a href="https://getbootstrap.com/docs/4.1/components/buttons/" rel="nofollow noreferrer">buttons</a> and <a href="https://getbootstrap.com/docs/4.1/components/modal/" rel="nofollow noreferrer">modal</a> etc...

blocks|key|2481008|text|这是一个相当老的问题，但不管怎样，这对任何希望在Stackblitz中包含bootstrap的人都是有帮助的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2481009|第1步：转到app.module.ts并编写|offset|length|style|BOLD|2481010|import+{+NgbModule+}+from+'@ng-bootstrap/ng-bootstrap';|code-block|syntax|javascript|2481011|Stackblitz将自动提示您安装ng-bootstrap模块。|2481012|第二步：在导入数组中添加NgbModule。|2481013|imports:++++++[+BrowserModule,+FormsModule,+NgbModule+],|2481014|第3步:+styles.css中的|2481015|@import+'~bootstrap/dist/css/bootstrap.min.css';|2481016|现在你应该可以在你的Angular项目中看到图标了。|2481017|entityMap^0|0|0|4|0|0|0|0|4|0|0|0|H|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@$D|12|E|13|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|14|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|16|8|@$D|17|E|18|F|G]]|9|@]|A|$]]|$1|Q|3|R|5|J|7|19|8|@]|9|@]|A|$K|L]]|$1|S|3|T|5|6|7|1A|8|@$D|1B|E|1C|F|G]]|9|@]|A|$]]|$1|U|3|V|5|J|7|1D|8|@]|9|@]|A|$K|L]]|$1|W|3|X|5|6|7|1E|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|Z|$]]

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

<pre><code>import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
</code></pre>

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

Step 2:
Add NgbModule in imports array.

<pre><code>imports: [ BrowserModule, FormsModule, NgbModule ],
</code></pre>

Step 3:
In your styles.css

<pre><code>@import '~bootstrap/dist/css/bootstrap.min.css';
</code></pre>

Now you should be getting glyphicons in your Angular project.

blocks|key|2691370|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2691371|在angular.json+Dependencies部分的enter+package+name+input字段中输入bootstrap。|ordered-list-item|offset|length|style|BOLD|2691372|将添加到文件的样式部分。|2691373|2691374|entityMap^0|0|1|C|T|I|1M|9|0|4|8|0|0^^$0|@$1|2|3|-4|4|5|6|M|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|N|7|@$D|O|E|P|F|G]|$D|Q|E|R|F|G]|$D|S|E|T|F|G]]|8|@]|9|$]]|$1|H|3|I|4|C|6|U|7|@$D|V|E|W|F|G]]|8|@]|9|$]]|$1|J|3|-4|4|5|6|X|7|@]|8|@]|9|$]]|$1|K|3|-4|4|5|6|Y|7|@]|8|@]|9|$]]]|L|$]]

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

blocks|key|24416|text|检查此StackBlitz示例：https://stackblitz.com/edit/angular-wkc7ix?file=styles.css|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|24417|它有一个angular-cli.json文件和一个style.css文件|24418|angular-cli.json：|24419|{
++"apps":+[{
++++"styles":+["styles.css"]
++}]
}|code-block|syntax|javascript|24420|style.css：|24421|@import+"bootstrap/dist/css/bootstrap.min.css";|24422|entityMap|0|LINK|mutability|MUTABLE|url|https://stackblitz.com/edit/angular-wkc7ix?file=styles.css^0|G|1M|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|13|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|14|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|C|$]]|$1|O|3|P|5|J|7|16|8|@]|9|@]|C|$K|L]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]]]

Check this StackBlitz example : <a href="https://stackblitz.com/edit/angular-wkc7ix?file=styles.css" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-wkc7ix?file=styles.css</a>

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

angular-cli.json :

<pre><code>{
 "apps": [{
 "styles": ["styles.css"]
 }]
}
</code></pre>

style.css :

<pre><code>@import "bootstrap/dist/css/bootstrap.min.css";
</code></pre>

blocks|key|2691389|text|在src下的styles.css中添加以下代码行|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2691390|@import+url('https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.min.css')|code-block|syntax|javascript|2691391|因此，要使用最新版本的Bootstrap，请访问|2691392|https://getbootstrap.com/docs/4.5/getting-started/introduction/|2691393|搜索CSS+CDN链接，从该链接复制版本(在我的情况下为4.5.0)，并将其替换为上面的import语句。|2691394|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Add the following line of code in styles.css under src
<pre><code>@import url('https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.min.css')
</code></pre>
So to have the latest version of Bootstrap go to
<pre><code>https://getbootstrap.com/docs/4.5/getting-started/introduction/
</code></pre>
Search for CSS CDN link, from that link copy the version (in my case 4.5.0) and replace it with the above import statement.

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:

<pre><code>"../node_modules/bootstrap/dist/css/bootstrap.min.css"
</code></pre>

But how does it work on Stackblitz?

Thanks

Stackblitz: How to import Bootstrap CSS framework

我刚刚发现了令人惊叹的Stackblitz online VS代码编辑器。我创建了一个Angular项目，并在依赖项下安装了Bootstrap CSS框架，但是我应该如何将Bootstrap导入到我的项目中呢？通常我是通过将这行代码添加到angular-cli.json中来实现的"../node_modules/bootstrap/dist/css/bootstrap.min.css"但它在Sta

问Stackblitz:如何导入Bootstrap CSS框架
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Stackblitz:如何导入Bootstrap CSS框架EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Stackblitz:如何导入Bootstrap CSS框架
EN