发表新帖
发表新帖

bootstrap amazon style search bar

前端 未结
关注
2 1232
隐瞒了意图╮
隐瞒了意图╮ 2021-02-04 16:54

Is there an easy way to do something similar to this in bootstrap? A search bar with a drop down selector for a different category? I\'ve been looking through their documentatio

2条回答
  • 闹比i
    闹比i (楼主)
    2021-02-04 17:16

    See if this example that helps you..

    javascript: 

    /* activate scrollspy menu */
$('body').scrollspy({
  target: '#navbar-collapsible',
  offset: 50
});

/* smooth scrolling sections */
$('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 50
        }, 1000);
        return false;
      }
    }
});

    CSS: 

    /*
A custom Bootstrap 3.1 template
from http://bootply.com

This CSS code should follow the 'bootstrap.css'
in your HTML file.

license: MIT
author: bootply.com
*/

html,body {
    height:100%;
    background:center no-repeat fixed url('/assets/example/bg_suburb.jpg');
    background-size: cover;
}

.icon-bar {
    background-color:#fff;
}

.navbar-trans {
    background-color:#279ffffd;
    color:#fff;
}

.navbar-trans li>a:hover,.navbar-trans li>a:focus,.navbar-trans li.active {
    background-color:#38afef;
}

.navbar-trans a{
    color:#fefefe;
}

.navbar-trans .form-control:focus {
    border-color: #eee;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(100,100,100,0.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(100,100,100,0.6);
}

section {
    padding-top:70px;  
    padding-bottom:50px; 
    min-height:calc(100% - 1px);
}

.v-center {
    padding-top:10%;
    font-size:70px;
}

.well {
    border-color:transparent;
}

a.list-group-item.active,[class*='-info'] {
    background-color: #168ccc;
    color:#fff;
}

#section1 {
    background-color: #168ccc;
    color:#dedeff;
}

#section2 {
    background-color: #e5e5ef;
    color:#686868;
}

#section3 {
    background-color: #168ccc;
    color:#ffffd;
}

#section4 {
    background-color: #fff;
    color:#444;
}

#section5,#section7,#section7 a {
    color:#f5f5f5;
}

#section6 {
    background-color: #168ccc;
    color:#ffffd;
}

footer {
    background-color:#494949;
    color:#ffffd;
    min-height:100px;
    padding-top:20px;
    padding-bottom:40px;
}

footer .nav>li>a {
    padding:3px;
    color:#ccc;
}

footer .nav>li>a:hover {
    background-color:transparent;
    color:#fff;
}

    HTML: 

    


    
    
    Sectionalize.
    

    
    
      
    
          
    
            
    
              
    Robust
    There is other content and snippets of details or features that can be placed here..
    
            
    
          
    
          
    
            
    
              
    Simple
    You may also want to create content that compells users to scroll down more..
    
            
    
          
    
          
    
            
    
              
    Clean
    In the first 30 seconds of a user's visit to your site they decide if they're going to stay..
    
            
    
          
    
      
    
    

    
  
    

    


    
  
    
    
    
        
    What is Bootstrap?
    
        
    
        
    Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It is the No.1 project on GitHub with 65,000+ stars and 23,800 forks (as of March 2014) [1] and has been used by NASA and MSNBC, among many others..
    
        
     
        
        
    Big 'ol Camera Icon
    
    
    
  
    

    


    
    
    Bootstrap is Responsive
    
    
    
      
    
        
    Vertical scrolling has become a popular and lasting trend in Web design.
    
        
    
          
    Some brand-tacular designs even have home page content that is taller that 12,000 pixels. That's a lotta content.
    
          
    
          
    Anyhoo, this is just some random blurb of text, and Bootply.com is a playground and code editor for Bootstrap.
    
        
    
        
    
          
        
    
      
    
   
    

    


    
    
    Change this Content. Change the world.
    
    
    
      
    
      
      
    Images will scale down proportionately as browser width narrows.
    
      
    
    
    

    


    
  
    
    
    
    
    
      
    
            
    
              
                
    Basic
    
                
    Free to get started
    
                  
              
                
    Option 100 - more about this
    
                  
              
                
    Option 2 - this is more about this
    
                  
              
                
    Option 3 GB
    
                  
              
                
    Option 4
    
                  
              
                
    Feature
    
                  
              
                
    Feature
    
                  
              
                
              
            
    
      
    

      
    
            
    
              
                
    Better
    
                
    Most popular plan
    
                  
              
                
    Option 200 - more about this
    
                  
              
                
    Option 2 - this is more about this
    
                  
              
                
    Option 5 GB
    
                  
              
                
    Option 6
    
                  
              
                
    Feature
    
                  
              
                
    Feature
    
                  
              
                
              
            
    
      
    

      
    
            
    
              
                
    Best
    
                
    For enterprise grade
    
                  
              
                
    Option 100 - more about this
    
                  
              
                
    Option 2 - this is more about this
    
                  
              
                
    Option 8 GB
    
                  
              
                
    Option 10
    
                  
              
                
    Unlimited
    
                  
              
                
    Unlimited
    
                  
              
                
              
            
    
      
    

    
    
    
     
  
    

    


    
    
    Do you see what I mean?
    
    
    Add some compelling information here
    
    


    


    
    
    Social Media Fascination
    
    
    
      
      
    
       
      
    
      
    
       
      
    
      
    
        
      
    
      
    
       
      
    
      
    
       
      
    
      
    
       
      
    
      
    
       
      
    
      
    
       
      
    
  
    
  
    
    
    
      

    
      
    
        Get the code for this template.

    http://bootply.com/129806

    This is a full-width search form in the navbar along with an input-group-btn on the left side of the input that is used as a dropdown of categories.

    0 讨论(0)
 看不清?
提交回复
热议问题