Bootstrap使用input-append和form-inline与JQuery冲突

时间:2013-05-03 10:38:15

标签: jquery twitter-bootstrap

我目前正在编写一个JQuery-Mobile应用程序。尝试使用引导程序对表单元素进行样式设置时,不会应用样式。一旦我删除了JQuery include,样式就可以了。我正在使用引导页面中的示例代码。以下两个代码段都不起作用

<div data-role="page" data-theme="c">
    <div data-role="header" data-id="foo1" data-position="fixed">
        <div data-role="navbar"> </div><!-- /navbar -->
    </div><!-- header -->

    <div data-role="content">

        <div class="input-append">
            <input class="span2" id="appendedInputButton" type="text">
            <button class="btn" type="button">Go!</button>
        </div>


        <form class="form-inline">
            <input type="text" class="input-small" placeholder="Email">
            <input type="password" class="input-small" placeholder="Password">
            <label class="checkbox">
                <input type="checkbox"> Remember me
            </label>
            <button type="submit" class="btn">Sign in</button>
        </form>
    </div>

我已经尝试过jquery-ui-bootstrap,正如其他几个线程所提出的那样。但是,这并没有解决问题。我也发现了一些关于jquery noConflict()的东西,但由于我只想使用bootstrap css,所以这不是必需的。

我的html文件的头部看起来像:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<link rel="stylesheet" type="text/css"  href="css/mobiscroll.custom-2.5.2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<link rel="stylesheet" type="text/css"  href="css/bootstrap.min.css.css" />

拜托,有人可以帮助我吗?

0 个答案:

没有答案