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

  1,
  2 đã được thay thế bằng các tiện ích
  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

5

Sau khi mở tệp

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

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à

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ẻ

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

Chúng tôi cần một logo cho trang web của chúng tôi. Tìm bất kỳ hình ảnh hoặc biểu tượng nào bạn muốn sử dụng làm biểu trưng và đặt nó vào thư mục nội dung trong thư mục trang web. Tôi đã nhập biểu trưng của mình, dưới dạng tệp

9, vì vậy hãy đảm bảo rằng quá trình nhập của bạn chính xác với hình ảnh của bạn và vị trí của nó

Tiếp theo, chúng tôi sẽ thêm một số kiểu tùy chỉnh cho điều hướng của chúng tôi. Hãy mở tệp

7 và thêm đoạn mã sau

body {
  display: block;
  overflow-x: hidden;
}
nav {
  background-color: white;
}
.navbar-brand img {
  max-height: 50px;
}
.navbar-brand {
  font-size: 24px;
  text-transform: uppercase;
  font-weight: 900;
  color: #683aa4;
}
nav ul li a {
  color: #a9a9a9;
  font-size: 22px;
  margin: auto 10px;
}
nav ul li a:hover {
  color: #683aa4;
}

Tuyệt vời, thực đơn của bạn đã sẵn sàng

Làm cách nào để xây dựng phần anh hùng trong Bootstrap 5?

Bước tiếp theo trong việc xây dựng trang web của chúng tôi là tạo phần anh hùng. Bên dưới mã điều hướng, hãy tạo một phần mới với hình ảnh, văn bản và ba thẻ

Đối với phần này, bạn sẽ cần một hình ảnh mà tôi gọi là

1 và ba biểu tượng cho các thẻ

  

    

      

        
Software
Development
        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
        Learn more
      
      

        

      
    
    


      

        

          

            
            
Web Dev
            
Some quick example text to build on the card title and make up the bulk of the card's content.
          
        
      

      

        

          

            
            
Machine Learning
            
Some quick example text to build on the card title and make up the bulk of the card's content.
          
        
      

      

        

          

            
            
Security
            
Some quick example text to build on the card title and make up the bulk of the card's content.
          
        
      

    
  

Để làm cho nó trông đẹp mắt, chúng ta vẫn cần thêm một số kiểu tùy chỉnh. Vì vậy, hãy mở tệp

7 của chúng tôi và đặt vào đó đoạn mã sau

section {
  padding-top: 50px;
  padding-bottom: 50px;
}
section h1 {
  text-transform: uppercase;
  font-weight: 900;
  color: #683aa4;
  text-align: left;
  margin-bottom: 20px;
}
section p {
  font-size: 16px;
  font-weight: 300;
}
button {
  max-width: 50%;
  border-radius: 50px !important;
}
#hero .col {
  justify-content: center; 
  flex-direction: column;
  display: flex;
}
#hero .img-col {
  justify-content: flex-end; 
  margin-top: 100px;
}
#hero img {
  max-width: 130% !important;
  width: 130%;
}
#hero .card {
  box-shadow: 11px 7px 16px #f9f9f9;
  border: 0;
  text-align: center;
}
#hero .icon {
  width: 50px;
  height: 50px;
  margin-bottom: 20px;
}

Bây giờ tuyệt vời, trang web của bạn sẽ trông giống như trong hình bên dưới (chỉ với các ảnh khác nhau)

Làm cách nào để xây dựng phần về chúng tôi trong Bootstrap 5?

Yếu tố tiếp theo chúng tôi sẽ xây dựng trên trang web của mình là phần Giới thiệu về chúng tôi. Tại đây, chúng tôi cũng sẽ thêm một hình ảnh, vì vậy hãy đảm bảo rằng bạn có một hình ảnh có tên là

3 trong thư mục nội dung của mình

Hãy chuyển đến tệp

5 của chúng tôi và bên dưới phần anh hùng, hãy thêm đoạn mã sau

  

    

      

        

      
      

        
About Us
        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
        Let's meet
      
    
  

Và viola, phần thứ hai đã sẵn sàng

Làm cách nào để xây dựng phần danh mục đầu tư trong Bootstrap 5?

Bây giờ, phần quan trọng nhất của mọi trang nhà phần mềm đang đến. Chúng tôi sẽ tạo một phần dự án, bao gồm bốn thẻ thành hai hàng

Đảm bảo rằng bạn có 4 hình ảnh khác cho phần này trong thư mục nội dung của mình, có thể bạn có thể sử dụng bất kỳ dự án nào của riêng mình mà bạn muốn hiển thị

Bên dưới phần Giới thiệu, hãy thêm đoạn mã sau

  

    

      
Our Projects
      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
    
  

  

    

      

        

        

          
Investment App
          
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
          
