BootStarp常见控件

BootStarp

面板

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">基本面板标题</h3>
  </div>
  <div class="panel panel-body">基本面板主体部分</div>
  <div class="panel panel-footer">基本面板脚注</div>
</div>

模态框

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal"
aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"
        aria-hidden="true">×</button>
        <h4 class="modal-title">模态框标题</h4>
      </div>
      <div class="modal-body">模态框主体部分</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">提交更改</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

表格

<table class="table table-striped">
  <thead>
    <tr>
      <td>编号</td>
      <td>院系</td>
      <td>姓名</td>
      <td>性别</td>
      <td>年龄</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>ST1407</td>
      <td>计算机</td>
      <td> ... </td>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</table>

表单

<form class="form-horizontal" action="" method="post">
  <div class="form-group">
    <label class="col-md-2 control-label" for="username">账号</label>
    <div class="col-md-8">
      <input type="text" class="form-control" name="username"
      placeholder="请输入账号 ... " />
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-2 control-label" for="password">密码</label>
    <div class="col-md-8">
      <input type="text" class="form-control" name="password"
      placeholder="请输入密码 ... " />
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-2 control-label" for="status">状态</label>
    <div class="col-md-8">
      <select class="form-control" name="status">
        <option value="0">启用</option>
        <option value="1">禁用</option>
      </select>
    </div>
  </div>
</form>