当前位置:  首页  >  前端开发  >  HTML

Bootstrap表单布局有哪几种方式?Bootstrap表单布局的创建方法(附代码)

Bootstrap是什么?Bootstrap是一个用于快速开发Web应用程序和网站的前端框架,那么,Bootstrap如何来创建一个表单?Bootstrap通过一些简单的HTML标签和扩展的类来创建出不同样式的表单,下面我们就来看看Bootstrap创建表单的方法。
Bootstrap是什么?Bootstrap是一个用于快速开发 Web 应用程序和网站的前端框架,那么,Bootstrap如何来创建一个表单?Bootstrap 通过一些简单的 HTML 标签和扩展的类来创建出不同样式的表单,下面我们就来看看Bootstrap创建表单的方法。

Bootstrap表单布局

【相关视频推荐:Bootstrap教程

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

基本的表单结构是Bootstrap自带的,个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤:

向父

元素添加 role="form"。

把标签和控件放在一个带有 class .form-group 的

中。这是获取最佳间距所必需的。

向所有的文本元素

结果如下所示:

复选框(Checkbox)和单选框(Radio)

复选框和单选按钮用于让用户从一系列预设置的选项中进行选择。

当创建表单时,如果您想让用户从列表中选择若干个选项时,请使用 checkbox。如果您限制用户只能选择一个选项,请使用 radio。

对一系列复选框和单选框使用 .checkbox-inline 或.radio-inline class,控制它们显示在同一行上。

下面的例子演示了这两种类型(默认和内联):

实例




     
    Bootstrap 实例 - 复选框和单选按钮
      
    




















    
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | json解析格式化 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有