What are the steps to make a ie8-friendly bootstrap theme?

Question

I made it by the book (I think):

• download and enable respondjs module;
• download respond.js library and install it like this: libraries/respondjs/respond.min.js & libraries/respondjs/respond.src.js;
• Download and enable Bootstrap Library module;
• Download bootstrap and installed it as a library: libraries/bootstrap/js/...
• Aggregate the CSS files;
• Emptied the caches a few times and used the "InPrivate" navigation in my IE8 browser;

My code is like that:

<link type="text/css" rel="stylesheet" href="http://url.com/sites/default/files/css/css_ogjvJnfni1_P_WxvXAHlUOgCs860b3ip9DNMapcIGeM.css" media="all" />
<link type="text/css" rel="stylesheet" href="http://url.com/sites/default/files/css/css_E5INd53MC9D9hGN7fTbvA2YKmpTCORTNG-LyRZO0jWA.css" media="all" />
<link type="text/css" rel="stylesheet" href="http://url.com/sites/default/files/css/css_pQJBTHotR_cijx-fDqH3tXIWdiIZQhUIjxOWwL8rTxU.css" media="all" />
<link type="text/css" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.0.2/simplex/bootstrap.min.css" media="all" />
<link type="text/css" rel="stylesheet" href="http://url.com/sites/default/files/css/css_nFez2jKpXwmW9wMfuF-TAsfoop0107dn7vq0qbY1vio.css" media="all" />
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,600|Ubuntu:300,500&amp;subset=latin" media="all" />
  <!-- HTML5 element support for IE6-8 -->
  <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <script src="http://url.com/sites/all/libraries/respondjs/respond.min.js?n5tq5n"></script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>window.jQuery || document.write("<script src='/sites/all/modules/jquery_update/replace/jquery/1.7/jquery.min.js'>\x3C/script>")</script>
<script src="http://url.com/misc/jquery.once.js?v=1.2"></script>
<script src="http://url.com/misc/drupal.js?n5trqm"></script>
<script src="http://url.com/sites/all/modules/jquery_update/replace/ui/external/jquery.cookie.js?v=67fb34f6a866c40d0570"></script>
<script src="http://url.com/sites/all/modules/jquery_update/replace/misc/jquery.form.min.js?v=2.69"></script>
<script src="http://url.com/misc/form.js?v=7.27"></script>
<script src="http://url.com/misc/ajax.js?v=7.27"></script>
<script src="http://url.com/sites/all/modules/jquery_update/js/jquery_update.js?v=0.0.1"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script src="http://url.com/sites/all/libraries/bootstrap/js/bootstrap.js?n5trqm"></script>
<script src="http://url.com/sites/all/libraries/colorbox/jquery.colorbox.js?n5trqm"></script>
<script src="http://url.com/sites/all/modules/colorbox/js/colorbox.js?n5trqm"></script>
<script src="http://url.com/sites/all/modules/colorbox/js/colorbox_load.js?n5trqm"></script>
<script src="http://url.com/sites/all/modules/views/js/base.js?n5trqm"></script>
<script src="http://url.com/sites/all/themes/bootstrap/js/misc/_progress.js?v=7.27"></script>
<script src="http://url.com/sites/all/modules/views/js/ajax_view.js?n5trqm"></script>
<script src="http://url.com/sites/all/modules/captcha/captcha.js?n5trqm"></script>
<script src="http://url.com/sites/all/modules/webform/js/webform.js?n5trqm"></script>
<script src="http://url.com/sites/all/modules/colorbox_node/colorbox_node.js?n5trqm"></script>
<script src="http://url.com/sites/all/themes/bootstrap/portfolio/js/scripts.js?n5trqm"></script>
<script src="http://url.com/sites/all/themes/bootstrap/js/misc/ajax.js?n5trqm"></script>
<script src="http://url.com/sites/all/themes/bootstrap/js/modules/views/js/ajax_view.js?n5trqm"></script>

But still, IE8 outputs something unappropriate that looks like the mobile version, give or take a few surprises, like the menu which doesn't work at all, instead of working like mobile version without the bootstrap library locally installed. What am I missing?

Answer 1

OK so I finally DID IT.

I have overriden the html.tpl.php file, replacing:

<!-- HTML5 element support for IE6-8 -->
  <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

By

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

And since, IE8 is actually responding to the media queries.