Đăng nhập

Video

Thống kê lượt truy cập

Tìm hiểu về bootstrap - Thư viện lập lập trình giao diện website

Date: 03/04/2025 08:41 Author: Trinh Van Thanh Views: 14

a. Khái niệm về bootstrap

Bootstrap là 1 framework HTML, CSS và javascript cho phép người dùng dễ dàng thiết kế website theo chuẩn nhất định, tạo các website Responsive thân thiện với các thiết bị cầm tay như điện thoại di động, máy tính bảng, máy tính cá nhân,…

Với thư viện Bootstrap người thiết kế website có thể nhanh chóng tạo ra các giao diện theo ý muốn. Bootstrap là 1 thư viện khổng lồ với các định dạng định sẵn cho các đối tượng như typography, form, button, table, navigation, modal, image, carousel… ngoài ra bootstrap có nhiều component, javascript hỗ trợ cho việc tạo ra website thân thiện. Ngoài ra, người lập trình có thể dễ dàng tuỳ chỉnh ra các đối tượng sao cho phù hợp với nhu cầu thực tế hoặc tạo ra các đối tượng khác.

b. Cách sử dụng bootstrap

Cách 1: Tải thư viện về website

Bước 1: Vào trang getbootstrap.com

Bước 2: Vào Docs – vào Download

Bước 3: Chọn phiên bản (boootstrap có nhiều phiên bản khác nhau)

Bước 5: Chọn nút Download

Bước 6: Giải nén tệp tải về được vào sao chép thư mục “js” và thư mục “css” vào trong thư mục gốc của website của chúng ta

Bước 7: Nhúng tệp tin bootstrap.min.css và tệp tin bootstrap.min.js vào trang web của chúng ta bằng lệnh sau:

Trang có cấu trúc như sau

<!doctype html>

<html>

<head>

<title>Trang chủ</title>

</head>

<body>

<h1 class=’text-center’>Trang web giới thiệu</h1>

</body>

</html>

Cách 2: Sử dụng liên kết online từ máy chủ khác trên mạng hoặc máy chủ của bootstrap

Bước 1: Vào trang getbootstrap.com

Bước 2: Vào Docs – vào Introduction

Bước 3: Chọn phiên bản

Bước 4: Tìm đến vị trí CDN, sao chép đường dẫn CSS và JS

Bước 5: Chèn vào trang web như sau

<!doctype html>

<head>

<title>Trang chủ</title>

</head>

<body>

<h1>Hello, world!</h1>

</body>

</html>

Kết quả sau khi chèn thành công

c. Một số thư viện định dạng sẵn thường dùng

Dưới đây là một số thư viện định dạng sẵn mà bootstrap đã xây dựng, người thiết kế có thể tuỳ chỉnh sao cho phù hợp với nhu cầu thực tế

i. Container

Là một thư viện cho phép người dùng tạo ra các giao diện phù hợp với thiết bị khác nhau khi duyệt trang

Một số selector dựng sẵn có thể sử dụng như sau:

Khi trình duyệt có màn hình kích thước nào thì khung sẽ có kích thước tương ứng.

Ví dụ: <div class=”container”> Trang mẫu </div>

Với cái đặt này:

+ Ở màn hình có kích thước <576px thì thẻ div có kích thước 100% màn hình

+ Ở màn hình có kích thước >=768px thì thẻ div có kích thước 720px

ii. Grid

Là thư viện chia màn hình ra làm nhiều phần nhau có tỉ lệ bằng nhau. Thư viện này cho phép người dùng chia mỗi màn hình 1 cách khác nhau trên cùng 1 cài đặt

Ví dụ 1:

Column

</div>

Column

</div>

Column

</div>

Column

</div>

Column

</div>

Với cách cài đặt này, màn hình trình duyệt sẽ được chia ra làm 5 phần bằng nhau

Ví dụ 2:

Column

</div>

Column

</div>

Column

</div>

Column

</div>

Column

</div>

Với cách cài đặt này:

+ Ở màn hình có kích thước >=768 thì màn hình được chia ra làm 3 phần (col-md-4)

+ Ở màn hình có kích thước >=576 thì màn hình được chia ra làm 2 phần (col-md-6)

Như vậy, với mỗi màn hình khác nhau thì ta sử dụng các selecttor tương ứng

Ví dụ: Ở màn hình small ta dùng col-sm-n. Ở màn hình medium ta dùng col-md-n (Với n có giá trị từ 1 đến 12)

Khi ta dùng col-md-2 thì thẻ này có kích thước 1/6 (tức là 2/12) khung hình cha của nó

