Bootstrap3 - 13.导航栏中的搜索表单

我们在：
http://getbootstrap.com/components/#glyphicons
可以找到所有我们可以使用到的小图标。

代码：

    
    
    
    
    
    


    
    

        

        www.google.com
        

            
课程
            
博客
            
手册
            

                
                
                    
                
            
        
        

    
    
  
        

            
title
            
按时打算是多少对方的方式斯蒂芬斯蒂芬按时打算
        
    
    
       

style.css:

body {
    padding-top: 52px;
}

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

    background-color: #313131;
    border: none;
    color: #999;
}

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

.navbar-inverse .navbar-form input{
    display: inline-block;
    width: 75%;
}



.navbar-inverse button[type="submmit"] {
    position: absolute;
    line-height: 34px;
    right: 20px;
    background-color: #555;
    border: none;
    display: inline-block;
}

.navbar-inverse .glyphicon {
    color: red;
}

效果：

图片.png

做的有点不好不要见笑。