简体   繁体   English

从component.html文件加载Bootstrap

[英]Loading Bootstrap from component.html file

This code works, bootstrap is loaded inside of the head tag. 此代码有效,引导程序已加载到head标签内部。

 <html> <head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> </head> <body> <!--some stuff--> </body> </html> 

But when I put that code in a component.html file and import it: 但是,当我将该代码放入component.html文件并导入时:

 <html> <head> <link rel="import" href="component.html" > </head> <body> <!--some stuff--> </body> </html> 

Bootstrap doesn't work. 引导程序不起作用。 Can someone help me? 有人能帮我吗?

component.html: component.html:

  <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 

You would need to place this script tag, just before the closing body tag 您需要将此脚本标签放置在结束body标签之前

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Jquery library must be loaded First or prior to this https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js file. 必须首先或在此https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js文件之前加载Jquery库

As this bootstrap.js is written using Jquery itself we need the main library to be loaded first so that the code inside the bootstrap file is meaningful, Else the browser compiler has no clue of the code, Hence the error. 由于此bootstrap.js是使用Jquery本身编写的,因此我们需要首先加载主库,以使bootstrap文件中的代码有意义,否则浏览器编译器将不知道代码,因此会出现错误。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM