BootStrap 表单

最新推荐文章于 2022-04-30 11:04:33 发布

boonyaxnn

最新推荐文章于 2022-04-30 11:04:33 发布

阅读量378

点赞数 2

分类专栏： Bootstrap 文章标签： bootstrap 表单

本文链接：https://blog.csdn.net/boonyaxnn/article/details/61930326

版权

Bootstrap 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

表单布局

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

boonyaxnn

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BootStrap 表单

表单布局Bootstrap 提供了下列类型的表单布局：垂直表单（默认）内联表单水平表单小妞妞做的表单实例： Bootstrap 教学意见调查表 body { padding-top: 150px; padding-bottom: 40px; background-color:
复制链接

扫一扫

专栏目录