BootStrap2学习日记9---文本框的前缀和后缀

时间:2023-03-10 04:22:51
BootStrap2学习日记9---文本框的前缀和后缀

先来看一段代码:

  <form method="" action="">
<div class="input-append input-prepend">
     <span class="add-on">&yen;</span>
  <input class="" type="text">
 <span class="add-on">.</span> </div>
</form>

效果如下:

BootStrap2学习日记9---文本框的前缀和后缀

容易发现加了“add-on”的Span标签通过div的class属性"input-append"和"input-prepend"与文本框合并了

“add-on”类可以使<span>与<input>在保证同一行 同一高度

如果去掉div的class中的:

”input-append“效果如图-1
BootStrap2学习日记9---文本框的前缀和后缀(图-1)
“input-prepend”效果如图-2
BootStrap2学习日记9---文本框的前缀和后缀(图-2) 下面的代码是实现一个搜索框:
    <div class="input-append">
<input type="text" />
<input type="button" value="Search" class="btn"/>
</div>

效果如图:

BootStrap2学习日记9---文本框的前缀和后缀