Học gì trong bootstrap

Có nhiều phiên bản Bootstrap với phiên bản 4 là mới nhất. Trong bài viết này, chúng ta sẽ xây dựng một trang web bằng Bootstrap 4

điều kiện tiên quyết

Trước khi bắt đầu, có một số kỹ năng bạn sẽ phải biết để tìm hiểu và sử dụng khung Bootstrap

• nguyên tắc cơ bản về HTML
• kiến thức cơ bản về CSS
• và một số JQuery cơ bản

Mục lục

Chúng tôi sẽ đề cập đến các chủ đề bên dưới trong khi xây dựng trang web

Tải xuống và cài đặt Bootstrap 4

Có ba cách để cài đặt và bao gồm Bootstrap 4 cho dự án của bạn

1. sử dụng npm

Bạn có thể cài đặt Bootstrap 4 bằng cách chạy lệnh này

4

2. Sử dụng Mạng phân phối nội dung [CDN]

Bằng cách bao gồm liên kết này trong dự án của bạn giữa các thẻ đầu

3. Tải xuống thư viện Bootstrap 4 và sử dụng cục bộ

Cấu trúc của dự án của chúng tôi sẽ trông như thế này

Home

Tạo và bao gồm tệp

.navbar{ background:#F97300;}

.nav-link , .navbar-brand{ color: #f4f4f4; cursor: pointer;}

.nav-link{ margin-right: 1em !important;}

.nav-link:hover{ background: #f4f4f4; color: #f97300; }

.navbar-collapse{ justify-content: flex-end;}

.navbar-toggler{  background:#fff !important;}

1 để bạn có thể tùy chỉnh kiểu CSS

Đặt cái này trong thẻ

.navbar{ background:#F97300;}

.nav-link , .navbar-brand{ color: #f4f4f4; cursor: pointer;}

.nav-link{ margin-right: 1em !important;}

.nav-link:hover{ background: #f4f4f4; color: #f97300; }

.navbar-collapse{ justify-content: flex-end;}

.navbar-toggler{  background:#fff !important;}

2 trong tệp

.navbar{ background:#F97300;}

.nav-link , .navbar-brand{ color: #f4f4f4; cursor: pointer;}

.nav-link{ margin-right: 1em !important;}

.nav-link:hover{ background: #f4f4f4; color: #f97300; }

.navbar-collapse{ justify-content: flex-end;}

.navbar-toggler{  background:#fff !important;}

0 của bạn

Hãy thêm một số màu vào thanh điều hướng của chúng tôi

________số 8

Lưới Bootstrap mới được xây dựng với hệ thống Flexbox, vì vậy để căn chỉnh, bạn phải sử dụng thuộc tính Flexbox. Ví dụ: để đặt menu thanh điều hướng ở bên phải, chúng ta cần thêm thuộc tính

.navbar{ background:#F97300;}

.nav-link , .navbar-brand{ color: #f4f4f4; cursor: pointer;}

.nav-link{ margin-right: 1em !important;}

.nav-link:hover{ background: #f4f4f4; color: #f97300; }

.navbar-collapse{ justify-content: flex-end;}

.navbar-toggler{  background:#fff !important;}

4 và đặt thành

.navbar{ background:#F97300;}

.nav-link , .navbar-brand{ color: #f4f4f4; cursor: pointer;}

.nav-link{ margin-right: 1em !important;}

.nav-link:hover{ background: #f4f4f4; color: #f97300; }

.navbar-collapse{ justify-content: flex-end;}

.navbar-toggler{  background:#fff !important;}

5

7

Thêm lớp

.navbar{ background:#F97300;}

.nav-link , .navbar-brand{ color: #f4f4f4; cursor: pointer;}

.nav-link{ margin-right: 1em !important;}

.nav-link:hover{ background: #f4f4f4; color: #f97300; }

.navbar-collapse{ justify-content: flex-end;}

.navbar-toggler{  background:#fff !important;}

6 vào thanh điều hướng để đặt cho nó một vị trí cố định

Để làm sáng màu nền của thanh điều hướng, hãy thêm

.navbar{ background:#F97300;}

.nav-link , .navbar-brand{ color: #f4f4f4; cursor: pointer;}

.nav-link{ margin-right: 1em !important;}

.nav-link:hover{ background: #f4f4f4; color: #f97300; }

.navbar-collapse{ justify-content: flex-end;}

.navbar-toggler{  background:#fff !important;}

7. Đối với nền tối, hãy thêm

.navbar{ background:#F97300;}

.nav-link , .navbar-brand{ color: #f4f4f4; cursor: pointer;}

.nav-link{ margin-right: 1em !important;}

.nav-link:hover{ background: #f4f4f4; color: #f97300; }

.navbar-collapse{ justify-content: flex-end;}

.navbar-toggler{  background:#fff !important;}

8 và đối với nền màu xanh nhạt, hãy thêm

.navbar{ background:#F97300;}

.nav-link , .navbar-brand{ color: #f4f4f4; cursor: pointer;}

.nav-link{ margin-right: 1em !important;}

.nav-link:hover{ background: #f4f4f4; color: #f97300; }

.navbar-collapse{ justify-content: flex-end;}

.navbar-toggler{  background:#fff !important;}

9.

Đây là cách nó sẽ trông như thế nào

2

tiêu đề

3

Hãy thử và tạo bố cục cho tiêu đề

Ở đây, chúng tôi muốn đảm bảo rằng tiêu đề chiếm chiều cao của cửa sổ, vì vậy chúng tôi sẽ sử dụng một mã nhỏ

70

Đầu tiên, tạo một tệp có tên

71 và đưa nó vào tệp

.navbar{ background:#F97300;}

.nav-link , .navbar-brand{ color: #f4f4f4; cursor: pointer;}

.nav-link{ margin-right: 1em !important;}

.nav-link:hover{ background: #f4f4f4; color: #f97300; }

.navbar-collapse{ justify-content: flex-end;}

.navbar-toggler{  background:#fff !important;}

0 trước thẻ đóng

73

8

Trong tệp

74, hãy chèn đoạn mã nhỏ này của JQuery

0

Sẽ thật tuyệt nếu chúng ta đặt một hình nền đẹp cho tiêu đề

col-lg-2 // class used for large devices like laptops
col-md-2 // class used for medium devices like tablets
col-sm-2// class used for small devices like mobile phones

0Home 0

Thêm

31 vào mỗi hình ảnh để làm cho nó phản hồi nhanh

Mỗi mục trong thư viện của chúng tôi sẽ chiếm 4 cột [hãy nhớ,

32 cho thiết bị trung bình,

33 cho thiết bị lớn]. Đó là bằng 33. 33333% trên các thiết bị lớn như máy tính để bàn và máy tính bảng lớn và 12 cột trên thiết bị nhỏ [như iPhone, thiết bị di động] sẽ chiếm 100% vùng chứa

Hãy thêm một số kiểu dáng vào Thư viện của chúng tôi

  
   
 Home
  
 

     

 

     About        
  

    Portfolio    
 
 
 
    Blog         
   
  
            Team       
  
 
 Contact       
 
 

1

Mục blog

Home 2

Chúng ta cần thêm một số kiểu CSS vào thẻ

  
   
 Home
  
 

     

 

     About        
  

    Portfolio    
 
 
 
    Blog         
   
  
            Team       
  
 
 Contact       
 
 

3

Sau khi thêm phần Blog vào trang web của chúng tôi, thiết kế bây giờ trông giống như thế này

Home 4

Và hãy thêm một số phong cách

  
   
 Home
  
 

     

 

     About        
  

    Portfolio    
 
 
 
    Blog         
   
  
            Team       
  
 
 Contact       
 
 

5

Thêm lớp phủ vào hình ảnh khi di chuột bằng hoạt ảnh sẽ rất tuyệt phải không?

Home 6

siêu mát. ?

Mâu liên hệ

Home 7

phần liên hệ'styles

chủ yếu. css

  
   
 Home
  
 

     

 

     About        
  

    Portfolio    
 
 
 
    Blog         
   
  
            Team       
  
 
 Contact       
 
 

8

Phông chữ

Tôi nghĩ phông chữ mặc định rất xấu nên chúng tôi sẽ sử dụng Google Font API và chúng tôi sẽ chọn Raleway, một phông chữ đẹp và phù hợp với mẫu của chúng tôi

Thêm liên kết này vào tệp

.navbar{ background:#F97300;}

.nav-link , .navbar-brand{ color: #f4f4f4; cursor: pointer;}

.nav-link{ margin-right: 1em !important;}

.nav-link:hover{ background: #f4f4f4; color: #f97300; }

.navbar-collapse{ justify-content: flex-end;}

.navbar-toggler{  background:#fff !important;}

1 của bạn

  
   
 Home
  
 

     

 

     About        
  

    Portfolio    
 
 
 
    Blog         
   
  
            Team       
  
 
 Contact       
 
 

9

và đặt kiểu toàn cầu thành HTML và các thẻ tiêu đề

0

Hiệu ứng cuộn

Điều cuối cùng còn thiếu là hiệu ứng cuộn. Ở đây, chúng ta sẽ phải sử dụng một số JQuery. Đừng lo lắng️ nếu bạn không quen với nó, chỉ cần thêm mã này vào tệp

71 của bạn

1

và thêm thuộc tính

00 vào mỗi liên kết thanh điều hướng

2

Đặt thuộc tính

01 cho mỗi phần

Ghi chú.

01 phải giống với thuộc tính

00 trong liên kết thanh điều hướng để cuộn hoạt động

3

Tổng kết và Kết luận

Bootstrap 4 là một lựa chọn tuyệt vời để xây dựng ứng dụng web của bạn. Nó cung cấp chất lượng cao của các yếu tố giao diện người dùng và dễ dàng tùy chỉnh, tích hợp và sử dụng. Nó cũng sẽ giúp bạn đưa khả năng phản hồi vào trang web của mình, do đó mang lại trải nghiệm người dùng cao cấp cho người dùng của bạn

Bạn sẽ tìm thấy các tệp của dự án trên GitHub

Nếu bạn cần một số chủ đề và mẫu Bootstrap, bạn có thể xem BootstrapBay, họ có một số sản phẩm tuyệt vời

Hãy xem Lớp Bootstrap của tôi để tìm hiểu Bootstrap 4

Khóa học cấp tốc Bootstrap 4. cơ bản để nâng cao. Hayani nói. Chia sẻ kỹ năng
Trong lớp này, bạn sẽ học bootstrap phiên bản 4, khung CSS để xây dựng các mẫu linh hoạt và…skl. ch

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

Nếu bài viết này hữu ích, hãy tweet nó

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Bootstrap có dễ học không?

Kỹ năng Bootstrap là gì?