×

Cài đặt thư viện Bulma trong JavaScript

Avatar of admin
admin 1 Views

1. Giới thiệu về Bulma

1.1 Bulma là gì?

Bulma là một framework CSS mã nguồn mở dành cho phát triển giao diện người dùng hiện đại và đáp ứng (responsive). Được xây dựng dựa trên Flexbox, một trong những thiết kế bố trí CSS hiện đại và mạnh mẽ nhất, Bulma mang đến cho các nhà phát triển web các công cụ mạnh mẽ và dễ dàng sử dụng để tạo ra các trang web đẹp mắt và chuyên nghiệp.

1.2 Lợi ích của việc sử dụng Bulma

Bulma không chỉ giúp bạn tiết kiệm thời gian và công sức trong việc thiết kế giao diện mà còn cung cấp nhiều tính năng vượt trội:

  • Dễ sử dụng: Với hệ thống class CSS siêu dễ hiểu và nhất quán, bạn có thể nhanh chóng xây dựng giao diện theo ý muốn.
  • Được tối ưu hóa cho thiết bị di động: Giao diện của bạn sẽ tự động điều chỉnh và hiển thị một cách hoàn hảo trên mọi loại màn hình cũng như thiết bị.
  • Khả năng tùy biến cao: Bạn có thể dễ dàng thay đổi các giá trị mặc định và tích hợp các phong cách cá nhân.

2. Cài đặt Bulma

2.1 Cài đặt thông qua CDN

Cách nhanh nhất để bắt đầu với Bulma là thông qua CDN (Content Delivery Network). Bạn chỉ cần nhúng liên kết sau vào phần <head> của tệp HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css">

2.2 Cài đặt thông qua npm

Nếu bạn muốn sử dụng Bulma trong một dự án JavaScript với cấu trúc mô-đun, bạn có thể cài đặt Bulma thông qua npm.

Bước 1: Cài đặt npm

Nếu bạn chưa cài đặt npm, bạn cần cài đặt Node.js và npm từ trang chủ Node.js.

Bước 2: Cài đặt Bulma

Mở terminal và chạy lệnh sau trong thư mục dự án:

npm install bulma

Bước 3: Import Bulma vào dự án

Sau khi cài đặt, bạn cần import Bulma vào tệp JavaScript chính hoặc tệp SCSS của dự án:

  • Trong tệp JavaScript:
import 'bulma/css/bulma.css';
  • Trong tệp SCSS:
@import '~bulma/css/bulma.css';

2.3 Sử dụng Bulma thông qua download trực tiếp

Bạn cũng có thể tải về Bulma từ trang chủ của Bulma.

Bước 1: Tải về và giải nén Bulma

Truy cập trang chủ của Bulma, tải về file bulma.zip và giải nén nó.

Bước 2: Nhúng vào tệp HTML

Nhúng tệp CSS của Bulma vào phần <head> của tệp HTML:

<link rel="stylesheet" href="đường/dẫn/đến/css/bulma.css">

3. Sử dụng Bulma trong Dự án

3.1 Cấu trúc cơ bản của Bulma

Một trong những điểm mạnh của Bulma là đơn giản hoá cấu trúc HTML mà bạn phải viết. Dưới đây là một ví dụ cơ bản về cấu trúc Bulma:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bulma Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css">
</head>
<body>
    <section class="hero is-primary">
        <div class="hero-body">
            <p class="title">
                Primary hero
            </p>
            <p class="subtitle">
                Primary subtitle
            </p>
        </div>
    </section>
</body>
</html>

3.2 Các thành phần (Components) cơ bản

Bulma cung cấp một loạt các thành phần hữu ích giúp bạn xây dựng giao diện một cách dễ dàng. Dưới đây là một số thành phần tiêu biểu:

Hero

Thành phần Hero trong Bulma là một khối thuộc loại lớn, thường được sử dụng để nêu bật nội dung đầu trang.

<section class="hero is-info">
    <div class="hero-body">
        <p class="title">
            Hero title
        </p>
        <p class="subtitle">
            Hero subtitle
        </p>
    </div>
