javascript - Jquery mobile script conflicting on bootstrap 3 -
is there way me use jquery mobile script without conflicting on bootstrap 3? issue links not working when used jquery mobile script whenever remove script links working fine. use jquery mobile pop feature. i'm newbie on jquery , bootstrap web development, apologize if question seems newbie.. in case highly appreciated.
<!doctype html> <html> <head lang="en"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> </head> <style> body { padding: 20px 50px 150px; font-size: 20px; text-align: center; } .jumbotron { margin-bottom: 40px !important; height: 350px !important; background-repeat: no-repeat; color: white; text-shadow: black 0.3em 0.3em 0.3em; } #picbg { background: url('board.jpeg') no-repeat center center; } #container { margin: 0 auto; width: 850px; background: #fff; } </style> <style> .centered-pills { text-align:center; } .centered-pills ul.nav-pills { display:inline-block; } .centered-pills li { display:inline; } .centered-pills { float:left; } * html .centered-pills ul.nav-pills { display:inline; } *+html .centered-pills ul.nav-pills { display:inline; } </style> <body> <div class="container"> <div class="jumbotron" id="picbg"> <h1><font face = "brush script mt" color="#fff">my page</font><h1></div> </div> <div class="row"> <div class="span12 centered-pills"> <ul class="nav nav-pills" role="tablist"> <li class="active"><a href="file:///c:/users/page1.html"><span class="glyphicon glyphicon-home"></span><h2><b>home</b></h2></a></li> <li><a href="file:///c:/users/page4.html"><span class="glyphicon glyphicon-envelope"></span><h2><b>contact me</b></h2></a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> <span class="glyphicon glyphicon-user"></span><h2><b>profile</b></h2> </a> <ul class="dropdown-menu" role="menu"> <li><a href="file:///c:/users/page5.html"><h2><b>web</b></h2></a></li> <li><a href="file:///c:/users/page6.html"><h2><b>author</b></h2></a></li> <li><a href="#mypopup" disabled="false" data-rel="popup" class="ui-btn" data-transition="fade" data-position-to="window" data-inline="true">about</a></b></h2></a></li> </ul> </li> </ul> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <div data-role="popup" id="mypopup" class="ui-content" data-overlay-theme="a" data-theme="d" data-corners="false"> <img class="popphoto" src="image1.png" style="width:600px;height:756px;" alt=""> </div> <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </body> </html>
Comments
Post a Comment