Lưu ý để có thể sử dụng được selector col-mh-n (trong đó mh là ký hiệu màn hình, n là số nguyên từ 1 đến 12) thì ta phải đặt nó trong thẻ cha có class là “row”

iii. Modal

Là thư viện giúp ta cài đặt 1 cửa sổ popup bật lên khi nhấn vào 1 nút nào đó

Ví dụ khi ta muốn bấm vào nút xoá thì có 1 hộp thoại nổi lên để ta chọn : <có> và <không>

Ta cài đặt như sau

Xoá tài liệu

</button>

<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>

</div>

<h4>Bạn có muốn xoá không?</h4>

</div>

<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Không</button>

</div>

Đoạn lệnh trên có sử dụng một số selector mà bootstrap đã xây dựng sẵn: modal-dialog, modal-content, modal-header, modal-body…

iv. Input

Bootstrap đã thiết kế những mẫu Input đẹp của input

Ví dụ:

</div>

<span class="input-group-text" id="basic-addon2">@example.com</span>

</div>

Đoạn lệnh trên có sử dụng một số selector: form-control, input-group, mb-3, input-group-text,…

Kết quả sẽ được

v. Button

Một số mẫu button tạo nên bởi thư viện của bootstrap

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-secondary">Secondary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-light">Light</button>

Đoạn lệnh trên có sử dụng một số selector của bootstrap: btn btn-danger, btn-primary, btn-

Kết quả là:

vi. Accordion

Thư viện bootstrap tạo ra một mẫu dành cho thao tác collapse (đóng) hoặc expanded (mở) khi click vào menu. Khi click vào thì xổ xuống click lần nữa thì cuộn lên.

Ví dụ:

</h2>

</div>

Danh mục thứ 2 </button>

</h2>

</div>

Danh mục thứ 3</button>

</h2>

</div>

Kết quả sau khi thực hiện

vii. Image

Bootstrap đã xây dựng sẵn những thư viện css hỗ trợ việc định dạng ảnh:

float-start: Đưa phần tử sang bên trái

float-end: Đưa phần tử sang bên phải

rounded: Bo viền cho phần tử

img-fluid: định dạng phần tử ảnh có max-width 100%; height là auto

img-thumbnail: Tạo hình đại diện: min = max = 200px

Ví dụ về sử dụng hình ảnh:

viii. Icon

Việc sử dụng ảnh để minh hoạ cho bài viết làm cho bài viết tường minh hơn, sống động hơn, đặc biệt là các biểu tượng đại diện cho mỗi hành động. Tuy nhiên nếu một trang web có quá nhiều ảnh thì sẽ làm cho quá trình tải trang sẽ rất chậm từ đó trải nghiệm người dùng không còn mượt mà. Vì thế thay vì sử dụng hình ảnh người thiết kế nên lựa chọn các ký tự phù hợp để thay thế hình ảnh (Kích thước ký tự sẽ nhỏ hơn rất nhiều so với hình ảnh).

Ở đây tôi sử dụng bộ font awesome định dạng rất nhiều biểu tượng cho các hành động của 1 trang web. Cách sử dụng:

Có thể tải về theo liên kết :

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css

hoặc nhúng trực tiếp vào trang web để sử dụng

Bước 1: nhúng vào trang html của mình tại phần tử head

Bước 2: Tra cứu biểu tượng cần sử dụng tại trang: https://fontawesome.com/

Bước 3: Sao chép mẫu code html

Bước 4: Nhúng vào trang web của mình

Dán câu lệnh <i class="fa-solid fa-trash"></i> tại vị trí muốn chèn biểu tượng

ix. Color

Trong mọi phiên bản của bootstrap đều có thư viện về màu. Ví dụ: danger, primary, secandary, warning, success, info, light, dark. Những màu này được định nghĩa cho các thẻ khác nhau: table, text, background,…

Cách sử dụng:

+ Muốn định dạng màu chữ: text-danger, text-dark…

+ Muốn định dạng màu nền: bg-danger, bg-dark,…

+ …

Ví dụ: Muốn thiết kế 1 item có màu nền đỏ, màu chữ trắng thì ta thiết kế như sau:

x. Padding – margin – border

Như đã giới thiệu trong phần các thuộc tính của thẻ html mỗi thẻ đều có khoảng cách giữa các dối tượng với nhau (margin), đường viền (border) và khoảng cách từ nội dugn đến đường viền của nó (padding)

Cả 3 thuộc tính này đều có cách định dạng riêng biệt từng phía (Trên, dưới, trái, phải). Trong bootstrap đã định dạng sẵn những thư viện để làm điều này như:

