Cách tạo một trang web đẹp và đơn giản với Bootstrap 4: 7 bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:32

Mục đích của Tài liệu hướng dẫn này là cung cấp cho những người quen thuộc với lập trình - HTML hoặc cách khác - một giới thiệu đơn giản về cách tạo danh mục đầu tư trực tuyến với Bootstrap 4. Tôi sẽ hướng dẫn bạn thiết lập ban đầu của trang web, cách tạo một vài khối nội dung khác nhau và một số vấn đề bạn có thể gặp phải.

Danh mục đầu tư được chia thành một số bước nhỏ hơn để thử và làm cho nó dễ quản lý hơn: khung HTML, khung CSS, khung Javascript, thanh điều hướng và trang chủ (với các khối nội dung).

Nếu những giải thích của tôi về điều gì đó vẫn khiến bạn bối rối, vui lòng để lại nhận xét kèm theo câu hỏi, đề xuất của bạn hoặc google về yếu tố bạn đang bối rối. Có rất nhiều tài nguyên có sẵn để lập trình trang web và Bootstrap.

Lưu ý: Hướng dẫn này không bao gồm tất cả và không nên được sử dụng thay thế để tìm hiểu cách lập trình bằng HTML, CSS hoặc Javascript.

Tài nguyên cần thiết

• Bootstrap 4
• jQuery 3.3.1

Tài nguyên tùy chọn

• FontAwesome
• Phông chữ Google
• highlight.js

Nếu bạn muốn bỏ qua ví dụ đầy đủ hoặc xem qua kho lưu trữ:

• Đầy đủ ví dụ
• Kho

Lưu ý: Tôi sẽ sử dụng Sublime trong các hình ảnh cho các ví dụ của mình nếu bạn muốn làm theo cùng một trình soạn thảo văn bản.

Bước 1: Thiết lập

Thiết lập thư mục

1. Tạo một thư mục ở nơi bạn có thể lưu trữ mọi thứ mà chúng tôi sắp tải xuống. Đây sẽ là thư mục gốc của bạn cho danh mục đầu tư.
2. Tạo một thư mục bên trong thư mục đó có tên là “bootstrap”
3. Tạo một thư mục khác bên trong thư mục danh mục đầu tư gốc của bạn có tên là “jquery”

Thư mục danh mục đầu tư

| ----- bootstrap | ----- jquery

Bootstrap 4

1. Truy cập trang web của họ và nhấp vào nút “Tải xuống” bên dưới phần “CSS và JS đã biên dịch”.
2. Lưu tệp.zip trong thư mục “Tải xuống” của bạn hoặc một vị trí thuận tiện khác.
3. Mở tệp.zip và giải nén các thư mục “css” và “js” vào thư mục “bootstrap” mà bạn đã tạo trước đó.

jQuery

1. Truy cập trang web của họ và tải xuống “jQuery 3.3.1 phát triển, không nén”
2. Lưu tệp đó bên trong thư mục “jquery” mà bạn đã tạo trước đó.

Tất cả các khuôn khổ hiện đã sẵn sàng khi chúng tôi bắt đầu làm việc trên danh mục đầu tư thực tế.

Bước 2: Khung HTML (index.html)

Tên của bạn

Khung này không có gì quá phức tạp, nhưng tôi muốn giải thích các mục đích chung của việc thiết lập.

Bootstrap JS Sau jQuery

Dường như có một số loại trùng lặp giữa tệp Javascript của Bootstrap và jQuery. Tôi đã không kiểm tra để xem mức độ chồng chéo này lớn đến mức nào, nhưng một ví dụ là chức năng thả xuống mà tôi sử dụng trong thanh điều hướng. Nếu bạn tải trong Bootstrap trước, nút thả xuống sẽ không hoạt động.

FontAwesome

