Question

我正在使用Twitter bootstrap的bootstrap.min.css来设计我的phonegap应用程序。但我没有看到受引导程序影响的DOM元素所需的UI。例如，在Base CSS中，显示btn btn-primary分类按钮的颜色为蓝色，并且在其上有一些渐变。看起来不错。但是，如果我在模拟器上运行它，这件事看起来很难看。为什么会这样？不是bootstrap适用于phonegap吗？

添加代码和屏幕截图 Unpleasant UI rendering

<!DOCTYPE HTML>
<html>

  <head>
    <title>Call the cab</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link href="css/bootstrap-responsive.css" rel="stylesheet">
  <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="css/custom.css" type="text/css">
  <script src="js/bootstrap.min.js" type="text/javascript"></script>
  <script type="text/javascript" src="js/heartcode.js"></script>
  <script type="text/javascript" charset="utf-8" src="js/cordova-2.0.0.js"></script>
  </head>
  <body onload="onLoad();initialize()">
    <div id="wrapper" class="container row-fluid ">
    <div id="headerdiv" class="span12">
                <header style="vertical-align:middle;">
                <h1>App Name</h1>
                 </header>
    </div><!--End of header-->


    <div id="inputs" class="row-fluid"> 
            <form action="file:///android_asset/www/pickup.html"  onsubmit="return saveInputs()" class="form-inline form-actions">  
            <input type="text" id="pickup"  onblur="unlockDestiny();codeAddress(this.value)" class="input-block-level"/>
            <input type="text" id="destiny"  onblur="codeAddress(this.value)" class="input-block-level"/>
            <label class="checkbox">
<input type="checkbox" value="">
Remember this
</label>
            <button type="submit" class="btn btn-primary">Save changes</button>
            </form>
    </div><!--End of inputs-->

    </div><!--End of wrapper-->
     </body>

</html>

Answer 1

您是否仔细检查过CSS文件的路径是否正确，以及css / custom.css中没有任何内容覆盖Bootstrap按钮样式？

Bootstrap按钮在phonegap中没有生效

1 个答案: