Bootstrap Snippet Panel Headers using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="container">
<div class="row">
<div class="col-md-12">    
<nav id="navbar" class="navbar navbar-default yamm" role="navigation">
        <div class="navbar-collapse collapse" id="navbar-collapsible">
            <div class="navbar-btn navbar-left">
                <button type="button" class="btn btn-nav btn-default dropdown-toggle" data-toggle="dropdown">
                    <span class="fa fa-bars"></span>
                    <span class="nav-label">·Menu</span>
                </button>
                <ul class="dropdown-menu  col-lg-12">
                    <li class="">
                        <!--#INCLUDE FILE="yamm-content.asp"-->
                    </li>
                </ul>
                <button type="button" id="dashboard" class="btn btn-nav btn-default active" href="/sergiotest/support/tixdashboard/index.asp"> 
                    <span class="fa fa-dashboard nav-icon"></span> 
                    <span class="nav-label">Dashboard</span> 
                </button>
            </div>
                        
            <div class="navbar-btn navbar-right">
            
                <div class="dropdown" id="preferences-dropdown">
                    
                    <button type="button" class="btn btn-nav btn-default dropdown-toggle" data-toggle="dropdown">
                        <span class="glyphicon glyphicon-cog"></span>
                        <span class="nav-label">·Preferences</span>
                    </button>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css);
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);
    /* remove outline and underscore from buttons - nasty things I hate 'em*/
    
    a.btn           {outline:0px !important; -webkit-appearance:none;   text-decoration:none;} 
    a.btn:active    {outline:0px !important; -webkit-appearance:none;   text-decoration:none;} 
    a.btn:focus     {outline:0px !important; -webkit-appearance:none;   text-decoration:none;}
    
    button.btn:active {outline:0px !important; -webkit-appearance:none;   text-decoration:none; }
    button.btn:focus  {outline:0px !important; -webkit-appearance:none;   text-decoration:none; }
    button.btn:active {outline:0px !important; -webkit-appearance:none;   text-decoration:none; }
    button.btn:focus  {outline:0px !important; -webkit-appearance:none;  text-decoration:none; }
     
    ul.dropdown-menu li a:active {outline:0px !important; -webkit-appearance:none;  text-decoration:none; }
    ul.dropdown-menu li a:focus  {outline:0px !important; -webkit-appearance:none;  text-decoration:none; }
    ul.nav-tabs li a:active  {outline:0px !important; -webkit-appearance:none;  text-decoration:none;}
    ul.nav-tabs li a:focus   {outline:0px !important; -webkit-appearance:none;  text-decoration:none;}
    
    /* navbar search */
    nav#navbar form.navbar-form .input-group-btn ul.dropdown-menu { min-width: 25px;}
    nav#navbar form.navbar-form div.form-group div.input-group div.input-group input.form-control { width: 100%;}   
    nav#navbar form.navbar-form div.form-group div.input-group div.input-group input.form-control { color: rgb(69, 76, 84); border-width: 3px; border-color: rgb(189, 195, 199); border-radius: 2px; box-shadow: none; }
    nav#navbar form.navbar-form div.form-group div.input-group div.input-group input.form-control:focus { border-color: rgb(22, 160, 133); outline: 0px none; box-shadow: none; }
    .ui-autocomplete { max-height: 400px; overflow-y: auto; /* prevent horizontal scrollbar */ overflow-x: hidden; }
    .ui-autocomplete .ui-menu-item > a:hover,
    .ui-autocomplete .ui-menu-item > a.ui-state-hover,
    .ui-autocomplete .ui-menu-item > a.ui-state-active,
    .ui-autocomplete .ui-menu-item > a.ui-state-focus 
    { color: #ffffff; text-decoration: none; background-color: #0088cc; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; background-image: none; color: #ffffff; text-decoration: none; background-color: #0088cc; }
            
            
    /* navbar buttons */
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Panel Headers"
Bootstrap 3.2.0 Snippet by escapedlion

Related: See More

Questions / Comments:

"Panel Headers" Bootstrap 3.2.0 Snippet by escapedlion

Related: See More

Questions / Comments:

"Panel Headers"
Bootstrap 3.2.0 Snippet by escapedlion