Nếu bạn đã thực hiện bất kỳ công việc phát triển web nào, rất có thể bạn biết FontAwesome là gì. Tuy nhiên, nếu không phải vậy, đó là một bộ biểu tượng bao gồm một bộ công cụ để tùy chỉnh thêm. Nó cực kỳ hữu ích nếu bạn giống tôi và hoàn toàn không có năng khiếu nghệ thuật.

hightlight.js

Khung này cho phép đánh dấu mã động trên các trang web. Bạn có thể nhập nó giống như phần còn lại của các khuôn khổ mà tôi sử dụng nếu bạn chỉ sử dụng các ngôn ngữ lập trình thông thường, nhưng cũng có một tùy chọn để tải xuống một bộ ngôn ngữ tùy chỉnh. Tôi đã chọn tùy chọn thứ hai vì một số ngôn ngữ macro và ini, nhưng điều đó hoàn toàn tùy thuộc vào bạn.

Lưu ý: Hãy lưu ý những nơi tôi sử dụng các liên kết được mã hóa cứng đến các tệp như hai biểu tượng và highlight.js. Ngoài ra, vì chỉ cần Bootstrap và jQuery, hãy thêm hoặc bớt bất kỳ khung công tác nào khác. Nếu bạn xóa bất kỳ, hãy nhớ xóa các dòng mã tương ứng sau này.

Bước 3: Khung CSS (style.css)

/ * * Hy vọng giảm màu bg thành xám và thay đổi kiểu phông chữ sẽ giúp trang web dễ tiêu thụ hơn * / body {background: gray; font-family: 'Open Sans', sans-serif; }

