简洁 bootstrap 垂直tab选项卡

创客云


这是一款简洁的bootstrap垂直tab选项卡,该选项卡在bootstrap原有的选项卡插件的基础上,通过添加一些css样式,将它显示为垂直的选项卡。

使用方法

在页面中引入下面的文件。

  1. <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  2. <link rel="stylesheet" href="http://jrain.oscitas.netdna-cdn.com/tutorial/css/fontawesome-all.min.css">
  3. <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
  4. <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

HTML结构

  1. <div class="container">
  2.     <div class="row">
  3.         <div class="col-md-6">
  4.             <div class="vertical-tab" role="tabpanel">
  5.                 <!-- Nav tabs -->
  6.                 <ul class="nav nav-tabs" role="tablist">
  7.                     <li role="presentation" class="active"><a href="#Section1" aria-controls="home" role="tab" data-toggle="tab">Section 1</a></li>
  8.                     <li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab">Section 2</a></li>
  9.                     <li role="presentation"><a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab">Section 3</a></li>
  10.                 </ul>
  11.                 <!-- Tab panes -->
  12.                 <div class="tab-content tabs">
  13.                     <div role="tabpanel" class="tab-pane fade in active" id="Section1">
  14.                         <h3>Section 1</h3>
  15.                         <p>Lorem ipsum dolor sit amet...</p>
  16.                     </div>
  17.                     <div role="tabpanel" class="tab-pane fade" id="Section2">
  18.                         <h3>Section 2</h3>
  19.                         <p>Lorem ipsum dolor sit amet...</p>
  20.                     </div>
  21.                     <div role="tabpanel" class="tab-pane fade" id="Section3">
  22.                         <h3>Section 3</h3>
  23.                         <p>Lorem ipsum dolor sit amet,...</p>
  24.                     </div>
  25.                 </div>
  26.             </div>
  27.         </div>
  28.     </div>
  29. </div>

CSS样式

  1. a:hover,a:focus{
  2.     text-decoration: none;
  3.     outline: none;
  4. }
  5. .vertical-tab{
  6.     font-family: 'Chivo', sans-serif;
  7.     display: table;
  8. }
  9. .vertical-tab .nav-tabs{
  10.     display: table-cell;
  11.     width: 28%;
  12.     min-width: 28%;
  13.     vertical-align: top;
  14.     border: none;
  15.     border-right: 3px solid #e7e7e7;
  16. }
  17. .vertical-tab .nav-tabs li{
  18.    float: none;
  19.    vertical-align: top;
  20. }
  21. .vertical-tab .nav-tabs li a{
  22.     color: #444;
  23.     background: #fff;
  24.     font-size: 18px;
  25.     font-weight: 700;
  26.     text-align: center;
  27.     letter-spacing: 1px;
  28.     text-transform: uppercase;
  29.     padding: 10px 20px;
  30.     margin: 0 0 1px 0;
  31.     border: none;
  32.     transition: all 0.3s ease 0s;
  33. }
  34. .vertical-tab .nav-tabs li a:hover,
  35. .vertical-tab .nav-tabs li.active a,
  36. .vertical-tab .nav-tabs li.active a:hover{
  37.     color: #198df8;
  38.     background: #fff;
  39.     border: none;
  40. }
  41. .vertical-tab .nav-tabs li a:before,
  42. .vertical-tab .nav-tabs li a:after{
  43.     content: "\f054";
  44.     color: #198df8;
  45.     font-family: "Font Awesome 5 Free";
  46.     font-weight: 900;
  47.     font-size: 18px;
  48.     opacity: 0;
  49.     transform: translateY(-50%);
  50.     position: absolute;
  51.     top: 50%;
  52.     right: -4px;
  53.     z-index: 1;
  54.     transition: all 0.3s ease 0.1s;
  55. }
  56. .vertical-tab .nav-tabs li a:after{
  57.     content: "";
  58.     background: #198df8;
  59.     width: 3px;
  60.     height: 100%;
  61.     transform: translateY(0);
  62.     top: 0;
  63.     right: 8px;
  64.     transition: all 0.3s ease 0s;
  65. }
  66. .vertical-tab .nav-tabs li a:hover:before,
  67. .vertical-tab .nav-tabs li.active a:before{
  68.     opacity: 1;
  69.     right: -17px;
  70. }
  71. .vertical-tab .nav-tabs li a:hover:after,
  72. .vertical-tab .nav-tabs li.active a:after{
  73.     opacity: 1;
  74.     right: -3px;
  75. }
  76. .vertical-tab .tab-content{
  77.     color: #555;
  78.     background-color: #fff;
  79.     font-size: 15px;
  80.     letter-spacing: 1px;
  81.     line-height: 23px;
  82.     padding: 10px 15px 10px 25px;
  83.     display: table-cell;
  84.     position: relative;
  85. }
  86. .vertical-tab .tab-content h3{
  87.     font-weight: 600;
  88.     text-transform: uppercase;
  89.     margin: 0 0 5px 0;
  90. }
  91. @media only screen and (max-width: 479px){
  92.     .vertical-tab .nav-tabs{
  93.         display: block;
  94.         width: 100%;
  95.         border-right: none;
  96.     }
  97.     .vertical-tab .nav-tabs li a{
  98.         padding: 7px 7px;
  99.         margin: 0 0 18px 0;
  100.     }
  101.     .vertical-tab .nav-tabs li a:before,
  102.     .vertical-tab .nav-tabs li a:after{
  103.         transform: translateY(0) translateX(50%) rotate(90deg);
  104.         right: 50%;
  105.         top: auto;
  106.         bottom:0;
  107.     }
  108.     .vertical-tab .nav-tabs li a:after{
  109.         width: 50%;
  110.         height: 3px;
  111.         transform: translateY(0) translateX(50%) rotate(0);
  112.     }
  113.     .vertical-tab .nav-tabs li a:hover:before,
  114.     .vertical-tab .nav-tabs li.active a:before{
  115.         bottom: -22px;
  116.         right: 50%;
  117.     }
  118.     .vertical-tab .nav-tabs li a:hover:after,
  119.     .vertical-tab .nav-tabs li.active a:after{
  120.         bottom: -2px;
  121.         right: 50%;
  122.     }
  123.     .vertical-tab .tab-content{
  124.         border-top: 3px solid #e7e7e7;
  125.         display: block;
  126.         padding: 20px 15px 10px;
  127.     }
  128.     .vertical-tab .tab-content h3{ font-size: 18px; }
  129. }
演示地址 免费下载
本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/48093.html
云模板

发表评论