Bootstrap conflicts with JQuery using input-append and form-inline -
i'm writing jquery-mobile app. when trying style form elements bootstrap styles aren't being applied. once remove jquery include, style works fine. i'm using example-code bootstrap page. neither of following snippets works
<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> i tried jquery-ui-bootstrap, proposed in several other threads. however, doesn't solve problem. found jquery noconflict(), since want use bootstrap css, should not necessary.
the head of html-file looks like:
<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" /> please, me?
Comments
Post a Comment