"Circular Bootstrap tabs "
Bootstrap 3.1.0 Snippet by ntd187

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <section style="background:#efefe9;"> <div class="container"> <form role="form" class="form-horizontal" action="https://docs.google.com/forms/d/1fcp9P6EDqzSga_-XG856qiVxl5EvrnDn1l7RLe_oQJo/formResponse?embedded=true" method="POST" id="ss-form" target="hidden_iframe" onsubmit="submitted=true;" style="margin:0 auto;overflow:hidden;max-width:942px;"> <div class="row"> <div class="board"> <!-- <h2>Welcome to IGHALO!<sup>™</sup></h2>--> <div class="board-inner"> <ul class="nav nav-tabs" id="myTab"> <div class="liner"></div> <li class="active"> <a href="#home" data-toggle="tab" title="Chọn mua sản phẩm"> <span class="round-tabs one"> <i class="glyphicon glyphicon-shopping-cart"></i> </span> </a></li> <li><a href="#profile" data-toggle="tab" title="Thông tin khách hàng"> <span class="round-tabs two"> <i class="glyphicon glyphicon-user"></i> </span> </a> </li> <li class="disabled"><a href="#messages" data-toggle="tab" title="Hình thức giao hàng"> <span class="round-tabs three"> <i class="glyphicon glyphicon-gift"></i> </span> </a> </li> <li class="disabled"><a href="#settings" data-toggle="tab" title="blah blah"> <span class="round-tabs four"> <i class="glyphicon glyphicon-comment"></i> </span> </a></li> <li class="disabled"><a href="#doner" data-toggle="tab" title="completed"> <span class="round-tabs five"> <i class="glyphicon glyphicon-ok"></i> </span> </a> </li> </ul></div> <div class="tab-content"> <div class="tab-pane fade in active" id="home"> <h3 class="head text-center">Chọn mua sản phẩm</h3> <!-- Multiple Checkboxes --> <div class="form-group"> <label class="col-md-4 control-label" for="entry.1202217743">Gói sản phẩm</label> <div class="col-md-6"> <div class="checkbox"> <label for="entry.1202217743-0"> <input type="checkbox" name="entry.1202217743" id="entry.1202217743-0" value="250K"> 1. <strong>DVD Course</strong> (DVD): <strong>250.000 VNĐ</strong> </label> </div> <div class="checkbox"> <label for="entry.1202217743-1"> <input type="checkbox" name="entry.1202217743" id="entry.1202217743-1" value="590K"> 2. <strong>Master Course</strong> (DVD kèm bộ SGK): <strong>590.000 VNĐ</strong> </label> </div> <div class="checkbox"> <label for="entry.1202217743-2"> <input type="checkbox" name="entry.1202217743" id="entry.1202217743-2" value="370K"> 3. <strong>Student Course</strong> (DVD kèm bộ SGK): <strong>370.000 VNĐ</strong> </label> </div> <span class="help-block"> SGK (sách giáo khoa - sách in rời dùng kèm đĩa dvd)<br/>DVD (đĩa gồm các bài học dưới dạng audio/video/ebook) </span> </div> </div> <p class="text-center"> <a href="" class="btn btn-success btn-outline-rounded green"> start using bootsnipp <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a> </p> </div> <div class="tab-pane fade" id="profile"> <h3 class="head text-center">Thông tin khách hàng</h3> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="entry.303097655">Họ tên</label> <div class="col-md-5"> <div class="input-group"> <input id="entry.303097655" name="entry.303097655" type="text" placeholder="" class="form-control input-md" required=""/> <span class="input-group-addon danger checker"><span class="glyphicon glyphicon-remove"></span></span> </div> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="entry.232874689">Năm sinh</label> <div class="col-md-2"> <div class="input-group"> <input id="entry.232874689" name="entry.232874689" type="text" placeholder="" class="form-control input-md" required=""/> <span class="input-group-addon danger checker"><span class="glyphicon glyphicon-remove"></span></span> </div> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="entry.131030091">Nghề nghiệp</label> <div class="col-md-5"> <div class="input-group"> <select id="entry.131030091" name="entry.131030091" class="form-control" required=""> <option></option> <option value="Sinh viên / Học sinh">Sinh viên / Học sinh</option> <option value="Nhân viên văn phòng">Nhân viên văn phòng</option> <option value="Cán bộ / công chức nhà nước">Cán bộ / công chức nhà nước</option> <option value="Công nhân nhà máy xí nghiệp">Công nhân nhà máy xí nghiệp</option> <option value="Chuyên viên / Kỹ sư / Quản lý">Chuyên viên / Kỹ sư / Quản lý</option> <option value="Giáo viên / Giảng viên / Giáo sư">Giáo viên / Giảng viên / Giáo sư</option> <option value="Du lịch / Nhà hàng / Khách sạn">Du lịch / Nhà hàng / Khách sạn</option> <option value="Giám đốc / Chủ doanh nghiệp">Giám đốc / Chủ doanh nghiệp</option> <option value="Bác sĩ / Y tá">Bác sĩ / Y tá</option> <option value="Phiên dịch viên">Phiên dịch viên</option> <option value="Báo chí / Quảng cáo / Truyền thông">Báo chí / Quảng cáo / Truyền thông</option> <option value="Chứng khoán / Bất động sản">Chứng khoán / Bất động sản</option> <option value="Ngân hàng / Tín dụng">Ngân hàng / Tín dụng</option> <option value="Luật sư">Luật sư</option> <option value="Giám đốc / Chủ doanh nghiệp">Giám đốc / Chủ doanh nghiệp</option> <option value="Nghề nghiệp tự do">Nghề nghiệp tự do</option> </select> <span class="input-group-addon danger checker"><span class="glyphicon glyphicon-remove"></span></span> </div> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="entry.2106562909">Nơi công tác</label> <div class="col-md-4"> <div class="input-group"> <input id="entry.2106562909" name="entry.2106562909" type="text" placeholder="" class="form-control input-md"/> <span class="input-group-addon info"><span class="glyphicon glyphicon-asterisk"></span></span> </div> <span class="help-block">Công ty / Trường học</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="entry.86576037">E-mail</label> <div class="col-md-4"> <div class="input-group"> <span class="input-group-addon">@</span> <input id="entry.86576037" name="entry.86576037" type="text" placeholder="" class="form-control input-md" required=""/> <span class="input-group-addon danger checker"><span class="glyphicon glyphicon-remove"></span></span> </div> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="entry.1810673410">Điện thoại</label> <div class="col-md-4"> <div class="input-group"> <span class="input-group-addon">#</span> <input id="entry.1810673410" name="entry.1810673410" type="text" placeholder="" class="form-control input-md" required=""/> <span class="input-group-addon danger checker"><span class="glyphicon glyphicon-remove"></span></span> </div> </div> </div> <p class="text-center"> <a href="" class="btn btn-success btn-outline-rounded green"> create your profile <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a> </p> </div> <div class="tab-pane fade" id="messages"> <h3 class="head text-center">Hình thức giao hàng</h3> <p class="narrow text-center"> Từ ngày 1/7/2014 chúng tôi miễn phí vận chuyển 64 tỉnh/thành trên toàn quốc. Đối với trung tâm và ngoại ô thành thị thời gian vận chuyển có thể chậm hơn 1-2 ngày. Đối với các vùng sâu vùng xa (thôn/quê/xã/ấp) thời gian vận chuyển có thể chậm hơn 2-3 ngày. Thời gian giao hàng 9h đến 18h từ thứ 2 đến thứ 6 (một số nơi vẫn giao hàng ngày thứ 7 và CN) </p> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="entry.1084004543">Tỉnh / Thành</label> <div class="col-md-5"> <div class="input-group"> <select id="entry.1084004543" name="entry.1084004543" class="form-control" required=""> <option></option> <option value="An Giang">An Giang</option> <option value="Bà Rịa - Vũng Tàu">Bà Rịa - Vũng Tàu</option> <option value="Bạc Liêu">Bạc Liêu</option> <option value="Bắc Giang">Bắc Giang</option> <option value="Bắc Kạn">Bắc Kạn</option> <option value="Bắc Ninh">Bắc Ninh</option> <option value="Bến Tre">Bến Tre</option> <option value="Bình Dương">Bình Dương</option> <option value="Bình Định">Bình Định</option> <option value="Bình Phước">Bình Phước</option> <option value="Bình Thuận">Bình Thuận</option> <option value="Cà Mau">Cà Mau</option> <option value="Cao Bằng">Cao Bằng</option> <option value="Cần Thơ">Cần Thơ</option> <option value="Đà Nẵng">Đà Nẵng</option> <option value="Đắk Lắk">Đắk Lắk</option> <option value="Đắk Nông">Đắk Nông</option> <option value="Điện Biên">Điện Biên</option> <option value="Đồng Nai">Đồng Nai</option> <option value="Đồng Tháp">Đồng Tháp</option> <option value="Gia Lai">Gia Lai</option> <option value="Hà Giang">Hà Giang</option> <option value="Hà Nam">Hà Nam</option> <option value="Hà Nội">Hà Nội</option> <option value="Hà Tĩnh">Hà Tĩnh</option> <option value="Hải Dương">Hải Dương</option> <option value="Hải Phòng">Hải Phòng</option> <option value="Hậu Giang">Hậu Giang</option> <option value="Hòa Bình">Hòa Bình</option> <option value="Hồ Chí Minh">Hồ Chí Minh</option> <option value="Hưng Yên">Hưng Yên</option> <option value="Khánh Hòa">Khánh Hòa</option> <option value="Kiên Giang">Kiên Giang</option> <option value="Kon Tum">Kon Tum</option> <option value="Lai Châu">Lai Châu</option> <option value="Lạng Sơn">Lạng Sơn</option> <option value="Lào Cai">Lào Cai</option> <option value="Lâm Đồng">Lâm Đồng</option> <option value="Long An">Long An</option> <option value="Nam Định">Nam Định</option> <option value="Nghệ An">Nghệ An</option> <option value="Ninh Bình">Ninh Bình</option> <option value="Ninh Thuận">Ninh Thuận</option> <option value="Phú Thọ">Phú Thọ</option> <option value="Phú Yên">Phú Yên</option> <option value="Quảng Bình">Quảng Bình</option> <option value="Quảng Nam">Quảng Nam</option> <option value="Quảng Ngãi">Quảng Ngãi</option> <option value="Quảng Ninh">Quảng Ninh</option> <option value="Quảng Trị">Quảng Trị</option> <option value="Sóc Trăng">Sóc Trăng</option> <option value="Sơn La">Sơn La</option> <option value="Tây Ninh">Tây Ninh</option> <option value="Thái Bình">Thái Bình</option> <option value="Thái Nguyên">Thái Nguyên</option> <option value="Thanh Hóa">Thanh Hóa</option> <option value="Thừa Thiên Huế">Thừa Thiên Huế</option> <option value="Tiền Giang">Tiền Giang</option> <option value="Trà Vinh">Trà Vinh</option> <option value="Tuyên Quang">Tuyên Quang</option> <option value="Vĩnh Long">Vĩnh Long</option> <option value="Vĩnh Phúc">Vĩnh Phúc</option> <option value="Yên Bái">Yên Bái</option> </select> <span class="input-group-addon danger checker"><span class="glyphicon glyphicon-remove"></span></span> </div> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="textarea">Địa chỉ giao hàng</label> <div class="col-md-5"> <div class="input-group"> <textarea class="form-control" id="entry.1789584506" name="entry.1789584506" required="" rows="5"></textarea> <span class="input-group-addon danger checker"><span class="glyphicon glyphicon-remove"></span></span> </div> <span class="help-block">Quý khách vui lòng nhập địa chỉ cụ thể và chính xác, có thể nhập địa chỉ (nhà / công ty / trường), trong trường hợp quý khách hay đi vắng đột xuất thì nhập thêm thông tin (họ tên / địa chỉ / điện thoại) của người nhận hộ (người thân / bạn bè) </span> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="entry.1531570916">Khu vực giao hàng</label> <div class="col-md-5"> <div class="input-group"> <select id="entry.1531570916" name="entry.1531570916" class="form-control" required=""> <option></option> <option value="GH-SG">Tp.HCM : giao hàng nhanh trong ngày</option> <option value="GH-HN">Hà Nội : chuyển phát nhanh bưu điện từ 2-3 ngày làm việc</option> <option value="GH-ĐN">Đà Nẵng : chuyển phát nhanh bưu điện từ 2-4 ngày làm việc</option> <option value="GH-HP">Hải Phòng : chuyển phát nhanh bưu điện từ 2-4 ngày làm việc</option> <option value="GH-NK">Nơi khác : chuyển phát nhanh bưu điện từ 3-5 ngày làm việc</option> </select> <span class="input-group-addon danger checker"><span class="glyphicon glyphicon-remove"></span></span> </div> <span class="help-block">Ngày làm việc không tính thứ 7 và CN</span> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="entry.848125008">Thời gian giao hàng</label> <div class="col-md-5"> <div class="input-group"> <span class="input-group-addon">Tp.HCM:</span> <select id="entry.848125008" name="entry.848125008" class="form-control"> <option value="working">Toàn giờ hành chính</option> <option value="morning">Buổi sáng 9h - 12h</option> <option value="afternoon">Buổi chiều 13h - 17h</option> <option value="evening">Buổi tối 18h - 20h</option> <option value="contact">Liên hệ trước khi giao</option> </select> <span class="input-group-addon info checker"><span class="glyphicon glyphicon-asterisk"></span></span> </div> <span class="help-block">Lựa chọn thời gian giao hàng chỉ áp dụng các khu vực nội & ngoại thành Tp.HCM, còn các Tỉnh / Thành khác nhân viên bưu điện sẽ giao hàng toàn giờ hành chính.</span> </div> </div> <p class="text-center"> <a href="" class="btn btn-success btn-outline-rounded green"> start using bootsnipp <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a> </p> </div> <div class="tab-pane fade" id="settings"> <h3 class="head text-center">Drop comments!</h3> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="entry.2100615142">Bạn tìm thấy trang web chúng tôi từ đâu?</label> <div class="col-md-4"> <div class="input-group"> <select id="entry.2100615142" name="entry.2100615142" class="form-control" required=""> <option></option> <option value="Google">Tìm kiếm Google</option> <option value="Social">Mạng xã hội</option> <option value="Forum">Diễn đàn</option> <option value="Comment">Bình luận</option> <option value="News">Báo điện tử</option> <option value="Friend">Bạn bè giới thiệu</option> <option value="Website">Trang web khác</option> </select> <span class="input-group-addon danger checker"><span class="glyphicon glyphicon-remove"></span></span> </div> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="entry.1962940934">Bạn tìm hiểu Effortless English từ khi nào?</label> <div class="col-md-4"> <div class="input-group"> <select id="entry.1962940934" name="entry.1962940934" class="form-control" required=""> <option></option> <option value="today">Mới hôm nay</option> <option value="2-3 days">2-3 ngày trước</option> <option value="1-2 weeks">1-2 tuần trước</option> <option value="1 month">Hơn 1 tháng</option> <option value="2-3 months">2-3 tháng</option> <option value="6 months">Trên 6 tháng</option> <option value="1 Year">1 năm trước</option> <option value="Long time">Từ rất lâu</option> </select> <span class="input-group-addon danger checker"><span class="glyphicon glyphicon-remove"></span></span> </div> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="entry.1602814276">Số điện thoại đặt hàng</label> <div class="col-md-4"> <div class="input-group"> <span class="input-group-addon">ĐTDĐ:</span> <input id="entry.1602814276" name="entry.1602814276" type="text" placeholder="" class="form-control input-md" required=""/> <span class="input-group-addon danger checker"><span class="glyphicon glyphicon-remove"></span></span> </div> <span class="help-block">Xác nhận lại số điện thoại liên hệ của người đặt hàng</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="entry.1696766208">Số chứng minh đặt hàng</label> <div class="col-md-4"> <div class="input-group"> <span class="input-group-addon">CMND:</span> <input id="entry.1696766208" name="entry.1696766208" type="text" placeholder="" class="form-control input-md"/> <span class="input-group-addon info checker"><span class="glyphicon glyphicon-asterisk"></span></span> </div> <span class="help-block">Nếu KH không thuộc Tp.HCM nhập thêm số CMND</span> </div> </div> <!-- Multiple Checkboxes --> <div class="form-group"> <div class="col-md-12"> <div class="checkbox"> <label for="entry.1892966482-0"> <input type="checkbox" name="entry.1892966482" id="entry.1892966482-0" value="OK" required=""> Tôi đã tìm hiểu kỹ về thông tin sản phẩm và đồng ý đặt mua gói sản phẩm này </label> </div> </div> </div> <p class="narrow text-center"> Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim. </p> <p class="text-center"> <a href="" class="btn btn-success btn-outline-rounded green"> start using bootsnipp <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a> </p> </div> <div class="tab-pane fade" id="doner"> <div class="text-center"> <i class="img-intro icon-checkmark-circle"></i> </div> <h3 class="head text-center">thanks for staying tuned! <span style="color:#f48260;">♥</span> Bootstrap</h3> <p class="narrow text-center"> Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim. </p> </div> <div class="clearfix"></div> </div> </div> </div> </form> </div> </section>
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700); /* written by riliwan balogun http://www.facebook.com/riliwan.rabo*/ .board{ width: 75%; margin: 60px auto; height: 500px; background: #fff; /*box-shadow: 10px 10px #ccc,-10px 20px #ddd;*/ } .board .nav-tabs { position: relative; /* border-bottom: 0; */ /* width: 80%; */ margin: 40px auto; margin-bottom: 0; box-sizing: border-box; } .board > div.board-inner{ background: #fafafa url(http://subtlepatterns.com/patterns/geometry2.png); background-size: 30%; } p.narrow{ width: 60%; margin: 10px auto; } .liner{ height: 2px; background: #ddd; position: absolute; width: 80%; margin: 0 auto; left: 0; right: 0; top: 50%; z-index: 1; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: #555555; cursor: default; /* background-color: #ffffff; */ border: 0; border-bottom-color: transparent; } span.round-tabs{ width: 70px; height: 70px; line-height: 70px; display: inline-block; border-radius: 100px; background: white; z-index: 2; position: absolute; left: 0; text-align: center; font-size: 25px; } span.round-tabs.one{ color: rgb(34, 194, 34);border: 2px solid rgb(34, 194, 34); } li.active span.round-tabs.one{ background: #fff !important; border: 2px solid #ddd; color: rgb(34, 194, 34); } span.round-tabs.two{ color: #febe29;border: 2px solid #febe29; } li.active span.round-tabs.two{ background: #fff !important; border: 2px solid #ddd; color: #febe29; } span.round-tabs.three{ color: #3e5e9a;border: 2px solid #3e5e9a; } li.active span.round-tabs.three{ background: #fff !important; border: 2px solid #ddd; color: #3e5e9a; } span.round-tabs.four{ color: #f1685e;border: 2px solid #f1685e; } li.active span.round-tabs.four{ background: #fff !important; border: 2px solid #ddd; color: #f1685e; } span.round-tabs.five{ color: #999;border: 2px solid #999; } li.active span.round-tabs.five{ background: #fff !important; border: 2px solid #ddd; color: #999; } .nav-tabs > li.active > a span.round-tabs{ background: #fafafa; } .nav-tabs > li { width: 20%; } /*li.active:before { content: " "; position: absolute; left: 45%; opacity:0; margin: 0 auto; bottom: -2px; border: 10px solid transparent; border-bottom-color: #fff; z-index: 1; transition:0.2s ease-in-out; }*/ li:after { content: " "; position: absolute; left: 45%; opacity:0; margin: 0 auto; bottom: 0px; border: 5px solid transparent; border-bottom-color: #ddd; transition:0.1s ease-in-out; } li.active:after { content: " "; position: absolute; left: 45%; opacity:1; margin: 0 auto; bottom: 0px; border: 10px solid transparent; border-bottom-color: #ddd; } .nav-tabs > li a{ width: 70px; height: 70px; margin: 20px auto; border-radius: 100%; padding: 0; } .nav-tabs > li a:hover{ background: transparent; } .tab-content{ } .tab-pane{ position: relative; padding-top: 50px; } .tab-content .head{ font-family: 'Roboto Condensed', sans-serif; font-size: 25px; text-transform: uppercase; padding-bottom: 10px; } .btn-outline-rounded{ padding: 10px 40px; margin: 20px 0; border: 2px solid transparent; border-radius: 25px; } .btn.green{ background-color:#5cb85c; /*border: 2px solid #5cb85c;*/ color: #ffffff; } @media( max-width : 585px ){ .board { width: 90%; height:auto !important; } span.round-tabs { font-size:16px; width: 50px; height: 50px; line-height: 50px; } .tab-content .head{ font-size:20px; } .nav-tabs > li a { width: 50px; height: 50px; line-height:50px; } li.active:after { content: " "; position: absolute; left: 35%; } .btn-outline-rounded { padding:12px 20px; } }
$(function(){ $('a[title]').tooltip(); $('.btn-submit').on('click', function(e) { var formname = $(this).attr('name'); var tabname = $(this).attr('href'); if ($('#' + formname)[0].checkValidity()) { /* Only works in Firefox/Chrome need polyfill for IE9, Safari. http://afarkas.github.io/webshim/demos/ */ e.preventDefault(); $('ul.nav li a[href="' + tabname + '"]').parent().removeClass('disabled'); $('ul.nav li a[href="' + tabname + '"]').trigger('click'); } }); $('ul.nav li').on('click', function(e) { if ($(this).hasClass('disabled')) { e.preventDefault(); return false; } }); });

Related: See More


Questions / Comments: