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

2019-09-30 23:00:56 阅读：228 来源： 互联网

标签：lable 栅格标签 bootstrap 表单输入框姓名邮箱 id

一、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>


   </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>

标签：lable,栅格,标签,bootstrap,表单,输入框,姓名,邮箱,id
来源： https://www.cnblogs.com/pere/p/11614429.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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