Tự học Bootstrap - Cơ bản - bài 14 - Phân trang

Phân trang cơ bản

Nếu bạn có 01 trang web với nhiều trang con, Bạn có thể phải thêm phần phân trang vào mỗi trang con.

01 phân trang cơ bản trong Bootstrap trông như thế này đây:

Để tạo 01 phân trang cơ bản, ta thêm lớp .pagination vào 01 phần tử <ul>

Ví dụ:

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

---

Trang hiện hành State

Tự học Bootstrap - Cơ bản - bài 13 - Thanh phần trăm tiến trình

Thanh tiến trình cơ bản

01 thanh tiến trình có thể dùng để cho thấy 01 người dùng có thể mất bao lâu để hoàn tất 01 tiến trình.

Bootstrap cung cấp 01 loạt các thanh tiến trình.

01 thanh tiến trình trong Bootstrap trông như thế này:

Để tạo 01 thanh tiến trình mặc định, ta thêm 01 khai báo lớp .progress cho 01 thẻ <div>

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    <span class="sr-only">70% Complete</span>
  </div>
</div>

Ghi chú: thanh tiến trình không được hỗ trợ trong Internet Explorer 9 và and earlier (bởi vì chúng dùng hiệu ứng động trong CSS3).

Ghi chú: để giúp tăng tính chính xác cho người dùng , bạn nên thêm tiền tố vào thuộc tính aria-*

---

Progress Bar With Label

01 thanh tiến trình với nhãn chữ trông giống như thế này:

Tự học Bootstrap - Cơ bản - bài 12 – Nhãn số và nhãn chữ

Nhãn số

Nhãn số lượng là phần số chỉ ra có bao nhiêu phần tử tương ứng với liên kết đó:

Các con số 5, 10, và 2 là các nhãn số.

Dùng lớp .badge trong thẻ <span> để tạo ra các nhãn số.

Ví dụ:

<a href="#">News <span class="badge">5</span></a><br>
<a href="#">Comments <span class="badge">10</span></a><br>
<a href="#">Updates <span class="badge">2</span></a>

Tự học Bootstrap - Cơ bản - bài 11 – Các biểu tượng cơ bản trong web

Các biểu tượng cơ bản(Glyphicons)

Bootstrap cung cấp 260 biểu tượng trong bộ sưu tập Glyphicons Halflings.

Các biểu tượng có thể được sử dụng trong văn bản, các nút bấm, các thanh công cụ, menu điều hướng, các biểu mẫu...

Sau đây là vài ví dụ:

Biểu tượng Hộp thư:

Biểu tượng In:

Biểu tượng Tìm Kiếm:

Biểu tượng Tải Xuống:

---

Cú pháp

01 biểu tượng được chèn với cú pháp như sau:

<span class="glyphicon glyphicon-name"></span>

Phần name trong cú pháp trên sẽ được thay thế bởi tên của biểu tượng.

---

Ví dụ về biểu tượng

Tự học Bootstrap – Cơ bản – bài 10 – Định dạng nhóm nút bấm

Nhóm các nút bấm

Bootstrap cho phép bạn nhóm 01 loạt các nút lại với nhau (trên cùng 01 dòng) trong 01 nhóm nút:

Dùng 01 thẻ <div> với lớp .btn-group để tạo 01 nhóm nút bấm.

Ví dụ:

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

Mẹo: Thay vì thiết lập cỡ nút trên từng nút bấm trong nhóm, bạn có thể sử dụng lớp .btn-group-lg|sm|xs để định dạng kích cỡ cho tất cả nút trong nhóm.

Tự học Bootstrap – Cơ bản – bài 09 – Định dạng nút bấm

Kiểu nút bấm

Bootstrap cung cấp 07 dạng nút bấm:

Để tạo ra các loại nút trên, Bootstrap cung cấp các lớp sau:

.btn-default

.btn-primary

.btn-success

.btn-info

.btn-warning

.btn-danger

.btn-link

Ví dụ sau hiển thị các kiểu nút bấm khác nhau:

Tự học Bootstrap – Cơ bản – bài 08 – Hộp thông báo

Thông báo

Bootstrap cung cấp 01 cách thức dễ dàng tạo ra các hộp cảnh báo được định dạng sẵn:

Các cảnh báo được tạo ra bằng lớp .alert, sau đây là các lớp cảnh báo có trong Bootstrap .alert-success, .alert-info, .alert-warning hoặc .alert-danger:

Ví dụ:

Tự học Bootstrap – Cơ bản – bài 07 – Hộp Wells

Hộp Wells

Lớp .well thêm 01 đường viền bo tròn xung quanh 01 phần tử với nền màu xám và 01 số lùi dòng:

Ví dụ:

<div class="well">Basic Well</div>

---

Kích cỡ hộp Well

Thay đổi kích cỡ hộp well bằng cách thêm lớp .well-sm cho hộp nhỏ hoặc .well-lg cho hộp lớn:

Ví dụ:

<div class="well well-sm">Small Well</div>
<div class="well well-lg">Large Well</div>

Mặc định, các hộp wells có cỡ trung bình.

Lophocvitinh.COM***Tự học Bootstrap - Phần cơ... bởi minh-nguyen48

Tự học Bootstrap – Cơ bản – bài 06 - Hộp Jumbotron

Tạo 01 hộp Jumbotron

01 Jumbotron là 01 hộp lớn bao quanh 01 nội dung đáng chú ý (có thông tin đặc biệt).

01 hộp jumbotron có màu nền xám và đường viền tròn. Nó cũng phóng lớn dòng chữ bên trong.

Mẹo: Bên trong 01 hộp jumbotron bạn có thể đặt gần như bất kỳ thẻ HTML nào, bao gồm cả các phần tử và lớp Bootstrap khác.

Sử dụng 01 thẻ <div> với tên lớp .jumbotron để tạo 01 hộp jumbotron:

---

Jumbotron bên trong thẻ Container

Đặt hộp jumbotron bên trong thẻ <div class="container"> nếu bạn muốn hộp jumbotron KHÔNG mở rộng ra đến cạnh của màn hình.

Tự học Bootstrap – Cơ bản – bài 05 – Định dạng hình ảnh

Định dạng ảnh trong Bootstrap

Bo tròn góc

Lớp .img-rounded thêm các góc bo tròn vào 01 bức ảnh (IE8 không hỗ trợ thuộc tính bo tròn góc)

Ví dụ:

<img src="hinh\xinh.jpg" class="img-rounded" alt="Lớp học vi tính.COM" width="304" height="236">

---

Hình tròn

Lớp .img-circle làm cho bức ảnh có hình tròn (IE8 cũng không hỗ trợ định dạng này).

Ví dụ:

Tự học Bootstrap – Cơ bản – bài 04 – Định dạng bảng

Bảng biểu cơ bản trong Bootstrap

01 bảng biểu Bootstrap cơ bản có lùi dòng 01 chút và chỉ có đường chia cắt ngang.

Lớp .table thêm các định dạng cơ bản vào bảng:

Ví dụ:

---

Các dòng xen kẻ (chẵn-lẻ)

Lớp .table-striped thêm định dạng ngựa vằn(zebra-stripes) vào bảng biểu:

Tự học Bootstrap – Cơ bản – bài 03 - Văn bản và định dạng in ấn

Các thiết lập mặc định trong Bootstrap

Cỡ chữ tổng quát trong Bootstrap là 14px, với line-height = 1.428.

Điều này áp dụng cho thẻ <body> và tất cả đoạn văn.

Hơn nữa, tất cả thẻ <p> có 01 canh lề dưới bằng nửa line-height (mặc định là 10px).

---

Định dạng Bootstrap vs. Định dạng trình duyệt

Trong bài này, chúng ta sẽ xem vài phần tử HTML sẽ được định dạng hơi khác 01 chút so với định dạng mặc định của trình duyệt.

---

<h1> - <h6>

Mặc định, Bootstrap sẽ định dạng các thẻ HTML headings (<h1> → <h6>) theo cách sau:

Ví dụ:

h1 Bootstrap heading (36px)

h2 Bootstrap heading (30px)

h3 Bootstrap heading (24px)

h4 Bootstrap heading (18px)

h5 Bootstrap heading (14px)

h6 Bootstrap heading (12px)

---

<small>

Trong Bootstrap thẻ HTML <small> thường được dùng để tạo 01 chữ có định dạng nhạt hơn, 01 dòng chữ thứ cấp trong bất kỳ tiêu đề nào: