安信娱乐谁是老板

拼图开发文档

搜索框

信息内容搜索,input的类型为search

基本样式

普通的搜索可由上一节的内联样式创建,即搜索输入框加上提交按钮。

    <form>
      <div class="input-inline">
        <input class="input" type="text" placeholder="关键词" />
        <div class="addon"><input class="button border" type="submit" value="搜索" /></div>
      </div>
    </form>
  

搜索图标

给搜索框加上图标

    <form>
      <div class="input-inline">
        <div class="input-inline-auto input-icon">
          <span><i class="icon-search"></i></span>
          <input class="input" type="text" placeholder="关键词" data-form="clear" />
          <span><i class="icon-danger-bg"></i></span>
        </div>
        <div class="addon"><input class="button border" type="submit" value="搜索" /></div>
      </div>
    </form>
  

下拉选项

安信娱乐谁是老板也可使用下拉菜单的搜索选项:

    <form>
      <div class="input-inline">
        <div class="addon">
          <select class="input"><option>选项</option><option>选项</option></select>
        </div>
        <input class="input" type="text" placeholder="关键词" />
        <div class="addon"><input class="button border" type="submit" value="搜索" /></div>
      </div>
    </form>
  

半圆效果

也可使用下拉菜单的搜索选项:

    <form>
      <div class="input-inline input-radius">
        <div class="addon">
          <select class="input"><option>选项</option><option>选项</option></select>
        </div>
        <div class="input-inline-auto input-icon">
          <span><i class="icon-search"></i></span>
          <input class="input" type="text" placeholder="关键词" data-form="clear" />
          <span><i class="icon-danger-bg"></i></span>
        </div>
        <div class="addon"><input class="button border" type="submit" value="搜索" /></div>
      </div>
    </form>
  

搜索组

除搜索内联输入框外,还可以添加选项卡及下拉菜单的搜索组样式。

选项卡

下拉菜单

在触发输入框时,显示下拉菜单。

    <form>
      <div class="input-search drop">
        <div class="input-inline">
          <div class="addon">
            <select class="input"><option>选项</option><option>选项</option></select>
          </div>
          <input class="input" type="text" placeholder="关键词" data-drop="click" />
          <div class="addon"><input class="button border" type="submit" value="搜索" /></div>
        </div>
        <div class="dropdown">
        ...
        </div>
      </div>
    </form>