Bootstrap 表单.pdfVIP

Bootstrap 表单 Bootstrap 表单 在本章中，我们将学习如何使⽤ Bootstrap 创建表单。Bootstrap 通过⼀些简单的 HTML 标签和扩展的类 可创建出不同样式的表单。 表单布局 Bootstrap 提供了下列类型的表单布局： 垂直表单 （默认） 内联表单 ⽔平表单 垂直或基本表单 基本的表单结构是 Bootstrap ⾃带的，个别的表单控件⾃动接收⼀些全局样式。下⾯ 列出了创建基本表单的步骤： 向⽗ form 元素添加 role= f orm 。 把标签和控件放在⼀个带有 class f. orm-group 的 div 中。这是获取最佳间距所 必需的。 向所有的⽂本元素 input 、textarea 和 select 添加 class f. orm-control 。 !DOCTYPE html html head titleBootstrap 实例 - 基本表单/title link rel=stylesheet hre =/libs/bootstr script src=/libs/jquery/2.1.1/jquery .min script src=/libs/bootstrap/3.3.0/js/boot /head body orm role= orm div class= orm-group label or=name名称/label input type=text class= orm-control id=name placeholder=请输⼊名称 /div div class= orm-group label or=input ile⽂件输⼊/label input type= ile id=input ile p class=help-block这⾥是块级帮助⽂本的实例。/p /div div class=checkbox label input type=checkbox 请打勾 /label /div button type=submit class=btn btn-de ault提交/button / orm /body /html 尝试⼀下 » 结果如下所⽰： 内联表单 如果需要创建⼀个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 form 标签添加 class f. orm-inline 。 !DOCTYPE html html head titleBootstrap 实例 - 内联表单/title link rel=stylesheet hre =/libs/bootstr script src=/libs/jquery/2.1.1/jquery .min script src=/libs/bootstrap/3.3.0/js/boot /head body orm class= orm-inline role= orm div class= orm-group label class=sr-only or=name名称/label input type=text class= orm-control id=name placeholder=请输⼊名称 /div div class= orm-group label class=sr-only or=input ile⽂件输⼊/label input type= ile id=input ile /div div class=checkbox label input type=checkbox 请打勾 /label /div button type=submit class=btn btn-de ault提交/button / orm /body /html 尝试⼀下 » 结果如下所⽰： 默认情况下，Bootstrap 中的 input 、select 和 textarea 有 100% 宽度。在使⽤内联