I think everyone knows about tabs so that am directly going into the topic how to create togglable tabs using bootstrap 3. By combining different sections we can create a togglable tabs structure. Here you can get one doubt whether the tabs are responsive or not, yes the tabs are completely responsive and easily fits according to your window size. Now away days there are different sizes of devices are rolling around the world so that i have created this tabs to suitable for all sizes.
Images used in this example
style.css
html, body{
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 16px;
line-height: 1.7;
}
.myStyle{
background: #ffa753 ;
padding: 20px 0;
}
.myStyle small{
color: #eeefe9;
}
.myStyle a{
color: #fff;
}
.myStyle a:hover{
color: #333;
}
.tab-pane{
padding: 40px 10px 0 10px;
}
index.html
<!DOCTYPE html> <html> <head> <title>Bootstrap Togglable Tabs Example</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="css/style.css" rel="stylesheet"> </head> <body> <div class="myStyle"> <div class="container"> <div class="row"> <div class="col-sm-6 tabbable"> <!-- Togglable Tabs go here --> <ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#abt" data-toggle="tab">About</a></li> <li><a href="#and" data-toggle="tab">Android L</a></li> <li><a href="#ios" data-toggle="tab">iOS 8</a></li> <li><a href="#win" data-toggle="tab">Windows 10</a></li> </ul> <div class="tab-content"> <div class="tab-pane fade in active" id="abt"> <p>study with demo is a technical website and author is shaik umar faruk currently working as software engineer.</p> </div> <div class="tab-pane fade in" id="and"><p><img src="images/gplay.jpg" alt="androidL" class="pull-right"> Android Lollipop is the new mobile operating system developed by google.<br><span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"> </span><span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span></p></div> <div class="tab-pane fade in" id="ios"><p><img src="images/appstore.jpg" alt="ios" class="pull-right">iOS 8 is ready to hit iphone 6.<br> <span class="glyphicon glyphicon-star"> </span><span class="glyphicon glyphicon-star"> </span><span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star-empty"></span></p></div> <div class="tab-pane fade in" id="win"><p><img src="images/winstore.jpg" alt="windows" class="pull-right">Windows 10 is upcoming os developed by Microsoft.<br><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"> </span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star-empty"> </span></p></div> </div> </div> </div> </div> </div> <script src="js/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
An impressive share! I have just forwarded this onto a colleague who has been conducting a little research on this. And he actually bought me dinner simply because I discovered it for him... lol. So let me reword this.... Thanks for the meal!! But yeah, thanx for spending some time to discuss this subject here on your internet site. capital one login
ReplyDeleteThis cash will then be accustomed to increase your savings. mortgage payment calculator canada If you might be using a screen reader, or having problems reading this website, please call Redfin Customer Support for help at. mortgage calculator canada
ReplyDelete