安信娱乐谁是老板

拼图开发文档

内联输入框

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

图标

在输入框前或后增加图标显示,框架用.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>