index.html in storys-0.0.4

- old
+ new

@@ -2,15 +2,17 @@
 <html>
   <head>
     <meta charset="utf-8">
     <title>Storys</title>
 
+    <link href="css/lib/bootstrap.css" rel="stylesheet" type="text/css">
     <link href="css/app.css" rel="stylesheet" type="text/css">
     <link href="css/views.index.css" rel="stylesheet" type="text/css">
     <link href="css/views.show.css" rel="stylesheet" type="text/css">
 
     <script src="js/lib/jquery-2.0.3.js" type="text/javascript"></script>
+    <script src="js/lib/bootstrap.js" type="text/javascript"></script>
     <script src="js/lib/underscore.js" type="text/javascript"></script>
     <script src="js/lib/jquery.browser.js" type="text/javascript"></script>
     <script src="js/jquery.twoup.js" type="text/javascript"></script>
     <script src="js/framework.js" type="text/javascript"></script>
     <script src="js/controllers.index.js" type="text/javascript"></script>
@@ -22,31 +24,36 @@
   </head>
   <body>
     <div id="wrapper">
       <div id="view-index">
         <div id="header">
-          <input type="text" id="search">
-          <a id="clear-search" href="#index!1">Clear</a>
-          <br>
-          Sort:
-          <a class="sort" data-sort="publishedOn" href="#">Published On</a>
-          <a class="sort" data-sort="wordCount" href="#">Pages</a>
-          <br>
-          Sort Direction:
-          <a class="sort-direction" data-sort-direction="asc" href="#">Ascending</a>
-          <a class="sort-direction" data-sort-direction="desc" href="#">Descending</a>
+          <form class="form-inline">
+            <input type="text" id="search" class="form-control">
+            <span class="btn-group sort">
+              <button class="btn btn-default" data-sort="publishedOn" type="button">Published On</button>
+              <button class="btn btn-default" data-sort="wordCount" type="button">Pages</button>
+              <button class="btn btn-default" data-sort="title" type="button">Title</button>
+            </span>
+            <span class="btn-group sort-direction">
+              <button class="btn btn-default" data-sort-direction="asc" type="button">
+                <span class="glyphicon glyphicon-sort-by-attributes"></span>
+              </button>
+              <button class="btn btn-default" data-sort-direction="desc" type="button">
+                <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
+              </button>
+            </span>
+            <button type="button" class="btn btn-default" id="clear-search">
+              <span class="glyphicon glyphicon-remove"></span> Clear
+            </button>
+          </form>
         </div>
 
         <ul id="stories">
         </ul>
         <div class="clear"></div>
       </div>
 
       <div id="view-show">
-  <!--      <div id="return-to-index">
-          <a href="#index!1">Index</a>
-        </div>-->
-
         <div id="story"></div>
       </div>
     </div>
 
     <div id="page-back" class="paginator">◀</div>