java - Primefaces & Twitter Bootstrap - Bootstrap ウィザードのスタイリング

Question

私は問題に苦しんでいます。私のjsfiddleの出力は、私が望むとおりです:

ただし、私のページ、特に製品スタイルは異なって見えます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.prime.com.tr/ui">

<h:head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="" />

    <!-- Le styles -->
    <link href="http://fuelcdn.com/fuelux-imh/2.2/css/fuelux.css"
        rel="stylesheet" />
    <link
        href="http://fuelcdn.com/fuelux-imh/2.2/css/fuelux-responsive.css"
        rel="stylesheet" />
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="css/bootstrap-responsive.css" rel="stylesheet"
        type="text/css" />
    <style type="text/css">
body {
    padding-bottom: 200px;
}

.pillbox {
    border: 1px solid #bbb;
    margin-bottom: 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    width: 251px;
}

.container>div,.container>table {
    margin: 20px;
}

.tree {
    width: 430px;
    height: 350px;
}

.static-loader {
    margin-left: 30px;
}

.step-content {
    border: 1px solid #D4D4D4;
    border-top: 0;
    border-radius: 0 0 4px 4px;
    padding: 10px;
    margin-bottom: 10px;
}
</style>

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

    <!-- Le fav and touch icons
<link rel="shortcut icon" href="../assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
-->



    <h:outputScript name="js/require.js" />
    <script>
//<![CDATA[
        requirejs.config({
            paths: {
                'jquery': 'js/jquery',
                'underscore': 'http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min',
                'bootstrap': 'js/bootstrap/js',
                'fuelux': 'src'
            }
        });

        require(['jquery', 'sample/data', 'sample/datasource', 'sample/datasourceTree', 'fuelux/all'], function ($, sampleData, StaticDataSource, DataSourceTree) {

            // WIZARD
            $('#MyWizard').on('change', function(e, data) {
                console.log('change');
                if(data.step===3 && data.direction==='next') {
                    // return e.preventDefault();
                }
            });
            $('#MyWizard').on('changed', function(e, data) {
                console.log('changed');
            });
            $('#MyWizard').on('finished', function(e, data) {
                console.log('finished');
            });
            $('#btnWizardPrev').on('click', function() {
                $('#MyWizard').wizard('previous');
            });
            $('#btnWizardNext').on('click', function() {
                $('#MyWizard').wizard('next','foo');
            });
            $('#btnWizardStep').on('click', function() {
                var item = $('#MyWizard').wizard('selectedItem');
                console.log(item.step);
            });
            $('#MyWizard').on('stepclick', function(e, data) {
                console.log('step' + data.step + ' clicked');
                if(data.step===1) {
                    // return e.preventDefault();
                }
            });

        });
        //]]>
    </script>

</h:head>
<h:body>

    <!-- Content Area -->
    <div class="well" style="margin-top: 50px;">
        <div class="fuelux">
            <div class="container">

                <!-- WIZARD -->
                <div>
                    <div id="MyWizard" class="wizard">
                        <ul class="steps">
                            <li data-target="#step1" class="active"><span
                                class="badge badge-info">1</span><span class="chevron"></span></li>
                            <li data-target="#step2"><span class="badge">2</span>Step 2<span
                                class="chevron"></span></li>
                            <li data-target="#step3"><span class="badge">3</span>Step 3<span
                                class="chevron"></span></li>
                            <li data-target="#step4"><span class="badge">4</span>Step 4<span
                                class="chevron"></span></li>
                            <li data-target="#step5"><span class="badge">5</span>Step 5<span
                                class="chevron"></span></li>
                            <li data-target="#step5"><span class="badge">5</span>Step 5<span
                                class="chevron"></span></li>
                            <li data-target="#step5"><span class="badge">5</span>Step 5<span
                                class="chevron"></span></li>


                        </ul>
                        <div class="actions">
                            <button class="btn btn-mini btn-prev">
                                <i class="icon-arrow-left"></i>Prev
                            </button>
                            <button class="btn btn-mini btn-next" data-last="Finish">
                                Next<i class="icon-arrow-right"></i>
                            </button>
                        </div>
                    </div>
                    <div class="step-content">
                        <div class="step-pane active" id="step1">
                            <legend>
                                <h3>Product</h3>
                            </legend>
                            <!-- Product Name-->
                            <div class="control-group">
                                <label class="control-label">Product Name</label>
                                <div class="controls">
                                    <h:inputText name="Product Name" class="input-xlarge"
                                        type="text" />
                                </div>
                            </div>
                            <!-- Categorie-->
                            <div class="control-group">
                                <label class="control-label">Categorie</label>
                                <div class="controls">
                                    <h:inputText name="Product Name" class="input-xlarge"
                                        placeholder="Insert Categorie" type="text" />
                                </div>
                            </div>
                            <!-- Textarea -->
                            <div class="control-group">
                                <label class="control-label">Description</label>
                                <div class="controls">
                                    <div class="textarea">
                                        <textarea rows="3"></textarea>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="step-pane" id="step2">This is step 2</div>
                        <div class="step-pane" id="step3">This is step 3</div>
                        <div class="step-pane" id="step4">This is step 4</div>
                        <div class="step-pane" id="step5">This is step 5</div>
                    </div>

                    <!-- <h:button type="button" class="btn btn-mini" id="btnWizardPrev"
                    value="prev" />
                <h:button type="button" class="btn btn-mini" id="btnWizardNext"
                    value="next" />
                <h:button type="button" class="btn btn-mini" id="btnWizardStep"
                    value="current step" /> -->
                </div>

            </div>
        </div>
    </div>


    <!-- Le javascript
================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <h:outputScript name="js/jquery-1.7.2.min.js" />
    <h:outputScript name="js/bootstrap.min.js" />
    <h:outputScript name="js/jquery.dataTables.min.js" />
    <h:outputScript name="js/bootstrap.js" />
    <script
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"
        type="text/javascript"></script>
    <script src="http://fuelcdn.com/fuelux-imh/2.2/loader.min.js"
        type="text/javascript"></script>


</h:body>
</html>

次のようになります。

ここに画像の説明を入力

したがって、製品領域には実際のブートストラップスタイルはありません。どうやってそれを修正しますか？

あなたの答えに本当に感謝します!!!

アップデート

私はprimefacesとjsfを使用しているためだと思います。しかし、現時点では本当の問題を見つけることができません...

score 0 · Accepted Answer

わたしにはできる！

ブートストラップフォルダーをダウンロードし、js フォルダーを %projectRoot% に配置する必要があります。css および img フォルダーについても同様です。h:outputScript name="js/jquery-1.7.2.min.js" および h:outputScript name="js/jquery.dataTables.min.js" を削除する必要がある後。

score 0 · Accepted Answer

スタイルシートを呼び出す順序である可能性があります。価値観は取って代わられています。このスタイルシートを最後に追加する

<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />

java - Primefaces & Twitter Bootstrap - Bootstrap ウィザードのスタイリング

2 に答える 2

Related

Reference