Hướng dẫn how to deploy bootstrap website - cách triển khai trang web bootstrap

Bootstrap, là chủ đề của hướng dẫn này, là một khung phía trước giúp bạn xây dựng các trang web đáp ứng di động nhanh hơn và dễ dàng hơn. Đầu tiên được phát triển bởi Twitter, giờ đây nó cung cấp năng lượng cho bất cứ thứ gì từ các ứng dụng web đến các chủ đề WordPress. Người dùng nổi tiếng bao gồm Spotify, LinkedIn, trong số những người khác. Khung cũng hoàn toàn miễn phí, linh hoạt và trực quan.

Với Bootstrap, bạn có thể kết hợp các trang web phức tạp từ HTML tiêu chuẩn và tùy chỉnh chúng theo nhu cầu của bạn. Nó cũng đi kèm với các chức năng bổ sung như băng chuyền, nút, cửa sổ bật lên, và nhiều hơn nữa.

Cuối cùng, nhưng không kém phần quan trọng, Bootstrap cung cấp cho bạn rất nhiều phím tắt để tạo các trang web sẽ giúp bạn tiết kiệm thời gian và năng lượng. Tất cả những gì bạn cần là sự hiểu biết cơ bản về HTML và CSS để tạo các trang web đáp ứng, đầu tiên trên thiết bị di động và tương thích với tất cả các trình duyệt hiện đại.

P.S. Mặc dù Bootstrap là tuyệt vời, nhưng nó không phải là một lựa chọn hoàn hảo cho người mới bắt đầu hoàn chỉnh. Nếu bạn hoàn toàn không có kinh nghiệm sử dụng đánh dấu, thay vào đó, bạn có thể sử dụng một nhà xây dựng trang web hoặc WordPress để tạo một trang web. While Bootstrap is awesome, it’s not a perfect option for complete beginners. If you have absolutely no experience using markup, alternatively, you can use a website builders or WordPress to create a website.

Cách tạo trang web bằng Bootstrap (Bảng nội dung):

• Bước 1: Thiết lập và tổng quanSetup and overview
  1. Tạo trang HTML
  2. Tải Bootstrap qua CDN hoặc lưu trữ cục bộ
  3. Bao gồm jQuery
  4. Tải Bootstrap JavaScript
  5. Đặt nó tất cả cùng nhau
• Bước 2: Thiết kế trang đích của bạnDesign your landing page
  1. Thêm một thanh điều hướng
  2. Bao gồm CSS tùy chỉnh
  3. Tạo một thùng chứa nội dung trang
  4. Thêm hình ảnh nền và JavaScript tùy chỉnh
  5. Thêm một lớp phủ
  6. Bao gồm một tiêu đề trang và văn bản cơ thể
  7. Tạo nút CTA
  8. Thiết lập phần ba cột
  9. Thêm một biểu mẫu liên hệ
  10. Bao gồm một phần nhóm
  11. Tạo chân trang hai cột
  12. Thêm truy vấn truyền thông
  13. Tạo các trang bổ sung
  14. Phần thưởng: Tạo một phương thức
  15. Nhận trang web của bạn trực tiếp

Tổng thời gian để tạo một trang web bằng Bootstrap: 3-4 giờ. Cấp độ: Người mới bắt đầu đến Trung cấp3-4 hours.
Skill level: Beginner to Intermediate

Hướng dẫn Boostrap Bước 1: Thiết lập và tổng quan

Để sử dụng Bootstrap, trước tiên bạn cần tích hợp nó vào môi trường phát triển của mình, hay còn gọi là trang web. Đối với điều đó, bạn có hai khả năng khác nhau: tải nó từ xa hoặc tải xuống và sử dụng bootstrap cục bộ. Tuy nhiên, đối với cả hai, trước tiên bạn cần một cái gì đó để tải nó vào.

1. Tạo trang HTML

Là bước đầu tiên trong hướng dẫn này, chúng tôi sẽ tạo một mẫu HTML đơn giản làm cơ sở nơi chúng tôi sẽ sử dụng Bootstrap. Đối với điều đó, điều đầu tiên bạn muốn làm là tạo một thư mục trên máy tính hoặc máy chủ của bạn cho các tệp dự án. Trong trường hợp này, chúng tôi sẽ chỉ cần gọi nó là bootstrap. Tại đây, tạo một tệp văn bản mới và gọi nó là index.html. Mở nó bằng một trình soạn thảo văn bản mà bạn chọn (ví dụ: Notepad ++) và sau đó dán mã bên dưới vào nó.

