Bulma - Hướng dẫn nhanh

Bulma là gì?

Bulma là một khung CSS mã nguồn mở, đơn giản và hiện đại, phụ thuộc vào mô-đun flexbox (nó được sử dụng để phát triển cấu trúc bố cục đáp ứng).

Lịch sử

Bulma đã được xuất bản vào năm 2016 và được phân phối theo giấy phép của MIT. Phiên bản hiện tại của Bulma là 0.7.1, được phát hành vào ngày 18 tháng 4 năm 2018.

Tại sao sử dụng Bulma?

Bulma rất dễ học và thiết lập. Nó được xây dựng bằng SASS và được chia thành 39 tệp .sass . Mã có thể được tùy chỉnh dễ dàng bằng cách chia thành các tệp riêng biệt và nó cho phép tùy chỉnh phần ứng dụng để có được kết quả mong đợi.

Đặc trưng

Đây là một khung CSS hiện đại, nhẹ, sử dụng Flexbox.
Nó chứa các kiểu đầu tiên dành cho thiết bị di động trong một tệp duy nhất, thay vì trong các tệp riêng biệt.
Nó có thể tùy chỉnh và biến đổi.

Ưu điểm

Nó cung cấp thiết kế đáp ứng cho máy tính để bàn, máy tính bảng và điện thoại di động.
Nó là khung CSS thuần túy, do đó bạn có thể kết hợp với bất kỳ khung JavaScript nào như AngularJS, ReactJS, v.v.
Nó sử dụng mã HTML tối thiểu, giúp dễ đọc và viết mã.

Nhược điểm

Đây là một khuôn khổ mới, không lớn như một cộng đồng.
Nó có ít tài liệu hơn và cần một số cải tiến nhỏ.
Khung này vẫn đang trong giai đoạn phát triển.

Sự miêu tả

Bulma là một khung công tác CSS hiện đại, trọng lượng nhẹ, phụ thuộc vào mô-đun flexbox (nó được sử dụng để phát triển cấu trúc bố cục đáp ứng và các thiết kế lạ mắt).

Tổng quan về Bulma bao gồm việc bắt đầu với Bulma, khả năng đáp ứng (bạn có thể xem các trang web trên các thiết bị khác nhau như máy tính để bàn, máy tính bảng và điện thoại), màu sắc, chức năng xác định màu sắc và giá trị cũng như mixin (nhóm thuộc tính CSS cho phép bạn để sử dụng các thuộc tính của một lớp cho một lớp khác) trong Bulma.

Bảng sau liệt kê các loại tiện ích khác nhau mà bạn có thể sử dụng để sử dụng Bulma CSS -

Không.	Tiện ích & Mô tả
1	Bắt đầu với Bulma Bạn có thể bắt đầu với Bulma bằng cách sử dụng một tệp css.
2	Khả năng đáp ứng và màu sắc Đó là sự phát triển thân thiện với thiết bị di động, có thể kết hợp với các thiết bị lớn, nhỏ và vừa.
3	Chức năng và Mixin Bulma sử dụng một số hàm và mixin để xác định các giá trị và phần tử tương ứng.

Sự miêu tả

Các công cụ sửa đổi trong Bulma bao gồm các kiểu thay thế cho các phần tử bằng cách sử dụng các lớp, các lớp đáp ứng để thay đổi kiểu, trình trợ giúp màu để thay đổi màu của các phần tử, trình trợ giúp kiểu chữ để thay đổi kích thước và màu sắc của văn bản.

Bảng sau liệt kê các loại công cụ sửa đổi khác nhau mà bạn có thể sử dụng để sử dụng Bulma CSS -

Không.	Bổ ngữ & Mô tả
1	Cú pháp bổ trợ và Trình trợ giúp đáp ứng Bạn có thể tạo kiểu thay thế cho các phần tử bằng cách sử dụng các lớp bổ trợ.
2	Người trợ giúp về màu sắc và kiểu chữ Bạn có thể sử dụng trình trợ giúp màu để thay đổi màu của văn bản hoặc nền.

Sự miêu tả

Bulma cung cấp hệ thống lưới đáp ứng (tạo bố cục trang thông qua một loạt các hàng và cột), có quy mô lên đến 12 cột trong một vùng chứa. Các cột sẽ sắp xếp lại khi kích thước thiết bị hoặc chế độ xem tăng lên.

Bảng sau liệt kê các biến thể của các cột mà bạn có thể sử dụng để sử dụng Bulma CSS -

Không.	Loại & Mô tả Cột
1	Bố cục cột và kích thước Bulma cho phép xây dựng bố cục cột rất dễ dàng bằng cách thêm lớp cột trong vùng chứa.
2	Các cột Khả năng đáp ứng và Làm tổ Bulma cung cấp các cột đáp ứng trong các loại màn hình khác nhau như thiết bị di động, máy tính bảng và máy tính để bàn.
3	Khoảng cách cột và Tùy chọn Các cột tạo ra khoảng cách bằng nhau giữa các nội dung cột.

Sự miêu tả