p-{n}: định dạng padding 4 phía như nhau

ps-{n}: định dạng padding-left

pt-{n}: định dạng padding-right

pe-{n}: định dạng padding-right

pb-{n}: định dạng padding-bottom

m-{n}: định dạng margin 4 phía bằng nhau

ms-{n}: định dạng margin-left

mt-{n}: định dạng margin-top

me-{n}: định dạng margin-right

mb-{n}: định dạng margin-bottom

border: Định dạng viền 4 phía bằng nhau

border-{n}: Định dạng độ dày viền

border-{Hướng}: Định dạng viền từng hướng //{Hướng}: left; top; right; bottom

Lưu ý: {n} có giá trị từ 1 đến 5

Ví dụ:

+ Chúng ta muốn định dạng khoảng cách với đối tượng phía trái ta có thể làm như sau:

<div class=’ms-2’> Items </div>

+ Chúng ta muốn định dạng đường viền có độ dày xác định, định dạng khoảng cách từ nội dung đến đường viền

xi. Menu

Trong bootstrap tạo ra thư viện dựng sẵn để người lập trình có thể nhanh chóng tạo ra menu, sử dụng menu có sẵn dể sửa đổi nội dung theo nhu cầu thực tế

Ví dụ:

<a class="navbar-brand" href="#">Navbar</a>

<button class="navbar-toggler" type="button" data-bs-toggle=

"collapse" data-bs-target="#navbarNav" aria-controls="navbarNav"

aria-expanded="false" aria-label="Toggle navigation">

</button>

<a class="nav-link active" aria-current="page" href="#"> Home

</a>

</li>

<a class="nav-link" href="#">Features</a>

</li>

<a class="nav-link" href="#">Pricing</a>

</li>

<a class="nav-link disabled" aria-disabled="true">Disabled</a>

</li>

</ul>

</div>

</nav>

Sản phẩm sau khi thực hiện

xii. Table

Bootstrap đã xây dựng một số thư viện css để định dạng bảng cho người lập trình dễ dàng tạo ra những bảng dữ liệu có giao diện hài hoà, hợp lý

Một số mẫu dựng sẵn: table-{color}, định dạng này sử dụng được cả cho thẻ <table>, <tr>, <td>, <th>

Ví dụ:

<thead>

<tr>

<th scope="col">First</th>

<th scope="col">Handle</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

<td>Jacob</td>

<td>Thornton</td>

</tr>

<tr>

<td colspan="2">Larry the Bird</td>

<td>@twitter</td>

</tr>

</tbody>

</table>

Kết quả:

xiii. Carousel

Là thư viện của bootstrap chi phép người lập trình thiết kế các mẫu trình diễn ảnh (slide) – Các ảnh lướt từ phải qua trái. Kèm với thư viện html thì thư viện Carousel có yêu cầu thêm thư viện javascript.

Thư viện này giúp người lập trình nhanh chóng tạo ra 1 trình diễn ảnh, người lập trình có thể thuận lợi tạo ra 1 hiệu ứng lật ảnh đẹp mà không cần phải mất quá nhiều thời gian để lập trình, người lập trình chỉ cần thay đổi các tham số phù hợp với nhu cầu của mình

Có nhiều mẫu để người dùng lựa chọn, dưới đây là 1 ví dụ để tạo ra 1 trình diễn ảnh:

Thư viện html sẽ như sau:

<button type="button" data-bs-target="#slideImage" data-bs-slide-to="0"

class="active" aria-current="true" aria-label="Slide 1"></button>

<button type="button" data-bs-target="#slideImage" data-bs-slide-to="1"

aria-label="Slide 2"></button>

<button type="button" data-bs-target="#slideImage" data-bs-slide-to="2"

aria-label="Slide 3"></button>

</div>

<h5>First slide label</h5>

<p>Some representative placeholder content for the first slide.</p>

</div>

<h5>Second slide label</h5>

<p>Some representative placeholder content for the second slide.</p>

</div>

<h5>Third slide label</h5>

<p>Some representative placeholder content for the third slide.</p>

</div>

<button class="carousel-control-prev" type="button" data-bs-target="#slideImage"

data-bs-slide="prev">

<span class="visually-hidden">Previous</span>

</button>

<button class="carousel-control-next" type="button" data-bs-target= "#slideImage"

data-bs-slide="next">

</button>

</div>

Trong đoạn lệnh trên người lập trình chỉ cần thay đổi các thành phần của mình vào trong đó là được

</div>

Còn nhiều những thư viện khác, các bạn tham khảo trong phần phụ lục

Tags: