Bootstrap不工作,但包括js和css

时间:2013-02-26 17:44:11

标签: javascript jquery twitter-bootstrap

Bootstrap根本不起作用,模态不关闭,转换不起作用等。 Firebug说没有名为.modal的函数,所以我尝试使用不同版本的Jquery,bootstrap等。没有什么工作 这是我使用的代码(没有打磨过来:(所以不要介意它有点乱)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="index.css" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<script type='text/javascript' src="js/bootstrap.js"></script>
<script type='text/javascript' src="js/jquery.js"></script>
<title></title>
</head>
<body>
<!-- 

-->
<div class="modal hide " id='myModal'>
  <div class="modal-header">
    <h3>Select a friend</h3>
  </div>
  <div class="modal-body">
    <p></p>
  </div>
  <div class="modal-footer">
    <span id="friendSelector" onClick='selectFriend()'>Select a friend first</span>
  </div>
</div>
<center id="page">
  <h2 id="title">  </h2>
  <div id="tabs">
    <div class="tabTitle"><span class="tabTitleText">Mutual Friends</span></div>
    <div class="tabContent">
      <div class="tabContentHeader">
        <div class="clientInfo">
          <div class="container">
            <div class="containerLeft">
              <div class="image">
                // NOT INTERESTING AND SECRET! :p
  </div>
</center>
<!--
Js scripts
-->
<script>
var id = '';
$(function() {
  $('.modal-body').load('request.php', { 'type': 'getFriends' });
  $('#myModal').modal({
      keyboard: false
    });
});
$('#myModal').modal('hide');
function selectFriend(){
    alert(id);
    if(id != '') {
    alert('nice');
    jQuery.noConflict();
    (function ($) {
        $('#myModal').modal('hide');
    }
    )(jQuery);
    }
}
function markFriend(friendId) {
    id = friendId;
    $('#friendSelector').html('Continue');
}

</script>
</body>
</html>

谢谢, 萨姆

1 个答案:

答案 0 :(得分:4)

twitter bootstrap的javascript插件依赖于JQuery。

交换脚本行,以便在bootstrap.js

之前加载JQuery