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

Các tính năng mới của Bootstrap 4

Có gì mới trong Bootstrap 4?

Bootstrap 4 hiện có một số tính năng tuyệt vời không tồn tại trong phiên bản trước

• Bootstrap 4 được viết bằng Flexbox Grid, trong khi Bootstrap 3 được viết bằng phương thức float.
  Nếu bạn là người mới sử dụng Flexbox thì hãy xem hướng dẫn này.
• Bootstrap 4 sử dụng các đơn vị CSS
  5 trong khi Bootstrap 3 sử dụng
  6.
  Xem hai đơn vị này khác nhau như thế nào.
• Bảng điều khiển, hình thu nhỏ và giếng đã bị loại bỏ hoàn toàn.
  Bạn có thể đọc chi tiết hơn về các thay đổi chung và các tính năng đã bị xóa của Bootstrap 4.

Không đi quá sâu vào chi tiết ở đây, hãy chuyển sang một số điều quan trọng khác

Hệ thống Lưới Bootstrap

Hệ thống Lưới Bootstrap giúp bạn tạo bố cục và dễ dàng xây dựng một trang web đáp ứng. Không có bất kỳ thay đổi nào trong tên lớp, ngoại trừ lớp

7, không còn tồn tại trong Bootstrap 4

Lưới được chia thành 12 cột, vì vậy bố cục của bạn sẽ dựa trên điều này

Để sử dụng hệ thống lưới, bạn sẽ phải thêm một lớp

8 vào div chính

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

thanh điều hướng

Trình bao bọc thanh điều hướng khá tuyệt trong Bootstrap 4. Nó rất hữu ích khi xây dựng một thanh điều hướng đáp ứng

Để có được nó, chúng tôi sẽ thêm lớp

9 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 của chúng tôi

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

0

Hãy thêm lớp phủ để làm cho tiêu đề trông chuyên nghiệp hơn một chút.

Thêm phần 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;}

0 của bạn

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

1

Sau đó, thêm phần 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

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

2

Bây giờ chúng ta phải thêm một mô tả bên trong tiêu đề

Để kết thúc phần mô tả của chúng ta, trước tiên chúng ta sẽ tạo một

77 và đặt cho nó một lớp

78

78 là một lớp Bootstrap sẽ giúp bạn bọc nội dung của mình và làm cho bố cục của bạn phản hồi nhanh hơn

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

3

Sau đó, thêm một

77 khác sẽ chứa mô tả

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

4

Chúng tôi sẽ cung cấp cho nó lớp

21 và thêm lớp

22 để đảm bảo nội dung được đặt ở giữa trang

nút

Thêm lớp

23 vào phần tử

24. có nhiều lớp Bootstrap khác cho các nút

Kiểm tra một số ví dụ

CodePen Embed — các nút trong Bootstrap 4
Các nút Nút chính Nút mặc định Nút nguy hiểm Thông tin nút Cảnh báo nút Nút tối Nút thành công Các nút…codepen. io

Đây là cách tạo kiểu cho

21 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;}

1

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

5

Sau tất cả, tiêu đề của chúng tôi sẽ trông như thế này

Tuyệt vời không. )

Giới thiệu phần

Trong phần này, chúng tôi sẽ sử dụng một số Lưới Bootstrap để chia phần thành hai phần

Để bắt đầu grid của chúng ta, chúng ta phải gán lớp

8 cho lớp cha

77

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

6

Phần đầu tiên sẽ ở bên trái và sẽ chứa hình ảnh, phần thứ hai sẽ ở bên phải và chứa mô tả

Mỗi

77 sẽ chiếm 6 cột — nghĩa là một nửa phần. Hãy nhớ rằng một lưới được chia thành 12 cột

Trong

77 đầu tiên ở phía bên trái

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

7

Sau khi thêm các phần tử HTML vào bên phải, cấu trúc của mã sẽ như thế này

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

8

Đây là cách tôi đã làm cho nó trông như thế nào

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

9

Phần danh mục đầu tư

Bây giờ, hãy chuyển sang phần tiếp theo và tạo một phần danh mục đầu tư sẽ chứa một thư viện

Cấu trúc mã HTML của chúng tôi cho phần Danh mục đầu tư trông như thế này

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

1

Mục blog

thẻ

Thẻ trong Bootstrap 4 giúp thiết kế blog dễ dàng hơn rất nhiều. Các thẻ thích hợp cho các bài viết và bài viết

Để tạo một thẻ, chúng ta sử dụng lớp

34 và gán nó cho một phần tử div,

Lớp thẻ chứa nhiều tính năng

• 35. xác định tiêu đề thẻ

• 36. cho cơ thể thẻ

• 37. tiêu đề của thẻ

• 38. xác định chân trang của thẻ

• 39. cho hình ảnh của thẻ

Vì vậy, HTML của trang web của chúng tôi bây giờ sẽ trông giống như thế này

2

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

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

Thật tuyệt phải không?

Phần đội

Trong phần này, chúng tôi sẽ sử dụng hệ thống lưới để phân phối không gian đồng đều giữa các hình ảnh. Mỗi hình ảnh chiếm 3 cột (

80) của vùng chứa — tương đương với 25% tổng dung lượng

Cấu trúc HTML của chúng tôi

4

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

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?

Để tạo hiệu ứng này, hãy thêm các kiểu bên dưới 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

6

siêu mát. ?

Mâu liên hệ

Biểu mẫu liên hệ là phần cuối cùng để thêm, sau đó chúng tôi đã hoàn thành ?

Phần Biểu mẫu liên hệ sẽ chứa một biểu mẫu mà qua đó khách truy cập có thể gửi email hoặc đưa ra phản hồi. Chúng tôi sẽ sử dụng một số lớp Bootstrap để làm cho thiết kế đẹp và đáp ứng

Giống như Bootstrap 3, Bootstrap 4 cũng sử dụng lớp

82 cho các trường nhập liệu, nhưng có thêm một số tính năng mới — như chuyển từ

83 (không dùng nữa) sang

84 (để sử dụng biểu tượng làm nhãn)

Xem để biết thêm thông tin. Trong biểu mẫu Liên hệ của chúng tôi, chúng tôi sẽ bọc từng đầu vào giữa một

77 có lớp

86

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 bây giờ trông giống như thế này

7

phần liên hệ'styles

chủ yếu. css

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

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ì?