Tabs and icons
RUN
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Bootstrap 3 Tabs</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <style type="text/css"> body{ min-height: 1000px; padding-top: 50px; } .example{ margin: 5px; } </style> </head> <body> <div class="example"> <div class="container"> <div class="row"> <h2 class="text-center">Tab Bootstrap 3 - Author Hoài Minh</h2> <ul class="nav nav-tabs"> <li><a href="#home" data-toggle="tab">HOME <span class="glyphicon glyphicon-home"></span></a></li> <li><a href="#info" data-toggle="tab">PROFILE <span class="glyphicon glyphicon-plus"></span></a></li> <li><a href="#contact" data-toggle="tab">CONTACT <span class="glyphicon glyphicon-pencil"></span></a></li> </ul> <div class="tab-content"> <div class="tab-pane" id="home">Trang Chủ</div> <div class="tab-pane" id="info">Thông Tin</div> <div class="tab-pane" id="contact">Liên Hệ</div> </div> </div> </div> </div> </body> </html>
PHÓNG TO