Bootstrap

Sử dụng để responsive trang web

phải import cả file bootstrap.css và bootstrap.js (ngoài ra cả jquery, vì boostrap sử dụng jquery)
bản 4.0 trở lên còn sử dụng thêm thư viện popper.js

Phần CSS của bootstrap:

Các component trong bootstrap được sử dụng để tạo các component của trang web
ví dụ tạo menu => sử dụng component : navbar

Chú ý
-  Glyphicons trong Bootstrap sử dụng tương tự như Font Awesome.
- Khi sử dụng menu, để highlight 1 item ta gán thêm class "active" vào thẻ <li>. Ví dụ người dùng đang ở trang Album ảnh thì ta thêm class="active" vào thẻ <li> của Album ảnh

<li class="active"><a href="#">Album ảnh <span class="sr-only">(current)</span></a></li>

thẻ <span class="sr-only"> là dùng cho trang web xem ở chế độ dành cho người khuyết tật, ta cũng nên cho vào.
 --------------------------
tạo main content  => sử dụng 2 container (tức là thẻ div hoặc thẻ section bao quanh toàn bộ nội dung, làm cho phần bên trong ko tràn ra ngoài)

1. container (độ rộng xác định ở một số loại kích thước màn cụ thể) 
2. container-fluid (width không được xác định, tức là phần tử cha rộng bao nhiêu nó sẽ rộng bấy nhiêu. vì nó là thẻ div mà nếu width ko được xác định thì nó sẽ rộng hết chiều rộng phần tử cha)

thường ảnh sẽ có độ dài xác định vd 1000px, cho nên nếu màn hình full HD có độ rộng 1400 1600px thì ảnh sẽ KO hiển thị hết được
=> ko nên sử dụng container-fluid mà nên sử dụng container

-----------
Grid system

1. hệ thống layout lưới của bootstrap sử dụng mô hình 12 cột => có thể layout 1, 2, 3, 4, 6, 12 cột trong 1 hàng , hoặc layout tùy ý khác
2. sử dụng các thẻ div,  mỗi thẻ thuộc class row hoặc col
3. tao các row trong các container. mỗi row đều có margin-left và margin-right là -15px (vì tại mỗi col đều có padding là 15px nên để căn chỉnh cho các col trong row áp sát vào viền ngoài trang web thì phải sử dụng row để bao ngoài cac col)
4. trong các row tạo các col: col-xs-{number 1-12} col-sm-{1-12} col-md-{1-12} col-lg-{1-12}. sô 1-12 là span từ 1-12 cột
5. xs :extra small device (smartphone), sm small device (tablet), md medium device (laptop), lg large device (desktop)

------------
2 cách CSS cho ảnh:

1. sử dụng img-responsive cho ảnh
2. đặt thẻ <img> trong 1 thẻ <div> (hoặc thẻ <a>) với class thumbnail để tạo viền cho ảnh.

Phần Javascript của bootstrap

Là tập hợp các plugin của jquery
Hay sử dụng nhất là modal
Modal:

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

2 cách gọi modal
Cách 1: sử dụng các attribute của html

data-toggle="modal" data-target="#myModal" (là id của modal đó)

Cách 2: qua jquery 

$('#myModal').modal(options)

Ví dụ
$('#myModal').modal('show'); //hiển thị modal
$('#myModal').modal('toggle');//bật tắt modal
//tắt backdrop element cho nên kích ở ngoài modal sẽ ko tắt được modal (mặc định backdrop = true c
cho nên kích ngoài modal sẽ tắt được modal)
$('#myModal').modal({backdrop:false});
//tắt backdrop nhưng nền của trang web vẫn bị mờ đi
$('#myModal').modal({backdrop:"static"});
// ấn esc thì modal không bị đóng
$('#myModal').modal({keyboard:false});