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

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:

  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ết sau [Thẻ:

  Tiếp theo, đến cuối phần của tài liệu, hãy thêm các thẻ 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ớp navbar 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ớp nav-item .

   
  
      
  
           Nhà 
      
      
  
           Sản phẩm 
      
      
  
           Ưu đãi 
      
      
  
           Giới thiệu 
      
   

  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ứa lớp. Nó sẽ phục vụ như một thùng chứa cho tất cả các hàng và cột chúng tôi thêm vào tài liệu này. Bên trong nó, bạn có thể tạo các hàng và cột bằng cách sử dụng các lớp và col-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ớp col-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ác 
    
  
   

  Tươ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