文章/答案/技术大牛

发布

社区首页 >问答首页 >typeahead.js列表的样式设计(引导方式)

问typeahead.js列表的样式设计(引导方式)
EN

Stack Overflow用户

提问于 2014-07-11 08:56:11

回答 1查看 954关注 0票数 1

我正在尝试使用typeahead.js创建一个自动完成的文本字段。示例这里显示格式良好的建议列表。然而，当我使用相同的代码时，我只得到了一个平淡的建议列表，如下所示：

请查看此jsFiddle的代码。

我用的是Bootstrap。要获得一个以Bootstrap方式格式化的列表，我需要做什么？

javascript

twitter-bootstrap

typeahead.js

twitter-typeahead

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-07-11 12:05:38

看起来，默认输出根本没有样式设置，而且必须使用.tt类对列表进行样式化。通过检查我想要的元素，我得到了下面的代码，并根据您的需要进行了调整。

.tt-query,
.tt-hint {
    width: 396px;
    height: 30px;
    padding: 8px 12px;
    font-size: 24px;
    line-height: 30px;
    border: 2px solid #ccc;
    border-radius: 8px;
    outline: none;
}

.tt-query {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
    color: #999
}

.tt-dropdown-menu {
    width: 422px;
    margin-top: 12px;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
    padding: 3px 20px;
    font-size: 18px;
    line-height: 24px;
}

.tt-suggestion.tt-cursor {
    color: #fff;
    background-color: #0097cf;

}

.tt-suggestion p {
    margin: 0;
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/24693793

复制

相似问题

问typeahead.js列表的样式设计(引导方式)
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问typeahead.js列表的样式设计(引导方式)EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问typeahead.js列表的样式设计(引导方式)
EN