"D--T"
Bootstrap 4.0.0 Snippet by yuutuu

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE HTML> <!--[if lt IE 7 ]> <html class="ie6 language-en" lang="en"> <![endif]--> <!--[if IE 7 ]> <html class="ie7 language-en" lang="en"> <![endif]--> <!--[if IE 8 ]> <html class="ie8 language-en" lang="en"> <![endif]--> <!--[if IE 9 ]> <html class="ie9 language-en" lang="en"> <![endif]--> <!--[if !(IE)]><!--> <html lang="en"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>D-Trades|Making Quality Trade easier and Safer</title> <link rel="stylesheet" type="text/css" href="style.css"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <header id="header"> <div id="HeaderContainer"> <div id="Top_btn"> <div id="left_btn"> <ul> <a href="#" target="_self"><button ><span>Trade Now</span></button></a> <a href="#" target="_self"><button Class="fa fa-question-circle"> Support</button></a> <a href="#" target="_self"><button Class="fa fa-envelope"></button> </a> </ul> </div> <div id="right_btn"> <ul> <a href="#" target="_self"><button Class="fa fa-street-view"></button> </a> <a href="#" target="_self"><button Class="fa fa-map-marker"></button> </a> <a href="#" target="_self"><button Class="fa fa-truck"> Track Order</button> </a> </ul> </div> </div> <div id="Mid-term"> <div class="logo"> <div id="logoWrap" itemprop="logo" > <a href="#" target="_self"> <img src="http://d-trades.c017/01/App-Head-1.png" title="D-Ts" alt="D-Trades Logo"> </a> </div> </div> <form class="container"> <div class="row"> <div class="col-xs-8 col-xs-offset-2"> <div class="input-group"> <input type="hidden" name="search_param" value="all" id="search_param"> <input type="text" class="form-control" name="x" placeholder="Search ..."> <div class="input-group-btn search-panel"> <button id="cate" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span id="search_concept" class="fa fa-globe"> All</span> <span class="fa fa-caret-down"></span> </button> <ul class="dropdown-menu" role="menu"> <li class="alpha"><span> Search..</span></li> <li class="divider"></li> <li ><a href="#contains"><i class="fa fa-globe"></i><span> All</span></a></li> <li ><a href="#contains"><i class="fa fa-car"></i><span> Auto-Machines</span></a></li> <li><a href="#contains"><i class="fa fa-building"></i><span> Real-Estate</span></a></li> <li ><a href="#contains"><i class="fa fa-briefcase"></i><span> Job</span></a></li> <li ><a href="#contains"><i class="fa fa-shopping-bag"></i><span> Fashion</span></a></li> <li ><a href="#contains"><i class="fa fa-mobile"></i><span> Electronics</span></a></li> <li ><a href="#contains"><i class="fa fa-calendar"></i><span> Events</span></a></li> <li ><a href="#contains"><i class="fa fa-apple"></i><span> Brands</span></a></li> <li ><a href="#contains"><i class="fa fa-gavel"></i><span> Auction</span></a></li> </ul> </div> <span class="input-group-btn"> <button id="searchbtn" class="btn btn-default" type="button"><a href="#"><span class="fa fa-search"></span></a></button> </span> </div> </div> </div> </form> </div> </div> </header> </body> </html>
body{ margin-top:20px; } .dropdown-menu { background:#000; color:#fff; } #cate, #searchbtn{ -webkit-border-radius:0 2px 2px 0; } html, body{ height:100%; } *{ padding:0; margin:0 auto; } body { background-position: 0 24px; display:block; } #header { z-index: 2; position: relative; } #HeaderContainer { background:url("https://new.wargaming.com/static/1.13/images/map.png"); background-color:rgba(0, 0, 0, 0.93); height:150px; } div { display:block; } button { background:rgba(0, 0, 0, 0); height:24px; padding:0 10px; opacity:5; border-radius:50px; width:150px; border:1px solid gray; } button:hover{ background:rgba(255, 0, 4, 0.55); } #Top_btn{ padding:10px; margin:0; } #left_btn{ float:left; } #right_btn{ float:right; } ul > a:hover { color:#fff; } ul > a { color:#ff0003; font-size:15px; } .logo{ margin-left:3px; padding-top:34px; } #Mid_term { display:inline-block; }
$(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); }); });

Related: See More

Fresh Bootstrap Table

Questions / Comments: