Bootstrap Left Panel Menu

  1. <html>  
  2.   
  3. <head>  
  4.     <title></title>  
  5.     <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">  
  6.     <link href="css/style.css" rel="stylesheet" type="text/css">  
  7.     <script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script>  
  8.     <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  9.     <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">  
  10.     <link rel="stylesheet" type="text/css" media="screen" href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">  
  11.     <script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">  
  12.     </script>  
  13.     <script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">  
  14.     </script>  
  15.     <script type="text/javascript">  
  16.         $(function() {  
  17.             $('#datetimepicker3').datetimepicker({  
  18.                 pickDate: false  
  19.             });  
  20.         });  
  21.     </script>  
  22.     <style type="text/css">  
  23.         .add-on {  
  24.             height: 30px !important;  
  25.             cursor: pointer !important;  
  26.         }  
  27.           
  28.         .container {  
  29.             margin-left: 0px !important;  
  30.         }  
  31.     </style>  
  32. </head>  
  33.   
  34. <body>  
  35.     <div class="container">  
  36.         <div class="col-sm-2">  
  37.             <nav class="nav-sidebar">  
  38.                 <ul class="nav tabs">  
  39.                     <li class="active"><a href="#tab1" data-toggle="tab">Attendence</a></li>  
  40.                     <li class=""><a href="#tab2" data-toggle="tab">start time</a></li>  
  41.                     <li class=""><a href="#tab3" data-toggle="tab">Training materials</a></li>  
  42.                 </ul>  
  43.             </nav>  
  44.         </div>  
  45.         <div class="tab-content">  
  46.             <div class="tab-pane active text-style" id="tab1">  
  47.                 <h2><u>Attendence</u></h2>  
  48.                 <div id="chk" style="overflow: auto; max-height: 500px;"> <input type="hidden" value="2810000157" id="hdnschdateid"> <input type="CHECKBOX" value="2070007641" name="emp"> Mr. KUMAR (11035)<br> <input type="CHECKBOX" value="2070007800" name="emp"> Mr. D K (11433)<br> <input type="CHECKBOX" value="2070009953" name="emp"> Mr. KUMAR TIWARI (14887)<br> <input type="CHECKBOX" value="2070009966" name="emp"> Mr. KUMAR KORI (14900)<br> <input type="CHECKBOX" value="2070011131" name="emp"> Mr. SHARMA (16229)<br> <input type="CHECKBOX" value="2070012799" name="emp"> Mr. BABUSANAP (16402)<br> <input type="CHECKBOX" value="2070012950" name="emp"> Mr. SinghBohra (17570)<br> <input type="CHECKBOX" value="2070013204" name="emp"> Mr. Nanthakumar (17856)<br> <input type="CHECKBOX" value="2070015457" name="emp"> Mr. Sharma (20117)<br> <input type="CHECKBOX" value="2070015604" name="emp"> Mr. Khan Savanur (18490)<br> <input type="CHECKBOX" value="2070016345" name="emp"> Mr. Devtalla (20158)<br> <input type="CHECKBOX" value="2070018649" name="emp"> Mr. Varshney (20869)<br> <input type="CHECKBOX" value="2070018923" name="emp"> Mr. Johri (21116)<br> <input type="CHECKBOX" value="2070019348" name="emp"> Mr. Gaikwad (21568)<br> <input type="CHECKBOX" value="2070019796" name="emp"> Mr. Khanduri (22010)<br> <input type="CHECKBOX" value="2070019921" name="emp"> Mr. Chauhan (22132)<br> <input type="CHECKBOX" value="2070019953" name="emp"> Mr. Sahu (22164)<br> <input type="CHECKBOX" value="2070007641" name="emp"> Mr. KUMAR (11035)<br> <input type="CHECKBOX" value="2070007800" name="emp"> Mr. D K (11433)<br> <input type="CHECKBOX" value="2070009953" name="emp"> Mr. KUMAR TIWARI (14887)<br> <input type="CHECKBOX" value="2070009966" name="emp"> Mr. KUMAR KORI (14900)<br> <input type="CHECKBOX" value="2070011131" name="emp"> Mr. SHARMA (16229)<br> <input type="CHECKBOX" value="2070012799" name="emp"> Mr. BABUSANAP (16402)<br> <input type="CHECKBOX" value="2070012950" name="emp"> Mr. SinghBohra (17570)<br> <input type="CHECKBOX" value="2070013204" name="emp"> Mr. Nanthakumar (17856)<br> <input type="CHECKBOX" value="2070015457" name="emp"> Mr. Sharma (20117)<br> <input type="CHECKBOX" value="2070015604" name="emp"> Mr. Khan Savanur (18490)<br> <input type="CHECKBOX" value="2070016345" name="emp"> Mr. Devtalla (20158)<br> <input type="CHECKBOX" value="2070018649" name="emp"> Mr. Varshney (20869)<br> <input type="CHECKBOX" value="2070018923" name="emp"> Mr. Johri (21116)<br> <input type="CHECKBOX" value="2070019348" name="emp"> Mr. Gaikwad (21568)<br> <input type="CHECKBOX" value="2070019796" name="emp"> Mr. Khanduri (22010)<br> <input type="CHECKBOX" value="2070019921" name="emp"> Mr. Chauhan (22132)<br> <input type="CHECKBOX" value="2070019953" name="emp"> Mr. Sahu (22164)<br> </div>  
  49.                 <div class="col-md-12"> <a id="btnsubmit" style="margin-left: 59em;" onclick="attendencesubmit()" class="btn btn-primary" href="#">submit</a> </div>  
  50.             </div>  
  51.             <div class="tab-pane text-style" id="tab2">  
  52.                 <h4>start time</h4>  
  53.                 <div id="datetimepicker3" class="input-append"> <input data-format="hh:mm" class="form-control" style="height:30px; width:20%;" type="text" /> <span class="add-on">  
  54.   
  55. <i data-time-icon="icon-time" data-date-icon="icon-calendar">  
  56.   
  57. </i>  
  58.   
  59. </span> </div>  
  60.                 <h4> Remarks</h4> <input type="text" style="height:40px; width:50%;" placeholder="Remarks" class="form-control" /> </div>  
  61.             <div class="tab-pane text-style" id="tab3">  
  62.                 <h2>Training materials</h2>  
  63.                 <div class="list-group"> <a href="#" style="cursor:pointer" class="list-group-item list-group-item-success">Model,view,controller concept</a> <a href="#" style="cursor:pointer" class="list-group-item list-group-item-info">Action filter</a> <a href="#" style="cursor:pointer" class="list-group-item list-group-item-warning">Routing</a> <a href="#" style="cursor:pointer" class="list-group-item list-group-item-danger">Strating with EF</a> </div>  
  64.             </div>  
  65.         </div>  
  66.     </div>  
  67. </body>  
  68.   
  69. </html>