内联输入框
在应用中,常有在输入框加图标、前后缀、多个输入框一行显示的要求,框架定义了相关的样式:
图标
在输入框前或后增加图标显示,框架用.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>