加载“外部”CSS（bootstrap）到特定的DIV。

huangapple
go评论84阅读模式
英文:

Load "External" CSS (bootstrap) to specific DIV

问题

您可以通过以下方式将上述CSS和JS应用于您的DIV模块：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

将上述代码粘贴到您需要应用这些CSS和JS的DIV模块中。这将确保您的模块具有所需的样式和功能。

英文:

Currently I have own CSS file for my whole page

maincss.css file which i have loaded to my homepage.

But currently i need to include "Specific CSS file" for my additional module , how should i do it ?

&lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css&quot; integrity=&quot;sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh&quot; crossorigin=&quot;anonymous&quot;&gt;
&lt;script src=&quot;https://code.jquery.com/jquery-3.4.1.slim.min.js&quot; integrity=&quot;sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js&quot; integrity=&quot;sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js&quot; integrity=&quot;sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;

The above code are needed for a module in my homepage , how should i apply above CSS and JS for that DIV

答案1

得分: 2

考虑到您已经编写了自己的CSS样式表，包含外部库可能会引起冲突。最好的做法可能是从外部来源编写/复制CSS，然后将其添加到您现有的CSS文件maincss.css中。

英文:

Considering you have already written your own CSS stylesheet, including an external library might cause conflicts. It might be in your best interest to write/copy CSS from the external source and append it into your existing CSS file maincss.css.

答案2

得分: 0

你应该在链接标签中提供你的CSS文件的路径，就像你编写CSS一样。

英文:

As you written your css you should give path of your css in link tag

答案3

得分: 0

Append the link of external css and also add your maincss.css. Use the external css specified class name on the specific DIV

在外部链接CSS中追加链接，并添加您的maincss.css。在特定的DIV上使用外部CSS指定的类名

英文:

Append the link of external css and also add your maincss.css. Use the external css specified class name on the specific DIV

&lt;html&gt;
  &lt;head&gt;
    &lt;meta name=&quot;generator&quot; content=&quot;HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39&quot; /&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css&quot; integrity=&quot;sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh&quot; crossorigin=&quot;anonymous&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;/css/maincss.css&quot; /&gt;
&lt;script src=&quot;https://code.jquery.com/jquery-3.4.1.slim.min.js&quot; integrity=&quot;sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js&quot; integrity=&quot;sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js&quot; integrity=&quot;sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
    &lt;title&gt;My Specific DIV&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;!-- Specific DIV --&gt;
  &lt;div class=&quot;container&quot;&gt;
  &lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-sm&quot;&gt;
      One of three columns
    &lt;/div&gt;
    &lt;div class=&quot;col-sm&quot;&gt;
      One of three columns
    &lt;/div&gt;
    &lt;div class=&quot;col-sm&quot;&gt;
      One of three columns
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;

huangapple
  • 本文由 发表于 2020年1月6日 17:30:39
  • 转载请务必保留本文链接：https://go.coder-hub.com/59609604.html
  • css
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定