Hướng dẫn bootstrap 3 document - tài liệu bootstrap 3

I. Tổng quan

1. Bootstrap là gì?

Bootstrap là Front-end framework, là một bộ sưu tập miễn phí các công cụ để tạo ra các trang web và các ứng dụng web. Nó chứa HTML và CSS dựa trên các mẫu thiết kế cho kiểu chữ (typography), các form, các nút (button), tables, modals, v.v... chuyển hướng và các thành phần giao diện khác, cũng như mở rộng JavaScript tùy chọn.

Bootstrap được phát triển bởi Mark Otto và Jacob Thornton tại Twitter như một framework, một công cụ để phục vụ công việc nội bộ của Twitter. Trước khi phát triển Bootstrap, có nhiều thư viện khác nhau đã được sử dụng để phát triển giao diện, dẫn đến mâu thuẫn, xung đột. Bootstrap ra đời để khắc phục những yếu tố này, cũng như giúp các nhà phát triển, lập trình tại Twitter có thể triển khai công việc nhanh hơn, tiện lợi và đồng bộ hơn.

Bootstrap tương thích với các phiên bản mới nhất của tất cả các trình duyệt nổi tiếng trên thế giới như Chrome, Firefox, IE, Opera.... Kể từ phiên bản 2.0 trở l nó cũng hỗ trợ Responsive Web Design. Thiết kế và bố trí của các trang web tự động điều chỉnh, tự động tương thích các thiết bị được sử dụng (máy tính để bàn, máy tính bảng, điện thoại di động).

2. Tại sao bạn nên sử dụng Bootstrap?

• Rất dễ để sử dụng: Nó đơn giản vì nó được base trên HTML, CSS và Javascript nên chỉ cần biết sơ qua HTML, CSS, Javascript, Jquery là bạn có thể sử dụng Bootstrap để tạo nên một trang web sang trọng và đầy đủ. Nhưng lại không cần code quá nhiều CSS.
• Tính năng Responsive: Bootstrap’s xây dựng sẵn responsive css trên các thiết bị phones, tablets, và desktops. Do có sử dụng Grid System nên Bootstrap mặc định hỗ trợ Responsive.
• Mobile: Bootstrap được viết theo xu hướng Mobile First tức là ưu tiên giao diện trên Mobile trước. Nên việc sử dụng Bootstrap cho website của bạn sẽ phù hợp với tất cả kích thước màn hình.
• Tương thích với trình duyệt: Nó tương thích với tất cả các trình duyệt (Chrome, Firefox, Internet Explorer, Safari, and Opera) nhưng cần lưu ý đối với IE phiên bản cũ (làm việc không tốt với IE này) vì thế việc từ IE9 hay IE8 trở xuống không support là chuyện bình thường. Các bạn có dùng nên lưu ý điểm này, nó support tuyệt vời trên IE10 trở lên. - Xem thêm: http://vnfit.com/bootstrap-la-gi-gioi-thieu-ve-bootstrap-va-hoc-bootstrap-bootstrap-tutorial/#sthash.HTnRtQ3o.dpuf
• Được viết bởi những người có óc thẩm mỹ và tài năng trên khắp thế giới. Sự tương thích của trình duyệt với thiết bị đã được kiểm tra nhiều lần nên có thể tin tưởng kết quả mình làm ra và nhiều khi không cần kiểm tra lại. Vì vậy, giúp cho dự án của bạn tiết kiệm được thời gian và tiền bạc.
• Đội ngũ phát triển Bootstrap đã bổ sung thêm tính năng Customizer. Giúp cho designer có thể lựa chọn những thuộc tính, component phù hợp với project của họ. Chức năng này giúp ta không cần phải tải toàn bộ mã nguồn về máy.

Lấy Bootstrap từ đâu? Có 2 cách để bạn có thể sử dụng Bootstrap trên web của bạn. Có 2 cách để bạn có thể sử dụng Bootstrap trên web của bạn.

• Download Bootstrap từ getbootstrap.com

• Thêm Bootstrap từ CDN

  Note: nên “Thêm nó từ CDN” vì theo như các diễn đàn chia sẻ thì nó có sẵn các cơ chế cache trên máy như thế sẽ không mất thời gian tải lại file nữa mà dùng luôn, còn không thì mỗi lần vào site mình lại phải tải bootstrap về sẽ mất time load trang.

