BootStrap 表单

来源：互联网发布：阿里云服务器别名解析编辑：程序博客网时间：2024/04/28 23:50

表单布局

Bootstrap 提供了下列类型的表单布局：

垂直表单（默认）
内联表单
水平表单

小妞妞做的表单实例：

<!DOCTYPE html><html><head>   <title>Bootstrap 教学意见调查表</title>   <meta charset="utf-8">   <link rel="stylesheet" href="css/bootstrap.min.css">   <style>  body {  padding-top: 150px;  padding-bottom: 40px;  background-color: #D0E9C6;  font-family: '楷体';  font-size: 22px;  }  .col-sm-2 control-label.form-control{  position: relative;  height: 60px;  -moz-box-sizing: border-box;  box-sizing: border-box;  }  .form-horizontal{  max-width:800px;    padding: 15px;    margin: 0 auto;   }   </style></head><body><div class="container">  <form class="form-horizontal" role="form" action="#" method="post">   <div class="form-group">      <label for="name" class="col-sm-2 control-label">名字</label>      <div class="col-sm-10">         <input type="text" class="form-control" id="firstname" placeholder="请输入名字">      </div>   </div>   <div class="form-group">      <label for="class" class="col-sm-2 control-label">班级</label>      <div class="col-sm-10">         <input type="text" class="form-control" id="lastname" placeholder="请输入班级">      </div>   </div>   <div class="form-group">      <label for="Student ID" class="col-sm-2 control-label">学号</label>      <div class="col-sm-10">         <input type="text" class="form-control" id="Student ID" placeholder="请输入学号">      </div>   </div>    <div class="form-group">      <label for="kemu" class="col-sm-2 control-label">科目名称</label>      <div class="col-sm-10">         <input type="text" class="form-control" id="kemu" placeholder="请输入科目名称">      </div>   </div>   <div class="form-group">    <label for="name2" class="col-sm-2 control-label">意见</label>    <div class="col-sm-10">        <input type="text" class="form-control" rows="3">    </div>   </div>    <div  align="center">       <input type="submit" class="btn-success" style="border-radius:5px; width: 120px;"  value="提交" />        <input type="button" class="btn-info"  style="border-radius:5px; width: 120px;" value="取消" />    </div>        </form>  </div>  <script src="js/jquery.min.js"></script>  <script src="js/bootstrap.min.js"></script></body></html>

效果图：

参考地址：http://www.w3cschool.cn/bootstrap/bootstrap-v2-forms.html

1 0