将laravel的Form类与Bootstraps form-group类合并

时间:2016-05-29 03:41:34

标签: php forms twitter-bootstrap laravel

我在laravel中有一个表单来使用bootstrap编辑帖子:

@section('content')
    <form method="PUT" action="{{ URL::route('post.update', array($post->id)) }}">
        <div class="form-group">
            <label for="usr">Title:</label>
            <input type="text" class="form-control" id="usr" name="title" value="{{$post->title}}">

            <br>

            <label for="comment">Details:</label>
            <textarea class="form-control" rows="5" id="comment" name="detail"
                      placeholder="Write a new post.">"{{$post->message}}"</textarea>
            <input type="hidden" name="id" value="add">
        </div>
        <a href="/" class="btn btn-danger" role="button">Cancel</a>
        <div class="pull-right">
            <input type="submit" class="btn btn-success" value="Update">
        </div>
    </form>


@stop

看起来像这样:enter image description here

现在,如果我使用Laravel的Form类,它会更小更整洁:

{{Form::model($post, array('method' => 'PUT', 'route' => array('post.update', $post->id)))}}
{{ Form::label('title', 'Post Title: ') }}
{{ Form::text('title') }}
{{ $errors->first('title') }}
<p></p>
{{ Form::label('message', 'Post Message: ') }}
{{ Form::text('message') }}

{{ $errors->first('message') }}
<p></p>
{{ Form::submit('Update') }}
{{ Form::close() }}

但是,这会导致表单看起来很丑陋:

enter image description here

因此,简而言之,无论如何都要使用Laravel的表单类并添加boostrap样式/按钮吗?我希望使用bootstrap的视觉效果和表单类的易用性。

1 个答案:

答案 0 :(得分:0)

您需要将类添加到每个输入(此处为示例

   {{Form::model($post, array('method' => 'PUT', 'route' => array('post.update', $post->id)))}}
   {!! Form::label('title','Post Title: ', array('class' => 'pull-left'))  !!}
   {!! Form::text('title', null, ['class' => 'form-control'])!!}
   {!! Form::label('message','Post Message: ', array('class' => 'pull-left'))  !!}
   {!! Form::textarea('message', null, ['class' => 'form-control'])!!}
    <br>
    <a href="/" class="btn btn-danger pull-left" role="button">Cancel</a>
   {!! Form::submit('Update',  ['class' => 'btn btn-success pull-right']) !!}
   {!! Form::close() !!}

enter image description here