bootstrap stile amazon barra di ricerca

Question

C'è un modo semplice per fare qualcosa di simile a questo in bootstrap? Una barra di ricerca con un selettore a discesa per una categoria diversa? Ho esaminato la loro documentazione, qualcosa di simile a this ma con il menu a discesa collegato alla barra di ricerca è quello che sto cercando. Voglio che faccia parte della mia barra di navigazione. Ricordo di aver visto un esempio online ma non riesco a trovarlo ora. Anche chiedendosi dove sarebbe andata in relazione al mio colpo di testa in questo momento

<header class="navbar navbar-fixed-top navbar-inverse"> 
     <div class="navbar-inner"> 
     <div class="container"> 
      <nav> 
      <ul class="nav pull-left"> 
       <li><%= link_to 'New Review', 
       if (current_user) 
       new_review_path 
       else 
       log_in_path 
       end %></li> 
      </ul> 
      </nav> 
      <nav> 
      <ul class="nav pull-right"> 
       <li><%= link_to "Home", '/' %></li> 
       <li><%= link_to "Help", '#' %></li> 
       <% if current_user %> 
       <li><%= link_to "Log out", log_out_path %> 
       <% else %> 
       <li><%= link_to "Sign up", sign_up_path %></li> 
       <li><%= link_to "Log in", log_in_path %></li> 
       <% end %> 
      </ul> 
      </nav> 
     </div> 
     </div> 
    </header> 

Answer 1

vedere se questo esempio, si può dire ..

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:#279ddd; 
    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:#ddd; 
} 

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

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

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

