内联输入框

在应用中，常有在输入框加图标、前后缀、多个输入框一行显示的要求，框架定义了相关的样式：

图标

在输入框前或后增加图标显示，框架用.input-icon定义，图标元素用i标签定义。

前图标

图标在输入框前方。

    <form>
      <div class="input-icon">
        <span><em class="icon-icon"><i></i></em></span>
        <input class="input" type="text" placeholder="输入框" />
      </div>
    </form>

后图标

图标在输入框后方。

    <form>
      <div class="input-icon">
        <input class="input" type="text" placeholder="输入框" />
        <span><em class="icon-icon"><i></i></em></span>
      </div>
    </form>

前后图标

    <form>
      <div class="input-icon">
        <span><em class="icon-icon"><i></i></em></span>
        <input class="input" type="text" placeholder="输入框" />
        <span><em class="icon-icon"><i></i></em></span>
      </div>
    </form>

内联

内联文本或输入框，用.input-inline定义，包含固定宽的.addon和.button元素和自动宽的.input和.input-inline-auto元素：

前缀

    <form>
      <div class="input-inline">
        <div class="addon"><span class="bg">前</span></div>
        <input class="input" type="text" placeholder="输入框" />
      </div>
    </form>

后缀

    <form>
      <div class="input-inline">
        <input class="input" type="text" placeholder="输入框" />
        <div class="addon"><span class="bg">后</span></div>
      </div>
    </form>

中间

    <form>
      <div class="input-inline">
        <input class="input" type="text" placeholder="输入框" />
        <div class="addon"><span class="bg">中</span></div>
        <input class="input" type="text" placeholder="输入框" />
      </div>
    </form>

前中后

    <form>
      <div class="input-inline">
        <div class="addon"><span class="bg">前</span></div>
        <input class="input" type="text" placeholder="输入框" />
        <input class="input" type="text" placeholder="输入框" />
        <div class="addon"><span class="bg">后</span></div>
      </div>
      <div class="input-inline">
        <div class="addon"><span class="bg">前</span></div>
        <input class="input" type="text" placeholder="输入框" />
        <div class="addon"><span class="bg">中</span></div>
        <input class="input" type="text" placeholder="输入框" />
        <div class="addon"><span class="bg">后</span></div>
      </div>
    </form>

组合

图标与内联的组合

内联及图标

    <form>
      <div class="input-inline">
        <div class="addon">
          <span>字</span>
        </div>
        <div class="input-inline-auto input-icon">
          <span><em class="icon-icon"><i></i></em></span>
          <input class="input" type="text" placeholder="输入框" />
          <span><em class="icon-icon"><i></i></em></span>
        </div>
        <input class="input" type="text" placeholder="输入框" />
        <div class="addon"><input class="button" type="submit" value="按钮" /></div>
      </div>
    </form>

半圆显示

叠加.input-radius可使内联输入框半圆显示：

    <form>
      <div class="input-inline input-radius">
        <div class="addon"><span>前</span></div>
        <input class="input" type="text" placeholder="输入框" />
        <div class="addon"><input class="button" type="submit" value="按钮" /></div>
      </div>
    </form>