pasek wyszukiwania stylu amazoota

Question

Czy istnieje prosty sposób na zrobienie czegoś podobnego do tego w bootstrapie? Pasek wyszukiwania z rozwijanym selektorem dla innej kategorii? Przeglądałem ich dokumentację, coś podobnego do this, ale to, czego szukam, dotyczy listy rozwijanej dołączonej do paska wyszukiwania. Chcę, aby był częścią mojego navbara. Pamiętam, że widziałem przykład online, ale nie mogę go teraz znaleźć. Również zastanawiasz się, gdzie byłoby to w stosunku do mojego nagłówka w momencie

<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

Sprawdź, czy ten przykład, który pomaga ..

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

To pełnej szerokości formularz wyszukiwania w pasku nawigacyjnym wraz z input-group-btn po lewej stronie wejścia, który jest używany jako rozwijanej kategoriach.

Answer 2

Proszę odnieść to jest usatysfakcjonowany swoją wymóg 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); 
    }); 
}); 

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