• Xem thêm : http://vnfit.com/bootstrap-la-gi-gioi-thieu-ve-bootstrap-va-hoc-bootstrap-bootstrap-tutorial/#sthash.HTnRtQ3o.dpuf

3. Bootstrap 3 có gì hot?

• Không như các phiên bản trước đây thì ở bản bootstrap 3 thì mặc định đã hỗ trợ Responsive(Các phiên bản 2.x.x thì phải chèn thêm bootstrap-responsive.css nếu muốn sử dụng Responsive).

• Ở bản bootstrap 3 font glyphicons-halflings-regular được thay thế cho glyphicons-halflings.png.( vì sao lại dùng font icon)

• Responsive nhiều kích thước màn hình khác nhau:

  

Với $ là một số nằm trong khoảng từ 1-12.

• Nếu chưa hài lòng với màu sắc giao diện hiện tại. Bootstrap 3 cũng sẽ đáp ứng cho bạn một giao diện sắc nét hơn với việc chèn thêm link style bootstrap-theme.css(hoặc bootstrap-theme.min.css) sau link style bootstrap.css(hoặc bootstrap.min.css).
• ...

Cấu trúc bootstrap 3:

• Sau khi lên trang chủ: http://getbootstrap.com/getting-started/ bạn tải mã nguồn của nó về(Bản mới nhất tính đến thời điểm hiện tại là v3.1.1).

Cấu trúc folder bootstrap 3 như sau:

Đây là cấu trúc file html(hoặc htm) được chứa trong folder bootstrap(bạn có thể đặt tên folder này là tùy ý) theo đường dẫn như ảnh trên :

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sài thử Bootstraptitle>

    
    <link href="css/bootstrap.min.css" rel="stylesheet">

    
    
  head>
  <body>
    <div class="container">
        <h2>Hellow Bootstrap!h2>

    div>

    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">script>
    
    <script src="js/bootstrap.min.js">script>
  body>
html>

4. Getting started

4.1. Download

Vào địa chỉ sau để download bootstrap về : http://getbootstrap.com/getting-started/#grunt

Bootstrap CDN

Ai đó từ MaxCDN hỗ trợ lưu trữ dạng CDN cho CSS và JavaScript của Bootstrap. Bạn chỉ cần sử dụng các liên kết Bootstrap CDN:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">script>

** Cài đặt với Bower**

Bạn có thể cài đặt và quản lý Bootstrap's Less, CSS, JavaScript, và fonts bằng cách sử dụng Bower :

$ bower install bootstrap

Cài đặt với npm

$ npm install bootstrap

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">script>

0 sẽ load toàn bộ plugin jQuery của Bootstrap vào jQuery object. Module

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">script>

1 không tự export (xuất) bất cứ gì. Bạn có thể tự load plugin jQuery của Bootstrap cá nhân bằng cách tải các tập tin

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">script>

2 phía dưới thư mục top-level của package.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">script>

3 của Bootstrap chứa một số siêu dữ liệu (metadata) bổ sung theo các key sau:

• 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  
  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  
  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">script>
  

  4 : đường dẫn tới file nguồn Less

• 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  
  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  
  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">script>
  

  5 : đường dẫn đến CSS non-minified, cái mà được precompiled (biên dịch) sẵn bằng cách sử dụng các thiết lập mặc định (không chỉnh sửa).

4.2. Bên trong có gì?

Bootstrap được tải về theo hai dạng, bên trong mỗi dạng bạn sẽ tìm thấy các tập tin và thư mục được nói dưới đây, nhóm các tài nguyên dùng chung một cách logic và cung cấp cả hai biến thể đã biên dịch và đã nén.

Yêu cầu phải có jQuery
Hãy chú ý rằng toàn bộ các plugin JavaScript đều yêu cầu jQuery phải được tích hợp sẵn, như được nói đến trong phần template khởi đầu. Hãy tham khảo tập tin bower.json để biết được phiên bản jQuery nào được hỗ trợ.

Bootstrap đã biên dịch

Khi tải về, hãy giải nén thư mục và bạn sẽ nhìn thấy cấu trúc của Bootstrap (đã biên dịch) tương tự như thế này:

Đây là dạng cơ bản nhất của Bootstrap, gồm các tập tin đã được biên dịch từ trước để có thể sử dụng một cách nhanh chóng trong tất cả các dự án web. Cung cấp các CSS và JS đã được biên dịch (

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">script>

6), cũng như CSS và JS đã được biên dịch và nén lại (

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">script>

7). Font Glyphicons cũng được tích hợp sẵn trong dạng này của Bootstrap.

