Bài 6 – Tạo Tabs bằng Bootstrap

Cho tới thời điểm này, chắc các bạn cũng từng khá thân thuộc với việc sử dụng Bootstrap trong tiến trình xây dựng HTML. Sẽ còn rất là nhiều áp dụng thú vị của Bootstrap đang chờ tất cả chúng ta tìm tòi.
Lúc này, mình xin giới thiệu về 1 plugin của Bootstrap rất thân thuộc & rất hay được dùng. Này là Tabs. Bài viết này cũng có một mối liên quan mật thiết với component navs vì tabs cũng là dạng danh mục nằm ngang được phân làm từng khối biệt lập.
Áp dụng này được sử dụng rất rộng rãi đặc biệt là trên các trang web về tin tức hoặc kinh doanh online. Sử dụng tabs chẳng những show được nhiều bài viết hơn mà còn tiết kiệm được diện tích trên 1 page. Cùng bắt tay vào việc tạo** Tabs ** bằng bootstrap luôn nào!

1. Tạo tabs căn bản

Ở phần này thì tất cả chúng ta sẽ khám phá cách tao ra một dạng tabs căn bản, tức là nó hiển thị giống như một thanh danh sách nằm ngang & khi click vào cũng không có điều gì xảy ra cả. Vì nó cũng là một thành phần của nav nên mọi bài viết cũng cần phải được bọc trong hai cặp thẻ ul,li. Ngoài class nav được gán vào mặc định thì chúng sẽ còn một class con phụ trợ là nav-tabs, sau thời điểm gán class này vào thì nó mới hiển thị đúng như dạng tabs mà tất cả chúng ta thường gặp ở các trang web. Để đánh dấu tab giờ đây đang hiển thị bài viết, tất cả chúng ta có thể dùng class ** .active** ở phần tử li.

(*6*)<htmlvàgt;
<headvàgt;
  <meta charset="utf-8">
  <titlevàgt;Tạo Tabs bằng Bootstrap 3vàlt;/titlevàgt;
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
  <backlinks rel="stylesheet" href="../css/font-awesome.min.css">
  <backlinks rel="stylesheet" href="./css/bootstrap.min.css">
  <backlinks rel="stylesheet" href="../css/style.css">
</headvàgt;
<bodyvàgt;


<div id="main">
  <div class="container">
  <h1 class="title-page">Tạo Tabs căn bảnvàlt;/h1vàgt;
    <div class="group-tabs">
      <!-- Nav tabs -->
      <ul class="nav nav-tabs">
        <li  class="active"><α href="#home" >Homevàlt;/avàgt;</livàgt;
        <livàgt;<α href="#profile">Profilevàlt;/avàgt;</livàgt;
        <livàgt;<α href="#messages">Messagesvàlt;/avàgt;</livàgt;
        <livàgt;<α href="#settings">Settingsvàlt;/avàgt;</livàgt;
      </ulvàgt;
    </divvàgt;
  </divvàgt;
</divvàgt;


<script src="../js/jquery-3.1.1.min.js" type=text/javascriptvàgt;</scriptvàgt;
<script src="../js/bootstrap.min.js" type=text/javascriptvàgt;</scriptvàgt;
<script src="../js/custom.js" type=text/javascriptvàgt;</scriptvàgt;


</bodyvàgt;
</htmlvàgt;

Giờ đây, khi show ra ở ngoài frontend, Tab sẽ chỉ hiển thị được dễ dàng như vậy này

Xem Thêm  Cách thêm và loại bỏ các lớp trong Vanilla JavaScript - loại bỏ javascript vani lớp học

2. Xác nhận địa điểm & các thành phần liên quan trong Tabs

Cũng giống với việc xây dựng các tabs bằng css thông thường thì tabs trong bootstrap 3 cũng được phụ trợ bằng javasript & tất cả chúng ta sẽ xác nhận địa điểm các tabs bằng các id mà tất cả chúng ta truyền vào thẻ α href ở trên phần danh sách, tôi sẽ đặt 3 id khác nhau cho từng danh sách, ký hiệu id trong css là dấu #, vậy lần lượt ta sẽ có một số id như sau, #home, #profile, #messages, #settings.

Tính chất data-toggle là tính chất riêng mà bootstrap phụ trợ tất cả chúng ta trong rất là nhiều component, phần giá trị của nó , tất cả chúng ta sẽ điền vào là tab để nó biết được tất cả chúng ta đang làm việc với components tabs.

(*6*)<htmlvàgt;
<headvàgt;
  <meta charset="utf-8">
  <titlevàgt;Tạo Tabs bằng Bootstrap 3vàlt;/titlevàgt;
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
  <backlinks rel="stylesheet" href="../css/font-awesome.min.css">
  <backlinks rel="stylesheet" href="./css/bootstrap.min.css">
  <backlinks rel="stylesheet" href="../css/style.css">
</headvàgt;
<bodyvàgt;

<div id="main">
  <div class="container">
    <h1 class="title-page">Xác nhận địa điểm & các thành phần liên quan trong Tabs</h1vàgt;
    <div class="group-tabs">
      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><α href="#home" aria-controls="home" role="tab" data-toggle="tab">Homevàlt;/avàgt;</livàgt;
        <li role="presentation"><α href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profilevàlt;/avàgt;</livàgt;
        <li role="presentation"><α href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messagesvàlt;/avàgt;</livàgt;
        <li role="presentation"><α href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settingsvàlt;/avàgt;</livàgt;
      </ulvàgt;

      <!-- Tab panes -->
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">This is Home contentvàlt;/divvàgt;
        <div role="tabpanel" class="tab-pane" id="profile">This is Profile contentvàlt;/divvàgt;
        <div role="tabpanel" class="tab-pane" id="messages">This is Messages contentvàlt;/divvàgt;
        <div role="tabpanel" class="tab-pane" id="settings">This is Settings contentvàlt;/divvàgt;
      </divvàgt;
    </divvàgt;
  </divvàgt;
</divvàgt;

<script src="../js/jquery-3.1.1.min.js" type=text/javascriptvàgt;</scriptvàgt;
<script src="../js/bootstrap.min.js" type=text/javascriptvàgt;</scriptvàgt;
<script src="../js/custom.js" type=text/javascriptvàgt;</scriptvàgt;

</bodyvàgt;
</htmlvàgt;

Sau đây, mình sẽ giải thích phần thứ hai để các bạn nắm vững hơn về các class của nó. Mọi thành phần mong muốn hiển thị khi click vào các tabs đều được bọc trong thẻ div có class là tab-content (Class cha) , bên trong nó sẽ còn các thẻ div có các class là tab-pane (Class con). đây sẽ là nơi chứa các bài viết tuy nhiên đang là nơi khai báo id css để so sánh với phần id mà tất cả chúng ta truyền vào thẻ α herf ở phần đầu tiên, nhằm xác nhận đúng đắn địa điểm id của từng tabs, để show bài viết cho thích hợp.
Giờ đây, các bạn đã sở hữu thể tạo được Tabs hoàn chỉnh.

Xem Thêm  Apps on Google Play - mp3_zing

3. Tabs pill

Tất cả chúng ta thường hay tạo tab dưới dạng thẻ. Không những thế với Bootstrap, các bạn có thể hiển thị các tab dưới dạng button mà không cần canh chỉnh css hay sử dụng javascript bằng cách không quá khó như sau.
Trong class của ul, hay thay class nav-tabs bằng class nav-pills là bạn đã hiển thị được tab dạng button

(*6*) <ul class="nav nav-pills" role="tablist">
    <li role="presentation" class="active"><α href="#home" aria-controls="home" role="tab" data-toggle="tab">Homevàlt;/avàgt;</livàgt;
    <li role="presentation"><α href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profilevàlt;/avàgt;</livàgt;
    <li role="presentation"><α href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messagesvàlt;/avàgt;</livàgt;
    <li role="presentation"><α href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settingsvàlt;/avàgt;</livàgt;
  </ulvàgt;

& đây là kết quả:

4. Tabs stack

Hầu hết các trường hợp tất cả chúng ta show tab theo hàng ngang. Không những thế, các bạn có thể biến đổi cách thức hiển thị tab theo hàng dọc với 1 thao tác dễ dàng.

(*6*)<ul class="nav nav-stacked" role="tablist">
    <li role="presentation" class="active"><α href="#home" aria-controls="home" role="tab" data-toggle="tab">Homevàlt;/avàgt;</livàgt;
    <li role="presentation"><α href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profilevàlt;/avàgt;</livàgt;
    <li role="presentation"><α href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messagesvàlt;/avàgt;</livàgt;
    <li role="presentation"><α href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settingsvàlt;/avàgt;</livàgt;
  </ulvàgt;

Các bạn đã nhận biết sự độc đáo nhỏ nhỏ đó chưa? Đó chỉ là thay class nav-tabs bằng class nav-stacked là bạn đã sắp đặt được tab dạng stack (hàng dọc). & để hoàn chỉnh hơn, tất cả chúng ta cần canh chỉnh thêm class phân tách chiều rộng cho thẻ ul & tab-content.

(*6*)<htmlvàgt;
<headvàgt;
  <meta charset="utf-8">
  <titlevàgt;Tạo Tabs bằng Bootstrap 3vàlt;/titlevàgt;
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
  <backlinks rel="stylesheet" href="../css/font-awesome.min.css">
  <backlinks rel="stylesheet" href="./css/bootstrap.min.css">
  <backlinks rel="stylesheet" href="../css/style.css">
</headvàgt;
<bodyvàgt;


