Làm cách nào để tạo một trang web bằng HTML CSS và Bootstrap?

Vài tuần trước, phiên bản alpha của Bootstrap 5 đã xuất hiện trên thị trường và đó là lý do tại sao hôm nay tôi muốn xem qua những gì mới và tạo một trang web đơn giản bằng Bootstrap 5

Vào tháng 4, chúng tôi đã xuất bản bài viết và video về Bootstrap 4, nơi chúng tôi hướng dẫn bạn từng bước cách xây dựng một bảng điều khiển đơn giản, vì vậy nếu bạn bỏ lỡ tập và bài viết đó, hãy tiếp tục và xem tại đây

Cách xây dựng bảng điều khiển trong hướng dẫn Bootstrap 4

Nếu bạn muốn thử một cái gì đó khác ngoài trang web hoặc bảng quản trị, bạn cũng có thể tìm hiểu với chúng tôi

Cách xây dựng trang web thương mại điện tử bằng HTML với Bootstrap

Hôm nay, tôi muốn chỉ cho bạn cách xây dựng một trang web danh mục đầu tư cho một công ty phần mềm bằng Bootstrap 5

Tất nhiên, như mọi khi, tôi cũng có một video hướng dẫn cho bạn, vì vậy nếu bạn là người thích xem, thích đọc, hãy truy cập kênh Youtube của chúng tôi

Hãy bắt đầu với những gì mới trong Bootstrap 5

Có gì mới trong Bootstrap 5?

Vì Bootstrap 5 Alpha sẽ có sẵn sau vài tuần, chúng tôi có thể nói về các tính năng mới đi kèm với bản phát hành mới. Hãy đi qua những thay đổi quan trọng nhất

  • Bootstrap đã từng sử dụng jQuery cho các phần tử như cửa sổ bật lên hoặc chú giải công cụ. Ở phiên bản thứ 5, nó không sử dụng jQuery nữa. Thay vào đó, nó hoạt động với Javascript thuần túy
  • Bootstrap 5 mang đến các thuộc tính tùy chỉnh CSS, nhờ bỏ hỗ trợ cho Internet Explorer. Hãy xem ví dụ với các bảng Bootstrap được trình bày trong tài liệu của họ

    .table {
    --bs-table-bg: #{$table-bg};
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: #{$table-striped-color};
    --bs-table-striped-bg: #{$table-striped-bg};
    --bs-table-active-color: #{$table-active-color};
    --bs-table-active-bg: #{$table-active-bg};
    --bs-table-hover-color: #{$table-hover-color};
    --bs-table-hover-bg: #{$table-hover-bg};
    } 
  • Bây giờ, trong tài liệu Bootstrap 5, chúng ta có thể tìm thấy một tab khác - Tùy chỉnh. Nó cung cấp thông tin về chủ đề, tùy chỉnh và mở rộng Bootstrap với Sass, nhiều màu sắc hơn và các tùy chọn khác

  • Các điều khiển biểu mẫu được tùy chỉnh hoàn toàn là một tính năng khác đi kèm với phiên bản Bootstrap 5. Từ bây giờ, thiết kế của các điều khiển như hộp kiểm hoặc hộp radio không phụ thuộc vào trình duyệt

  • API tiện ích mới để kiểm soát tốt hơn là một tính năng khác

  • Bên cạnh đó, lưới Bootstrap đã được cải tiến và bây giờ chúng ta có thể sử dụng một lớp mới

    
    
      
        Portfolio Website
        
        
        
        
        
        
      
      
      
    
    1,
    
    
      
        Portfolio Website
        
        
        
        
        
        
      
      
      
    
    2 đã được thay thế bằng các tiện ích
    
    
      
        Portfolio Website
        
        
        
        
        
        
      
      
      
    
    3; . Chúng tôi có thể mong đợi một số thay đổi hơn trong các phiên bản tiếp theo

Vì vậy, tôi nghĩ đã đến lúc xem phiên bản Bootstrap hoàn toàn mới hoạt động như thế nào

Làm thế nào để bắt đầu dự án Bootstrap?

Hãy bắt đầu tạo trang web của chúng ta bằng cách tạo một thư mục nơi chúng ta sẽ đặt nó và bên trong thư mục đó, hãy tạo một tệp



  
    Portfolio Website
    
    
    
    
    
    
  
  
  
5

Sau khi mở tệp



  
    Portfolio Website
    
    
    
    
    
    
  
  
  
5 của chúng tôi trong trình chỉnh sửa mã yêu thích của bạn, hãy thiết lập cấu trúc tệp HTML cơ bản và tất cả các CDN cần thiết



  
    Portfolio Website
    
    
    
    
    
    
  
  
  

Ok, khi đã sẵn sàng, hãy tạo thêm một tệp cho các kiểu tùy chỉnh. Hãy gọi nó là



  
    Portfolio Website
    
    
    
    
    
    
  
  
  
7 và đặt nó trong cùng một thư mục

Làm cách nào để xây dựng menu trong Bootstrap 5?

Bây giờ, đã đến lúc bắt đầu xây dựng trang web của chúng tôi. Yếu tố đầu tiên chúng ta sẽ tạo là điều hướng. Bên trong các thẻ



  
    Portfolio Website
    
    
    
    
    
    
  
  
  
8, chúng ta sẽ sử dụng đoạn mã sau



  

Chủ Đề