Mã nguồn của Bootstrap

Mã nguồn của Bootstrap bao gồm các tập tin CSS, JavaScript, font đã được biên dịch cùng với đó là mã nguồn Less, JavaScript và tài liệu hướng dẫn sử dụng. Cụ thể hơn, cấu trúc của nó tương tự như sau:

Các thư mục

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">script>

8,

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">script>

9, và

$ bower install bootstrap

0 là nơi lưu trữ mã nguồn CSS, JS và font. Thư mục

$ bower install bootstrap

1 lưu trữ toàn bộ những tập tin được biên dịch đã nói ở trên. Thư mục

$ bower install bootstrap

2 lưu trữ mã nguồn của phần tài liệu hướng dẫn sử dụng, và thư mục

$ bower install bootstrap

3 lưu trữ các ví dụ về cách sử dụng Bootstrap. Ngoài ra, các tập tin khác đi kèm được sử dụng để hỗ trợ cho việc đóng gói, cung cấp thông tin bản quyền và thông tin phát triển của Bootstrap.

4.3. Biên dịch CSS và JavaScript

Bootstrap sử dụng Grunt để xây dựng hệ thống, với các phương thức thuận tiện khi làm việc với framework. Đây là cách biên dịch nên mã nguồn, chạy kiểm thử và nhiều hơn thế nữa.

Cài đặt Grunt

Để cài đặt Grunt, trước hết bạn phải tải về và cài đặt node.js (đã bao gồm npm).

$ bower install bootstrap

4 là tên viết tắt của node packaged modules và là một cách để quản lý sự phụ thuộc khi phát triển thông qua

$ bower install bootstrap

5.

Sau đó từ màn hình giao diện dòng lệnh (command-line):

• Cài đặt

  $ bower install bootstrap
  

  6 một cách toàn cục bằng lệnh

  $ bower install bootstrap
  

  7.
• Chuyển đến thư mục làm việc

  $ bower install bootstrap
  

  8, sau đó chạy lệnh

  $ bower install bootstrap
  

  9. npm sẽ tìm kiếm tập tin

  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  
  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  
  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">script>
  

  3 và tự động cài đặt tính phụ thuộc được liệt kê trong tập tin này.npm sẽ tìm kiếm tập tin

  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  
  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  
  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">script>
  

  3 và tự động cài đặt tính phụ thuộc được liệt kê trong tập tin này.

Sau khi cài đặt xong, bạn sẽ có thể chạy các lệnh Grunt từ màn hình command-line.Grunt từ màn hình command-line.

Các lệnh Grunt có sẵn

$ npm install bootstrap

1 (chỉ biên dịch CSS và Javascript)

Tái tạo lại thư mục

$ npm install bootstrap

2 với các tập tin CSS và Javascript đã được biên dịch và nén lại. Nếu bạn là người sử dụng Bootstrap, thì đây là lệnh thông thường mà bạn sẽ sử dụng nhiều.

$ npm install bootstrap

3 (Theo dõi)

Theo dõi các tập tin mã nguồn Less và tự động biên dịch lại các tập tin CSS bất cứ khi nào có thay đổi.

$ npm install bootstrap

4 (Chạy kiểm thử)

Chạy JSHint và chạy các kiểm thử QUnit trên cùng trong PhantomJS.

$ npm install bootstrap

5 (Tạo nên tất cả mọi thứ và chạy kiểm thử)

Biên dịch và nén CSS với Javascript, xây dựng tài liệu hướng dẫn sử dụng, chạy HTML5 validator so sánh với tài liệu, tái tạo lại các tài nguyên Customizer và nhiều hơn thế nữa. Lệnh này thường chỉ cần thiết khi bạn muốn can thiệp vào Bootstrap.

II. Bootstrap 3 Tutorial

Giao diện bắt mắt là điều không thể thiếu trong các project (đặc biệt là dự án web), bootstrap định nghĩa sẵn các thư viện cho người dùng (người dùng chỉ cần include các thư viện của bootstrap vào trong project và sử dụng các mẫu đó thông qua gọi class tương ứng ra). Sau đây là 1 số phần phổ biến hay được sử dụng.

1. Bootstrap Grids

Thường được sử dụng trong khi tạo cột cho bảng. Bootstrap's grid system cho phép số lượng cột lên tới 12 (mỗi 1 cột chiếm 1/12 độ rộng của trang). Có thể nhóm các cột này lại với nhau để tạo thành các cột rộng hơn, có thể hình dung như sau :

