Bootstrap 3: Components và Javascript

Bài này mình sẽ nói về các thành phần cơ bản trong Bootstrap 3 và vì chúng có sự liên quan chặt chẽ với Jquery nên mình sẽ giới thiệu kết hợp luôn.

Trước khi bắt đầu, các bạn có thể xem nhiều hơn về các file trong Bootstrap ở đây: https://github.com/twbs/bootstrap

Glyphicons

Bootstrap cung cấp cho người dùng hệ thống icon fonts khá đầy đủ (khoảng hơn 200 icon). Để sử dụng bạn dùng thẻspan và add 2 lớp .glyphicon , .glyphicon-$. Trong đó $ là tên icon. Ví dụ:

<span class=”glyphicon glyphicon-search”></span>

Nhớ là luôn phải có lớp .glyphicon và luôn dùng thẻ span cho các icon (tức là không được đặt class .glyphiconvào trong các thẻ khác). Tất nhiên là bạn cũng có thể sử dụng các icon font khác như Awesome nếu thích nó. Thực ra bắt nguồn của Awesome cũng là một phần mở rộng của Bootstrap.

Button Groups

Xem demo: http://www.bootply.com/131926

Nếu bạn muốn nhóm các button trong Bootstrap thì làm thế nào? Đơn giản sử dụng thêm lớp .btn-group bên ngoài để bao các button. Muốn chỉnh kích thước các Button trong nhóm thì add thêm class .btn-group-$ (với $ là sm, xs hoặc lg).

<div class="btn-group btn-group-lg"><button class="btn btn-default" type="button">
Button 1</button>
<button class="btn btn-default" type="button">Button 2</button></div>

Button.js

Trước hết để set trạng thái Active Toggle cho Button bạn add data-toggle=”button”. Ví dụ:

<button class="btn btn-primary" type="button" data-toggle="button">
Single toggle</button>

Tương tự sử dụng nó cho group-buttons để tạo checkbox hoặc radio dạng button đẹp mắt, ví dụ:

<div class="btn-group" data-toggle="buttons"><label class="btn btn-primary">
<input type="checkbox" /> Option 1
</label>
<label class="btn btn-primary">
<input type="checkbox" /> Option 2
</label></div>

Có thể đặt trạng thái của Button như loading chẳng hạn, ví dụ:

<button class="btn btn-primary" id="loading-example" type="button" 
data-loading-text="loading……">Loading state</button>

Thuộc tính data-$-text luôn phải có, với $ là tên trạng thái, bạn có thể đặt tên bất kỳ.
Sau đó sử dụng phương thức $().button() của button.js để set, như ví dụ trên ta có:

$("#loading-example").click(function(){
        var btn = $(this);
        btn.button("loading");
        //ví dụ sử dụng ajax ở đây
        //btn.button("reset");/ /đặt lại trạng thái trước khi loading
  });

Tóm lại để kích hoạt một trạng thái cho Button sử dụng cú pháp $().button(string) (string tùy chọn). Các bạn xem cụ thể ở demo nhé.

Dropdowns Menu

Demo: http://www.bootply.com/132085

Để tạo Dropdown Menu cho một button khi click sử dụng như ví dụ sau:

<div class="btn-group">
<button class="btn btn-default dropdown-toggle" id="”toggle”" 
type="button" data-toggle="dropdown">aDropdown button </button>
<ul class="dropdown-menu" role="menu">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li class="divider"></li>
        <li><a href="#">Item 4</a></li>
</ul>
</div>

Thẻ span với class .caret là icon xổ xuống. Bạn có thể thay class .btn-group bao ở trên bằng class .dropdowncủa Bootstrap hoặc một class bất kỳ mà bạn đặt, miễn là nó phải được set position: relative. Sử dụngclass=”divider” để ngăn các item bên trên và dưới nó.

Chú ý:

Bạn sử dụng data-toggle=”dropdown” cho button hoặc link mà mình muốn gắn dropdown menu. Thuộc tínhdata-toggle là một thuộc tính riêng của Bootstrap được sử dụng không chỉ trong dropdown mà còn ởmodal, tooltip,… sau này bạn sẽ thấy.
Sử dụng thuộc tính data-target hoặc href để chỉ định menu sẽ xổ xuống khi có nhiều menu.
Nếu muốn menu xổ lên trên thì add thêm class .dropup cùng .btn-group.
Bất kỳ phần tử nào cùng anh em với class .dropdown-menu, được gắn data-toggle=”dropdown” đều có thể kích hoạt sự kiện dropdown của nó.

