Tuesday, July 28, 2015

Minimal Bootstrap "Hello World"

I hadn't checked out Bootstrap in a while, but came back to it this weekend while working on a side project. I re-read its getting started guide and found that their "hello world" was still too complex for my taste. It included cruft for IE8 support and required uploading extra files to my server.

So I present my own, further slimmed down, version of a Bootstrap hello world example. Bootstrap tells us that all of these lines are necessary:

<html lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

We then need to include the minified Bootstrap CSS file and a default theme.
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

I'm using Bootstrap's recommended CDN so there's no need to upload extra files to my own server. Finally, our body includes one simple container with two example columns, and the minified required .js files.
<div class="container">
  <h1>Hello, world!</h1>

  <div class="row">
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-6">.col-md-6</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
An important note is that I've stripped out elements needed for IE8 support. I also haven't had the chance yet to test this template in IE.

No comments:

Post a Comment