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

Bootstrap 表单

资讯来源:海力源码    点击次数:975    更新时间:2019-12-11 10:23:34
在本章中,我们将学习如何使用 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 按钮
  • 海力源码手机版
  •  联系客服小美