Hướng dẫn chèn tabs theo Bootstrap áp dụng cho NukeViet

Hướng dẫn chèn tabs theo Bootstrap áp dụng cho NukeViet
Đã có bài hướng dẫn chèn tabs cho các bạn rồi, nhưng hôm nay mình sẽ hướng dẫn cách chèn tabs theo Bootstrap có sẵn, áp dụng cho cả News và Shop. Bạn nào biết gì thêm thì góp ý để cùng hoàn thiện.
Theo cơ chế Bootstrap có sẵn 
Link: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tabs_dynamic&stacked=h


Mình sẽ áp dụng cho cơ chế tabs như sau:
Code:
<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#menu0">Tên DL 1</a></li>
    <li><a data-toggle="tab" href="#menu1">Tên DL 2</a></li>
    <li><a data-toggle="tab" href="#menu2">Tên DL 3</a></li>
    <li><a data-toggle="tab" href="#menu3">Tên DL 4</a></li>
    <li><a data-toggle="tab" href="#menu4">Tên DL 5</a></li>
    <li><a data-toggle="tab" href="#menu5">Tên DL 6</a></li>
  </ul>
  <div class="tab-content">
    <div id="menu0" class="tab-pane fade in active">
      [KHOIDL1]
    </div>
    <div id="menu1" class="tab-pane fade">
    [KHOIDL2]     
    </div>
    <div id="menu2" class="tab-pane fade">
    [KHOIDL3]     
    </div>
    <div id="menu3" class="tab-pane fade">
    [KHOIDL4]     
    </div>
    <div id="menu4" class="tab-pane fade">
     [KHOIDL5]     
    </div>
    <div id="menu5" class="tab-pane fade">   
      [KHOIDL6]
    </div>   
  </div>
Mở file config.ini thêm các

Code:
   <position>
            <name>TÊN KHỐI DỮ LIỆU</name>
            <tag>[TÊN KHỐI DỮ LIỆU]</tag>
        </position>
Bạn sẽ áp dụng ở đâu tùy ý bạn. Chúc thành công!

Post a Comment

0 Comments