!DOCTYPE html>

    
        
        
        
      
	
    
	
	
	

Don Tiết quên lưu tập tin của bạn trước khi tiếp tục.

2A. Tải Bootstrap qua CDN

Như đã giải thích, Bootstrap bao gồm chủ yếu là các trang và kịch bản phong cách. Do đó, chúng có thể được tải trong tiêu đề và chân trang của trang web của bạn như các tài sản khác như phông chữ tùy chỉnh. Khung cung cấp đường dẫn truy cập CDN (mạng phân phối nội dung) cho điều đó. Bạn có thể tìm thấy nó trên trang Tải xuống Bootstrap khi bạn cuộn xuống.

Để đưa Bootstrap vào trang của bạn, chỉ cần dán mã bên dưới vào phần

Hãy chắc chắn lấy liên kết thực tế từ trang tải xuống để đảm bảo bạn đang sử dụng phiên bản Bootstrap mới nhất.

Khi bạn lưu tệp, bất kỳ trình duyệt nào mở nó sẽ tự động tải tài sản bootstrap.

Sử dụng phương thức từ xa là một ý tưởng tốt vì nhiều người dùng sẽ có tệp trong bộ đệm của trình duyệt của họ từ việc tải các trang web dựa trên bootstrap khác. Nếu đó là trường hợp, họ đã giành được tải lại khi đến trang web của bạn, dẫn đến thời gian tải trang nhanh hơn. Kết quả là, đây là phương pháp được đề xuất cho các trang web trực tiếp.

Tuy nhiên, để thử nghiệm và phát triển, hoặc nếu bạn muốn độc lập với kết nối internet, bạn cũng có thể nhận bản sao các tệp của riêng mình. Đây là những gì chúng tôi làm cho hướng dẫn bootstrap này vì nó cũng dẫn đến ít mã mà chúng tôi cần đăng.

2B. Máy chủ bootstrap cục bộ

Một cách khác để thiết lập Bootstrap là tải xuống ổ cứng của bạn và sử dụng các tệp cục bộ. Bạn tìm thấy các tùy chọn tải xuống ở cùng một nơi với các liên kết đến phiên bản từ xa. Hãy chắc chắn để có được các tệp CSS và JS được biên dịch. Bạn không cần các tập tin nguồn.

Khi bạn đã hoàn thành tải xuống, giải nén tệp và sao chép nội dung của nó vào cùng thư mục với index.html. Sau đó, bạn có thể tải Bootstrap CSS vào dự án của mình như thế này:

Bạn sẽ nhận thấy rằng điều này bao gồm đường dẫn tệp để tìm tệp bootstrap. Trong trường hợp của bạn, hãy đảm bảo đường dẫn của bạn tương ứng với thiết lập thực tế của bạn. Ví dụ: tên của các thư mục có thể khác nhau nếu bạn tải xuống một phiên bản khác của Bootstrap.

3. Bao gồm jQuery

Để có được chức năng đầy đủ của Bootstrap, bạn cũng cần tải thư viện jQuery. Ở đây cũng vậy, bạn có khả năng tải nó từ xa hoặc lưu trữ nó tại địa phương.

. sẽ bao gồm nó.)

Bạn tìm thấy liên kết đến phiên bản mới nhất của thư viện jQuery tại đây (nhấp vào bất kỳ liên kết nào để lấy URL từ xa). Bạn có thể sử dụng nó để tải thư viện vào trang của mình bằng cách đặt dòng mã bên dưới ngay trước khi nói

Ngoài ra, tải xuống jQuery (nhấp chuột phải> lưu liên kết dưới dạng), giải nén và đưa nó vào thư mục dự án. Sau đó, bao gồm nó ở cùng một vị trí của tệp của bạn theo cách này:

Một lần nữa, hãy đảm bảo đường dẫn tương ứng với vị trí và phiên bản jQuery của bạn.

4. Tải Bootstrap JavaScript

