实验环境

一帮情况下，我们的测试用html模板需要引入bootstrap.css，也需要引入bootstrap.js，并且后者依赖于jquery的。因此也得引入jquery文件。为了方便，我提供了一个html模板，供实验引用：

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap</title>    
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
  </head>
  <body>
    <button>Hello</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

这样做的好处，是本地修改，本地调试。

但是有很多时候，不需要本地调试，而只是看到一段简单的代码呈现的效果，以及微小调整后的变化，那么我会直接使用一个互联网提供的工具：jsfiddle。这个工具的地址为jsfiddle.net。进入首页后，直接可以看到它分为4个区，分为可以编写html、编写js、编写css、以及执行后看到效果的区域。用这个工具，代码和结果可以一屏看完，并且更容易分享给其他人，所以我常常使用此工具。如果我没有列出完整的、带有模板的代码的话，那么可以把你看到的代码直接贴入到此网站的对应区域，随后点击界面上的Run按钮即可。

当然，方便使用之前，需要少量的配置。点击External Resources，在此区域内按照次序添加三个依赖：

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

这样jsfiddle就配置完毕。

PreviousIntroduction Next基础类

Last updated 4 years ago