Chuyển đến nội dung chính

Giới thiệu về Bootstrap CSS

Như tiêu đề của bài viết, hôm nay chúng ta sẽ tìm hiểu các quy tắc trong cách style của Bootstrap cho các thành phần trên trang web. Đó là typography, heading, code, tables, from … các yếu tố cơ bản hầu như xuất hiện trên mọi trang web.

Công cụ

Ok, trước khi bắt đầu mình xin giới thiệu một plugin rất hiệu quả để code Bootstrap trong sublime text (nếu bạn nào dùng), đó là Bootstrap 3 snippets. Bạn xem documentation của nó ở đây https://github.com/JasonMortonNZ/bs3-sublime-plugin
Về sublime text thì chắc hẳn mọi người đều biết rồi, một editor rất phổ biến để code web. Nếu bạn nào chưa biết thì hãy tự tìm hiểu thêm hoặc tham khảo bài viết trong thachpham.com ở đây.
Mình không khuyến khích các bạn dùng plugin khi mà chưa nắm rõ hết cách làm việc của từng thành phần trong Bootstrap vì nó tự động cho bạn khá nhiều công việc. Tuy nhiên dù sao thì đó cũng là một cách học. Vừa khám phá vừa tìm hiểu dần và điều quan trọng là bạn phải nắm bắt nó thật tốt để có thể tùy chỉnh Bootstrap theo yêu cầu.

Typography

Typography – cách trình bày chữ trong bản in. Trong thiết kế web nó chỉ việc lựa chọn các yếu tố về chữ trên trang như font-familly, font-size, line-height, heading, color, ….. Với Bootstrap, phần thẻ body được quy định một số thuộc tính như sau:
  • font-familly: “Helvetica Neue”, Helvetica, Arial, sans-serif; (biến less: @font-family-sans-serif)
  • font-size: 14px (@font-size-base)
  • line-height: 1.428571429 (@line-height-base) – nghĩa là chiều cao của dòng gấp ~1,4 lần font-size
heading Các thẻ h1, h2, h3, h4, h5, h6 có font-size lần lượt là 36px, 30px, 24px, 18px, 14px, 12px. Bạn cũng có thể dùng các class .h1, .h2, .h3 ….. trong các thẻ p để định dạng như các thẻ h1, h2, h3,….. Xem ví dụ ở đây: http://www.bootply.com/131218 Căn lề Căn lề là một yếu tố quan trọng khi trình bày văn bản. Html 5 không còn hỗ trợ thuộc tính align nữa mà phải dùng css. Để căn lề trái, phải, trung tâm hay đều hai bên ta dùng các class.text-left, text-right, text-center, text-justify Ví dụ: 
<p class="text-left">Left aligned text.</p>
List
Để tạo các danh sách Unordered bạn dùng các thẻ ul và li như bình thường, tương tự cho ordered list. Nếu bạn muốn hủy list-style cho list thì add thêm class .list-unstyled, ví dụ:
<ul class="list-unstyled">
        <li>item 1</li>
        <li>item 2</li>
</ul>
 
Nếu muốn các list item nằm trên cùng block thì dùng .list-inline. Tương tự cho decription list dùng thẻ dl bình thường, nếu muốn các term và mô tả trên cùng hàng thì dùng.dl-horizontal
Xem kết quả cho các ví dụ về list ở đây: http://www.bootply.com/131244
Phần list này chủ yếu dùng trong phần nội dung của trang, còn để tạo các slidebar hay list nổi bật hơn, Bootstrap 3 đưa thêm vào một thành phần là list group, mình sẽ nói ở bài về components.
Ngoài ra còn các thẻ khác trong Typography như Blockquote, address, small…. các bạn tự tra cứu thêm.

Form

Ví dụ một form cơ bản (vertical form): 
<form role="form">
<div class="form-group">
    <label for="InputEmail">Địa chỉ email</label>
    <input type="email" class="form-control" id="InputEmail" placeholder="Nhập email"></div>
<div class="form-group">
    <label for="InputPassword">Mật khẩu</label>
    <input type="password" class="form-control" id="InputPassword" placeholder="Password"></div>