<div id="main">
  <div class="container">
    <h1 class="title-page">Tabs stackvàlt;/h1vàgt;
    <div class="group-tabs">
      <!-- Nav tabs -->
      <ul class="nav nav-stacked col-md-3" role="tablist">
        <li role="presentation" class="active"><α href="#home" aria-controls="home" role="tab" data-toggle="tab">Homevàlt;/avàgt;</livàgt;
        <li role="presentation"><α href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profilevàlt;/avàgt;</livàgt;
        <li role="presentation"><α href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messagesvàlt;/avàgt;</livàgt;
        <li role="presentation"><α href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settingsvàlt;/avàgt;</livàgt;
      </ulvàgt;

      <!-- Tab panes -->
      <div class="tab-content col-md-9">
        <div role="tabpanel" class="tab-pane active" id="home">This is Home contentvàlt;/divvàgt;
        <div role="tabpanel" class="tab-pane" id="profile">This is Profile contentvàlt;/divvàgt;
        <div role="tabpanel" class="tab-pane" id="messages">This is Messages contentvàlt;/divvàgt;
        <div role="tabpanel" class="tab-pane" id="settings">This is Settings contentvàlt;/divvàgt;
      </divvàgt;
    </divvàgt;
  </divvàgt;
</divvàgt;


<script src="../js/jquery-3.1.1.min.js" type=text/javascriptvàgt;</scriptvàgt;
<script src="../js/bootstrap.min.js" type=text/javascriptvàgt;</scriptvàgt;
<script src="../js/custom.js" type=text/javascriptvàgt;</scriptvàgt;


</bodyvàgt;
</htmlvàgt;

Kết quả nhận được là:

Xem Thêm  Cách làm cho href mở trong đoạn mã html liên kết tab mới - html a href tab mới

5. Dropdown Danh mục trong tab

Phần này, tất cả chúng ta sẽ nhúng phần dropdown danh sách vào trong tab. Các bạn có thể nhớ lại cách tạo Dropdown Danh mục bằng bootstrap qua Bài 3 – Tạo Dropdown Danh mục với Bootstrap.

(*6*)<htmlvàgt;
<headvàgt;
  <meta charset="utf-8">
  <titlevàgt;Tạo Tabs bằng Bootstrap 3vàlt;/titlevàgt;
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
  <backlinks rel="stylesheet" href="../css/font-awesome.min.css">
  <backlinks rel="stylesheet" href="./css/bootstrap.min.css">
  <backlinks rel="stylesheet" href="../css/style.css">
</headvàgt;
<bodyvàgt;


<div id="main">
  <div class="container">
    <h1 class="title-page">Dropdown Danh mục trong tabvàlt;/h1vàgt;
    <div class="group-tabs">
      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><α href="#home" aria-controls="home" role="tab" data-toggle="tab">Homevàlt;/avàgt;</livàgt;
        <li role="presentation"><α href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profilevàlt;/avàgt;</livàgt;
        <li role="presentation"><α href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messagesvàlt;/avàgt;</livàgt;
        <li role="presentation"><α href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settingsvàlt;/avàgt;</livàgt;
        <li role="presentation" class="dropdown">
          <α href="#" role="tab" data-toggle="dropdown">Dropdown <ι class="fa fa-caret-down" aria-hidden="true"></ivàgt;</avàgt;
          <ul class="dropdown-menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents"> 
            <livàgt;<α href="#child1" aria-controls="child1" role="tab" data-toggle="tab">Dropdown Child 1vàlt;/avàgt;</livàgt; 
            <livàgt;<α href="#child2" aria-controls="child2" role="tab" data-toggle="tab">Dropdown Child 2vàlt;/avàgt;</livàgt;
            <livàgt;<α href="#child3" aria-controls="child3" role="tab" data-toggle="tab">Dropdown Child 3vàlt;/avàgt;</livàgt;
          </ulvàgt;
        </livàgt;
      </ulvàgt;

      <!-- Tab panes -->
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">This is Home contentvàlt;/divvàgt;
        <div role="tabpanel" class="tab-pane" id="profile">This is Profile contentvàlt;/divvàgt;
        <div role="tabpanel" class="tab-pane" id="messages">This is Messages contentvàlt;/divvàgt;
        <div role="tabpanel" class="tab-pane" id="settings">This is Settings contentvàlt;/divvàgt;
        <div role="tabpanel" class="tab-pane" id="child1">This is Dropdown Child 1 contentvàlt;/divvàgt;
        <div role="tabpanel" class="tab-pane" id="child2">This is Dropdown Child 2 contentvàlt;/divvàgt;
        <div role="tabpanel" class="tab-pane" id="child3">This is Dropdown Child 3 contentvàlt;/divvàgt;
      </divvàgt;
    </divvàgt;
  </divvàgt;
</divvàgt;


<script src="../js/jquery-3.1.1.min.js" type=text/javascriptvàgt;</scriptvàgt;
<script src="../js/bootstrap.min.js" type=text/javascriptvàgt;</scriptvàgt;
<script src="../js/custom.js" type=text/javascriptvàgt;</scriptvàgt;


</bodyvàgt;
</htmlvàgt;

& kết quả hiển thị như sau

6. Kết bài

Như thế, các bạn đã sở hữu thể học thêm được cách tạo tabs – 1 áp dụng rất thông dụng của bootstrap. Hãy mạnh bạo thử để thưởng thức thành tích của mình nào.
Bài sau, tất cả chúng ta sẽ tiếp tục đọc thêm 1 áp dụng khác của bootstrap. Này là gì thì hãy chờ đợi bài kế tiếp nhé! Chúc các bạn thành công!

Viết một bình luận