footer { 
    background-color:#494949; 
    color:#ddd; 
    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:

<nav class="navbar navbar-trans navbar-fixed-top" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible"> 
     <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="navbar-collapse collapse" id="navbar-collapsible"> 
     <ul class="nav navbar-nav navbar-left"> 
     <li><a href="#section1">What</a></li> 
     <li><a href="#section2">When</a></li> 
     <li><a href="#section3">How</a></li> 
     <li><a href="#section4">Four</a></li> 
     <li><a href="#section5">Five</a></li> 
     <li><a href="#section6">Why</a></li> 
     <li><a href="#section7">Who</a></li> 
     <li>&nbsp;</li> 
     </ul> 
     <form class="navbar-form"> 
     <div class="form-group" style="display:inline;"> 
      <div class="input-group"> 
      <div class="input-group-btn"> 
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-chevron-down"></span></button> 
       <ul class="dropdown-menu"> 
       <li><a href="#">Category 1</a></li> 
       <li><a href="#">Category 2</a></li> 
       <li><a href="#">Category 3</a></li> 
       <li><a href="#">Category 4</a></li> 
       <li><a href="#">Category 5</a></li> 
       </ul> 
      </div> 
      <input type="text" class="form-control" placeholder="What are searching for?"> 
      <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span> </span> 
      </div> 
     </div> 
     </form> 
    </div> 
    </div> 
</nav> 

<section class="container-fluid" id="section1"> 
    <h1 class="text-center v-center">Sectionalize.</h1> 

    <div class="container"> 
     <div class="row"> 
      <div class="col-sm-4"> 
      <div class="row"> 
       <div class="col-sm-10 col-sm-offset-2 text-center"><h3>Robust</h3><p>There is other content and snippets of details or features that can be placed here..</p><i class="fa fa-cog fa-5x"></i></div> 
      </div> 
      </div> 
      <div class="col-sm-4 text-center"> 
      <div class="row"> 
       <div class="col-sm-10 col-sm-offset-1 text-center"><h3>Simple</h3><p>You may also want to create content that compells users to scroll down more..</p><i class="fa fa-user fa-5x"></i></div> 
      </div> 
      </div> 
      <div class="col-sm-4 text-center"> 
      <div class="row"> 
       <div class="col-sm-10 text-center"><h3>Clean</h3><p>In the first 30 seconds of a user's visit to your site they decide if they're going to stay..</p><i class="fa fa-mobile fa-5x"></i></div> 
      </div> 
      </div> 
     </div><!--/row--> 
    <div class="row"><br></div> 
    </div><!--/container--> 
</section> 

<section class="container-fluid" id="section2"> 
    <div class="row"> 
    <div class="col-sm-8 col-sm-offset-2 text-center"> 
     <h1>What is Bootstrap?</h1> 
     <br> 
     <p class="lead">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..</p> 
     <br> 
     <i style="font-size:120px" class="fa fa-camera fa-5x"></i> 
     <p>Big 'ol Camera Icon</p> 
    </div> 
    </div> 
</section> 

<section class="container-fluid" id="section3"> 
    <h1 class="text-center">Bootstrap is Responsive</h1> 
    <div class="row"> 
     <div class="col-sm-6 col-sm-offset-3"> 
     <h3 class="text-center">Vertical scrolling has become a popular and lasting trend in Web design.</h3> 
     <div class="row"> 
      <div class="col-xs-4 col-xs-offset-1">Some brand-tacular designs even have home page content that is taller that 12,000 pixels. That's a lotta content.</div> 
      <div class="col-xs-2"></div> 
      <div class="col-xs-4 text-right">Anyhoo, this is just some random blurb of text, and Bootply.com is a playground and code editor for Bootstrap.</div> 
     </div> 
     <p class="text-center"> 
      <img src="/assets/example/img_mtnpeople.png" class="img-responsive center-block "> 
     </p> 
     </div> 
    </div> 
</section> 

<section class="container-fluid" id="section4"> 
    <h2 class="text-center">Change this Content. Change the world.</h2> 
    <div class="row"> 
     <div class="col-sm-8 col-sm-offset-2"> 
     <img src="/assets/example/bg_smartphones.jpg" class="img-responsive center-block "> 
     <p class="text-center">Images will scale down proportionately as browser width narrows.</p> 
     </div> 
    </div> 
</section> 

<section class="container-fluid" id="section5"> 
    <div class="col-sm-10 col-sm-offset-1"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-sm-4 col-xs-12"> 
      <div class="list-group"> 
       <a href="#" class="list-group-item active"> 
       <h2 class="list-group-item-heading">Basic</h2> 
       <h6>Free to get started</h6> 
       </a> 
       <a href="#" class="list-group-item"> 
       <p class="list-group-item-text">Option 100 - more about this</p> 
       </a> 
       <a href="#" class="list-group-item"> 
       <p class="list-group-item-text">Option 2 - this is more about this</p> 
       </a> 
       <a href="#" class="list-group-item"> 
       <p class="list-group-item-text">Option 3 GB</p> 
       </a> 
       <a href="#" class="list-group-item"> 
       <p class="list-group-item-text">Option 4</p> 
       </a> 
       <a href="#" class="list-group-item"> 
       <p class="list-group-item-text">Feature</p> 
       </a> 
       <a href="#" class="list-group-item"> 
       <p class="list-group-item-text">Feature</p> 
       </a> 
       <a href="#" class="list-group-item"> 
       <button class="btn btn-primary btn-lg btn-block">Get Started</button> 
       </a> 
      </div> 
     </div><!--/left--> 

     <div class="col-sm-4 col-xs-12"> 
      <div class="list-group text-center"> 
       <a href="#" class="list-group-item active"> 
       <h2 class="list-group-item-heading">Better</h2> 
       <h6>Most popular plan</h6> 
       </a> 
       <a href="#" class="list-group-item"> 
       <p class="list-group-item-text">Option 200 - more about this</p> 
       </a> 
       <a href="#" class="list-group-item"> 
       <p class="list-group-item-text">Option 2 - this is more about this</p> 
       </a> 
       <a href="#" class="list-group-item"> 
       <p class="list-group-item-text">Option 5 GB</p> 
       </a> 
       <a href="#" class="list-group-item"> 
       <p class="list-group-item-text">Option 6</p> 
       </a> 
       <a href="#" class="list-group-item"> 
       <p class="list-group-item-text">Feature</p> 
       </a> 
       <a href="#" class="list-group-item"> 
       <p class="list-group-item-text">Feature</p> 
       </a> 
       <a href="#" class="list-group-item"> 
       <button class="btn btn-default btn-lg btn-block">$10 per month</button> 
       </a> 
      </div> 
     </div><!--/middle--> 

     <div class="col-sm-4 col-xs-12"> 
      <div class="list-group text-right"> 
       <a href="#" class="list-group-item active"> 
       <h2 class="list-group-item-heading">Best</h2> 
       <h6>For enterprise grade</h6> 
       </a> 
       <a href="#" class="list-group-item"> 
       <p class="list-group-item-text">Option 100 - more about this</p> 
       </a> 
       <a href="#" class="list-group-item"> 
       <p class="list-group-item-text">Option 2 - this is more about this</p> 
       </a> 
       <a href="#" class="list-group-item"> 
       <p class="list-group-item-text">Option 8 GB</p> 
       </a> 
       <a href="#" class="list-group-item"> 
       <p class="list-group-item-text">Option 10</p> 
       </a> 
       <a href="#" class="list-group-item"> 
       <p class="list-group-item-text">Unlimited</p> 
       </a> 
       <a href="#" class="list-group-item"> 
       <p class="list-group-item-text">Unlimited</p> 
       </a> 
       <a href="#" class="list-group-item"> 
       <button class="btn btn-default btn-lg btn-block">$20 per month</button> 
       </a> 
      </div> 
     </div><!--/right--> 

    </div><!--/row--> 
    </div><!--/container--> 
    </div> 
</section> 

<section class="container-fluid" id="section6"> 
    <h2 class="text-center">Do you see what I mean?</h2> 
    <p class="text-center lead">Add some compelling information here</p> 
    <img src="/assets/example/bg_iphone.png" class="img-responsive center-block "> 

</section> 

<section class="container" id="section7"> 
    <h1 class="text-center">Social Media Fascination</h1> 
    <div class="row"> 
     <!--fontawesome icons--> 
     <div class="col-sm-1 col-sm-offset-2 col-xs-4 text-center"> 
     <i class="fa fa-github fa-4x"></i> 
     </div> 
     <div class="col-sm-1 col-xs-4 text-center"> 
     <i class="fa fa-foursquare fa-4x"></i> 
     </div> 
     <div class="col-sm-1 col-xs-4 text-center"> 
     <i class="fa fa-facebook fa-4x"></i> 
     </div> 
     <div class="col-sm-1 col-xs-4 text-center"> 
     <i class="fa fa-pinterest fa-4x"></i> 
     </div> 
     <div class="col-sm-1 col-xs-4 text-center"> 
     <i class="fa fa-google-plus fa-4x"></i> 
     </div> 
     <div class="col-sm-1 col-xs-4 text-center"> 
     <i class="fa fa-twitter fa-4x"></i> 
     </div> 
     <div class="col-sm-1 col-xs-4 text-center"> 
     <i class="fa fa-dribbble fa-4x"></i> 
     </div> 
     <div class="col-sm-1 col-xs-4 text-center"> 
     <i class="fa fa-instagram fa-4x"></i> 
     </div> 
    </div><!--/row--> 
    <div class="row"> 
    <div class="col-md-12 text-center"> 
     <br><br> 
     <p> 
     <a href="http://www.bootstrapzero.com/bootstrap-template/sectionalize">Get the code for this template.</a> 
     </p> 
    </div> 
    </div> 
</section> 

<footer id="footer"> 
    <div class="container"> 
    <div class="row">  
     <div class="col-xs-6 col-sm-6 col-md-3 column">   
      <h4>Information</h4> 
      <ul class="nav"> 
      <li><a href="about-us.html">Products</a></li> 
      <li><a href="about-us.html">Services</a></li> 
      <li><a href="about-us.html">Benefits</a></li> 
      <li><a href="elements.html">Developers</a></li> 
      </ul> 
     </div> 
     <div class="col-xs-6 col-md-3 column">   
      <h4>Follow Us</h4> 
      <ul class="nav"> 
      <li><a href="#">Twitter</a></li> 
      <li><a href="#">Facebook</a></li> 
      <li><a href="#">Google+</a></li> 
      <li><a href="#">Pinterest</a></li> 
      </ul> 
     </div> 
     <div class="col-xs-6 col-md-3 column">   
      <h4>Contact Us</h4> 
      <ul class="nav"> 
      <li><a href="#">Email</a></li> 
      <li><a href="#">Headquarters</a></li> 
      <li><a href="#">Management</a></li> 
      <li><a href="#">Support</a></li> 
      </ul> 
     </div> 
     <div class="col-xs-6 col-md-3 column">   
      <h4>Customer Service</h4> 
      <ul class="nav"> 
      <li><a href="#">About Us</a></li> 
      <li><a href="#">Delivery Information</a></li> 
      <li><a href="#">Privacy Policy</a></li> 
      <li><a href="#">Terms &amp; Conditions</a></li> 
      </ul> 
     </div> 
    </div><!--/row--> 
    </div> 
</footer> 

http://bootply.com/129806

Questa è una forma di ricerca a tutta larghezza nella barra di navigazione insieme ad un input-group-btn sul lato sinistro dell'ingresso che viene utilizzato come un menu a discesa di categorie.

Answer 2

Si prega di fare riferimento questo ha soddisfatto la vostra esigenza HTML:

<div class="container"> 
    <div class="row">  
     <div class="col-xs-8 col-xs-offset-2"> 
      <div class="input-group"> 
       <div class="input-group-btn search-panel"> 
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
         <span id="search_concept">Filter by</span> <span class="caret"></span> 
        </button> 
        <ul class="dropdown-menu" role="menu"> 
         <li><a href="#contains">Contains</a></li> 
         <li><a href="#its_equal">It's equal</a></li> 
         <li><a href="#greather_than">Greather than ></a></li> 
         <li><a href="#less_than">Less than < </a></li> 
         <li class="divider"></li> 
         <li><a href="#all">Anything</a></li> 
        </ul> 
       </div> 
       <input type="hidden" name="search_param" value="all" id="search_param">   
       <input type="text" class="form-control" name="x" placeholder="Search term..."> 
       <span class="input-group-btn"> 
        <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button> 
       </span> 
      </div> 
     </div> 
    </div> 
</div> 

CSS:

body{ 
    margin-top:20px; 
} 

JS:

$(document).ready(function(e){ 
    $('.search-panel .dropdown-menu').find('a').click(function(e) { 
     e.preventDefault(); 
     var param = $(this).attr("href").replace("#",""); 
     var concept = $(this).text(); 
     $('.search-panel span#search_concept').text(concept); 
     $('.input-group #search_param').val(param); 
    }); 
}); 

consultare questo link http://bootsnipp.com/snippets/featured/search-panel-with-filters