1

phonegap アプリのスタイリングに Twitter ブートストラップの bootstrap.min.css を使用しています。しかし、ブートストラップの影響を受ける DOM 要素の目的の UI が表示されません。たとえば、Base CSSbtn btn-primaryでは、クラス化されたボタンが青色で、グラデーションがかかっていることが示されています。いい感じ。しかし、これをエミュレーターで実行すると、これは非常に醜い灰色に見えます。どうしてこんなことに？ブートストラップは phonegap に適していませんか?

コードとスクリーンショットの追加 不快な UI レンダリング

<!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>
4

1 に答える 1

1

CSS ファイルへのパスが正しいこと、および Bootstrap ボタンのスタイル設定を上書きするものが css/custom.css にないことを再確認しましたか?

于 2013-06-14T11:13:11.057 に答える