bootstrap

本地导入

    <link href="/static/css/bootstrap.css" rel="stylesheet">
    <script src="/static/jquery.js"></script>
    <script src="/static/js/bootstrap.js"></script>

 

登录表单和提示框

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">主机管理系统</h3>
  </div>

  <div class="panel-body">
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">Username</label>
        <div class="col-sm-10">
        <input type="text" class="form-control" id="inputEmail3" placeholder="Username">
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
        <button type="button"  id="but" class="btn btn-default popover-destroy" data-container="body" data-toggle="popover"
                data-trigger="focus" data-placement="right" data-content="">登录
        </button>
{#        提示框，输入错误时修改display#}
        <div style="display: none" id="test" class="alert alert-danger" role="alert">...</div>
        </div>
    </div>
  </div>
</div>

 

表格

<div class="table-responsive">
   <table class="table  table-hover">
   <thead>
        <tr>
            <th>id</th>
            <th>IP地址</th>
            <th>服务器端口</th>
            <th>服务器用户名</th>
            <th>服务器密码</th>
            <th>LOB业务线</th></tr>
   </thead>

            {% for foo in host_l %}
                <tr>
                {% for obj in foo %}
                    <td>{{ obj }}</td>
                {% endfor %}</tr>
            {% endfor %}



   </table>
    </div>

 

模态框

{#模态框按钮#}
{#data-whatever通过js传到模态框#}
<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#exampleModal1" data-whatever={{ foo.lob__title }} data-id={{ foo.id }}>
                    编辑
</button>


{#模态框#}
<div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <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" id="exampleModalLabel">编辑</h4>
      </div>
      <div class="modal-body">

          <div class="form-group">
{#              提示框#}
              <div style="display: none" id="test" class="alert alert-danger" role="alert">...</div>
                <label for="recipient-name" class="control-label">业务线:</label>
                <input type="text" name="lob" class="form-control" id="edit-lob">
                <input type="hidden" class="tmpid" value="" id="edit-id">
          </div>


      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">结束</button>
        <button type="button" class="btn btn-primary" id="edit-send">提交</button>
      </div>
    </div>
  </div>
</div>


{#js 调用赋值#}
$('#exampleModal1').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) 
  var recipient = button.data('whatever')
  var recipient1 = button.data('id')  
  var modal = $(this)
    
  modal.find('.modal-body input').val(recipient);
  modal.find('.tmpid').val(recipient1);
});


{#关闭模态框时，把提示框初始化#}
<script>
   $(function () { $('#exampleModal1').modal('hide')});
</script>
<script>
   $(function () { $('#exampleModal1').on('hide.bs.modal',function () {
      {#关闭时，也可以做其它的事情#}
      $('#test').css('display','none');})
   });
</script>