Dropdown.js

Bạn cũng có thể kích hoạt dropdown-menu thủ công bằng cách gọi hàm $().dropdown(“toggle”). Khi đó các vẫn phải có data-toggle=”dropdown” trong các phần tử kích hoạt. Như ví dụ trên ta có thể handler một sự kiện Jquery bất kỳ như sau:

$("#toggle").dropdown("toggle");

Navigation

Demo: http://www.bootply.com/132091

Để sử dụng thanh điều hướng các bạn add class .nav kết hợp với class .nav-pills , .nav-tabs hoặc.nav-jusstified. Ví dụ:

<ul class="nav nav-tabs">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Forum</a></li>
</ul>

Tất nhiên là trong mỗi thẻ li bạn có thể add thêm một class .dropdown-menu. Cách làm vẫn như cũ.

Tab.js

Tab.js cung cấp công cụ khi bạn muốn show nội dung riêng cho các tab trong nav khi click (hoặc cả dropdown). Ví dụ:

<ul class="nav nav-tabs" id="mytab">
        <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
        <li><a href="#profile" data-toggle="tab">Profile</a></li>
        <li><a href="#messages" data-toggle="tab">Messages</a></li>
</ul>
<div class="tab-content">
   <div class="tab-pane active" id="home">home page</div>
   <div class="tab-pane" id="profile">hello profile</div>
   <div class="tab-pane" id="messages">messages tab</div>
</div>

Bạn nhớ phải sử dụng class .tab-content và .tab-pane ở nội dung bên dưới, đồng thời phải sử dụngdata-toggle=”tab” cho các tab ở trên. Nội dung từng tab chỉ định qua thuộc tính href. Muốn kích hoạt thủ công thì dùng function $().tab() như sau:

$('#mytab a:first).tab('show')

Navbar

Demo: http://www.bootply.com/132096

Navbar là thành phần phổ biến trên các trang web. Để sử dụng navbar trong Bootstrap add class .navbar trong thẻ nav. Ví dụ một navbar đơn giản:

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!—navbar-header để nhóm thành phần navbar lại khi toggle để hiển 
thị trên di động -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" 
data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Bootstrap</a>
    </div>
 
    <!—các thành phần navbar -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Nhiệm vụ của class .navbar-header là để tạo một menu thu nhỏ khi hiển thị trên di động, bạn có thể thấy thuộc tínhdata-target của nó hướng tới nội dung navbar bên dưới. Và nhớ là phải có data-toggle="collapse". Phầncollapse sẽ trình bày sau. Các thành phần của navbar ngoài .navbar-nav, . navbar-form còn có .navbar-text, navbar-btn. Để nhóm các thành phần của navbar sang trái hay phải ta add class .navbar-left hoặc .navbar-right.

Bạn có thể cố định navbar trên hoặc dưới bằng cách add class . navbar-fixed-top hoặc.navbar-fixed-bottom. Lúc đó nhớ thêm add vào navbar bằng class .container hoặc .container-fluid.

Nếu bạn muốn đổi style của navbar thì dùng class .navbar-inverse (navbar tối)

Panel

Demo: http://www.bootply.com/132172

Panel giống như một Layout Web thu nhỏ, bạn có cả header, body và footer trong đó. Với Bootstrap, để tạo panel bạn cũng có ba class .panel-heading, panel-body, panel-footer tương ứng với 3 thành phần đó, ví dụ:

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">Panel content</div>
  <div class="panel-footer">Panel footer</div>
</div>

Ngoài class .panel-default bạn có thể sử dụng các classpanel-primary, panel-success, panel-info, panel-warnign, panel-danger để tùy chỉnh ngữ cảnh cho phù hợp giống như form vậy.

Thumbnails

Xem demo: http://www.bootply.com/132114

Với hệ thống lưới của Bootstrap, bạn có thể hiển thị các hình ảnh kèm thông tin rút gọn hay video cho các list nội dung của bạn rất dễ dàng. ví dụ một thumbnails đơn giản:

<div class="row">
<div class="col-sm-6 col-md-4">
 <div class="thumbnail">
  <img alt="..." data-src="image/….." />
  <div class="caption">
    <h3>Thumbnail label</h3>
     hello world, i am bootstrap
     <a class="btn btn-primary" role="button" href="#">Button</a>
  </div>
</div>
<!-- thêm các div khác nữa ở đây -->
</div>

Modal (modal.js)

Demo: http://www.bootply.com/132123

Để tạo một modal trong Bootstrap khá đơn giản, bạn chỉ cần tạo một button để kích hoạt modal và tạo một modal với class .modal để show ra.ví dụ:

<!-- button để kích hoạt modal -->
      <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
         demo modal
      </button>
 
      <!-- Modal -->
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
aria-labelledby="myModalLabel" aria-hidden="true">
        // nội dung modal ở đây
        </div>

Nhớ là button phải set data-toggle =”modal” đồng thời data-target phải hường tới class .modal mà mình muốn show ra bên dưới.
Bạn cũng có thể show một modal thủ công, sử dụng hàm $().modal(). Ví dụ:

$(“#mymodal”).modal({
        keyboard: false,
        show: true,
});

