Sử dụng Bootstrap để tạo ứng dụng web thiết kế vật liệu

[ad_1]

Thiết kế vật liệu của Google có mặt khắp nơi trong các ứng dụng di động hiện đại. Có lẽ bởi vì hầu hết mọi người ngày nay đã yêu thích màu sắc táo bạo, bóng tối tinh tế và bố cục tối giản của nó. Sẽ không tuyệt sao nếu bạn có thể dễ dàng áp dụng cùng ngôn ngữ thiết kế cho trang web của mình và cung cấp cho khách truy cập trải nghiệm người dùng mà họ đã quen thuộc? Chà, với MDBootstrap, bạn có thể.

MDBootstrap, còn được gọi là Thiết kế Vật liệu cho Bootstrap 4, là một bộ giao diện người dùng mã nguồn mở cho phép bạn sử dụng Bootstrap 4, một khung CSS mà bạn có thể đã quen thuộc để tạo trang web đáp ứng đầy đủ có giao diện Thiết kế Vật liệu. Nó đi kèm với hơn 500 thành phần, hàng tá hình ảnh động và hỗ trợ cho một số khung JavaScript, bao gồm jQuery, Vue và React.

Trong hướng dẫn từng bước này, tôi sẽ chỉ cho bạn cách thêm Bộ công cụ UI MDBootstrap cho các dự án web của bạn và sử dụng một số thành phần của nó.

Hoặc, nếu bạn muốn bắt đầu ngay với chủ đề Bootstrap chuyên nghiệp, hãy xem một số mẫu sẵn sàng của chúng tôi

Như bạn có thể nhận thấy, bộ này có các lớp được đặt tên theo trực giác, chẳng hạn như tiêu đề thẻ văn bản thẻ giúp bạn nhanh chóng tạo kiểu nội dung của thẻ của bạn. Tương tự, các lớp btn btn-chính giúp bạn cung cấp kiểu dáng Vật liệu cho các nút của mình.

Với tất cả các thay đổi ở trên, trang web của bạn sẽ trông như vậy như thế này:

 Mẫu hoàn thành "data-src =" https://cms-assets.tutsplus.com/uploads/ người dùng / 362 / bài đăng / 34278 / hình ảnh / Màn hình% 20Shot% 202019-11-24% 20at% 2020.17.05.png "/> </figure>
<h2>
<span class= 4. Tạo một biểu mẫu

Các hình thức thiết kế vật liệu có giao diện rất khác biệt. Ngôn ngữ thiết kế đi sâu vào chi tiết đầy đủ về việc mỗi phần tử biểu mẫu sẽ trông như thế nào, khi nào nên sử dụng và vị trí của nó.

MDBootstrap có kiểu dáng cho một số phần tử biểu mẫu HTML5. Bằng cách sử dụng chúng, bạn có thể chắc chắn rằng các biểu mẫu của bạn tuân thủ hầu hết các nguyên tắc của Thiết kế Vật liệu.

Bây giờ chúng ta hãy tạo một biểu mẫu đơn giản mà khách truy cập của bạn có thể sử dụng để đăng ký nhận bản tin. Nó sẽ có hai trường văn bản, một cho tên và một cho địa chỉ email. Ngoài ra, nó sẽ có nút gửi.

Biểu mẫu sẽ cần hàng và cột riêng, vì vậy bạn phải tạo chúng trước. Vì chỉ có một mình, cột sẽ kéo dài để lấp đầy toàn bộ hàng theo mặc định. Bằng cách đủ điều kiện lớp col-md với một số và bằng cách sử dụng lớp offset-md bạn có thể kiểm soát kích thước và vị trí của cột trong hàng.

Trong đoạn mã trên, các lớp mt-4 mb-4 cung cấp cho các hàng lề trên và dưới thích hợp.

Bên trong cột, tạo một thẻ khác. Nó sẽ phục vụ như một thùng chứa cho biểu mẫu và tất cả các văn bản được liên kết với nó. Tùy chọn, bạn có thể sử dụng lớp tiêu đề thẻ để đặt tiêu đề cho thẻ, và do đó, mẫu cũng vậy.

Để tạo biểu mẫu, tất cả những gì bạn cần là thẻ . Nhưng bạn phải nhớ thêm lớp điều khiển biểu mẫu vào mỗi trường văn bản bạn thêm vào biểu mẫu. Nếu bạn có một nhãn được liên kết với nó, bạn cũng phải bọc cả hai bên trong một phần tử div có lớp là md-form . Đoạn mã sau cho bạn thấy làm thế nào:

Đây là mẫu đơn hiện tại trông như thế nào:

Kết luận

Bây giờ bạn đã biết cách tạo đơn giản Trong các hướng dẫn giới thiệu này, bạn đã tìm hiểu cách sử dụng một số thành phần quan trọng được cung cấp bởi bộ công cụ, chẳng hạn như thanh điều hướng, thẻ và điều khiển biểu mẫu. sử dụng hệ thống lưới của Bootstrap 4.

Để biết thêm về MDBootstrap, hãy tham khảo tài liệu chính thức.

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

.
.
.
.