Bài 2: Components trong Bootstrap - Công ty thiết kế website giá rẻ, uy tín, chất lượng

Components trong Bootstrap

Ở bài 1 chúng ta đã được làm quen với bootstrap, bài này sẽ đi sâu hơn, tìm hiều các thành phần cơ bản của bootstrap. Bây giờ là liên quan đến jquery trong bootstrap. Trước khi bước vào bài mới thì hãy chắc chắn rằng bạn đã down và nhúng tất cả các thành phần cần thiết rồi nhé!

Components là mục thứ 3 trong trang của bootstrap các bạn có thể tìm nếu bạn thích đọc tiếng anh 🙂 .

1. Glyphicons

Để sử dụng được fonts icon của Bootstrap bạn phải load file bootstrap.min.css vào web, file này đã import sẵn bộ fonts icon khi mình download về nên không cần phải làm gì hơn.

Bootstrap cung cấp cho người dùng hệ thống fonts icon khá đầy đủ và đẹp mắt (khoảng hơn 200 icon) và đặc biệt là chúng hoàn toàn miễn phí. Để sử dụng thì chúng ta chỉ cần tra và thêm như một class vào thẻ span.

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

Quy định của bootstrap thì chỉ được thêm class glyphicons vào thẻ span, và đặc biệt chú ý chỉ được dùng thẻ span hoặc dùng thẻ span để bao các thẻ khác. Và chăc chắn rằng còn khoảng trống đủ cho icon hiển thị nhé.

Vì glyphicons cũng là font nên các bạn có thể thay đổi kích cỡ và mầu sắc y như font chữ, đây là điểm khá hay khi sử dụng fonts icon của bootstrap.

2. Dropdown

Việc tạo một dropdown thật sự không hề dễ dàng và thường dùng những phương pháp phức tạp như css, jquery. Còn ở bootstrap thì việc này không thể dễ hơn. Với việc đã tích hợp sẵn và chỉ việc gọi chúng thì sẽ tiết kiện khá nhiều thời gian của bạn đấy :).

Để tạo một menu dropdown thì các bạn làm như sau:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

và đây là thành quả:

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 .dropdown củ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ụng class="divider" để ngăn các item bên trên và dưới nó.

Các bạn cầ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ính data-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ó.

3. Button group

Button group là một nhóm các button, nhưng để tạo ra được nó thì làm như thế nào nếu sử dụng bootstrap? Đơn giản bạn chỉ cần 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).

Đây là một kiểu basic

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

Bạn cũng có thể kết hợp button với dropdown

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Tạo button group bằng jquery, tạo hiệu ứng đẹp cho button thì trước hết để set trạng thái Active Toggle cho Button bạn add data-toggle=”button”.

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

Cũng có thể tạo ra các checkbox và radio buton như sau:

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox">
      </span>
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio">
      </span>
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Kết quả quá đẹp!

Button loading cũng tương tự

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

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
  });

4. Tab

Khá đơn giản để bạn tạo một tab trong bootstrap chỉ cần kết hợp .nav với một trong các class .nav-pills, .nav-tabs hoặc .nav-jusstified

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

rất tiện ích và đây là kết quả

Nhưng khi bạn muốn show nội dung riêng cho các tab trong nav khi click (hoặc cả dropdown) bạn phải dùng Tabs

<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>

kết hợp với Jquery

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

5. Menu

Có rất nhiều kiểu menu bạn có thể tạo với bootstrap, đây là một kiểu menu đơ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>

Bạn cũng có thể kể hợp các button vào trong menu để tạo một thanh menu đẹp theo ý muốn, bằng cách truy cập muc Navs , tìm kiểu menu ưng ý nhất vào copy vào web của mình.

6. Breadcrumbs

Một thành phần mà web nào cũng cần phải có đó là breadcrumbs, chỉ việc copy và paste vào việc còn lại cứ để bootstrap lo 🙂

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Lưu ý: vì bootstrap đã style sẵn nên class trong thẻ ol phải có tên chính xác là “breadcrmb”.

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 còn rất nhiều thành phần khác nữa mình không thể giới thiệu hết được. Để có thể hiều được cách làm việc của từng thành phần thì bạn phải tìm hiều thêm ở components trong bootstrap. Hẹn gặp lại các bạn ở bài tiếp theo Javascript trong bootstrap

Chúc các bạn thành công!

Components trong Bootstrap

1. Glyphicons

2. Dropdown

3. Button group

4. Tab

5. Menu

6. Breadcrumbs

Các bài trong series

Các bài viết liên quan

Làm website đa ngôn ngữ trong WordPress Multisite

10+ Plugin wordpress miễn phí trang trí giáng sinh cho trang website của bạn

Gửi Email Marketing với MailChimp

Vì sao website WordPress của bạn có tốc độ load chậm?

Sử dụng plugin để cắt lại kích thước ảnh trong WordPress

Bài 3: Javascript trong bootstrap

Những plugin tốt nhất dùng để backup dữ liệu cho WordPress

Những plugin WordPress về SEO và Social tốt nhất