add bootstrap UI

zlargon · zlargon · commit 3e828bee6157 · 2016-04-09T23:29:51.000+08:00
diff --git a/index.html b/index.html
@@ -1,20 +1,38 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
   <title>Gist HTML Preview</title>
   <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
   <meta http-equiv='Content-Type' content='text/html; charset=utf8'/>
   <meta name='apple-mobile-web-app-capable' content='yes'/>
   <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'/>
+
+  <!-- Bootstrap -->
+  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
+  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
+
+  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+  <!--[if lt IE 9]>
+    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+  <![endif]-->
 </head>
 <body>
   <div class="container">
     <h2>Gist HTML Preview</h2>
-    <span>https://gistpreview.github.io/?</span>
-    <input type="text" class="form-control input-sm" id="gist_id" placeholder="Gist ID">
-    <span>/</span>
-    <input type="text" class="form-control input-sm" id="file_name" placeholder="File Name">
-    <button id="submit" class="btn btn-primary">Submit</button>
+    <div class="form-inline" role="form">
+      <div class="form-group">
+        <label for="gist_id">https://gistpreview.github.io/?</label>
+        <input type="text" class="form-control input-sm" id="gist_id" placeholder="Gist ID">
+      </div>
+      <div class="form-group">
+        <label for="file_name">/</label>
+        <input type="text" class="form-control input-sm" id="file_name" placeholder="File Name">
+      </div>
+      <button id="submit" class="btn btn-primary">Submit</button>
+    </div>
   </div>
 
   <script src="https://cdn.rawgit.com/github/fetch/master/fetch.js"></script>
