<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 ----------> <div class="row"> <div class="col-xs-12 col-sm-offset-1 col-sm-10 col-md-offset-2 col-md-8 col-lg-offset-3 col-lg-6"> <div class="panel panel-default"> <div class="panel-heading c-list"> <span class="title">搜索数据源</span> </div> <div class="row"> <div class="col-xs-12"> <div class="input-group c-search"> <input type="text" class="form-control" id="contact-list-search"> <span class="input-group-btn"> <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search text-muted"></span></button> </span> </div> </div> </div> <ul class="list-group" id="contact-list"> <li class="list-group-item"> <div class="hidden-xs col-sm-3 col-md-2"> <i class="fa fa-bell-o fa-4x" aria-hidden="true"></i> </div> <div class="col-xs-12 col-sm-9 col-md-10"> <span class="name">凯源演示系统</span><br/> <span>杭州凯源电子的演示系统</span><br/> </div> <div class="clearfix"></div> </li> <li class="list-group-item"> <div class="hidden-xs col-sm-3 col-md-2"> <i class="fa fa-bell-o fa-4x" aria-hidden="true"></i> </div> <div class="col-xs-12 col-sm-9 col-md-10"> <span class="name">凯源演示系统</span><br/> <span>杭州凯源电子的演示系统</span><br/> </div> <div class="clearfix"></div> </li> <li class="list-group-item"> <div class="hidden-xs col-sm-3 col-md-2"> <i class="fa fa-bell-o fa-4x" aria-hidden="true"></i> </div> <div class="col-xs-12 col-sm-9 col-md-10"> <span class="name">凯源演示系统</span><br/> <span>杭州凯源电子的演示系统</span><br/> </div> <div class="clearfix"></div> </li> <li class="list-group-item"> <div class="hidden-xs col-sm-3 col-md-2"> <i class="fa fa-bell-o fa-4x" aria-hidden="true"></i> </div> <div class="col-xs-12 col-sm-9 col-md-10"> <span class="name">凯源演示系统</span><br/> <span>杭州凯源电子的演示系统</span><br/> </div> <div class="clearfix"></div> </li> <li class="list-group-item"> <div class="hidden-xs col-sm-3 col-md-2"> <i class="fa fa-bell-o fa-4x" aria-hidden="true"></i> </div> <div class="col-xs-12 col-sm-9 col-md-10"> <span class="name">凯源演示系统</span><br/> <span>杭州凯源电子的演示系统</span><br/> </div> <div class="clearfix"></div> </li> <li class="list-group-item"> <div class="hidden-xs col-sm-3 col-md-2"> <i class="fa fa-bell-o fa-4x" aria-hidden="true"></i> </div> <div class="col-xs-12 col-sm-9 col-md-10"> <span class="name">凯源演示系统</span><br/> <span>杭州凯源电子的演示系统</span><br/> </div> <div class="clearfix"></div> </li> <li class="list-group-item"> <div class="hidden-xs col-sm-3 col-md-2"> <i class="fa fa-bell-o fa-4x" aria-hidden="true"></i> </div> <div class="col-xs-12 col-sm-9 col-md-10"> <span class="name">凯源演示系统</span><br/> <span>杭州凯源电子的演示系统</span><br/> </div> <div class="clearfix"></div> </li> </ul> </div> </div> </div>

@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css); body { padding: 30px 0px 60px; } .panel > .list-group .list-group-item:first-child { /*border-top: 1px solid rgb(204, 204, 204);*/ } @media (max-width: 767px) { .visible-xs { display: inline-block !important; } .block { display: block !important; width: 100%; height: 1px !important; } } #back-to-bootsnipp { position: fixed; top: 10px; right: 10px; } .c-search > .form-control { border-radius: 0px; border-width: 0px; border-bottom-width: 1px; font-size: 1.3em; padding: 12px 12px; height: 44px; outline: none !important; } .c-search > .form-control:focus { outline:0px !important; -webkit-appearance:none; box-shadow: none; } .c-search > .input-group-btn .btn { border-radius: 0px; border-width: 0px; border-left-width: 1px; border-bottom-width: 1px; height: 44px; } .c-list { padding: 0px; min-height: 44px; } .title { display: inline-block; font-size: 1.7em; font-weight: bold; padding: 5px 15px; } ul.c-controls { list-style: none; margin: 0px; min-height: 44px; } ul.c-controls li { margin-top: 8px; float: left; } ul.c-controls li a { font-size: 1.7em; padding: 11px 10px 6px; } ul.c-controls li a i { min-width: 24px; text-align: center; } ul.c-controls li a:hover { background-color: rgba(51, 51, 51, 0.2); } .c-toggle { font-size: 1.7em; } .name { font-size: 1.7em; font-weight: 700; } .c-info { padding: 5px 10px; font-size: 1.25em; }

$(function () { /* BOOTSNIPP FULLSCREEN FIX */ if (window.location == window.parent.location) { $('#back-to-bootsnipp').removeClass('hide'); } $('[data-toggle="tooltip"]').tooltip(); $('#fullscreen').on('click', function(event) { event.preventDefault(); window.parent.location = "http://bootsnipp.com/iframe/4l0k2"; }); $('a[href="#cant-do-all-the-work-for-you"]').on('click', function(event) { event.preventDefault(); $('#cant-do-all-the-work-for-you').modal('show'); }) $('[data-command="toggle-search"]').on('click', function(event) { event.preventDefault(); $(this).toggleClass('hide-search'); if ($(this).hasClass('hide-search')) { $('.c-search').closest('.row').slideUp(100); }else{ $('.c-search').closest('.row').slideDown(100); } }) $('#contact-list').searchable({ searchField: '#contact-list-search', selector: 'li', childSelector: '.col-xs-12', show: function( elem ) { elem.slideDown(100); }, hide: function( elem ) { elem.slideUp( 100 ); } }) });