Bootstrap's grid system là responsive, độ rộng của cột thay đổi tùy theo độ rộng của màn hình.

Grid Classes

Bootstrap grid system có 4 class :

• xs (for phones - dùng cho màn hình điện thoại)
• sm (for tablets)
• md (for desktops - máy tính bàn)
• lg (for larger desktops - màn hình cỡ lớn)

Bạn có thể vào đây thực hành và đánh giá sự thay đổi khi thay đổi class : http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_grid_ex1&stacked=h

2. Bootstrap Text/Typography

2.1. Bootstrap's Default Settings (Thiết lập mặc định)

font-size mặc định của Bootstrap là 14px, chiều cao của dòng là 1.428; được áp dụng cho thẻ

$ npm install bootstrap

6 và tất cả các đoạn văn (paragraph). Ngoài ra, tất cả thẻ

$ npm install bootstrap

7 có bottom-margin (khoảng cách so với đáy) là 10px.

2.2. Bootstrap vs. Browser Defaults

-

Định kiểu cho HTML heading (cỡ chữ từ

$ npm install bootstrap

8 đến

$ npm install bootstrap

9) :

Ngoài ra còn 1 số style khác:

• Yêu cầu phải có jQuery
  Hãy chú ý rằng toàn bộ các plugin JavaScript đều yêu cầu jQuery phải được tích hợp sẵn, như được nói đến trong phần template khởi đầu. Hãy tham khảo tập tin bower.json để biết được phiên bản jQuery nào được hỗ trợ.
  

  0 : tạo hiệu ứng sáng hơn (làm mờ chữ)

• Yêu cầu phải có jQuery
  Hãy chú ý rằng toàn bộ các plugin JavaScript đều yêu cầu jQuery phải được tích hợp sẵn, như được nói đến trong phần template khởi đầu. Hãy tham khảo tập tin bower.json để biết được phiên bản jQuery nào được hỗ trợ.
  

  1 : tạo highlight cho texthighlight cho text

• Yêu cầu phải có jQuery
  Hãy chú ý rằng toàn bộ các plugin JavaScript đều yêu cầu jQuery phải được tích hợp sẵn, như được nói đến trong phần template khởi đầu. Hãy tham khảo tập tin bower.json để biết được phiên bản jQuery nào được hỗ trợ.
  

  2 : đường chấm gạch chân

• Yêu cầu phải có jQuery
  Hãy chú ý rằng toàn bộ các plugin JavaScript đều yêu cầu jQuery phải được tích hợp sẵn, như được nói đến trong phần template khởi đầu. Hãy tham khảo tập tin bower.json để biết được phiên bản jQuery nào được hỗ trợ.
  

  3 : căn lề trái, ngược lại nếu muốn căn lề phải thì sử dụng

  Yêu cầu phải có jQuery
  Hãy chú ý rằng toàn bộ các plugin JavaScript đều yêu cầu jQuery phải được tích hợp sẵn, như được nói đến trong phần template khởi đầu. Hãy tham khảo tập tin bower.json để biết được phiên bản jQuery nào được hỗ trợ.
  

  4 cho khối

  Yêu cầu phải có jQuery
  Hãy chú ý rằng toàn bộ các plugin JavaScript đều yêu cầu jQuery phải được tích hợp sẵn, như được nói đến trong phần template khởi đầu. Hãy tham khảo tập tin bower.json để biết được phiên bản jQuery nào được hỗ trợ.
  

  3 này.

• Yêu cầu phải có jQuery
  Hãy chú ý rằng toàn bộ các plugin JavaScript đều yêu cầu jQuery phải được tích hợp sẵn, như được nói đến trong phần template khởi đầu. Hãy tham khảo tập tin bower.json để biết được phiên bản jQuery nào được hỗ trợ.
  

  6 : bôi đen text.

Contextual Colors and Backgrounds

Bootstrap cung cấp 1 số class định nghĩa sẵn màu chữ, màu nền (background) cho text như

Yêu cầu phải có jQuery
Hãy chú ý rằng toàn bộ các plugin JavaScript đều yêu cầu jQuery phải được tích hợp sẵn, như được nói đến trong phần template khởi đầu. Hãy tham khảo tập tin bower.json để biết được phiên bản jQuery nào được hỗ trợ.

7,

