java - Primefaces & Twitter 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

它可能是您调用样式表的操作。价值观正在被取代。将此样式表设为您添加的最后一个样式表

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

score 0 · Accepted Answer

这个对我有用！

您必须下载 bootstrap 文件夹并将 js 文件夹放在 %projectRoot% 中，css 和 img 文件夹也是如此。在你必须删除 h:outputScript name="js/jquery-1.7.2.min.js" 和 h:outputScript name="js/jquery.dataTables.min.js" 之后。

java - Primefaces & Twitter Bootstrap - 引导向导的样式

2 回答 2

Related

Reference