Question

我可以在Bootstrap 3中轻松创建导航搜索栏。但我想构建一些与Google Developers搜索栏非常相似的东西。

我当然可以尝试查看谷歌的页面，并将与搜索框相关的内容分解出来，但我现在的css技能将永远带我。

特别是如何在Bootstrap 3中创建具有以下功能的搜索导航栏？

在大屏幕上我需要整个搜索框来占用剩余的剩余宽度（左侧的品牌和菜单，右侧的用户帐户按钮）。
On Focus HTML下拉菜单与Google Developers网站类似。
我希望用户可以选择在HTML下拉列表中选择过滤器，它会在搜索栏中显示为标记，如下所示：
在智能手机屏幕上，搜索框将折叠为搜索按钮，点按此按钮时，搜索按钮将展开，类似于Google Developers网站。（与菜单的崩溃分开）。

我可以处理JS部分（使用angular），我只需要对css部分有所了解。我已经搜索过这个站点（http://tympanus.net/codrops/2010/07/14/ui-elements-search-box/）了，但是我想用已经存在的bootstrap类来实现它。

到目前为止，这是Fizzix的帮助： JSFiddle Demo 的 HTML：

 <nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>


    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Others <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Categories</a></li>

      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="search-box"> 

            <input value="Search" type="text" class="form-control" />
            <i class="glyphicon glyphicon-search"></i>
        </div>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->

CSS：

body {
    margin: 20px;
    background: #455a64;
}
.search-box {
    position: relative;
}
.search-box .glyphicon {
    position: absolute;
    padding: 10px;
    pointer-events: none;
    left: 15px;
    top: 0px;
}
.search-box .glyphicon:before {
    color: white;
    transition: all 0.2s linear;
}
.search-box input {
    color: #fff;
    padding-left: 60px;
    background: #546e7a;
    border:0;
    outline: none !important;
    transition: all 0.2s linear;
}
.search-box input:focus {
    background: #fff !important;
    outline: 0;
    color: #333;
}
.search-box input:focus + .glyphicon:before {
    color: #333;
}
.search-box input:hover {
    background: #78909c;
}

Answer 1

你的问题很可能会被关闭，因为你没有先尝试自己这样做，而且你基本上要求我们在没有任何尝试的情况下完成所有的努力

我试图模仿大多数样式，尽管placeholder颜色是棘手的部分。相反，我将Search的值添加到输入并设置颜色样式。您可以通过Angular处理占位符部分。

不幸的是，我现在时间紧张，无法在focus上进行下拉工作。

如果您想要完整的CSS细分，请告诉我，我可以一步一步地与您一起完成。

<强> WORKING DEMO

<强> CSS：

.search-box {
    position: relative;
}
.search-box .glyphicon {
    position: absolute;
    padding: 10px;
    pointer-events: none;
    left: 15px;
    top: 0px;
}
.search-box .glyphicon:before {
    color: white;
    transition: all 0.2s linear;
}
.search-box input {
    color: #fff;
    padding-left: 60px;
    background: #546e7a;
    border:0;
    outline: none !important;
    transition: all 0.2s linear;
}
.search-box input:focus {
    background: #fff !important;
    outline: 0;
    color: #333;
}
.search-box input:focus + .glyphicon:before {
    color: #333;
}
.search-box input:hover {
    background: #78909c;
}

<强> HTML：

<div class="search-box">
    <input value="Search" type="text" class="form-control" />
    <i class="glyphicon glyphicon-search"></i>
</div>

Bootstrap搜索框类似于Google Developers

1 个答案: