"tabs"
Bootstrap 3.2.0 Snippet by ITVesPa

<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="page-header"> <h1>ดูรายระเอียด</h1> </div> <div class="row"> <div class="col-md-12"> <div class="panel with-nav-tabs panel-default"> <div class="panel-heading"> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1default" data-toggle="tab">วิทยาศาสตร์และเทคโนโลยี</a></li> <li><a href="#tab2default" data-toggle="tab">ครุศาสตร์</a></li> <li><a href="#tab3default" data-toggle="tab">มนุษย์ศาสตร์และสังคมศาสตร์</a></li> <li><a href="#tab4default" data-toggle="tab">วิทยาการจัดการ</a></li> <li><a href="#tab5default" data-toggle="tab">เทคโนโลยีอุตสาหกรรม</a></li> </ul> </div> <div class="panel-body"> <div class="tab-content"> <div class="tab-pane fade in active" id="tab1default"><div class="row form-group"> <div class="col-sm-3">สาขาวิชาเทคโนโลยีการเกษตร</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> <!-- หน้าคณะวิทย--> <div class="row form-group"> <div class="col-sm-3">สาขาวิชาสาธารณสุขศาสตร์</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> <div class="row form-group"> <div class="col-sm-3">สาขาวิชาชีววิทยาประยุกต์</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> <div class="row form-group"> <div class="col-sm-2">สาขาวิชาเคมี</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> <div class="row form-group"> <div class="col-sm-3">สาขาวิชาการอาหารและธุรกิจบริการ</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> <div class="row form-group"> <div class="col-sm-3">สาขาวิชาฟิสิกส์ประยุกต์</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> <div class="row form-group"> <div class="col-sm-4">สาขาวิชาอาชีวอนามัยและความปลอดภัย</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> <div class="row form-group"> <div class="col-sm-4">สาขาวิชาวิทยาศาสตร์สิ่งแวดล้อม</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> <div class="row form-group"> <div class="col-sm-4">สาขาวิชาวิทยาการคอมพิวเตอร์</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> <div class="row form-group"> <div class="col-sm-4">สาขาวิชาเทคโนโลยีสารสนเทศ</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div></div> <!-- หน้าคณะครุ--> <div class="tab-pane fade" id="tab2default"><div class="row form-group"> <div class="col-sm-3">สาขาวิชาการศึกษาปฐมวัย</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> <div class="row form-group"> <div class="col-sm-2">สาขาวิชาคณิตศาสตร์</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> <div class="row form-group"> <div class="col-sm-3">สาขาวิชาคอมพิวเตอร์ศึกษา</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> <div class="row form-group"> <div class="col-sm-5">สาขาวิชาเทคโนโลยีการศึกษาและการสอนคอมพิวเตอร์</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> <div class="row form-group"> <div class="col-sm-3">สาขาวิชาการสอนภาษาอังกฤษ</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> <div class="row form-group"> <div class="col-sm-3">สาขาวิชาการสอนภาษาไทย</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> <div class="row form-group"> <div class="col-sm-2">สาขาวิชาภาษาจีน</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> <div class="row form-group"> <div class="col-sm-3">สาขาวิชาการสอนวิทยาศาสตร์ทั่วไป</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> <div class="row form-group"> <div class="col-sm-2">สาขาวิชาสังคมศึกษา</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> </div> <!-- หน้าคณะมนุษย์--> <div class="tab-pane fade" id="tab3default"><div class="row form-group"> <div class="col-sm-3">สาขาวิชาการพัฒนาสังคม</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> <div class="row form-group"> <div class="col-sm-4">สาขาวิชาสารสนเทศศาสตร์และบรรณารักษศาสตร์</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> <div class="row form-group"> <div class="col-sm-2">สาขาวิชาดนตรีสากล</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> <div class="row form-group"> <div class="col-sm-3">สาขาวิชาภาษาอังกฤษ</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> <div class="row form-group"> <div class="col-sm-4">สาขาวิชารัฐประศาสนศาสตร์(รป.บ.)</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> <div class="row form-group"> <div class="col-sm-2">สาขาวิชาศิลปกรรม</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> <div class="row form-group"> <div class="col-sm-2">สาขาวิชานิติศาสตร์</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> <div class="row form-group"> <div class="col-sm-2">สาขาวิชารัฐศาสตร์</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> </div> <!-- หน้าคณะวิทยาการจัดการ--> <div class="tab-pane fade" id="tab4default"><div class="row form-group"> <div class="col-sm-2">สาขาวิชานิเทศศาสตร์</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> <div class="row form-group"> <div class="col-sm-4">สาขาวิชาการท่องเที่ยวและการโรงแรม</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> <div class="row form-group"> <div class="col-sm-2">สาขาวิชาการจัดการ</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> <div class="row form-group"> <div class="col-sm-2">สาขาวิชาการบัญชี</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> <div class="row form-group"> <div class="col-sm-3">สาขาวิชาการจัดการทรัพยากรมนุษย์</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> <div class="row form-group"> <div class="col-sm-2">สาขาวิชาการตลาด</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> <div class="row form-group"> <div class="col-sm-2">สาขาวิชาคอมพิวเตอร์ธุรกิจ</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> </div> <!-- หน้าคณะเทคโน--> <div class="tab-pane fade" id="tab5default"><div class="row form-group"> <div class="col-sm-3">สาขาวิศวกรรมเครื่องกลยานยนต์</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> <div class="row form-group"> <div class="col-sm-3">สาขาวิชาเทคโนโลยีอุตสาหกรรม</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> <div class="row form-group"> <div class="col-sm-3">สาขาวิชาวิศวกรรมไฟฟ้า</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> <div class="row form-group"> <div class="col-sm-3">สาขาวิชาออกแบบผลิตภัณฑ์</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> <div class="row form-group"> <div class="col-sm-4">สาขาวิชาวิศวกรรมการจัดการอุตสาหกรรม</div><br> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> <span class="progress-completed">60%</span> </div> </div> </div> </div> </div> </div> </div> </div> </div> <br/>

Related: See More


Questions / Comments: