Zendframework 2 Skeleton 应用程序 Albumform 样式丢失答案

【问题标题】：Zendframework 2 Skeleton application Albumform styling is missingZendframework 2 Skeleton 应用程序 Albumform 样式丢失
【发布时间】：2014-10-02 11:10:24
【问题描述】：

我目前正在 ZF2 中重建骨架应用程序在“Zend Framework 2 Documentation, Release 2.3.3”中有一个用于添加/编辑相册的表单。

在文档中，表单如下所示：

我一步一步地按照文档进行操作，但我的看起来像这样：

相册表单.php：

<?php
namespace Album\Form;

use Zend\Form\Form;

class AlbumForm extends Form
{
    public function __construct($name = null)
    {
        parent::__construct('album');

        $this->add(array(
            'name' => 'id',
            'type' => 'Hidden',
        ));
        $this->add(array(
            'name' => 'title',
            'options' => array(
                'label' => 'Title',
            ),
            'attributes' => array(
                'type' => 'text',
            )
        ));
        $this->add(array(
            'name' => 'artist',
            'options' => array(
                'label' => 'Artist',
            ),
            'attributes' => array(
                'type' => 'text',
            )
        ));
        $this->add(array(
            'name' => 'submit',
            'attributes' => array(
                'type' => 'submit',
                'value' => 'Go',
                'id' => 'submitbutton',
            ),
        ));
    }
}

添加.phtml

<?php

$title = 'Add new album';
$this->headTitle($title);
?>

<h1><?= $this->escapeHtml($title); ?></h1>

<?php

$form->setAttribute('action', $this->url('album', array('action' => 'add')));
$form->prepare();

echo $this->form()->openTag($form);
echo $this->formHidden($form->get('id'));
echo $this->formRow($form->get('title'));
echo $this->formRow($form->get('artist'));
echo $this->formSubmit($form->get('submit'));
echo $this->form()->closeTag();

HTML 输出：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Add new album - ZF2 Tutorial</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- Le styles -->
        <link href="/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css">
<link href="/css/bootstrap-theme.min.css" media="screen" rel="stylesheet" type="text/css">
<link href="/css/style.css" media="screen" rel="stylesheet" type="text/css">
<link href="/img/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
        <!-- Scripts -->
        <!--[if lt IE 9]><script type="text/javascript" src="/js/html5shiv.js"></script><![endif]-->
<!--[if lt IE 9]><script type="text/javascript" src="/js/respond.min.js"></script><![endif]-->
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
    </head>
    <body>
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/"><img src="/img/zf2-logo.png" alt="Zend Framework 2"/>&nbsp;Tutorial</a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="/">Home</a></li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div>
        </nav>
        <div class="container">

<h1>Add new album</h1>

<form action="&#x2F;album&#x2F;add" method="POST" name="album" id="album"><input type="hidden" name="id" value=""><label><span>Title</span><input name="title" type="text" value=""></label><label><span>Artist</span><input name="artist" type="text" value=""></label><input name="submit" type="submit" id="submitbutton" value="Add"></form>            <hr>
            <footer>
                <!--<p>&copy; 2005 - 2014 by Zend Technologies Ltd. All rights reserved.</p>-->
            </footer>
        </div> <!-- /container -->
            </body>
</html>

我希望有人知道我的错误是什么......

【问题讨论】：

您是否查看了 HTML 页面的源代码，它看起来如何，尝试在标题部分中找到 css 链接并直接访问它们，如果您有 FireBug 扩展打开它并查看 Net 选项卡，请参阅如果有任何错误
嗨！感谢您的帮助，但萤火虫在 networktab 中没有显示错误（.css 已正确加载）。我将在问题中添加 html 输出

标签： php zend-framework2

【解决方案1】：

如果您使用bootstrap3，则需要为输入字段添加适当的类所以你需要改变你的 albumform.php 像：

    <?php
namespace Album\Form;

use Zend\Form\Form;

class AlbumForm extends Form
{
  public function __construct($name = null)
  {
    parent::__construct('album');

    $this->add(array(
        'name' => 'id',
        'type' => 'Hidden',
    ));
    $this->add(array(
        'name' => 'title',
        'options' => array(
            'label' => 'Title',
        ),
        'attributes' => array(
            'type' => 'text',
            'class' => 'form-control',//changed line
        )
    ));
    $this->add(array(
        'name' => 'artist',
        'options' => array(
            'label' => 'Artist',
        ),
        'attributes' => array(
            'type' => 'text',
             'class' => 'form-control',//add form-control class
        )
    ));
    $this->add(array(
        'name' => 'submit',
        'attributes' => array(
            'type' => 'submit',
            'value' => 'Go',
            'id' => 'submitbutton',
             'class' => 'btn btn-default'//add btn class
        ),
    ));
}
}

添加.phtml：

    <?php

    $title = 'Add new album';
    $this->headTitle($title);
    ?>

   <h1><?= $this->escapeHtml($title); ?></h1>

   <?php

    $form->setAttribute('action', $this->url('album', array('action' => 'add')));
    $form->prepare();

    echo $this->form()->openTag($form);
    echo $this->formHidden($form->get('id'));
    echo $this->formRow($form->get('title'));
    echo '<br>';//separate line
    echo $this->formRow($form->get('artist'));
    echo '<br>';//separate line
    echo $this->formSubmit($form->get('submit'));
    echo $this->form()->closeTag();

谢谢你..

【讨论】：

【解决方案2】：

您必须将表单元素包装到“表单控件”类中。但是有一个非常不错的模块，叫做zf2 twb bundle，它有一些有用的视图助手/表单元素等。

【讨论】：

【解决方案3】：

在 add.phtml 中最好使用 bootstarp 表单组而不是
：

<?php

    $title = 'Add new album';
    $this->headTitle($title);
    ?>

   <h1><?= $this->escapeHtml($title); ?></h1>

   <?php

    $form->setAttribute('action', $this->url('album', array('action' => 'add')));
    $form->prepare();

    echo $this->form()->openTag($form);
    echo $this->formHidden($form->get('id'));
    echo $this->formRow($form->get('title'));
    echo '<div class="form-group">';
    echo $this->formRow($form->get('artist'));
    echo '</div><div class="form-group">';
    echo $this->formSubmit($form->get('submit'));
    echo $this->form()->closeTag();

【讨论】：