Yêu cầu phải có jQuery
Hãy chú ý rằng toàn bộ các plugin JavaScript đều yêu cầu jQuery phải được tích hợp sẵn, như được nói đến trong phần template khởi đầu. Hãy tham khảo tập tin bower.json để biết được phiên bản jQuery nào được hỗ trợ.

8,

Yêu cầu phải có jQuery
Hãy chú ý rằng toàn bộ các plugin JavaScript đều yêu cầu jQuery phải được tích hợp sẵn, như được nói đến trong phần template khởi đầu. Hãy tham khảo tập tin bower.json để biết được phiên bản jQuery nào được hỗ trợ.

9,

<div class="alert alert-success">
  <strong>Success!strong> Indicates a successful or positive action.
div>

<div class="alert alert-info">
  <strong>Info!strong> Indicates a neutral informative change or action.
div>

<div class="alert alert-warning">
  <strong>Warning!strong> Indicates a warning that might need attention.
div>

<div class="alert alert-danger">
  <strong>Danger!strong> Indicates a dangerous or potentially negative action.
div>

0,

<div class="alert alert-success">
  <strong>Success!strong> Indicates a successful or positive action.
div>

<div class="alert alert-info">
  <strong>Info!strong> Indicates a neutral informative change or action.
div>

<div class="alert alert-warning">
  <strong>Warning!strong> Indicates a warning that might need attention.
div>

<div class="alert alert-danger">
  <strong>Danger!strong> Indicates a dangerous or potentially negative action.
div>

1, and

<div class="alert alert-success">
  <strong>Success!strong> Indicates a successful or positive action.
div>

<div class="alert alert-info">
  <strong>Info!strong> Indicates a neutral informative change or action.
div>

<div class="alert alert-warning">
  <strong>Warning!strong> Indicates a warning that might need attention.
div>

<div class="alert alert-danger">
  <strong>Danger!strong> Indicates a dangerous or potentially negative action.
div>

2:

Ngoài ra còn rất nhiều thứ khác bạn có thể tham khảo tại đây : http://www.w3schools.com/bootstrap/bootstrap_typography.asp

3. Bootstrap Tables

• Theo như ví dụ dưới đây, khi thêm

  <div class="alert alert-success">
    <strong>Success!strong> Indicates a successful or positive action.
  div>
  
  <div class="alert alert-info">
    <strong>Info!strong> Indicates a neutral informative change or action.
  div>
  
  <div class="alert alert-warning">
    <strong>Warning!strong> Indicates a warning that might need attention.
  div>
  
  <div class="alert alert-danger">
    <strong>Danger!strong> Indicates a dangerous or potentially negative action.
  div>
  

  3 thì các row của bảng được tự động add thêm màu nền (và style của table):

Còn khi bỏ

<div class="alert alert-success">
  <strong>Success!strong> Indicates a successful or positive action.
div>

<div class="alert alert-info">
  <strong>Info!strong> Indicates a neutral informative change or action.
div>

<div class="alert alert-warning">
  <strong>Warning!strong> Indicates a warning that might need attention.
div>

<div class="alert alert-danger">
  <strong>Danger!strong> Indicates a dangerous or potentially negative action.
div>

3 đi thì table trở thành :

Trên đây chỉ là ví dụ nhỏ để gioiứ thiệu qua về bootstrap cho table, ngoài ra còn 1 số class khác được dùng cho thẻ

<div class="alert alert-success">
  <strong>Success!strong> Indicates a successful or positive action.
div>

<div class="alert alert-info">
  <strong>Info!strong> Indicates a neutral informative change or action.
div>

<div class="alert alert-warning">
  <strong>Warning!strong> Indicates a warning that might need attention.
div>

<div class="alert alert-danger">
  <strong>Danger!strong> Indicates a dangerous or potentially negative action.
div>

5 hoặc các thẻ

<div class="alert alert-success">
  <strong>Success!strong> Indicates a successful or positive action.
div>

<div class="alert alert-info">
  <strong>Info!strong> Indicates a neutral informative change or action.
div>

<div class="alert alert-warning">
  <strong>Warning!strong> Indicates a warning that might need attention.
div>

<div class="alert alert-danger">
  <strong>Danger!strong> Indicates a dangerous or potentially negative action.
div>

6,

<div class="alert alert-success">
  <strong>Success!strong> Indicates a successful or positive action.
div>

<div class="alert alert-info">
  <strong>Info!strong> Indicates a neutral informative change or action.
div>

<div class="alert alert-warning">
  <strong>Warning!strong> Indicates a warning that might need attention.
