Bootstrap使用分享

form相关

form-horizontal //form用的class
form-group //form里面的div都用
control-label //form里面label用
form-control //form里面 input select之类用

 <form class="form-horizontal">
                   <div class="form-group">
                       <label class="control-label col-sm-2 text-right">
                           id:
                       </label>
                       <div class="col-sm-4">
                           <label class="control-label">12</label>
                       </div>
                   </div>
</form>

输入框前方样式

input-group-btn

image.png

margin-x

m-b //保证底部距离
m-l //保证左边距离

栅格

row
col-sm-5 // 长度为父元素5/12
col-sm-offset-2 //向右偏移2/12空间

通用一点的
按钮

btn 
btn-primary

分割线

<div class="hr-line-dashed m-t m-b"></div>

内容页title

ibox-title

内容

ibox-content

路径

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

image.png

弹框

//按钮
<button type="button" class="btn btn-success m-l-md" data-toggle="modal" data-target="#imgList"><span class="glyphicon glyphicon-list m-r-xs" aria-hidden="true"></span>图片列表</button>

//modal框
<div class="modal fade" id="imgList" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">图片列表</h4>
            </div>
            <div class="modal-body">
                <iframe width="100%" height="500px" frameborder="0" src="{{route('wechat.media.list').'?type=image&aid='.$rule['app_id']}}"></iframe>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary pull-left" onclick="prePage(1)"><span class="glyphicon glyphicon-chevron-left m-r-xs"></span>上一页</button>
                <button type="button" class="btn btn-primary pull-left" onclick="nextPage(1)">下一页<span class="glyphicon glyphicon-chevron-right m-l-xs"></span></button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
            </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

demo

 <form class="ibox-content" action="{{ route('wechat.rules.replies.save') }}" method="post" accept-charset="UTF-8" enctype="multipart/form-data">

    <div class="form-horizontal m-t-md">
        <div class="form-group row">
            <label class="col-sm-2 text-right">id：</label>
            <div class="col-sm-10">
                <input value="{{$rule['id']}}" class="hidden" name="id">
            </div>
        </div>
        <div class="hr-line-dashed m-t m-b"></div>
        <div class="form-group row">
            <label class="control-label text-right col-sm-2">
                关键字:
            </label>
            <div class="col-sm-10">
                <div class="m-b">
                    <button class="btn btn-default">123</button>
                </div>
                <div class="row">
                    <div class="col-sm-5">
                        <div class="input-group m-b">
                            <div class="input-group-btn btn-w-m">
                                <select class="form-control" name="key_mode[]">
                                    <option value="equal" selected="">等于</option>
                                    <option value="contain">包含</option>
                                </select>
                            </div>
                            <input class="form-control" name="key_content[]" value="BJ测试">
                            <div class="input-group-btn">
                                <a class="btn btn-danger" onclick="removeKey(this,'119')">删除</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-5">
                        <div class="input-group m-b">
                            <div class="input-group-btn btn-w-m">
                                <select class="form-control" name="key_mode[]">
                                    <option value="equal" selected="">等于</option>
                                    <option value="contain">包含</option>
                                </select>
                            </div>
                            <input class="form-control" name="key_content[]" value="BJ测试">
                            <div class="input-group-btn">
                                <a class="btn btn-danger" onclick="removeKey(this,'119')">删除</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

https://v3.bootcss.com/
https://www.runoob.com/bootstrap4/bootstrap4-buttons.html