Bước cuối cùng trong việc thiết lập Bootstrap là tải thư viện JavaScript Bootstrap. Nó bao gồm trong phiên bản tải xuống của khung và bạn cũng tìm thấy các liên kết đến các nguồn từ xa ở cùng một nơi như đã đề cập ở trên. Tuy nhiên, chúng tôi sẽ tải nó ở một nơi khác với bảng kiểu. Thay vì tiêu đề, nó đi vào chân trang, ngay sau cuộc gọi cho jQuery.

Bạn có thể gọi nó từ xa như thế này:

Hoặc tại địa phương như vậy:

5. Đặt tất cả lại với nhau

Nếu bạn đã làm theo các bước trên chính xác, bạn sẽ kết thúc với một tệp trông như thế này cho giải pháp từ xa:

Và đây là những gì bạn nên có cho phiên bản tải tất cả các tài sản cục bộ:

Nếu điều đó trông giống như những gì trong tập tin của bạn và bạn đã lưu công việc của mình, thì bây giờ bạn đã sẵn sàng để chuyển sang bước tiếp theo.

Hướng dẫn Bootstrap Bước 2: Thiết kế trang đích của bạn

Được rồi, đó là, thừa nhận, rất nhiều công việc chuẩn bị. Tuy nhiên, nó rất khó, phải không? Thêm vào đó, bây giờ niềm vui bắt đầu.

Hiện tại, khi bạn mở trang web mẫu của mình trong trình duyệt, bạn chỉ nên xem một trang trống. Thời gian để thay đổi điều đó. Để dạy cho bạn Bootstrap, trong hướng dẫn này, chúng tôi sẽ xây dựng một trang đích với các yếu tố khác nhau để chúng tôi có thể cho bạn thấy nhiều trường hợp sử dụng của khung phía trước.

1. Thêm thanh điều hướng

Điều đầu tiên chúng tôi muốn làm là thêm một thanh điều hướng vào đầu trang. Làm như vậy cho phép khách truy cập của bạn đi vòng quanh trang web của bạn và khám phá phần còn lại của các trang của bạn.

Đối với điều đó, chúng tôi sẽ sử dụng lớp

Bạn có thể bắt đầu bằng cách đăng bài này ngay sau thẻ

Một số giải thích về mã

Đánh dấu ở trên có lẽ chứa đầy các lớp CSS chưa biết. Đây là ý nghĩa của họ:

• 5-Điều này biểu thị tại đó thanh điều hướng mở rộng từ biểu tượng dọc hoặc hamburger sang một thanh ngang kích thước đầy đủ. Trong trường hợp này, chúng tôi đã đặt nó thành màn hình trung bình, trong bootstrap, là bất cứ điều gì lớn hơn 768px.

• 6 - Điều này được sử dụng cho thương hiệu trang web của bạn. Bạn cũng có thể bao gồm một tệp hình ảnh logo ở đây.

• 7 - biểu thị nút chuyển đổi cho menu bị thu gọn. Phần
  8 định nghĩa rằng điều này sẽ chuyển sang menu Hamburger, không phải để thả xuống, đó là tùy chọn khác. Điều quan trọng là bạn xác định mục tiêu dữ liệu với ID CSS (được xác định bởi
  9) và bọc
  0 có cùng tên xung quanh phần tử
  3 thực tế.

• 2 - Như bạn có thể đoán, điều này tạo ra người dùng biểu tượng nhấp vào để mở menu trên các màn hình nhỏ hơn.

• 3 - Lớp cho phần tử danh sách
  4 giữ các mục menu. Cái sau được ký hiệu là
  5 và
  6.

Tại sao chúng ta giải thích điều này rất nhiều?

Bởi vì đó là điểm của bootstrap. Nó đi kèm với tất cả các tiêu chuẩn này cho phép bạn nhanh chóng tạo các yếu tố với một số HTML và CSS. Bạn cũng không phải lo lắng về bố cục, vì mọi thứ đã được thiết lập trong Bootstrap. Thêm vào đó, nó có tất cả các thiết bị di động đáp ứng ra khỏi hộp! Bạn bắt đầu thấy điều này hữu ích như thế nào?

Trên đây là đủ để thêm một thanh điều hướng vào trang web của bạn. Tuy nhiên, tại thời điểm này, nó vẫn trông rất ít.

