jqgridにスタイルを適用する

Question

私は無料のjqgrid（最新バージョン）を使用しています

私はデモから見たグリッドは青でした。

私はこのアプリケーションを使っていますが、何が欠けているのか分かりませんが、グリッドはグレーになっています。私はguiStyle： "bootstrap"も適用しましたが、外観やフォントはほとんど変更されず、色は変更されません。また、検索ダイアログボックスでは、コントロールがすべて一緒になっているように、コントロールが互いに整列しています。すべての画像リンクを参照してください。

1. https://imgur.com/a/kzCJ3

   は、どのように私は青デフォルトに色を変更することができ、私は検索ダイアログコントロールを修正することができますどのよう
2. 私はこれまで、他のカスタムスタイルの書式設定を適用するにはどうすればよい
3. 。

おかげ

--------------

<link href="/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" /> (bootstrap 4.0.0) 
<link href="~/lib/free-jqgrid/css/ui.jqgrid.css" rel="stylesheet" /> (4.15.2) 
<link href="~/lib/jquery-ui/themes/base/jquery-ui.min.css" rel="stylesheet" /> 
<link href="~/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet" /> 
<link href="~/lib/select2/dist/css/select2.min.css" rel="stylesheet" /> 

@section scripts{ 
<script src="~/lib/jquery/dist/jquery.min.js"></script> 
<script src="~/lib/free-jqgrid/dist/modules/grid.base.js"></script> 
<script src="~/lib/free-jqgrid/dist/modules/grid.common.js"></script> 
<script src="~/lib/free-jqgrid/dist/modules/grid.formedit.js"></script> 
<script src="~/lib/free-jqgrid/dist/modules/grid.filter.js"></script> 
<script src="~/lib/jquery-ui/jquery-ui.min.js"></script> 
<script src="~/lib/select2/dist/js/select2.min.js"></script> 
<script src="~/lib/free-jqgrid/js/i18n/grid.locale-en.js"></script> 
<script src="~/lib/free-jqgrid/js/jquery.jqgrid.min.js"></script> 

------------------更新しました

私は、CSS/JS上記以外の任意のスタイルを使用して/適用していないですし、下に追加されているよう：

guiStyle: "bootstrap", 
    iconSet: "fontAwesome", 

Answer 1

私はあなたが（デモを）やるより正確に指定するようにお勧めして何がしたいです持ってる。

ご質問にお答えする前に、guiStyle: "bootstrap"を使用している場合は、jquery-ui.min.cssをjqGridに使用する必要はありません。

ブートストラップ4とブートストラップ3のCSS設定が異なります。ブートストラップ4でフリーのjqGridを使用する場合、guiStyle: "bootstrap"の代わりにguiStyle: "bootstrap4"を使用する必要があります。例としてhttps://jsfiddle.net/ovq05x0c/1/を参照してください。

あなたがjquery.jqgrid.min.jsを含めるなら、あなたはgrid.base.js、grid.common.js、grid.formedit.js、grid.filter.jsとあなたはそれがjquery.jqgrid.min.jsまたはgrid.base.jsの一部だからi18n/grid.locale-en.jsを含める必要がどのような方法でを含める必要はありません。ファイルquery-ui.min.jsは、jQuery UIを自分で使用しない場合は必要ありません。

ベストプラクティスは、ローカルサーバーからロードする代わりに、すべてのCSSおよびJavaScriptファイルをCDNからロードすることをお勧めします。ローカルサーバーは、ローカルアプリケーションにのみ適していますが、インターネットから利用できる側には適していません。 CDNからの無料jqGridの使用方法の詳細については、the articleを参照してください。

無料のjqGridを使用する場合の出発点として、the articleをお読みください。グリッドをカスタマイズするいくつかの例を示します。例えば、CSSルール

.ui-jqgrid.ui-jqgrid-bootstrap { 
    border: 1px solid #003380; 
} 

は、グリッドの外側のdiv、CSSルール

.ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-caption { 
    background-color: #e6f0ff; 
} 

キャプション/タイトルの背景色を変更するの境界の色を変化させます。もう1つのCSSルール

.ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-hdiv { 
    background-color: #cce0ff; 
} 

は、列ヘッダーの背景色を変更します。同じ方法で、jqGridの他の要素をカスタマイズすることができます。デモhttps://jsfiddle.net/OlegKi/90qmjean/7/は、無料のjqGridとselect2でいくつかの色やフォントサイズを変更した例です。