<div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label></div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Một số chú ý:
  • Bootstrap 3 hỗ trợ tất cả các form controls như input, textarea, checkbox,….. Với trường input, nó cũng hỗ trợ tất cả các kiểu chuẩn trong html5 nhưtext, password, date, month, time, week, number, email, url, search, tel, datetime,……
  • Bạn nên đặt các controls bên trong lớp .form-group vì nó sẽ tạo một khoảng cách với các thành phần bên dưới, giúp dễ nhìn hơn.
  • Các control bình thường như textarea, checkbox, radio hoặc gắn với .form-group đều được setwidth: 100% theo theo mặc định. Tuy nhiên bạn cũng có thể thay đổi nó bằng cách dùng hệ thống cột trong grid system, thêm vào các lớp .col-$-$. Ví dụ:
<div class="row">
<div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2"></div>
<div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4"></div>
</div>
  • Bạn cũng có thể chỉnh chiều cao của các trường input bằng cách add thêm lớp .input-lg hay .input-sm, ví dụ:
<input class="form-control input-lg" type="text" placeholder=".input-lg">
 
Để đặt các controls của form trong một block ta dùng class .form-inline. Lưu ý các controls chỉ nằm trên một khối khi kích thước trình duyệt hoặc màn hình thiết bị rộng ít nhất là 768px.
Tương tự cho horizontal form bạn dùng class .form-horizontal.
Checkbox và radio
Với checkbox và radio đều được Bootstrap căn lề để hiển thị đẹp nhất. Nếu bạn muốn đặt các checkbox hay radio trên cùng một block thì add thêm các class .checkbox-inline và radio-inline.
Validation states
Bootstrap còn đặt các style cho trạng thái của các control khi xác nhận nó success, warning hoặc error bằng cách add các class .has-success, .has-warning, .has-error. Cùng với trạng thái đó, bạn có thể thêm các icon để minh họa thêm, chính là glyphicon, cái này sẽ nói sau. Ví dụ:
<div class="form-group has-success">
<label class="control-label" for="inputSuccess">Input with success</label>
<input type="text" class="form-control" id="inputSuccess">
<span class="glyphicon glyphicon-ok form-control-feedback"></span></div>
 
Tất nhiên là lúc đó bạn phải có xác nhận từ server về các trạng thái đó.
Tổng hợp ví dụ về form bạn xem ở đây: http://www.bootply.com/131291

Button

Button cơ bản trong Bootstrap được sử dụng là lớp .btn. Ngoài ra còn có các style tùy chọn khác như sau:
  • Về màu sắc có thể add thêm các lớp khác:.btn-default (chuẩn), .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, btn-link. Ví dụ:
<button class="btn btn-default" type="button">Default</button>
<button class="btn btn-primary" type="button">Primary</button>
  • Về kích thước, sử dụng thêm các class .btn-lg, .btn-sm, hoặc .btn-xs để tùy chỉnh kích thước. Tất nhiên mặc định vẫn dùng .btn-default. Ví dụ:
<button type="button" class="btn btn-lg">Large button</button>
<button type="button" class="btn btn-sm">small button</button>
  • Để set cho button đang được chọn thêm class .active. ví dụ:
<button class="btn btn-primary btn-lg active" type="button">active button</button>
 
Xem toàn bộ ví dụ về button ở đây: http://www.bootply.com/131295

Tables

Với table bạn có thể sử dụng class .table cơ bản trong Bootstrap. Ngoài ra còn có các tùy chọn khác như sau:
  • Striped rows: các hàng chẵn lẽ xem kẽ được style riêng biệt để làm nổi bật lên bằng cách add thêm class.table-striped
  • Hover table: các hàng của bảng được thêm hiệu ứng hover, add thêm class .table-hover
  • Bordered table: border cho tất cả các bên của bảng và ô, sử dụng thêm lớp .table-bordered
  • Condensed table: thu gọn diện tích của bảng bằng cách giảm padding của ô (5px).
Bạn cũng có thể thêm các lớp .active, .success, .info, .warning, .danger vào các hàng hoặc các ô cho phù hợp với trạng thái của chúng như trong phần form hay button ở trên.
Xem toàn bộ ví dụ về bảng ở đây: http://www.bootply.com/131300
Như vậy là mình đã giới thiệu một số style quan trọng trong Bootstrap 3. Bạn hãy cố gắng thực hành nhiều để nắm vững hơn. Để lại comment bên dưới nếu cần trao đổi nhé. Hẹn gặp lại các bạn.

Nhận xét

Đăng nhận xét