Bố cục Bulma mô tả cấu trúc của trang web, được thiết kế bằng cách sử dụng các lớp CSS của nó.

Bảng sau liệt kê các biến thể của bố cục mà bạn có thể sử dụng để sử dụng Bulma CSS -

Không.	Loại bố cục & Mô tả
1	Vùng chứa và Cấp độ Bulma sử dụng các vùng chứa để thể hiện bố cục cơ bản và bao bọc nội dung trang web.
2	Đối tượng phương tiện Đối tượng phương tiện được sử dụng để chỉ định các kiểu đối tượng trừu tượng để xây dựng các loại thành phần khác nhau.
3	Biểu ngữ anh hùng Bulma cung cấp biểu ngữ anh hùng để chỉ định biểu ngữ chiều rộng đầy đủ cho trang web.
4	Gạch Bulma tạo bố cục 2 chiều bằng cách sử dụng một lớp phần tử duy nhất.

Sự miêu tả

Phần tử biểu mẫu Bulma chỉ định dữ liệu đầu vào của người dùng bằng cách sử dụng các phần tử đầu vào (chẳng hạn như trường văn bản, hộp kiểm, nút radio, v.v.) và gửi nó đến máy chủ để xử lý dữ liệu.

Bảng sau liệt kê các biến thể của biểu mẫu mà bạn có thể sử dụng để sử dụng Bulma CSS -

Không.	Các loại & Mô tả Biểu mẫu
1	Kiểm soát biểu mẫu Bulma chứa các loại lớp điều khiển biểu mẫu khác nhau để tạo nhiều biểu mẫu.
2	Đầu vào Bulma cung cấp trường đầu vào để nhập dữ liệu người dùng cùng với các loại biến thể khác nhau.
3	Textarea Bulma textarea được sử dụng khi bạn cần nhiều dòng nhập liệu.
4	Lựa chọn Bulma select được sử dụng khi bạn muốn cho phép người dùng chọn từ nhiều tùy chọn.
5	Hộp kiểm và Đài Các hộp kiểm và nút radio có thể được sử dụng khi bạn muốn người dùng chọn từ danh sách các tùy chọn đặt trước.
6	Tập tin Nó được sử dụng để tải lên các tệp từ dữ liệu người dùng.

Sự miêu tả

Bulma cung cấp các loại phần tử khác nhau như phần tử hộp có thể được sử dụng làm vùng chứa, phần tử nút, vùng chứa hình ảnh để chỉ định hình ảnh, phần tử bảng, v.v.

Bảng sau liệt kê các biến thể của các phần tử mà bạn có thể sử dụng để sử dụng Bulma CSS:

Không.	Các loại & Mô tả Biểu mẫu
1	Cái nút Phần tử nút cung cấp sự tương tác của người dùng với các kiểu nút tùy chỉnh.
2	Nội dung Bulma cung cấp lớp nội dung để sử dụng trực tiếp các thẻ HTML.
3	Hộp và Biểu tượng Lớp .box định nghĩa một vùng chứa bao gồm đường viền, bán kính và phần đệm.
4	Hình ảnh Bulma sử dụng lớp .image để hiển thị các hình ảnh trong trang.
5	Thanh thông báo và tiến trình Bulma chỉ định các thông báo cảnh báo được xác định trước để hiển thị thông báo.
6	Bàn Bulma bao bọc các phần tử để hiển thị dữ liệu ở định dạng bảng.
7	Thẻ và Tiêu đề Bulma cung cấp các nhãn nhỏ được gọi là thẻ để hiển thị thông tin bổ sung.

Sự miêu tả

Bulma đi kèm với các thành phần được tạo kiểu sẵn, cung cấp danh sách thả xuống, phương thức, phân trang, thanh điều hướng, tab, v.v. để giúp người dùng dễ dàng trải nghiệm trên trang.

Bảng sau liệt kê các biến thể của các thành phần mà bạn có thể sử dụng để sử dụng Bulma CSS:

Không.	Thành phần & Mô tả
1	Breadcrumb Bulma sử dụng thành phần breadcrumb làm phương pháp điều hướng để chỉ ra vị trí của trang hiện tại cho người dùng trong ứng dụng.
2	Thẻ Thành phần thẻ hiển thị nội dung trong một hộp để có hình thức đẹp hơn.
3	Thả xuống Bulma cung cấp các menu thả xuống có thể chuyển đổi để hiển thị các liên kết có liên quan ở định dạng danh sách.
4	Thông điệp Bulma cung cấp các khối thông báo để cải thiện giao diện trang của bạn.
5	Phương thức Modal là một cửa sổ con nằm trên cửa sổ mẹ của nó.
6	Navbar Các thanh điều hướng đóng vai trò như các tiêu đề điều hướng cho trang web của bạn.
7	Phân trang Thành phần phân trang cung cấp một loạt các liên kết có liên quan trên nhiều trang.
số 8	Các tab Bulma cung cấp menu điều hướng theo tab với các kiểu khác nhau để hiển thị nội dung.