twitter-bootstrap – 添加一个下拉按钮到Twitter的引导类型头部

发布时间：2020-12-18 00:16:49 所属栏目：安全来源：网络整理

导读：Twitter bootstrap附带了一个非常方便的自动完成,像组件叫做头文字.我试图添加一个小的下拉按钮(或小部件),以便按下时,打头像组件将像普通下拉列表选择器一样显示所有可用的数据源绑定选项(除了其本机自动完成功能).当前的标记如下所示： input type="text"

Twitter bootstrap附带了一个非常方便的自动完成,像组件叫做头文字.我试图添加一个小的下拉按钮(或小部件),以便按下时,打头像组件将像普通下拉列表选择器一样显示所有可用的数据源绑定选项(除了其本机自动完成功能).当前的标记如下所示：

<input type="text" 
       data-provide="typeahead"
       data-items=5
       data-source='["option 1","option 2","option 3"]'>

所以实际上需要的是组件作为下拉列表和自动完成小部件的混合体.
有人这样做过吗？谢谢…

解决方法

我发现这个优秀的组成部分：

Source code
Live example

有一件事情,下拉按钮的背景看起来很滑稽.该修复涉及到“bootstrap-combobox.css”中的一个小小变化：

...
.combobox-container .add-on {
    float: left;
    display: block;
    width: auto;
    min-width: 16px;
    height: 18px;
    margin-right: -1px;
    padding: 4px 5px;
    font-weight: normal;
    line-height: 18px;
    color: #999999;
    text-align: center;
    text-shadow: 0 1px 0 #ffffff;
    /*   background-color: #f5f5f5; */ // <<------------ comment this line
    border: 1px solid #ccc;
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;
}
...

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!