<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="container-fluid dol">
<div class="row">
<div class="col-md-3">
<ul>
<li><a href="#">España Liga Primera Division</a></li>
<li><a href="#">Alemania 1.Bundesliga</a></li>
<li><a href="#">Eurocopa 2016</a></li>
</ul>
</div>
<div class="col-md-3">
<ul>
<li><a href="#">España Liga Primera Division</a></li>
<li><a href="#">Alemania 1.Bundesliga</a></li>
<li><a href="#">Eurocopa 2016</a></li>
</ul>
</div>
<div class="col-md-3">
<ul>
<li><a href="#">España Liga Primera Division</a></li>
<li><a href="#">Alemania 1.Bundesliga</a></li>
<li><a href="#">Eurocopa 2016</a></li>
</ul>
</div>
<div class="col-md-3">
<ul>
<li><a href="#">España Liga Primera Division</a></li>
<li><a href="#">Alemania 1.Bundesliga</a></li>
<li><a href="#">Eurocopa 2016</a></li>
</ul>
</div>
</div>
<div class="row buscador">
<div class="col-md-12 buscador">
<div class="panel panel-primary">
<div class="panel-heading">
<h1><i class="fa fa-futbol-o"></i> Alemania Bundersliga <a href="" data-toggle="tooltip" title="Añadir a favoritos"><i class="fa fa-star-o"></i></a></h1>
<div class="pull-right">
<span class="clickable filter" data-toggle="tooltip" title="Toggle table filter" data-container="body">
<i class="glyphicon glyphicon-filter"></i>
</span>
</div>
</div>
<div class="panel-body">
<div class="form-group col-md-4 ">
<label class="control-label" for="selectbasic">Select Basic</label>
<div class="">
<select id="selectbasic" name="selectbasic" class="form-control">
<option value="1">Todos los deportes</option>
<option value="2">Fútbol</option>
<option value="3">Baloncesto</option>
<option value="4">Tenis</option>
</select>
</div>
</div>
<!-- Select Basic -->
<div class="form-group col-md-4 ">
<label class="control-label" for="selectbasic">Select Basic</label>
<div class="">
<select id="selectbasic" name="selectbasic" class="form-control">
<option value="1">--Todas las ligas--</option>
<option value="2">España primera división</option>
</select>
</div>
</div>
<!-- Button -->
<div class="form-group col-md-4 ">
<label class="control-label" for="singlebutton">Filtrar</label>
<div class="">
<button id="singlebutton" name="singlebutton" class="btn btn-primary"><i class="glyphicon glyphicon-filter"></i> Filtrar</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<div>
<div class="tabbable-panel">
<div class="tabbable-line">
<ul class="nav nav-tabs ">
<li class="active">
<a href="#tab_default_1" data-toggle="tab">
MARCADORES </a>
</li>
<li>
<a href="#tab_default_2" data-toggle="tab">
<i class="fa fa-trophy"></i> CLASIFICACIÓN</a>
</li>
<li>
<a href="#tab_default_3" data-toggle="tab">
<i class="fa fa-calendar-o"></i> CALENDARIO</a>
</li>
<li>
<a href="#tab_default_3" data-toggle="tab">
<i class="fa fa-eur"></i> APUESTAS</a>
</li>
<li>
<a href="#tab_default_3" data-toggle="tab">
<i class="fa fa-ticket"></i> ENTRADAS</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab_default_1">
<table class="table table-hover" id="dev-table">
<!--<thead>
<tr>
<th>#</th>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th>Username</th>
</tr>
</thead>-->
<tbody>
<tr>
<td> <i class="fa fa-star-o"></i> 08/10 - 08:00 Sin Comenzar </td>
<td>Mainz 05 <strong> 0 | 0 </strong> Borussia Dortmund</td>
<td><a href="#" data-toggle="tooltip" title="TV en directo"><i class="fa fa-television"></i></a></td>
</tr>
<tr>
<td> <i class="fa fa-star-o"></i> 08/10 - 08:00 Sin Comenzar </td>
<td>Mainz 05 <strong> 0 | 0 </strong> Borussia Dortmund</td>
<td><a href="#" data-toggle="tooltip" title="TV en directo"><i class="fa fa-television"></i></a></td>
</tr>
<tr>
<td> <i class="fa fa-star-o"></i> 08/10 - 08:00 Sin Comenzar </td>
<td>Mainz 05 <strong> 0 | 0 </strong> Borussia Dortmund</td>
<td><a href="#" data-toggle="tooltip" title="TV en directo"><i class="fa fa-television"></i></a></td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane" id="tab_default_2">
<p>
Howdy, I'm in Tab 2.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation.
</p>
<p>
<a class="btn btn-warning" href="http://j.mp/metronictheme" target="_blank">
Click for more features...
</a>
</p>
</div>
<div class="tab-pane" id="tab_default_3">
<p>
Howdy, I'm in Tab 3.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat
</p>
<p>
<a class="btn btn-info" href="http://j.mp/metronictheme" target="_blank">
Learn more...
</a>
</p>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="row">
<div class="col text-center">
<div class="list-group list-group-horizontal">
<a href="#" class="list-group-item"><i class="fa fa-futbol-o"></i> Fútbol</a>
<a href="#" class="list-group-item"><i class="fa fa-trophy"></i> Clasificaciones de Fútbol</a>
<a href="#" class="list-group-item"> <i class="fa fa-calendar-o"></i> Calendarios de Fútbol </a>
<a href="#" class="list-group-item"><i class="fa fa-eur"></i> Apuestas de Fútbol</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
/*Cambios del Bootstrap base*/
a.list-group-item {
color: #e67f46;
}
.row.buscador {
margin-left: 0;
margin-right: 0;
padding: 0;
}
.container-fluid.dol {
padding-left: 0;
padding-right: 0;
}
.col-md-12.buscador {
margin-left: 0;
margin-right: 0;
padding: 0;
}
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #e67f46;
}
.row{
margin-top:40px;
padding: 0 10px;
}
.clickable{
cursor: pointer;
}
.panel-heading div {
margin-top: -18px;
font-size: 15px;
}
.panel-heading div span{
margin-left:5px;
}
.panel-body{
/* display: none;*/
}
.form-control2 {
display: block;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
float: left;
width:100%;
}
.panel-primary>.panel-heading {
color: #fff;
background-color: #e67f46;
border-color: #e67f46;
}
.panel-primary {
border-color: #fff;
}
.panel {
margin-bottom: 0px;
background-color: #fff;
border: 0px solid transparent;
border-radius: 0px;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.panel-body {
padding: 15px;
background-color:#e67f46;
}
/*botones inferiores deporte*/
.list-group-horizontal .list-group-item {
display: inline-block;
}
.list-group-horizontal .list-group-item {
margin-bottom: 0;
margin-left:-6px;
margin-right: 0;
}
.list-group-horizontal .list-group-item:first-child {
border-top-right-radius:0;
border-bottom-left-radius:4px;
}
.list-group-horizontal .list-group-item:last-child {
border-top-right-radius:4px;
border-bottom-left-radius:0;
}
.form-group .control-label{ display:none;}
.buscador .btn{
width:100%;}
.tabbable-panel .nav-tabs {
background-color:#e67f46;
border-bottom: 0px solid #ddd;
}
.tabbable-panel .nav-tabs a {
color: #fff;
opacity:.7;
}
.tabbable-panel .nav-tabs>li.active>a, .tabbable-panel .nav-tabs>li.active>a:hover, .tabbable-panel .nav-tabs>li.active>a:focus {
color: #fff;
background-color: #e67f46;
opacity:1;
border-top: 0px solid #ddd;
border-left: 0px solid #ddd;
border-right: 0px solid #ddd;
border-bottom:5px solid #fff;
cursor: default;
}
/**
* I don't recommend using this plugin on large tables, I just wrote it to make the demo useable. It will work fine for smaller tables
* but will likely encounter performance issues on larger tables.
*
* <input type="text" class="form-control" id="dev-table-filter" data-action="filter" data-filters="#dev-table" placeholder="Filter Developers" />
* $(input-element).filterTable()
*
* The important attributes are 'data-action="filter"' and 'data-filters="#table-selector"'
*/
(function(){
'use strict';
var $ = jQuery;
$.fn.extend({
filterTable: function(){
return this.each(function(){
$(this).on('keyup', function(e){
$('.filterTable_no_results').remove();
var $this = $(this),
search = $this.val().toLowerCase(),
target = $this.attr('data-filters'),
$target = $(target),
$rows = $target.find('tbody tr');
if(search == '') {
$rows.show();
} else {
$rows.each(function(){
var $this = $(this);
$this.text().toLowerCase().indexOf(search) === -1 ? $this.hide() : $this.show();
})
if($target.find('tbody tr:visible').size() === 0) {
var col_count = $target.find('tr').first().find('td').size();
var no_results = $('<tr class="filterTable_no_results"><td colspan="'+col_count+'">No results found</td></tr>')
$target.find('tbody').append(no_results);
}
}
});
});
}
});
$('[data-action="filter"]').filterTable();
})(jQuery);
$(function(){
// attach table filter plugin to inputs
$('[data-action="filter"]').filterTable();
$('.container').on('click', '.panel-heading span.filter', function(e){
var $this = $(this),
$panel = $this.parents('.panel');
$panel.find('.panel-body').slideToggle();
if($this.css('display') != 'none') {
$panel.find('.panel-body input').focus();
}
});
$('[data-toggle="tooltip"]').tooltip();
})
