bootstrap添加表单

bootstrap添加表单

1. bootstrap模板链接

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
 
<!-- 可选的Bootstrap主题文件（一般不使用） -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap-theme.min.css"></script>
 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>

2.BootStrap菜鸟教程链接

菜鸟教程官网

3.添加页面模板

<form>
       <div class="form-group">
         <label>LastName</label>
         <input type="text" name="LastName" class="form-control" placeholder="huangzuo">
       </div>
       <div class="form-group">
         <label>Email</label>
         <input type="text" name="email" class="form-control" placeholder="2312590324@qq.com">
       </div>
       <div class="form-group">
         <label>Gender</label>
         <div class="form-check form-check-inline">
           <input class="form-check-input" type="radio" name="gender" value="1">
           <label class="form-check-label">男</label>
         </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="gender" value="0">
          <label class="form-check-label">女</label>
        </div>
       </div>
       <div class="form-group">
         <label>department</label>
         <select class="form-control" name="department">
           <option>1</option>
           <option>2</option>
           <option>3</option>
           <option>4</option>
           <option>5</option>
         </select>
       </div>
       <div class="form-group">
         <label>Birth</label>
         <input type="text" name="birth" class="form-control" placeholder="huangzuo">
       </div>
       <button type="submit" class="btn btn-primary">添加</button>
     </form>