Điều đó bởi vì nó không có nhiều kiểu dáng gắn liền với nó. Mặc dù bạn có thể thêm màu mặc định (ví dụ, bằng cách cho

2. Bao gồm CSS tùy chỉnh

May mắn thay, nếu bạn muốn thay đổi kiểu dáng mặc định, bạn không phải lội qua một thư viện lớn các bảng phong cách và thực hiện các thay đổi bằng tay. Thay vào đó, giống như với chủ đề WordPress Con, bạn có thể thêm các tệp CSS của riêng mình mà bạn có thể sử dụng để ghi đè lên kiểu dáng hiện có.

Đối với điều đó, chỉ cần tạo một tệp trống với trình soạn thảo văn bản của bạn và gọi nó là main.css. Lưu nó, sau đó thêm nó vào phần đầu của trang web bootstrap của bạn như thế này:

Đây là mã cho một bảng kiểu nằm trong thư mục chính. Nếu bạn quyết định đặt thư mục CSS bên trong, hãy chắc chắn bao gồm đường dẫn chính xác trong liên kết.

Từ đây, bạn có thể thêm CSS tùy chỉnh vào trang web của mình. Ví dụ: để tạo kiểu cho nền trang cũng như thanh điều hướng và các yếu tố của nó, bạn có thể sử dụng đánh dấu như thế này:

Và đây là kết quả:

Trông đẹp hơn trước, phải không?

3. Tạo một thùng chứa nội dung trang

Sau thanh điều hướng, điều tiếp theo bạn muốn là một thùng chứa cho nội dung trang. Điều này thực sự dễ dàng trong Bootstrap vì tất cả những gì bạn cần cho nó là bên dưới thẻ

Lưu ý lớp

Phần

Tuy nhiên, nếu bây giờ bạn tải lại trang, bạn vẫn giành được bất cứ điều gì (trừ khi bạn sử dụng các công cụ phát triển). Điều đó bởi vì bạn chỉ tạo ra một phần tử HTML trống. Điều này sẽ bắt đầu thay đổi ngay bây giờ.

4. Thêm hình ảnh nền và JavaScript tùy chỉnh

Là bước tiếp theo trong hướng dẫn bootstrap này, chúng tôi muốn bao gồm một hình ảnh toàn màn hình cho tiêu đề trang đích của chúng tôi. Cuối cùng, chúng ta sẽ phải sử dụng một số jquery hoặc javascript để làm cho hình ảnh kéo dài khắp màn hình.

Bạn làm điều đó giống như cách bạn bao gồm CSS tùy chỉnh. Đầu tiên, tạo một tệp văn bản của tên main.js và đặt nó bên trong thư mục trang web của bạn. Sau đó, gọi nó trước khi đóng thẻ

Sau đó, bạn có thể sao chép và dán đoạn mã jQuery này để tạo phần tử

Tuy nhiên, như đã đề cập, Bootstrap 5 sẽ không còn đi kèm với thư viện jQuery. Do đó, thay thế và bằng chứng trong tương lai, trang web của bạn, bạn có thể đạt được điều tương tự với JavaScript đơn giản như vậy:

Sau đó, điều duy nhất mà còn lại là đặt một hình ảnh nền. Bạn có thể làm điều này như vậy bên trong Main.css:

Nếu bạn đặt một hình ảnh có kích thước đủ tại vị trí được chỉ định bởi đường dẫn trên, bạn sẽ đạt được kết quả tương tự như thế này:

5. Thêm một lớp phủ

Để làm cho hình nền thêm phong cách, chúng tôi cũng sẽ thêm một lớp phủ. Đối với điều đó, hãy tạo một div khác bên trong phần tử

Sau đó, bạn có thể thêm thông tin sau trong tệp CSS tùy chỉnh của mình:

Điều này sẽ tạo ra lớp phủ đẹp này cho hình ảnh bạn nhập trước đó:

6. Bao gồm một tiêu đề trang và văn bản cơ thể

Như một bước tiếp theo, bạn có thể muốn thêm một tiêu đề trang dưới dạng tiêu đề cộng với một số văn bản cơ thể. Bằng cách đó, khách truy cập của bạn sẽ biết ngay trang web họ đang ở và những gì họ có thể mong đợi từ nó.

Để tạo chúng, chỉ cần thêm đoạn trích này bên trong thùng chứa bạn đã thiết lập trong bước cuối cùng, bên dưới lớp phủ:

Sau đó, thêm đánh dấu sau vào main.css.

Khi bạn làm như vậy, trang đích bây giờ trông như thế này:

Nó thực sự bắt đầu đến với nhau, phải không?

7. Tạo nút CTA

Không có trang đích nào hoàn thành mà không có lời kêu gọi hành động, thường xuyên nhất ở dạng nút. Vì lý do đó, chúng tôi sẽ không bao gồm cách tạo một cái trong hướng dẫn bootstrap này.

May mắn thay, khung cung cấp nhiều công cụ để tạo nút nhanh chóng và dễ dàng. Bạn có thể tìm thấy rất nhiều ví dụ ở đây. Trong trường hợp của chúng tôi, chúng tôi thêm đánh dấu sau ngay bên dưới nội dung trang bên trong thùng chứa

Ngoài ra, chúng tôi thêm CSS này vào

Sau khi tiết kiệm và tải lại, có vẻ như sau:

8. Thiết lập phần ba cột

Chúng ta đã có thể khá hài lòng với cách mọi thứ đang định hình. Tuy nhiên, chúng tôi chưa hoàn thành với trang. Tiếp theo, chúng tôi muốn tạo ba cột bên dưới nội dung chính để biết thêm thông tin. Đây là một đặc sản của bootstrap vì nó phát ra sức mạnh của nó, tạo ra một lưới và không có hướng dẫn nào hoàn thành mà không có nó. Đây là cách làm điều đó trong trường hợp này:

Điều đầu tiên bạn sẽ nhận thấy là yếu tố

Đối với các cột, tất cả chúng đều có một số lớp:

Để hiểu điều này, bạn cần biết rằng trong lưới bootstrap, tất cả các cột trong một hàng luôn cộng vào số mười hai. Vì vậy, cung cấp cho họ các lớp trên có nghĩa là chúng sẽ chiếm một phần ba màn hình trên màn hình lớn và trung bình (12/4 = 3) nhưng toàn bộ màn hình trên các thiết bị nhỏ (mười hai trong số mười hai cột).

Nó có ý nghĩa, phải không?

Bạn cũng sẽ nhận thấy rằng chúng tôi đã bao gồm hình ảnh và thêm lớp

Ngoài ra, bạn có thể bao gồm kiểu dáng sau ở nơi thông thường:

Khi được thêm vào bên dưới nội dung chính và được lưu, có vẻ như sau:

Nhân tiện, nếu bạn không muốn đặt thủ công Shadow Shadow trên các phần tử của mình thông qua CSS, bạn cũng có thể chỉ định các lớp được đặt trước Bootstrap tựa cho điều đó. Đây là

9. Thêm một biểu mẫu liên hệ

Bạn sẽ nhận thấy rằng một trong những trường mới vẫn còn trống. Đây là mục đích vì chúng tôi muốn thêm một biểu mẫu liên hệ vào nó. Đây là một thực tế rất bình thường cho các trang đích để cho phép khách truy cập liên lạc.

Tạo một biểu mẫu liên hệ trong Bootstrap khá dễ dàng:

Hãy chú ý đến các lớp CSS này:

• 6 - Được sử dụng để quấn quanh các trường mẫu để định dạng.

• 7 - biểu thị các trường mẫu như đầu vào, khu vực văn bản, v.v.

Có rất nhiều bạn có thể làm với các biểu mẫu, mà bạn có thể tìm ra trong tài liệu. Tuy nhiên, đối với mục đích trình diễn, những điều trên là đủ. Đặt nó bên trong cột trống còn lại và sau đó thêm kiểu dáng này vào Main.css:

Khi bạn làm, bạn có được một biểu mẫu như thế này:

10. Bao gồm một phần nhóm

Bố cục thẻ là một điều khác Bootstrap vượt trội. Các lớp CSS tùy chỉnh của nó làm cho việc tạo ra một bố cục giống như Pinterest là một cinch. Sau đây, chúng tôi sẽ sử dụng điều này để thiết lập một phần nhóm, nơi chúng tôi hiển thị các thành viên trong nhóm và vị trí của họ trong công ty.

Tuy nhiên, chúng tôi muốn làm cho phần này một màu khác nhau. Vì lý do đó, trước tiên chúng tôi bao gồm một yếu tố

Tạo thẻ rất dễ dàng, chỉ cần cung cấp cho một yếu tố lớp

Thẻ có thể chứa các yếu tố khác nhau. Trong trường hợp của chúng tôi, chúng tôi muốn một hình ảnh ở trên cùng, theo sau là một tiêu đề (tên của người đó) và một mô tả nói những gì họ làm. Như có lẽ không có gì ngạc nhiên, Bootstrap cung cấp các lớp tùy chỉnh cho tất cả những điều đó.

Đối với hình ảnh, chúng tôi sẽ sử dụng lớp

Sau đó, chúng tôi tạo ra một yếu tố mới với lớp

Khi chúng ta đặt nó bên trong phần tử hàng, sao chép nó tám lần và đặt các tệp hình ảnh vào các vị trí tương ứng, chúng ta sẽ nhận được kết quả này.

Tất nhiên, để làm cho nó trông như thế này, chúng tôi cũng bao gồm một số CSS tùy chỉnh. Đây là đánh dấu bạn có thể thêm vào bảng kiểu của mình:

11. Tạo chân trang hai cột

Được rồi, bây giờ chúng ta đang đi đến cuối hướng dẫn bootstrap. Điều cuối cùng chúng tôi muốn thêm vào trang đích của chúng tôi là một phần chân trang với hai cột. Đến bây giờ, điều này không nên đặt ra nhiều vấn đề cho bạn nữa.

Bên cạnh việc đánh dấu lưới thông thường, phần này làm nổi bật một vài khả năng để sửa đổi kiểu chữ bằng bootstrap:

• 6

• 7

• 0

Nó nên khá rõ ràng từ tên của các lớp mà họ làm. Bạn có thể tìm thêm thông tin về bootstrap và kiểu chữ ở đây.

Ngoài những điều trên, bạn có thể sử dụng kiểu dáng như thế này:

Điều này dẫn đến một chân trang đẹp trông như vậy:

12. Thêm truy vấn truyền thông

Trang về cơ bản đã sẵn sàng cho đến bây giờ. Nó cũng hoàn toàn đáp ứng. Tuy nhiên, trong chế độ xem di động của trình duyệt, một số phần không được đưa ra hoàn toàn đúng. Ví dụ: ở đây, những gì hình ảnh tiêu đề trông như thế nào trên thiết bị di động:

Tuy nhiên, không phải lo lắng, bạn có thể sửa nó khá dễ dàng với một truy vấn phương tiện đơn giản. Trừ khi bạn đang sử dụng SASS để biên dịch trang web bootstrap của mình, chúng hoạt động giống như trong các trường hợp khác. Bạn chỉ cần ghi nhớ các điểm dừng đặt trước có trong bootstrap.

Kết quả là, để khắc phục vấn đề trên, bạn có thể chỉ cần bao gồm một đoạn mã như sau:

Sau đó, mọi thứ đều như vậy:

Nếu bạn tải xuống các tệp bên dưới, bạn cũng sẽ thấy một số đánh dấu khác trong phần truy vấn phương tiện để tạo kiểu cho một số phần khác của trang đích trên các màn hình nhỏ hơn.

13. Tạo các trang bổ sung

Cho đến nay, chúng tôi chỉ xây dựng một trang duy nhất cho trang web Bootstrap của chúng tôi. Tuy nhiên, bạn có thể nhớ rằng, khi thiết lập menu điều hướng, chúng tôi đã bao gồm một số mục menu. Tuy nhiên, hiện tại, các liên kết này không dẫn đến bất cứ nơi nào khi bạn nhấp vào chúng.

Nếu bạn muốn thay đổi điều đó và thêm các trang bổ sung vào trang web Bootstrap của bạn, thì không có gì dễ dàng hơn thế. Cách đơn giản nhất là chỉ cần đi để tạo một bản sao của

Vì vậy, ví dụ, chúng tôi có thể đặt tên cho bản sao

Khi bạn có tệp thứ hai, tất cả những gì còn lại để làm là đảm bảo liên kết trong menu điều hướng thực sự trỏ đến nó như vậy:

Lưu ý nhanh: Để hoạt động này,

Đó là nó, bây giờ bạn có một trang thứ hai trên trang web bootstrap của bạn có thể được truy cập từ menu điều hướng! Chỉ cần chắc chắn rằng, bất cứ khi nào bạn thay đổi liên kết điều hướng hoặc thêm nhiều trang hơn vào trang web của mình, bạn cũng phải cập nhật các liên kết trong tất cả các tệp khác.

14. Phần thưởng: Tạo một phương thức

Như một phần thưởng, chúng tôi cũng sẽ tạo một phương thức cho trang web thử nghiệm của chúng tôi. Điều này hoàn toàn cần thiết nhưng đó là một cơ hội tuyệt vời để thể hiện thêm một số khả năng của Bootstrap và làm tròn hướng dẫn này.

Trong trường hợp bạn không quen thuộc với thuật ngữ này, một phương thức có nghĩa là một yếu tố như cửa sổ bật lên xuất hiện trên đầu trang web. Bạn có thể sử dụng nó cho tất cả các loại mục đích. Trong trường hợp của chúng tôi, chúng tôi muốn tạo một lời nhắc để đăng ký một bản tin.

Thiết lập trình kích hoạt phương thức

Như thường lệ, Bootstrap cung cấp đánh dấu của riêng mình để đạt được điều này. Tuy nhiên, trước khi xây dựng phương thức, trước tiên chúng tôi muốn tạo trình kích hoạt để nó hiển thị trên trang. Nếu không, chúng tôi đã giành chiến thắng khi thấy những gì chúng tôi đang làm.

Để làm điều này, chỉ cần thêm phần JavaScript này vào tệp chính của bạn:

Điều này kích hoạt phương thức để hiển thị sau một thời gian xác định theo số được đặt bởi số ở cuối. Đối với bản demo, chúng tôi đã hẹn giờ đến 500 mili giây, vì chúng tôi muốn thấy phương thức nhanh chóng sau khi tải lại trong khi làm việc trên nó. Trên một trang trực tiếp, bạn sẽ tự nhiên đặt nó ở một khoảng thời gian dài hơn để khách truy cập của bạn nhìn thấy cửa sổ bật lên sau khi ở trên trang của bạn trong một thời gian.

Ngoài ra, hãy chú ý rằng những điều trên vẫn là một hàm jQuery, đó là cách Bootstrap sử dụng các phương thức tại thời điểm này. Như đã thảo luận, điều này sẽ khác nhau trong Bootstrap 5.

Tạo phương thức

Được rồi, hãy để bắt đầu với phương thức thực tế. Tất cả bắt đầu với ba yếu tố lồng nhau có các lớp

Chúng tạo ra phương thức trên đầu trang web của bạn và thiết lập cửa sổ phương thức mà bạn có thể điền vào nội dung.

Chúng tôi cũng đã cung cấp cho phần tử phương thức một id là

Tuy nhiên, nơi đặt mã này? Đó là một câu hỏi rất hay. Đánh dấu phương thức thuộc về ngay trước khi đóng thẻ

Tuy nhiên, mặc dù nó có trong đánh dấu trang, vì lớp

Điền vào nó với nội dung

Được rồi, để làm cho nó đẹp hơn. Tiếp theo, chúng tôi muốn tạo một tiêu đề phương thức với một hình ảnh bên trong cũng như nút để đóng cửa sổ bật lên. Bạn có thể làm điều này bằng cách đặt dấu hiệu này ở đây bên trong

Lưu ý lớp

Ở đây, những gì chúng ta có cho đến nay:

Bây giờ vào cơ thể phương thức, mà chúng tôi sẽ đặt bên dưới

Nếu bạn đã theo dõi theo hướng dẫn Bootstrap, các lớp

Lớp

Được rồi, có vẻ như thứ duy nhất mà còn lại là kiểu dáng. Vì vậy, bao gồm đánh dấu này trong bảng kiểu chính của bạn để đạt được cái nhìn ở trên:

15. Tải trang web của bạn lên máy chủ web

Nếu bạn đã theo dõi, bây giờ bạn nên được thiết lập với một trang web đã hoàn thành (cộng với phương thức tùy chọn) cũng hoàn toàn đáp ứng.

Tuy nhiên, cho đến nay, không ai nhưng bạn có thể nhìn thấy nó. Để thay đổi điều đó, bạn cần một máy chủ web và tên miền. Bằng cách đó, mọi người có thể nhập địa chỉ trang web của bạn vào trình duyệt của họ và sau đó truy cập trang web Bootstrap mới được đúc trực tuyến của bạn.

Để cho phép họ làm như vậy, bạn cần tải trang web lên máy chủ của mình. Bạn có thể làm điều đó với một máy khách FTP như Filezilla. Thu thập địa chỉ máy chủ FTP, tên người dùng và mật khẩu từ nhà cung cấp lưu trữ của bạn để kết nối với máy chủ của bạn từ xa. Khi bạn làm, bạn sẽ có thể xem các tập tin và thư mục hiện có trên đó.

Điều hướng đến thư mục miền của bạn được chỉ ra (thường là thư mục gốc). Khi bạn đã thực hiện điều đó, chỉ cần tìm thư mục với các tệp bootstrap của bạn trên ổ cứng, đánh dấu tất cả các tệp bên trong và sau đó kéo chúng đến máy chủ để khởi động tải lên. Quá trình sẽ mất một thời gian để hoàn thành tùy thuộc vào tốc độ kết nối của bạn cũng như số lượng và kích thước của các tệp của bạn.

Tuy nhiên, một khi nó đã hoàn thành, khi bạn truy cập tên miền của mình, bạn sẽ có thể thấy trang web đã hoàn thành trong cửa sổ trình duyệt của bạn.

Không tệ cho một vài dòng mã, phải không?

Nói về điều đó, nếu bạn muốn có toàn bộ mã bootstrap từ hướng dẫn bao gồm CSS, JavaScript và hình ảnh tùy chỉnh, bạn có thể tải xuống tất cả chúng bên dưới. Với điều này, bạn có tất cả những gì bạn cần để tạo một trang đích với bootstrap. With this, you have all you need to create a landing page with Bootstrap.

Suy nghĩ cuối cùng: Hướng dẫn về người mới bắt đầu Bootstrap

Bootstrap là một khung phát triển phía trước, nguồn mở mà bất cứ ai cũng có thể sử dụng miễn phí. Nó cho phép bạn nhanh chóng các thiết kế nguyên mẫu, tạo các trang web và thường xuất hiện trên mặt đất.

Như bạn đã thấy trong hướng dẫn bootstrap này cho người mới bắt đầu, nó chỉ cần kiến ​​thức cơ bản về HTML, CSS và một số javascripy và/hoặc javascript tùy chọn. Mặc dù không thoải mái như sử dụng WordPress, Bootstrap vẫn là một lựa chọn hợp lệ để tạo một trang web.

Đến bây giờ, bạn biết cách thiết lập và cài đặt Bootstrap và các thành phần của nó, tạo một trang đích đơn giản, bao gồm một số nội dung cơ bản và kiểu nó. Bạn có thể tạo các menu điều hướng, đặt hình nền, bao gồm các nút, cột và biểu mẫu liên hệ. Bạn thậm chí còn biết cách sử dụng thẻ Bootstrap và chức năng phương thức.

Tất nhiên, có nhiều hơn để học.

Nhờ hướng dẫn bootstrap cơ bản này, bạn đã học đủ để tiếp tục tiến lên một mình. Vì vậy, nếu bạn muốn đi sâu hơn vào khung, điểm khởi đầu tốt là W3Schools hoặc bộ phim tài liệu bootstrap mà chúng tôi đã tham khảo trong suốt bài đăng này. Bạn cũng có thể sử dụng bảng gian lận bootstrap của chúng tôi cho người mới bắt đầu tìm hiểu thêm. Nó có thể tải xuống dưới dạng PDF và PNG.

Bên cạnh đó, chúng tôi hy vọng bạn thích hướng dẫn dành cho người mới bắt đầu này và rất thích nghe suy nghĩ và kinh nghiệm của bạn khi làm việc với Bootstrap.

Bạn có bất kỳ suy nghĩ, câu hỏi hoặc yêu cầu? Cho chúng tôi biết trong phần ý kiến ​​dưới đây!