Bootstrap 输入框组.pdfVIP

Bootstrap 输⼊框组 Bootstrap 输⼊框组 本章将讲解 Bootstrap ⽀持的另⼀个特性，输⼊框组。输⼊框组扩展⾃ 表单控件。使 ⽤输⼊框组，您可以 容易地向基于⽂本的输⼊框添加作为前缀和后缀的⽂本或按 钮。 通过向输⼊域添加前缀和后缀的内容，您可以向⽤户输⼊添加公共的元素。例如，您 可以添加美元符号，或者在 Twitter ⽤户名前添加 @ ，或者应⽤程序接⼜所需要的其 他公共的元素。 向 .form-control 添加前缀或后缀元素的步骤如下： 把前缀或后缀元素放在⼀个带有 class .input-group 的 div 中。 接着，在相同的 div 内，在 class 为 .input-group-addon 的 span 内放置额 外的内容。 把该 span 放置在 input 元素的前⾯或者后⾯。 为了保持跨浏览器的兼容性，请避免使⽤ select 元素，因为它们在 WebKit 浏览器中不能完全渲染出效果。也不要直接向表单组应⽤输⼊框 组的 class ，输⼊框组是⼀个孤⽴的组件。 基本的输⼊框组 下⾯的实例演⽰了基本的输⼊框组： !DOCTYPE htmlhtmlhead titleBootstrap 实例 - 基本的输⼊框组/title link href=/ ootstrap/css/ ootstrap.min.css rel=stylesheet script src=/scripts/jquery .min.js/script script src=/ ootstrap/js/ ootstrap.min.js/script/head form class= s-example s-example-form role=form div class=input-group span class=input-group-addon@/span input type=text class=form-control placeholder=twit /div r div class=input-group input type=text class=form-control span class=input-group-addon.00/span /div r div class=input-group span class=input-group-addon$/span input type=text class=form-control span class=input-group-addon.00/span /div /form/div/ ody/html 结果如下所⽰： 输⼊框组的⼤⼩ 您可以通过向 .input-group 添加相对表单⼤⼩的 class （⽐如 .input-group-lg、input- group-sm、input-group-xs ）来改变输⼊框组的⼤⼩。输⼊框中的内容会⾃动调整⼤ ⼩。 下⾯的实例演⽰了这点： !DOCTYPE htmlhtmlhead titleBootstrap 实例 - 输⼊框组的⼤⼩/title link href=/ ootstrap/css/ ootstrap.min.css rel=stylesheet script src=/scripts/jquery .min.js/script script src=/ ootstrap/js/ ootstrap.min.js/script/head form class= s-example s-example-form role=form div class=input-group input-group-lg span class=input-group-addon@/span input type=text class=form-control placeholder=Twit /div r div class=input-gro