php - 为 Bootstrap 按钮组设置 Codeigniter 的 form_submit 样式

Question

我正在使用 Codeigniter 开发博客应用程序。它的风格依赖于 Bootstrap 3。我创建了一个表来显示用户的文章。我还创建了一行以对该文章采取行动。我使用 codeigniter 表单助手的 form_submit() 函数创建了一个表单提交按钮。但正如我所说，它是一个按钮组，所以我还有两个按钮(一个在它之前，一个在它之后)。我想将此表单提交样式设置为按钮组的按钮，但现在它看起来像是一个全新的按钮。这是我的代码。这是我的全貌。

<?php
include_once('admin_header.php');
?>
<div class="container">
<div class="row">
    <?= anchor('admin/store_article', 'Add Post', ["class"=>"btn btn-primary btn-large pull-right"]); ?>
</div>
<?php
if ($feedback = $this->session->flashdata('feedback')) :
$feedback_class = $this->session->flashdata('feedback_class'); ?>
<br>
<br>
<br>
<div class="alert alert-dismissible <?= $feedback_class ?>">
  <?= $feedback ?>
</div>
<?php endif; ?>
<div class="table-responsive">
<table class="table table-striped table-hover ">
  <thead>
    <tr>
      <th>Sr NO.</th>
      <th>Article</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
  <?php
  if(count($articles)):
    $count = $this->uri->segment(3, 0);
      foreach ($articles as $article):
      ?>
    <tr>
      <td><?= ++$count ?></td>
      <td>
      <?= $article->title; ?>
      </td>
      <td>
      <div class="btn-group">
      <?= anchor("plogi/article/{$article->id}", 'View', ['class'=>'btn btn-success']) ?>
      <?= anchor("admin/edit_article/{$article->id}", "Edit", ["class"=>"btn btn-primary"]); ?>
      <?= 
       form_open('admin/delete_article', ['class'=>'form-horizontal danger']);
          echo form_hidden('article_id', $article->id);
          echo form_Submit(['type'=>'submit', 'value'=>'Delete', 'class'=>'btn btn-danger']);
          echo form_close();
       ?> <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    More <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Re Share</a></li>
      <li><a href="#">Purge From Cache</a></li>
    </ul>
  </div>
</div></td>
    </tr>
    <?php
    endforeach;
    else: 
    echo "<tr><td colspan='3'>No Records Found</td></tr>";  
  endif;

    ?>
  </tbody>
</table> 
<?= $this->pagination->create_links(); ?>

</div>
</div>
<?php
include_once('admin_footer.php');
?>

这是我的模型。

public function delete_article($article_id)
    {
        return $this->db->delete('articles', ['id'=> $article_id]);
    }

这是我的 Controller

public function delete_article()
    {
        $article_id = $this->input->post('article_id');
        $this->load->model('articlesmodel', 'articles');
        if ($this->articles->delete_article($article_id)) {
                $this->session->set_flashdata('feedback', 'Post Deleted Successfully');
                $this->session->set_flashdata('feedback_class', 'alert-success');
            } else {
                $this->session->set_flashdata('feedback', 'Failed To Delete Post, Please Try Again');
                $this->session->set_flashdata('feedback_class', 'alert-danger');
            }
            return redirect('admin/dashboard');
    }

现在看起来像

Answer 1

我假设您希望按钮组包含 编辑、 删除 和 更多 按钮，但 查看按钮。

编辑:调整 HTML 以对所有按钮进行分组。

代码

<?php
include_once('admin_header.php');
?>
    <div class="container">
        <div class="row">
            <?= anchor('admin/store_article', 'Add Post', ["class"=>"btn btn-primary btn-large pull-right"]); ?>
        </div>
        <?php
        if ($feedback = $this->session->flashdata('feedback')) :
            $feedback_class = $this->session->flashdata('feedback_class'); ?>
            <br>
            <br>
            <br>
            <div class="alert alert-dismissible <?= $feedback_class ?>">
                <?= $feedback ?>
            </div>
        <?php endif; ?>
        <div class="table-responsive">
            <table class="table table-striped table-hover ">
                <thead>
                <tr>
                    <th>Sr NO.</th>
                    <th>Article</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                <?php
                if(count($articles)):
                    $count = $this->uri->segment(3, 0);
                    foreach ($articles as $article):
                        ?>
                        <tr>
                            <td><?= ++$count ?></td>
                            <td>
                                <?= $article->title; ?>
                            </td>
                            <td>
                                <form id="<?= $article->id ?>" action="<?= site_url("admin/delete_article") ?>">
                                    <input type="hidden" name="article_id" value="<?= $article->id ?>">
                                </form>
                                <div class="btn-group">
                                    <a href="#" class="btn btn-info">View</a>
                                    <a class="btn btn-primary" href="<?= site_url("admin/edit_article/{$article->id}") ?>">Edit</a>
                                    <button type="submit" form="<?= $article->id ?>" value="" class="btn btn-danger">Delete</button>
                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                        More <span class="caret"></span></button>
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a href="#">Re Share</a></li>
                                        <li><a href="#">Purge From Cache</a></li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        <?php
                    endforeach;
                else:
                    echo "<tr><td colspan='3'>No Records Found</td></tr>";
                endif;

                ?>
                </tbody>
            </table>
            <?= $this->pagination->create_links(); ?>

        </div>
    </div>
<?php
include_once('admin_footer.php');
?>

注意事项

• 我个人尽量避免使用 CodeIgniter 的 HTML 帮助程序(尤其是表单帮助程序)。它们不够健壮，而且我的 IDE 在打开和关闭标签不匹配时会出现问题(或者当仅属于表单的元素在表单助手中时 - 它假定这是一个错误)。
• 表单位于按钮组之外，以免破坏 bootstrap 的 CSS。但是“删除”按钮引用了表单的 ID，以便在单击时能够提交表单。

祝你好运!