add html5 and media query shim for ie8
[bootswatch] / tests / components.html
index 2d1f2f8..65988c9 100644 (file)
@@ -4,13 +4,18 @@
     <title>Bootswatch: Default Bootstrap</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta charset="utf-8">
-    <link rel="stylesheet" href="../default/bootstrap.min.css" media="screen">
+    <link rel="stylesheet" href="../default/bootstrap.css" media="screen">
     <link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css">
     <link rel="stylesheet" href="../assets/css/bootswatch.min.css">
+    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!--[if lt IE 9]>
+      <script src="../bower_components/bootstrap/assets/js/html5shiv.js"></script>
+      <script src="../bower_components/bootstrap/assets/js/respond.min.js"></script>
+    <![endif]-->
   </head>
   <body>
 
-    <div class="navbar navbar-fixed-top">
+    <div class="navbar navbar-default navbar-fixed-top">
       <div class="container">
         <div class="navbar-header">
           <a href="../" class="navbar-brand">Bootswatch</a>
@@ -37,7 +42,6 @@
                 <li><a tabindex="-1" href="../simplex/">Simplex</a></li>
                 <li><a tabindex="-1" href="../slate/">Slate</a></li>
                 <li><a tabindex="-1" href="../spacelab/">Spacelab</a></li>
-                <li><a tabindex="-1" href="../superhero/">Superhero</a></li>
                 <li><a tabindex="-1" href="../united/">United</a></li>
               </ul>
             </li>
         <h3 id="navbar-static-top">Static top navbar</h3>
         <p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-*</code> classes, you do not need to change any padding on the <code>body</code>.</p>
         <div class="bs-example bs-navbar-top-example">
-          <div class="navbar navbar-static-top" style="margin: -1px -1px 0;">
+          <div class="navbar navbar-default navbar-static-top" style="margin: -1px -1px 0;">
             <div class="container" style="width: auto;">
               <div class="navbar-header">
                 <a class="navbar-brand" href="#">Title</a>
         <p>Add any of the below mentioned modifier classes to change the appearance of a label.</p>
         <div class="bs-example">
           <span class="label label-default">Default</span>
+          <span class="label label-primary">Primary</span>
           <span class="label label-success">Success</span>
           <span class="label label-warning">Warning</span>
           <span class="label label-danger">Danger</span>
         </div>
 
         <div class="bs-example">
-          <div class="alert">
+          <div class="alert alert-warning">
             <button type="button" class="close" data-dismiss="alert">×</button>
             <strong>Warning!</strong> Best check yo self, you're not looking too good.
           </div>
         <h3 id="panels-basic">Basic panel</h3>
         <p>By default, all the <code>.panel</code> does is apply some basic border and padding to contain some content.</p>
         <div class="bs-example">
-          <div class="panel">
+          <div class="panel panel-default">
             <div class="panel-body">
               Basic panel example
             </div>
         <h3 id="panels-heading">Panel with heading</h3>
         <p>Easily add a heading container to your panel with <code>.panel-heading</code>. You may also include any <code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code> with a <code>.panel-title</code> class to add a pre-styled heading.</p>
         <div class="bs-example">
-          <div class="panel">
+          <div class="panel panel-default">
             <div class="panel-heading">Panel heading</div>
             <div class="panel-body">
               Panel content
             </div>
           </div>
-          <div class="panel">
+          <div class="panel panel-default">
             <div class="panel-heading">
               <h3 class="panel-title">Panel title</h3>
             </div>
         <h3 id="panels-footer">Panel with footer</h3>
         <p>Wrap buttons or secondary text in <code>.panel-footer</code>.</p>
         <div class="bs-example">
-          <div class="panel">
+          <div class="panel panel-default">
             <div class="panel-body">
               Panel content
             </div>