div>

<div class="alert alert-danger">
  <strong>Danger!strong> Indicates a dangerous or potentially negative action.
div>

7,

<div class="alert alert-success">
  <strong>Success!strong> Indicates a successful or positive action.
div>

<div class="alert alert-info">
  <strong>Info!strong> Indicates a neutral informative change or action.
div>

<div class="alert alert-warning">
  <strong>Warning!strong> Indicates a warning that might need attention.
div>

<div class="alert alert-danger">
  <strong>Danger!strong> Indicates a dangerous or potentially negative action.
div>

8 bên trong table. Nếu quan tâm bạn có thể tìm hiểu thêm tại đây : http://www.w3schools.com/bootstrap/bootstrap_tables.asp

4. Bootstrap Alerts

Chỉ với việc định nghĩa class alert đơn giản như sau đây :

<div class="alert alert-success">
  <strong>Success!strong> Indicates a successful or positive action.
div>

<div class="alert alert-info">
  <strong>Info!strong> Indicates a neutral informative change or action.
div>

<div class="alert alert-warning">
  <strong>Warning!strong> Indicates a warning that might need attention.
div>

<div class="alert alert-danger">
  <strong>Danger!strong> Indicates a dangerous or potentially negative action.
div>

9 là class mặc định của alert message;

<div class="alert alert-success">
  // close alert được đặt trong 1 href
  <a href="#" class="close" data-dismiss="alert" aria-label="close">×a>
  <strong>Success!strong> Indicates a successful or positive action.
div>

0,

<div class="alert alert-success">
  // close alert được đặt trong 1 href
  <a href="#" class="close" data-dismiss="alert" aria-label="close">×a>
  <strong>Success!strong> Indicates a successful or positive action.
div>

1,

<div class="alert alert-success">
  // close alert được đặt trong 1 href
  <a href="#" class="close" data-dismiss="alert" aria-label="close">×a>
  <strong>Success!strong> Indicates a successful or positive action.
div>

2 hoặc

<div class="alert alert-success">
  // close alert được đặt trong 1 href
  <a href="#" class="close" data-dismiss="alert" aria-label="close">×a>
  <strong>Success!strong> Indicates a successful or positive action.
div>

3 là các tùy biến contextual classes) để xác định type của alert :

<div class="alert alert-success">
  <strong>Success!strong> Indicates a successful or positive action.
div>

<div class="alert alert-info">
  <strong>Info!strong> Indicates a neutral informative change or action.
div>

<div class="alert alert-warning">
  <strong>Warning!strong> Indicates a warning that might need attention.
div>

<div class="alert alert-danger">
  <strong>Danger!strong> Indicates a dangerous or potentially negative action.
div>

chúng ta dễ dàng có các alert message như hình dưới đây (mỗi class ứng với 1 style riêng cho message):

Closing Alerts

Để đóng alert msg, thêm

<div class="alert alert-success">
  // close alert được đặt trong 1 href
  <a href="#" class="close" data-dismiss="alert" aria-label="close">×a>
  <strong>Success!strong> Indicates a successful or positive action.
div>

4 và

<div class="alert alert-success">
  // close alert được đặt trong 1 href
  <a href="#" class="close" data-dismiss="alert" aria-label="close">×a>
  <strong>Success!strong> Indicates a successful or positive action.
div>

5 vào 1 link hoặc button đặt trong khối alert đó :

<div class="alert alert-success">
  // close alert được đặt trong 1 href
  <a href="#" class="close" data-dismiss="alert" aria-label="close">×a>
  <strong>Success!strong> Indicates a successful or positive action.
div>

• Ngoài ra còn có

  <div class="alert alert-success">
    // close alert được đặt trong 1 href
    <a href="#" class="close" data-dismiss="alert" aria-label="close">×a>
    <strong>Success!strong> Indicates a successful or positive action.
  div>
  

  6 để tạo hiệu ứng, xem thêm : http://www.w3schools.com/bootstrap/bootstrap_alerts.asp

5. Bootstrap Buttons

Bootstrap cung cấp 7 loại button :

• <div class="alert alert-success">
    // close alert được đặt trong 1 href
    <a href="#" class="close" data-dismiss="alert" aria-label="close">×a>
    <strong>Success!strong> Indicates a successful or positive action.
  div>
  

  7 : button không có màu nền