React Native, Java, REST Api
        
      
    

    

      

        

        

          
My Doc
          
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
          
Kotlin, REST Api
        
      
    
  

  

    

      

        

        

          
Socialize
          
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
          
Flutter, Machine Learning Algrithms, Python, NodeJS
        
      
    
    

      

        

        

          
Give Me A Ride
          
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
          
Google Api, Golang, Swift
        
      
    

  

Và một số CSS nữa để làm cho nó trông đẹp mắt

#projects .projects {
  margin-bottom: 50px;
}

Chỉ còn một điều nữa để hoàn thành trang web của chúng tôi. Chúng tôi sẽ thêm một phần liên hệ, với một số văn bản. Hãy thêm đoạn mã sau vào tệp

5

  

    

      

        
Contact US
        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
      
    
  

Và phần cuối cùng là thêm mã CSS cuối cùng

0

tuyệt vời. Trang web Bootstrap 5 của chúng tôi đã sẵn sàng. Đây là kết quả của mã của chúng tôi

Phần kết luận

Xin chúc mừng, bạn vừa tạo một trang đích danh mục đầu tư bằng Bootstrap 5. Nếu bạn muốn tạo trang danh mục đầu tư của riêng mình, vui lòng thêm hình ảnh và văn bản yêu thích của bạn và bạn sẽ có một trang web sẵn sàng. Nếu bạn muốn tìm hiểu cách xây dựng bảng điều khiển đơn giản trong Bootstrap, hãy xem hướng dẫn Bootstrap trước đây của chúng tôi

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

Ngoài ra, vui lòng tham gia cùng chúng tôi tại Duomly, nơi chúng tôi có khóa học Bootstrap, nơi bạn có thể học cách xây dựng thương mại điện tử

Cảm ơn bạn đã đọc,
Anna từ Duomly

Bài đọc liên quan 📖

Khóa học Angular xây dựng ứng dụng ngân hàng với Tailwind CSS – Bài 4. Đăng ký người dùng

Khóa học Angular xây dựng ứng dụng ngân hàng với Tailwind CSS – Bài 3. Số dư tài khoản người dùng

Hướng dẫn về React Hook với các ví dụ

Anna Danilec

Anna Danilec tốt nghiệp ngành Quản trị kinh doanh. Cô ấy đã có kinh nghiệm vững chắc trong nhiều năm phát triển front-end và back-end bằng cách xây dựng phần mềm cho các công ty CNTT nổi tiếng. Chuyên môn CNTT của cô ấy là React. JS, Góc, Phản ứng bản địa, Flutter, Nút. JS và Nest. JS. Trong những năm cuối, cô làm kinh doanh cho Duomly, tập trung vào CNTT cũng như Tiếp thị trực tuyến, Thiết kế và Sáng tạo nội dung như Viết blog và Youtube. Sau nhiều giờ, Anna quản lý kênh youtube tội phạm thực sự của mình, yêu thể thao, mặt trời và ẩm thực địa trung hải

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

Xây dựng trang web khởi động bằng HTML, CSS và Bootstrap .

Tổng quan về dự án website khởi nghiệp. .

Thiết lập tệp Bootstrap và tạo menu điều hướng. .

Tạo phần banner của website. .

Tạo phần dịch vụ với hiệu ứng di chuột. .

Tạo phần tính năng và khám phá trên website. .

Tạo phần đánh giá của khách hàng theo kiểu thanh trượt

Làm cách nào tôi có thể tạo trang web của riêng mình bằng HTML và CSS?

Lập kế hoạch bố trí của bạn. Bước đầu tiên của bất kỳ trang web nào là luôn biết bạn muốn gì trên đó và (mơ hồ) bạn muốn nó trông như thế nào. .

Thiết lập 'mã soạn sẵn'. .

Tạo các phần tử trong bố cục của bạn. .

Điền nội dung HTML. .

Thêm một số CSS bố cục cơ bản. .

Thêm phong cách cụ thể hơn. .

Thêm màu sắc và hình nền. .

Kỉ niệm

Có thể sử dụng CSS và Bootstrap cùng nhau không?

Cách sử dụng Bootstrap CSS. Để sử dụng Bootstrap CSS, bạn cần tích hợp nó vào môi trường phát triển của mình . Để làm điều đó, bạn chỉ cần tạo một thư mục trên máy tính của mình. Trong thư mục đó, hãy lưu các tệp CSS và JS đã biên dịch của bạn và một tệp HTML mới nơi bạn sẽ tải Bootstrap.

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

Mục tiêu học tập .

Tạo một trang web cơ bản bằng HTML

Áp dụng kiểu cho các phần tử trang bằng CSS

Tạo chủ đề bằng CSS

Thêm hỗ trợ để chuyển đổi giữa các chủ đề bằng JavaScript

Kiểm tra trang web bằng các công cụ dành cho nhà phát triển trình duyệt