themes: http://themes.getbootstrap.com
cdn:
+ # See https://www.srihash.org for info on how to generate the hashes
css: https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css
+ css_hash: "sha384-XXXXXXXX"
js: https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js
+ js_hash: "sha384-XXXXXXXX"
jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js
Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets to load our CSS.
{% highlight html %}
-<link rel="stylesheet" href="{{ site.cdn.css }}">
+<link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
{% endhighlight %}
Add our JavaScript plugins and jQuery near the end of your pages, right before the closing `</body>` tag. Be sure to place jQuery first as our code depends on it.
{% highlight html %}
<script src="{{ site.cdn.jquery }}"></script>
-<script src="{{ site.cdn.js }}"></script>
+<script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
{% endhighlight %}
And that's it—you're on your way to a fully Bootstrapped site. If you're at all unsure about the general page structure, keep reading for an example page template.
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
- <link rel="stylesheet" href="{{ site.cdn.css }}">
+ <link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery first, then Bootstrap JS. -->
<script src="{{ site.cdn.jquery }}"></script>
- <script src="{{ site.cdn.js }}"></script>
+ <script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
</body>
</html>
{% endhighlight %}
<p>When you just need to include Bootstrap's compiled CSS and JS, use the Bootstrap CDN, free from the Max CDN folks.</p>
{% comment %}
{% highlight html %}
-<link rel="stylesheet" href="{{ site.cdn.css }}">
-<script src="{{ site.cdn.js }}"></script>
+<link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
+<script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
{% endhighlight %}
{% endcomment %}
<p class="text-muted">Not yet available, but hopefully soon!</p>