• <div class="alert alert-success">
    // close alert được đặt trong 1 href
    <a href="#" class="close" data-dismiss="alert" aria-label="close">×a>
    <strong>Success!strong> Indicates a successful or positive action.
  div>
  

  8

• <div class="alert alert-success">
    // close alert được đặt trong 1 href
    <a href="#" class="close" data-dismiss="alert" aria-label="close">×a>
    <strong>Success!strong> Indicates a successful or positive action.
  div>
  

  9

• <button type="button" class="btn btn-default">Defaultbutton>
  <button type="button" class="btn btn-primary">Primarybutton>
  <button type="button" class="btn btn-success">Successbutton>
  <button type="button" class="btn btn-info">Infobutton>
  <button type="button" class="btn btn-warning">Warningbutton>
  <button type="button" class="btn btn-danger">Dangerbutton>
  <button type="button" class="btn btn-link">Linkbutton>
  

  0

• <button type="button" class="btn btn-default">Defaultbutton>
  <button type="button" class="btn btn-primary">Primarybutton>
  <button type="button" class="btn btn-success">Successbutton>
  <button type="button" class="btn btn-info">Infobutton>
  <button type="button" class="btn btn-warning">Warningbutton>
  <button type="button" class="btn btn-danger">Dangerbutton>
  <button type="button" class="btn btn-link">Linkbutton>
  

  1

• <button type="button" class="btn btn-default">Defaultbutton>
  <button type="button" class="btn btn-primary">Primarybutton>
  <button type="button" class="btn btn-success">Successbutton>
  <button type="button" class="btn btn-info">Infobutton>
  <button type="button" class="btn btn-warning">Warningbutton>
  <button type="button" class="btn btn-danger">Dangerbutton>
  <button type="button" class="btn btn-link">Linkbutton>
  

  2

• <button type="button" class="btn btn-default">Defaultbutton>
  <button type="button" class="btn btn-primary">Primarybutton>
  <button type="button" class="btn btn-success">Successbutton>
  <button type="button" class="btn btn-info">Infobutton>
  <button type="button" class="btn btn-warning">Warningbutton>
  <button type="button" class="btn btn-danger">Dangerbutton>
  <button type="button" class="btn btn-link">Linkbutton>
  

  3 : button dưới dạng 1 đường link (rê chuột vào thấy giống như đang trỏ vào 1 đường dẫn nào đó)

Sử dụng chúng trong view :

<button type="button" class="btn btn-default">Defaultbutton>
<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-link">Linkbutton>

sẽ được các button như hình sau :

Button Groups

Chúng ta có thể nhóm các button lại với nhau để tạo thành 1 group (thường được đặt sát cạnh nhau) bằng cách sử dụng

<button type="button" class="btn btn-default">Defaultbutton>
<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-link">Linkbutton>

4:

<div class="btn-group">
  <button type="button" class="btn btn-primary">Applebutton>
  <button type="button" class="btn btn-primary">Samsungbutton>
  <button type="button" class="btn btn-primary">Sonybutton>
div>

Kết quả :

Có thể sử dụng

<button type="button" class="btn btn-default">Defaultbutton>
<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-link">Linkbutton>

5 thay cho

<button type="button" class="btn btn-default">Defaultbutton>
<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-link">Linkbutton>

4 ở trên nếu muốn các button sắp xếp dọc từ trên xuống (vertical).

Nesting Button Groups & Dropdown Menus

Từ 1 button đơn hoặc thuộc 1group button nào đó, ta có thể tạo 1 menu dropdown (list xổ xuống) cho nó bằng cách nhóm button đó với list cần tạo thành 1 button-group khác, list dropdown được đặt trong 1 thẻ

<button type="button" class="btn btn-default">Defaultbutton>
<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-link">Linkbutton>

7, mỗi 1 item của list là 1 thẻ

<button type="button" class="btn btn-default">Defaultbutton>
<button type="button" class="btn btn-primary">Primarybutton>
<button type="button" class="btn btn-success">Successbutton>
<button type="button" class="btn btn-info">Infobutton>
<button type="button" class="btn btn-warning">Warningbutton>
<button type="button" class="btn btn-danger">Dangerbutton>
<button type="button" class="btn btn-link">Linkbutton>

8 :

<div class="btn-group">
  <button type="button" class="btn btn-primary">Applebutton>
  <button type="button" class="btn btn-primary">Samsungbutton>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Sony <span class="caret">span>button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Tableta>li>
      <li><a href="#">Smartphonea>li>
    ul>
  div>
div>