Thuộc tính keyboard (boolean) để xác nhận khi nhấn ESC thì ẩn modal, còn show:true để cho modal show ngay khi trang được load, ngoài ra còn có thuộc tính remote: “path/..” để gắn nội dung URL vào class.modal-content. Bạn tự kiểm tra thêm. Các phương thức của hàm $().modal() : “show | hide | toggle”. Các phương thức này dùng được gọi thủ công để handler một sự kiện khác.

Tooltip (tooltip.js)

Demo: http://www.bootply.com/132146 Ví dụ đơn giản:

<button type="button" class="btn btn-default" id="right" 
data-toggle="tooltip" title="tooltip to right" data-placement="right" >
Tooltip on left</button>

Để hiện tooltip khi hover qua button trên, bạn thêm mã jquery như sau:

$(“#right”).tooltip({
        Title: “”,
        Placement: ”right”,
        Trigger: “hover focus ”,
});

Bạn nhớ phải sử dụng thêm code jquery để kích hoạt tooltip. Đồng thời cũng phải có data-toggle=”tooltip” . Một số thuộc tính của hàm $().tooltip() như sau:

Title (string) : chính là nội dung mà tooltip show ra.
Placement (string) : vị trí hiển thị tooltip – “top | bottom | right | left”. Mặc định là “top”
Trigger (string): kích hoạt tooltip bằng sự kiện gì. Mặc định là “hover focus”, bạn có thể dùng “click” hoặc sự kiện khác.
Delay (number, object): đặt thời gian show hoặc hide tooltip ( ms). Ví dụ:delay:{ show:300, hide: 100 }. Mặc định là 0.

Các phương thức của hàm $.tooltip() là: “show | hide | toggle | destroy”. Bạn sử dụng các phương thức này ở bất kỳ chỗ nào sau khi đã thiết lập các thuộc tính cho tooltip đó ( ví dụ khi click button nào đó, bạn gọi hàm show tooltip ra – $(“element”).tooltip(“show”) ) .

Collapse (collapse.js)

Demo: http://www.bootply.com/132155

Như phần navbar ở trên đã nói qua rồi, Collapse như một sự kiện để toggle (hide – show) nội dung hoặc navbar khi click. ( xem demo).

Điều quan trọng để sử dụng Collapse là bạn phải set data-toggle=”collapse” (quá quen thuộc rồi đúng không) và đặt giá trị thuộc tính href hoặc data-target tới class .collapse mà bạn muốn nó xổ xuống.

Bài viết này mình chỉ tập trung vào các thành phần cơ bản và quan trọng trong Bootstrap cũng như cách sử dụng Jquery để tùy chỉnh chúng. Tuy nhiên khi ban nắm vững được lối làm việc của Bootstrap thì bạn cũng sẽ hiểu và áp dụng được với một số thành phần phụ khác. Bài sau mình sẽ nói về Customize và Less trong Bootstrap. Hẹn gặp lại các bạn ( nhớ để lại comment nhé).

Chia sẻ Source Code miễn phí

Tìm kiếm Blog này