bootstrap栅格系统应用实例-表单操作

一、lable标签的使用

代码

<div class="container">
   <form action="#">
       <!-- form表单结构<form method="post" action="result.html"></form> method为发送方式，action为向何处发送表单数据-->
       <label for="name">姓名：</label>
       <input type="text" id="name" placeholder="请输入你的姓名"/>
   </form>
</div>

结果：

说明：将姓名加上lable标签，同时“for”的属性值设置为input标签的id值，这样当你点击姓名两个字的时候后面的文本框内会被触发，光标闪烁

二、将姓名和输入框捆绑在一起，且可随屏幕大小变化

代码：

<div class="container">
   <form action="#">
       <div 

class="form-group

">
           <label for="name">姓名：</label>
           <input 

class="form-control"

 type="text" id="name" placeholder="请输入你的姓名"/>
       </div>
   </form>
</div>

结果：

屏幕缩小后效果

可随浏览器窗口大小变化

加一个邮箱的div

<div class="container">
   <form action="#">
       <div class="form-group">
           <label for="name">姓名：</label>
           <input class="form-control" type="text" id="name" placeholder="请输入你的姓名"/>
       </div>
  

<div class="form-group">
<label for="name">邮箱：</label>
<input class="form-control" type="email" id="email" placeholder="请输入你的邮箱"/>
</div>

   </form>
</div>

三、如何使姓名和输入框排成一行

<div class="container">
   <form action="#" class="form-horizontal">
       <div class="form-group">
           <label for="name" class="col-md-2">姓名：</label>
           <div class="col-md-6">
               <input class="form-control" type="text" id="name" placeholder="请输入你的姓名"/>
           </div>
       </div>
       <div class="form-group">
           <label for="email" class="col-md-2">邮箱：</label>
           <div class="col-md-6">
               <input class="form-control" type="email" id="email" placeholder="请输入你的邮箱"/>
           </div>
       </div>
   </form>
</div>

四、调整姓名和输入框之间的距离

<div class="container">
   <form action="#" class="form-horizontal">
       <div class="form-group">
           <label for="name" class="col-md-1 text-center">姓名：</label>
           <div class="col-md-6">
               <input class="form-control" type="text" id="name" placeholder="请输入你的姓名"/>
           </div>
       </div>
       <div class="form-group">
           <label for="email" class="col-md-1 text-center">邮箱：</label>
           <!-- text-center居中，同时姓名只占一份-->
           <div class="col-md-6">
               <input class="form-control" type="email" id="email" placeholder="请输入你的邮箱"/>
           </div>
       </div>
       <div class="form-group">
           <div class="col-md-6 col-md-offset-1">
               <!--单选按钮要和输入框对齐，由于左侧已有一份所有需要col-md-offset-1向右移动一份 -->
               <input  type="checkbox"/>cheack me
           </div>
       </div>
   </form>
</div>

bootstrap栅格系统应用实例-表单操作

原文：https://www.cnblogs.com/pere/p/11614429.html