• Link demo : http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_button_group_dropdown&stacked=h

6. Bootstrap Forms

Bootstrap cung cấp 3 type cho form layout :

• Vertical form (mặc định)
• Horizontal form
• Inline form

Các quy định chuẩn cho cả 3 loại này :

• Luôn sử dụng

  <button type="button" class="btn btn-default">Defaultbutton>
  <button type="button" class="btn btn-primary">Primarybutton>
  <button type="button" class="btn btn-success">Successbutton>
  <button type="button" class="btn btn-info">Infobutton>
  <button type="button" class="btn btn-warning">Warningbutton>
  <button type="button" class="btn btn-danger">Dangerbutton>
  <button type="button" class="btn btn-link">Linkbutton>
  

  9 (giúp cải thiện khả năng tiếp cận cho người sử dụng trình đọc màn hình)

• Wrap các label và form controls trong

  <div class="btn-group">
    <button type="button" class="btn btn-primary">Applebutton>
    <button type="button" class="btn btn-primary">Samsungbutton>
    <button type="button" class="btn btn-primary">Sonybutton>
  div>
  

  0 (cần thiết cho khoảng cách tối ưu)

• Thêm class

  <div class="btn-group">
    <button type="button" class="btn btn-primary">Applebutton>
    <button type="button" class="btn btn-primary">Samsungbutton>
    <button type="button" class="btn btn-primary">Sonybutton>
  div>
  

  1 cho tất cả các văn bản chứa

  <div class="btn-group">
    <button type="button" class="btn btn-primary">Applebutton>
    <button type="button" class="btn btn-primary">Samsungbutton>
    <button type="button" class="btn btn-primary">Sonybutton>
  div>
  

  2,

  <div class="btn-group">
    <button type="button" class="btn btn-primary">Applebutton>
    <button type="button" class="btn btn-primary">Samsungbutton>
    <button type="button" class="btn btn-primary">Sonybutton>
  div>
  

  3, and

  <div class="btn-group">
    <button type="button" class="btn btn-primary">Applebutton>
    <button type="button" class="btn btn-primary">Samsungbutton>
    <button type="button" class="btn btn-primary">Sonybutton>
  div>
  

  4

• Sử dụng

  <div class="btn-group">
    <button type="button" class="btn btn-primary">Applebutton>
    <button type="button" class="btn btn-primary">Samsungbutton>
    <button type="button" class="btn btn-primary">Sonybutton>
  div>
  

  5 cho thẻ

  <div class="btn-group">
    <button type="button" class="btn btn-primary">Applebutton>
    <button type="button" class="btn btn-primary">Samsungbutton>
    <button type="button" class="btn btn-primary">Sonybutton>
  div>
  

  2 sẽ tạo được nhiều loại khác nhau cho thẻ nay , ví dụ :

<div class="btn-group">
  <button type="button" class="btn btn-primary">Applebutton>
  <button type="button" class="btn btn-primary">Samsungbutton>
  <button type="button" class="btn btn-primary">Sonybutton>
div>

7 :

<div class="btn-group">
  <button type="button" class="btn btn-primary">Applebutton>
  <button type="button" class="btn btn-primary">Samsungbutton>
  <button type="button" class="btn btn-primary">Sonybutton>
div>

8 :

<div class="btn-group">
  <button type="button" class="btn btn-primary">Applebutton>
  <button type="button" class="btn btn-primary">Samsungbutton>
  <button type="button" class="btn btn-primary">Sonybutton>
div>

9 : - hide mật khẩu nhập vào

• Xem thêm : http://www.w3schools.com/bootstrap/bootstrap_forms.asp

III. Lời kết

• Ngoài các ứng dụng kể trên thì Bootstrap còn được sử dụng trong phân trang, kết hợp trong js để tạo những hiệu ứng đẹp mắt và tiện lợi cho người dùng. Còn rất nhiều kiên thức hay chưa được đề cập đến trong bài. nếu bạn quan tâm có thể tham khảo 1 số trang sau :Bootstrap còn được sử dụng trong phân trang, kết hợp trong js để tạo những hiệu ứng đẹp mắt và tiện lợi cho người dùng. Còn rất nhiều kiên thức hay chưa được đề cập đến trong bài. nếu bạn quan tâm có thể tham khảo 1 số trang sau :

http://www.w3schools.com/bootstrap/default.asp

http://getbootstrap.com/getting-started/

http://www.tutorialspoint.com/bootstrap/