/*

* Điều này đảm bảo thanh điều hướng ở trên cùng của mọi thứ * / nav {z-index: 9999; }

/*

* Điều này sẽ làm cho văn bản đoạn văn dễ đọc hơn * / p {font-size: 18px; margin-top: 5px; margin-bottom: 5px; }

/*

* Điều này đảm bảo rằng tất cả các khối mã của tôi được định dạng đúng * / code {text-align: left; }

/*

* Tôi không muốn danh sách có dấu đầu dòng * / li {list-style-type: none; }

/*

* Các liên kết có màu xanh lam theo mặc định và tôi muốn chúng thẳng hàng với kiểu của Bootstrap * / li a, a {color: white; }

/*

* Tôi gắn thẻ lớp vào một div có chứa thanh điều hướng để đảm bảo nội dung không bị chồng chéo * /.navFix {padding-bottom: 70px; }

/*

* Tăng kích thước kéo dài thanh điều hướng * /.social-media {font-size: 1.3em; }

/*

* Màu đánh dấu mặc định cho các liên kết thả xuống là màu trắng * /.dropdown-menu a: hover {background-color: # 212529; }

/*

* Buộc các div hiển thị pdf đến một độ cao nhất định * /.pdfFill {height: 45rem; }

/*

* Thêm một số khoảng cách giữa các nút và khối mã * /.codeStyle {padding-top: 30px; }

Tôi đã đưa các phần tử CSS dựa trên nội dung vào khung này để thử và giúp bạn tiết kiệm thời gian sau này. Tất cả chúng đều rất đơn giản và hầu hết là những thay đổi về chất lượng cuộc sống giúp người đọc tương tác với danh mục đầu tư dễ dàng hơn.

nav z-index

Tôi có rất ít kinh nghiệm phát triển web, vì vậy tôi không chắc đây có phải là sự cố thường gặp khi triển khai thanh điều hướng của Bootstrap hay không, nhưng nếu không có bất kỳ thông số định hướng nào, thanh điều hướng sẽ thực sự xuất hiện dưới nội dung khác như Thẻ Bootstrap. Điều này dễ nhận thấy nhất với thanh điều hướng có thể thu gọn, nhưng dù sao thì tôi cũng đã bao gồm thay đổi chỉ mục để đảm bảo an toàn.

căn chỉnh mã

Vì tôi thường sử dụng các lớp "justify-content-center" và "text-center" của Bootstrap để căn chỉnh các phần tử, tôi không muốn mã của mình kế thừa tính chất căn giữa đó. Điều này có thể dễ dàng khắc phục bằng cách ghi đè lên bất kỳ thay đổi căn chỉnh nào và làm cho các thẻ mã được căn trái: điều này bảo toàn khoảng cách giữa các tab trong mã.

phần đệm navFix

Khi thanh điều hướng của Bootstrap bị kẹt ở đầu trang, nội dung sẽ tải dưới nó. Tôi tin rằng điều này xảy ra vì thanh điều hướng thực sự bị mắc kẹt ở đầu khung nhìn thay vì chính trang. Bất kể điều này được khắc phục bằng cách tăng không gian giữa thanh điều hướng và phần còn lại của nội dung.

chiều cao pdf

Chiều cao mặc định của tệp pdf rất nhỏ. Về cơ bản nó không thể đọc được, vì vậy tôi đã thay đổi chiều cao để thử và cung cấp đủ chỗ cho khoảng một trang tại một thời điểm.

Bước 4: Khung Javascript (javascript.js)

/ * * Thao tác này tìm kiếm bất kỳ phần tử nào có lớp 'toggle' và ẩn hoặc hiện nó * / function toggleSection (id, toggleID) {if (document.getElementById (id)) {var divID = document.getElementById (id); var divArray = document.getElementsByClassName (toggleID);

for (var i = 0; i <divArray.length; i ++) {divArray .style.display = "none"; }

divID.style.display = "khối";

}

trả về sai;

}

/*

* Mã cần được chạy theo một thứ tự nhất định * / $ (tài liệu).ready (function () {/ * * Tải nội dung từ tệp * /

/*

* Buộc một khoảng thời gian ngắn để tải dữ liệu * / setTimeout (function () {/ * * Đánh dấu tất cả mã đã được tải trong * / $ ('pre code'). Each (function (i, block) { hljs.highlightBlock (khối);});}, 1000); });

Để làm cho danh mục đầu tư này dễ dàng sửa đổi và quản lý, tôi quyết định sử dụng định dạng một trang. Nó giữ mọi thứ cục bộ trong hầu hết các phần và làm cho nội dung tải nhanh hơn.

toggleSection

Tôi đã sử dụng các giá trị lớp để quản lý nội dung nào cần được hiển thị hoặc ẩn vì hầu hết thời gian tôi sử dụng div để tách và nhóm nhiều phần tử lại với nhau. Bạn cũng có thể sử dụng điều này để nhóm các nút riêng lẻ lại với nhau, nhưng nó yêu cầu kiểm tra thêm trước khi đặt hiển thị "chặn" để cho phép không có nội dung nào được hiển thị.

tải tài liệu

Tôi bao gồm điều này bởi vì nó thường lộn xộn khi bao gồm một loạt mã lập trình độc lập trong các tệp HTML thông thường. Chúng tôi có thể sử dụng phương pháp đánh dấu động này để buộc quá trình diễn ra sau khi chúng tôi tải nội dung từ các tệp khác.

$ ('# mq2-intro'). load ("files / tutorial / mq2 / mq2-intro / content.html");

Đây là một ví dụ về cách chúng tôi tải nội dung.

Bước 5: Thanh điều hướng

Tên viết tắt

• Nhà
• Về tôi
• Hướng dẫn dự án
• Liên hệ với tôi

Thanh điều hướng là yếu tố phức tạp nhất trong số mọi thứ trong danh mục đầu tư. Sự kết hợp tuyệt đối của các lớp khiến nó giống như một câu đố đòi hỏi bạn phải liên tục nhìn vào cuốn sách quy tắc.

Chức năng Bootstrap

Các chức năng của Bootstrap về cơ bản thông qua các giá trị lớp khác nhau. Nhìn vào bản thân phần tử "nav", không quá khó để xác định mục đích của mỗi lớp:

"Thanh điều hướng" của chúng tôi là tùy chọn "md" (trung bình), "mở rộng" có thể, "tối". Và chúng tôi đã "sửa" nó thành "đầu". Nó trông có vẻ khó hiểu vì đó là một mớ hỗn độn của các số nhận dạng, nhưng nếu bạn xem chúng như là tính từ cho phần tử, bạn sẽ dễ dàng hiểu được điều gì đang xảy ra hơn nhiều.

Nhãn hiệu

Thương hiệu là biểu trưng và tên điển hình mà bạn thấy trên mọi trang web ở trên cùng bên trái. Đó là một yếu tố thiết kế đã được thử và đúng mà mọi người dùng đều mong đợi vào thời điểm này.

Lưu ý: Các thẻ "i" thực sự là các biểu tượng FontAwesome và bạn lấy các thẻ này từ bất kỳ trang nào của biểu tượng.

Nút chuyển đổi / có thể thu gọn (Di động)

Nút này chỉ hiển thị trên thiết bị di động. Nhưng vì chúng tôi đã đưa vào khai báo "điều hướng" rằng thanh điều hướng cần được mở rộng, các phần tử này kết nối với nhau thông qua ID của chúng và số nhận dạng "chuyển đổi dữ liệu".

Liên kết thanh điều hướng (Bên trái)

Những liên kết này hoàn toàn phụ thuộc vào danh mục bạn cần cho danh mục đầu tư của mình. Tôi đã đưa vào một vài ví dụ điển hình làm điểm khởi đầu, nhưng không cái nào giống cái nào. Bạn có thể không cần phần "Hướng dẫn" vì bạn tập trung vào việc tạo ra các tác phẩm điêu khắc nghệ thuật. Mỗi mục "li" đều có thể được sao chép và dán, vì vậy khi bạn tìm ra thứ mình cần, thật dễ dàng để thiết lập điều hướng.

Lưu ý: Về mặt kỹ thuật, bạn có thể tạo menu thả xuống trong các menu thả xuống khác, nhưng tôi sẽ không khuyên bạn nên làm như vậy trừ khi bạn sẵn sàng thêm CSS và Javascript để làm cho giao diện trông sạch sẽ.

Liên kết thanh điều hướng (Bên phải)

Bằng cách cung cấp cho danh sách các liên kết bên phải lớp "ml-auto", Bootstrap sẽ tách hai danh sách một cách đồng đều. Điều này tạo ra sự phân chia bên trái và bên phải rõ ràng. Tôi quyết định sử dụng không gian này cho các liên kết truyền thông xã hội vì đây là một phương pháp rất phổ biến và thông dụng để tăng sự hiện diện của bạn. Nếu điều đó không liên quan, bạn có thể loại bỏ các liên kết này cho thanh tìm kiếm, thông tin đăng nhập, v.v. Nhưng chỉ cần nhớ rằng đó là không gian quan trọng để sử dụng. Và tương tự như các liên kết thanh điều hướng ở phía bên trái, bạn cũng có thể sao chép và dán các liên kết này.

Lưu ý: Nếu bạn định sử dụng các liên kết mà tôi đã thiết lập, hãy thay đổi "tên người dùng" trong chính các liên kết "href" thực tế.

Bước 6: Trang chủ

Tên của bạn

Người viết bài lập trình Gamer

Phần này và các trang nội dung tiếp theo của bạn sẽ phụ thuộc vào những gì bạn muốn đưa vào danh mục đầu tư của mình. Rõ ràng là tôi không thể giải quyết từng loại nội dung đơn lẻ, nhưng tôi đã cố gắng bao gồm hình ảnh, pdf, video, khối mã, một số loại bao gồm điển hình.

Định dạng bảng

Trang chủ được thiết lập để hoạt động như một bảng. Tôi sẽ không dựa vào kỹ năng thiết kế tuyệt vời của mình để tạo ra sản phẩm cuối cùng của bạn, nhưng tôi đã thêm các biến thể khác nhau của kết hợp hàng và cột để cho thấy rằng nó rất năng động và linh hoạt. Bạn có thể tạo 3 hàng và 2 cột để có các nút ở bên trái và nội dung ở bên phải, hoặc bạn có thể làm điều gì đó hoàn toàn khác. Nó chỉ cần một chút thử nghiệm.

nút

Các chức năng này về cơ bản giống như các nút thông thường. Sự tích hợp Bootstrap thực sự duy nhất ở đây bắt nguồn từ kiểu dáng để phù hợp với phần còn lại của chủ đề. Nếu không, hãy tạo nhiều hoặc ít nút tùy ý để giới thiệu nội dung của mình và sau đó đảm bảo khớp các liên kết href với các ID cho div.

Nội dung mã lập trình

Các thẻ "mã" là các thẻ mặc định mà highlight.js sử dụng để quản lý tất cả các phần đánh dấu. Nếu bạn nhớ từ tệp javascript.js, có một phần để tải nội dung từ các tệp khác.

$ ('# home-Programmer-macro'). load ("files / home / watchLoot.mac");

• Phần đầu tiên của phần này tìm kiếm "id" của phần tử bạn muốn chèn nội dung vào.
• Phần thứ hai là vị trí của tệp bạn muốn tải vào.

Lưu ý: Nội dung sẽ không thực sự tải hoàn toàn vì có nhiều khả năng bạn đang chỉnh sửa trang web này cục bộ thay vì trên máy chủ. Điều này có thể được giải quyết bằng một số cách khác nhau mà tôi sẽ giải quyết ở cuối Tài liệu hướng dẫn.

Video trên YouTube

"Iframe" được nhúng thực sự đến từ chính YouTube. Tôi sẽ không giải thích kỹ về cách lấy chúng, nhưng khi bạn chuyển đến "Chia sẻ" video, có tùy chọn "Nhúng" sẽ giúp bạn tạo mã cần thiết để hiển thị video của bạn trên trang web.

Bước 7: Hướng tới tương lai

Có một cơ hội rất tốt là tôi đã không đề cập đến một số yếu tố hoặc loại nội dung mà bạn muốn đưa vào trang web của mình. Rất may có rất nhiều lựa chọn tốt để bạn có thể tự mình thực hiện các bước tiếp theo.

Tài liệu của Bootstrap

Tài liệu của Bootstrap là một nơi tuyệt vời để bắt đầu nếu bạn đang tìm kiếm các phần tử được lập trình sẵn và có các ví dụ mà bạn có thể sao chép và dán vào danh mục đầu tư của mình để thử nghiệm. Tôi không chạm vào Thẻ, Băng chuyền hoặc Biểu mẫu. Tôi thực sự khuyên bạn nên xem qua phần "Thành phần" để xem các tùy chọn.

W3Schools

W3Schools là một trang web tuyệt vời, nơi bạn có thể tìm hiểu bất cứ điều gì liên quan đến lập trình và phát triển web. Chúng thông minh hơn tôi nhiều và chúng chỉ bao gồm mọi chức năng HTML, CSS và Javascript mà bạn có thể nghĩ đến.

Lưu trữ danh mục đầu tư của bạn

Có thể giảng dạy này hướng dẫn bạn cách lưu trữ trang web của mình trên một số nền tảng khác nhau. Đây là những bước bạn cần thực hiện nếu bạn muốn có thể cho mọi người, nhà tuyển dụng, v.v. thấy danh mục đầu tư của bạn.

Thử nghiệm và Vui chơi

Cách duy nhất bạn sẽ tạo ra một danh mục đầu tư tuyệt vời là thử nghiệm và thử bất cứ thứ gì và mọi thứ có vẻ thú vị. Nhiều danh mục đầu tư và trang web có thiết kế lạ mắt sử dụng các hiệu ứng chuyển tiếp tuyệt vời hoặc hình nền động, nhưng không có trang web nào được tạo sẵn.