下面，我们在导航栏上，添加一个搜索用的表单。添加一个表单，需要一组 form 标签 ...

form

在它的里面，可以搜索表单元素 ... 先添加一个文本框元素 ... 也就是一个 text 类型的 input 元素 ... 在它上面加上一个占位符的文字 .... 用一个 placeholder 属性 ... 搜索 ...

input ...

再添加一个提交请求的按钮 ... 用一个 button 标签 ... 设置一下它的 type 属性，设置成 submit ...

在这个提交的按钮上，我们可以使用一个图标 ... 在 Bootstrap 里面，有一批可以用的字体图标 ... 使用这些小图标，先用一组 span 标签。然后在这个标签上，要添加特定的 css 类 ... 一个是 glyphicon .. 后面要再加上一个表示具体某个小图标的 css 类 ... 我们要用的是一个搜索图标 ... 所以对应的类是 glyphicon-search ...

在这个地址里，你可以找到在 Bootstrap 架构里面，所有的可用的小图标 ...

在文本框这个表单元素上，需要添加一个叫 form-control 的类 ... 它会在元素上添加点额外的样式 ...

在导航栏里的表单 ... 我们还要在 form 这个元素上，加上两个 css 类 ... 一个是 navbar-from ... 还是一个是可以控制元素浮动的 css 类 ... 让它浮动到左边 .. 可以加上一个 navbar-left ... 浮动让右边显示，可以把它换成 navbar-right ... 这里我们设置成 navbar-left ...

自定义样式

下面，我们要做的就是为这个搜索表单添加点自定义的样式 ... 让它在这个暗色的导航栏里显得更自然一些 ... 打开 自定义样式表 ... 在 css 这个目录的下面 ... 打开 style.css ...

先设置一下这个文本框的样式 ... 设置一下样式的选择器 ...

.navbar-inverse input[type="text"] {}

这个选择器的意思就是，设置一下在暗色导航栏下面的 text 类型的 input 元素的样式 ...

先改一下背景颜色 ... 改成 313131 ...

再去掉文本框的边框 ... border: none ... 设置一下在文本框里的文字的颜色 ... color: #999

再设置下这个搜索按钮的样式 ... 我们可以去掉这个按钮的背景还有边框 ... 调整一下这个按钮的显示的位置 ... 最后再设置下小图标的颜色。

先把包装这个按钮元素的容器，添加一个定位的样式 ...

.navbar-inverse .navbar-form {
position: relative;
}

.navbar-from 就是用在导航栏里面的 form 标签上的那个类 ... 这里我们把它的位置设置成了相对的 ... 然后我们可以让搜索按钮，基于这个元素去绝对定位 ... 先找到这个搜索按钮 ...

.navbar-inverse button[type="submit"] {}

这个样式选择器的意思是，去设置一下在暗色导航栏下面的 submit 类型的 button 标签的样式 ...

添加一个 position 属性 ... 它的值设置成 absolute .. 表示使用绝对定位 ... 再设置一下它的上边还有右边的位置 ...

先加上一个 top 属性 ... 值可以是 15% ... 再加一个 right 属性 ... 设置一下这个按钮基于包装它的 form 标签的右边的位置 ... 这里设置成 20px ...

然后再去掉按钮的背景 ... background: none ... 再去掉它的边框 .. border: none;

最后，我们可以再修改一下这个按钮上的小图标的颜色 ...

.navbar-inverse .glyphicon {
color: #999;
}

现在，在我们的导航栏上，就有了一个自然的搜索表单了 ...