</section>

Navbar

Thành phần Navbar giúp bạn tạo thanh điều hướng một cách dễ dàng.

<nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
        <a class="navbar-item" href="#">
            Brand
        </a>
    </div>
    <div class="navbar-menu">
        <div class="navbar-start">
            <a class="navbar-item" href="#">
                Home
            </a>
            <a class="navbar-item" href="#">
                Documentation
            </a>
        </div>
    </div>
</nav>

Card

Thành phần Card cực kỳ hữu dụng để hiển thị các thông tin dạng hộp.

<div class="card">
    <div class="card-content">
        <p class="title">
            “There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”
        </p>
        <p class="subtitle">
            - Jeff Atwood
        </p>
    </div>
</div>

Buttons

Bulma cũng giúp bạn tạo các nút (button) cực kỳ dễ dàng và hiệu quả.

<button class="button is-primary">Primary</button>
<button class="button is-link">Link</button>
<button class="button is-info">Info</button>
<button class="button is-success">Success</button>
<button class="button is-warning">Warning</button>
<button class="button is-danger">Danger</button>

3.3 Các Khối (Layouts) Cơ bản

Bulma cũng hỗ trợ các loại khối bố trí để giúp việc xây dựng giao diện trở nên dễ dàng hơn:

Container

<div class="container"> được sử dụng để giới hạn bề ngang của phần tử và căn giữa nó.

<div class="container">
    <p class="title">Container</p>
</div>

Columns

Hệ thống cột của Bulma dựa trên Flexbox làm cho giao diện dễ dàng chia thành các phần nhỏ hơn.

<div class="columns">
    <div class="column">
        First column
    </div>
    <div class="column">
        Second column
    </div>
    <div class="column">
        Third column
    </div>
    <div class="column">
        Fourth column
    </div>
</div>

Section

<section class="section"> là một khối chia nội dung mà bạn sẽ sử dụng để chia ứng dụng hoặc website thành các phân đoạn rõ ràng và gọn gàng.

<section class="section">
    <div class="container">
        <h1 class="title">Section</h1>
        <h2 class="subtitle">
            A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading.
        </h2>
    </div>
</section>

3.4 Kết hợp JavaScript với Bulma

Mặc dù Bulma chủ yếu là CSS, nhưng bạn có thể dễ dàng kết hợp JavaScript để tạo ra các tính năng động. Ví dụ: bạn có thể dùng JavaScript để điều khiển các thành phần như modal (hộp thoại bật lên).

Modal

Tạo modal đơn giản với Bulma:

<div class="modal">
    <div class="modal-background"></div>
    <div class="modal-content">
        <!-- Content here -->
    </div>
    <button class="modal-close is-large" aria-label="close"></button>
</div>

Sử dụng JavaScript để kích hoạt modal:

document.addEventListener('DOMContentLoaded', () => {
    const openModalButtons = document.querySelectorAll('[data-target]');
    const closeModalButtons = document.querySelectorAll('.modal-close, .modal-background');

    openModalButtons.forEach((button) => {
        button.addEventListener('click', () => {
            const target = button.getAttribute('data-target');
            const modal = document.getElementById(target);
            modal.classList.add('is-active');
        });
    });

    closeModalButtons.forEach((button) => {
        button.addEventListener('click', (event) => {
            const modal = button.closest('.modal');
            modal.classList.remove('is-active');
        });
    });
});

4. Kết luận

Bulma là một framework CSS mạnh mẽ và dễ sử dụng, giúp việc phát triển giao diện người dùng trở nên đơn giản hơn rất nhiều. Từ các thành phần cơ bản đến các cách bố trí phức tạp, Bulma cung cấp mọi thứ bạn cần để nhanh chóng phát triển một trang web chuyên nghiệp. Hy vọng bài viết này giúp bạn bắt đầu với Bulma trong dự án JavaScript của mình. Hãy bắt đầu thử nghiệm và khám phá những khả năng vô hạn mà Bulma mang lại!

Comments

Bài viết liên quan