[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
-
Bootstrap
15 Mẫu quản trị Bootstrap đóng gói tính năng
Ian Yates
-
1. Thiết lập
MDBootstrap có sẵn trên cdnjs và một số CDN khác. Do đó, bạn không cần tải xuống máy tính để có thể sử dụng nó. Nhưng việc thêm nó vào một trang web, cùng với tất cả các phụ thuộc của nó, chỉ mất vài phút.
Bắt đầu bằng cách tạo một tài liệu HTML mới và mở nó bằng trình soạn thảo văn bản yêu thích của bạn. Sau đó thêm mã soạn sẵn HTML5 sau vào mã này:
Trang của tôi Bộ giao diện người dùng MDBootstrap chỉ bao gồm hai tệp được rút gọn: mdb.min.css và mdb.min.js . Tuy nhiên, nó phụ thuộc vào Bootstrap, jQuery và Font Awesome để cung cấp một số tính năng.
Vì vậy, bên trong thẻ
head
của tài liệu HTML5, hãy thêm liên kếtsau [Thẻ
:Tiếp theo, đến cuối phần
script
:Tại thời điểm này, trang web đã sẵn sàng để hiển thị các thành phần Thiết kế Vật liệu.
2. Tạo một tiêu đề
Thành phần đầu tiên của trang web Thiết kế Vật liệu thường là một tiêu đề. Nó hoạt động như một thùng chứa cho thanh điều hướng, trong đó bạn không chỉ hiển thị logo và tên của công ty mà còn thêm liên kết đến các trang quan trọng khác trên trang web của bạn. Trong thông số Thiết kế Vật liệu, thanh điều hướng thường được gọi là thanh ứng dụng hàng đầu.
Để tạo tiêu đề, tất cả những gì bạn cần làm là sử dụng thẻ
tiêu đề
. Tuy nhiên, việc tạo một thanh điều hướng có liên quan nhiều hơn một chút.Trước tiên, bạn phải tạo thẻ
nav
và gán lớpnavbar
cho nó. Điều này tạo ra một thanh điều hướng cơ bản với một nền trắng. Nếu bạn muốn cho nó một màu từ bảng Vật liệu, bạn có thể sử dụng một trong nhiều lớp màu có sẵn. Chúng có các tên trực quan nhưmàu tím
màu đỏ
vàmàu xanh xám
.Bên trong thẻ, sau đó bạn có thể sử dụng
] lớp navbar-brand
trong khi chỉ định tên hoặc logo của công ty bạn.Lưu ý rằng khi bạn đang sử dụng màu tối cho thanh điều hướng, bạn nên thêm lớp
navbar-dark
để đảm bảo rằng văn bản bên trong có thể đọc được.Bao gồm các liên kết đến các trang khác trên trang web của bạn cũng dễ như tạo một danh sách không có thứ tự có lớp
navbar-nav
với các mục của nó có lớpnav-item
.Trong đoạn mã trên, lớp
ml-auto
đẩy các liên kết đến đầu đối diện của thanh điều hướng.Nếu bạn thử nhìn vào web bây giờ trong một trình duyệt, bạn sẽ thấy một tiêu đề trông như thế này:
3. Sử dụng Lưới
Để thêm nội dung thực tế vào trang web, bạn sẽ muốn sử dụng hệ thống lưới phản hồi mà Bootstrap cung cấp. Để có một ví dụ thực tế, hãy thêm hai thẻ vào trang, được đặt trong một hàng duy nhất có hai cột.
Bắt đầu bằng cách tạo phần tử
div
với thùng chứacol-md
. Bởi vì tất cả những thứ này sẽ là nội dung chính của trang, nên bạn nên bọc nó trong thẻchính
.Lớp
col-md
đảm bảo rằng cả hai cột có cùng chiều rộng và nằm gọn trong hàng trên màn hình có chiều rộng tối thiểu 768 px. Để nhắm mục tiêu màn hình nhỏ hơn hoặc lớn hơn, vui lòng thử nghiệm các lớpcol-sm
vàcol-lg
.Bây giờ bạn có thể tạo thẻ bên trong cả hai cột bằng cách sử dụng lớp
thẻ
. Với MDBootstrap, thẻ của bạn có thể có hình ảnh, tiêu đề, nút và văn bản. Đây là mã cho một thẻ mẫu có tất cả chúng:Cà chua anh đào để có giá cao hơn
Với Brexit không thỏa thuận, bạn có khả năng trả thêm 10% cho cà chua cherry vào tháng tới.
KhácTương tự, hãy tiếp tục và thêm một thẻ khác vào trang, lần này trong cột thứ hai. Để có kết quả tốt nhất, tôi khuyên bạn nên sử dụng các hình ảnh có cùng kích thước.
Trái cây và rau sống cho bữa sáng?
Trái cây và rau sống được thái lát mỏng là cách tuyệt vời để bắt đầu ngày mới của bạn.
Khác
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à 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
và 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:
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
và 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.
Theo dõi chúng tôi
Để 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.