海力源码logo图片
400电话图片
热门关键词:  响应式网站    设计网站    营销型网站   
源码资讯
当前位置:首页 > 源码资讯 > Bootstrap 表单

Bootstrap 表单

资讯来源:海力源码    点击次数:1275    更新时间:12/11/2019 10:23:34 AM
在本章中,我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。

表单布局
Bootstrap 提供了下列类型的表单布局:
● 垂直表单(默认)
● 内联表单
● 水平表单

垂直或基本表单
基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤:
● 向父 <form> 元素添加 role="form"。
●  把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
● 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。
实例
<form role="form">
  <div class="form-group">
    <label for="name">名称</label>
    <input type="text" class="form-control" id="name" placeholder="请输入名称">
  </div>
  <div class="form-group">
    <label for="inputfile">文件输入</label>
    <input type="file" id="inputfile">
    <p class="help-block">这里是块级帮助文本的实例。</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox">请打勾
    </label>
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>
上一条:Bootstrap 表格
下一条:Bootstrap 按钮
  • 海力源码手机版
  •  联系网站客服
  • 本站图片等部分资料来源于网上,部分未能与原作者取得联系,若涉及版权问题,请联系我们删除!
  • Copyright www.hailiym.com © 2026 All Rights Reserved 海力源码 版权所有 模板标签
  • 联系地址:广东省东莞市南城区莞太路  源码技术支持QQ:42805021
  •    计算机软件著作权登记号:2019SR1008471