<form id="htvdb"></form>

            <form id="htvdb"><nobr id="htvdb"></nobr></form>

              <address id="htvdb"></address>

              <form id="htvdb"><form id="htvdb"><nobr id="htvdb"></nobr></form></form>
              <form id="htvdb"></form>


                    实用Tabs选项卡(可自定义样式)插件下载

                    分享 :

                    网盘下载链接:

                    提取密码: ruyj
                    复制提取密码
                    这是一款基于Bootstrap的Tabs选项卡特效。该Tabs选项卡在bootstrap tabs的基础上,使用CSS3进行了一些效果美化,增强用户体验效果。
                    • 详情
                      文件来源

                      网络收集

                      更新日期

                      2018-01-09

                      适用平台

                      All

                      系统位数

                      ALL

                      文件格式

                      zip

                      文件语言

                      中文

                      文件授权

                      免费

                      下载次数

                      34次

                      效果图预览:

                    • 使用说明

                      使用方法:

                      在页面中引入bootstrap相关文件,以及jquery和font-awesome字体图标文件。

                      <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
                      <link rel="stylesheet" type="text/css" href="css/font-awesome.css" />
                      <script src="js/jquery.min.js"></script>
                      <script src="js/bootstrap.min.js"></script>   
                      

                      HTML结构:

                      该Tabs选项卡的基本HTML结果如下:

                      <div class="container">
                          <div class="row">
                              <div class="col-md-offset-3 col-md-6">
                                  <div class="tab" role="tabpanel">
                                      <!-- Nav tabs -->
                                      <ul class="nav nav-tabs" role="tablist">
                                          <li role="presentation" class="active"><a href="#Section1" aria-controls="home" role="tab" data-toggle="tab"><span><i class="fa fa-globe"></i></span> Section 1</a></li>
                                          <li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab"><span><i class="fa fa-rocket"></i></span> Section 2</a></li>
                                          <li role="presentation"><a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab"><span><i class="fa fa-briefcase"></i></span> Section 3</a></li>
                                      </ul>
                                      <!-- Tab panes -->
                                      <div class="tab-content tabs">
                                          <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                                              <h3>Section 1</h3>
                                              <p>Tabs选项卡一的内容...</p>
                                          </div>
                                          <div role="tabpanel" class="tab-pane fade" id="Section2">
                                              <h3>Section 2</h3>
                                              <p>Tabs选项卡二的内容...</p>
                                          </div>
                                          <div role="tabpanel" class="tab-pane fade" id="Section3">
                                              <h3>Section 3</h3>
                                              <p>Tabs选项卡三的内容...</p>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                      

                      CSS样式:

                      通过下面的CSS代码来对Tabs选项卡进行效果的美化。

                      a:hover,a:focus{
                          outline: none;
                          text-decoration: none;
                      }
                      .tab{ text-align: center; }
                      .tab .nav-tabs{
                          display: inline-block;
                          position: relative;
                          border-bottom: none;
                      }
                      .tab .nav-tabs li{
                          margin: 0;
                      }
                      .tab .nav-tabs li a{
                          display: block;
                          padding: 80px 20px 10px;
                          background: #fff;
                          font-size: 17px;
                          font-weight: 700;
                          color: #999;
                          text-transform: uppercase;
                          text-align: center;
                          border-radius: 0;
                          border: none;
                          border-bottom: 2px solid #fff;
                          margin-right: 0;
                          overflow: hidden;
                          z-index: 1;
                          position: relative;
                          transition: all 0.3s ease 0s;
                      }
                      .tab .nav-tabs li a span{
                          display: block;
                          width: 50px;
                          height: 50px;
                          line-height: 50px;
                          background: #f2f2f2;
                          margin: auto;
                          font-size: 22px;
                          color: #999;
                          border-radius: 5px;
                          position: absolute;
                          top: 10px;
                          left: 0;
                          right: 0;
                          transform: rotate(45deg);
                      }
                      .tab .nav-tabs li.active a span{
                          background: #29335c;
                          color: #fff;
                      }
                      .tab .nav-tabs li a span i{
                          transform: rotate(-45deg);
                      }
                      .tab .nav-tabs li.active a,
                      .tab .nav-tabs li a:hover{
                          color: #999;
                          border: none;
                          border-bottom: 2px solid #fff;
                      }
                      .tab .nav-tabs li.active a{
                          border-bottom: 2px solid #29335c;
                      }
                      .tab .tab-content{
                          padding: 20px;
                          margin-top: -5px;
                          font-size: 15px;
                          color: #757575;
                          line-height: 26px;
                          text-align: left;
                          border-top: 1px solid #e5e5e5;
                      }
                      .tab .tab-content h3{
                          font-size: 24px;
                          margin-top: 0;
                      }
                      @media only screen and (max-width: 479px){
                          .tab .nav-tabs li{
                              width: 100%;
                              text-align: center;
                              margin-bottom: 5px;
                          }
                          .tab .nav-tabs li:last-child{
                              margin-bottom: 0;
                          }
                      }
                      
                    • 相关下载
                    北京赛车玩法和赔率|官网_首页