Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"AMARAA TEST 2"
Bootstrap 3.3.0 Snippet by
MisterTobi
3.3.0
jQuery
Preview
HTML
CSS
JS
View Full Screen
Forked from
Fork
Fork this
Parent
593
 
0 Fav
Post to Facebook
Tweet this
<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 ----------> <section style="background:#ccc;"> <div class="container"> <div class="row"> <div class="board"> <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="товч 1"> <span class="round-tabs one"> <i class="glyphicon glyphicon-dashboard"></i> </span> </a></li> <li><a href="#profile" data-toggle="tab" title="товч 2"> <span class="round-tabs two"> <i class="glyphicon glyphicon-flash"></i> </span> </a> </li> <li><a href="#messages" data-toggle="tab" title="товч 3"> <span class="round-tabs three"> <i class="glyphicon glyphicon-tint"></i> </span> </a> </li> <li><a href="#settings" data-toggle="tab" title="товч 4"> <span class="round-tabs four"> <i class="glyphicon glyphicon-stats"></i> </span> </a></li> <li><a href="#doner" data-toggle="tab" title="товч 5"> <span class="round-tabs five"> <i class="glyphicon glyphicon-question-sign"></i> </span> </a> </li> </ul></div> <div class="tab-content"> <div class="tab-pane fade in active" id="home"> <h3 class="head text-center">ФОРМ ТУРШИЛТ <span style="color:#f48260;"><sup>™</sup></span></h3> <p class="narrow text-center"> ТЕКСТ... </p> <p class="text-center"> <a href="" class="btn btn-success btn-outline-rounded green"> АНХААР ТОВЧЛУУР<span style="margin-left:10px;" class="glyphicon glyphicon-warning-sign"></span></a> <a href="" class="btn btn-success btn-outline-rounded green"> ДООШ ТОВЧЛУУР<span style="margin-left:10px;" class="glyphicon glyphicon-sort-by-attributes"></span></a> </p> </div> <div class="tab-pane fade" id="profile"> <h3 class="head text-center">ТУРШИЛТ<sup>™</sup> ФОРМ</h3> <p class="narrow text-center"> ТЕКСТ... </p> <p class="text-center"> <a href="" class="btn btn-success btn-outline-rounded green"> ДЭЛГЭЦ ДҮҮРГЭХ ТОВЧЛУУР <span style="margin-left:10px;" class="glyphicon glyphicon-fullscreen"></span></a> </p> </div> <div class="tab-pane fade" id="messages"> <h3 class="head text-center">ТУРШИЛТ ФОРМ</h3> <p class="narrow text-center"> ТЕКСТ... </p> <p class="text-center"> <a href="" class="btn btn-success btn-outline-rounded green"> ТОХИРГОО <span style="margin-left:10px;" class="glyphicon glyphicon-wrench"></span></a> </p> </div> <div class="tab-pane fade" id="settings"> <h3 class="head text-center">ТУРШИЛТ ФОРМ!</h3> <p class="narrow text-center"> ТЕКСТ... </p> <p class="text-center"> <a href="" class="btn btn-success btn-outline-rounded green"> ДАРААХ ТОВЧЛУУР <span style="margin-left:10px;" class="glyphicon glyphicon-circle-arrow-right"></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">САЙНУУ АМАРАА<span style="color:#f48260;">?</span> ДООРХ ХОЛБООСООС ICON-НЫ ЗАГВАРАА СОНГООРОЙ</h3> <p class="narrow text-center"> ТЕКСТ... </p> <p class="narrow text-center"> https://www.w3schools.com/icons/bootstrap_icons_glyphicons.asp </p> <form class="form-horizontal"> <fieldset> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Текст утга</label> <div class="col-md-4"> <input id="textinput" name="textinput" type="text" placeholder="анхны утга" class="form-control input-md"> <span class="help-block">зааварчилгаа бичих талбар</span> </div> </div> <div class="form-group"> <label class="col-md-4 control-label" for="textarea">Текст</label> <div class="col-md-4"> <textarea class="form-control" id="textarea" name="textarea">анхны утга</textarea> </div> </div> <div class="form-group"> <label class="col-md-4 control-label" for="button1id">ХОЁР ТОВЧЛУУР</label> <div class="col-md-8"> <button id="button1id" name="button1id" class="btn btn-success">ТИЙМ</button> <button id="button2id" name="button2id" class="btn btn-danger">ҮГҮЙ</button> </div> </div> </fieldset> </form> </div> <div class="clearfix"></div> </div> </div> </div> </div> </section>
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700); .board{ width: 75%; margin: 60px auto; height: 500px; background: #fff; } .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(https://www.toptal.com/designers/subtlepatterns/patterns/hypnotize.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(); });
Related:
See More
Free Template
Now UI Dashboard React
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76