Trong bài đăng này, chúng tôi sẽ bắt đầu bằng cách tạo một trang web với Bootstrap, khung công tác mã nguồn mở giúp chúng tôi dễ dàng làm cho nó phản hồi và cung cấp cho nó một số tương tác. Đây là một mẫu cơ bản được tạo tự động bởi một plugin môi trường phát triển mà chúng tôi đã đề xuất trước đó và chúng tôi sẽ phải sửa đổi.
Trong bài trước Bạn sẽ tìm thấy hướng dẫn cài đặt VS Codium, dịch giao diện người dùng của nó sang tiếng Tây Ban Nha và cài đặt plugin Bootstrap.
Hai điều cần ghi nhớ:
- Các lệnh chúng tôi sử dụng là phím tắt, bạn phải nhập chúng. Sao chép / dán không hoạt động.
- Trình quản lý nội dung của chúng tôi không cho phép tôi hiển thị mã HTML nên tôi phải sử dụng ảnh chụp màn hình. Vì vậy, bạn có quyền truy cập vào mã của các ví dụ tôi đã tải lên lên GitHub.
Cách sao chép kho lưu trữ GitHub
Điều ngăn cách những người vĩ đại với phần còn lại của chúng ta là cách họ phản ứng với các vấn đề. Richard Stallman không thích trình điều khiển máy in của mình và vì họ không cho phép anh ta thay đổi nó, anh ta bắt đầu phong trào phần mềm miễn phí. Linus Torvalds không bị thuyết phục bởi bất kỳ nền tảng chia sẻ mã nào và đã tạo ra nền tảng của riêng mình. git.
Không giống như các hệ thống phân phối phần mềm truyền thống trong đó người dùng tương tác duy nhất được phép tải xuống, với Git, bạn có thể theo dõi sự phát triển của dự án theo thời gian. Những người khác có thể sao chép kho lưu trữ, thực hiện các sửa đổi và đề xuất rằng các nhà phát triển của dự án ban đầu kết hợp chúng. Nếu được chấp nhận, các nhà phát triển có thể dễ dàng làm như vậy mà không cần phải tải xuống và tải lên lại các tệp.
Có một số dịch vụ dựa trên Git, tôi đã chọn GitHub đơn giản vì nó tích hợp với VS Codium.
Để tải các tệp mẫu xuống máy tính của bạn, bạn chỉ cần cài đặt gói git theo hướng dẫn của bản phân phối để cài đặt các gói trong thiết bị đầu cuối.
Sau đó, bạn gõ các lệnh sau.
Tôi muốn lưu các tệp trong thư mục Documents nên tôi thay đổi thư mục bằng
cd Documentos
Sau đó, tôi sao chép các tệp với:
git clone https://github.com/dggonzalez1971/bootstrap.git
Tôi sẽ nhắc bạn về các bước này trong mỗi bài viết còn lại, vì theo cách này, bạn sẽ cập nhật các tệp ví dụ khi chúng được tải lên.
Để xem các tệp, chỉ cần mở trình khám phá tệp và tìm thư mục bootstrap.
Tạo trang bằng Bootstrap
Trong trường hợp bạn muốn nhập mã theo cách thủ công, chúng tôi bắt đầu bằng cách tạo một thư mục để lưu trang web. Bạn có thể đặt bất cứ tên nào bạn thích.
Sau đó, chúng tôi làm theo các bước tiếp theo:
- Hãy vào menu Lưu trữ.
- Bấm vào Tập tin văn bản mới.
- Bấm vào Lưu.
- Chúng tôi tìm thư mục chúng tôi đã tạo và đặt tên của tệp example1.html.
- Bấm vào Lưu.
Đôi khi cửa sổ File Explorer có thể bị VSCodium ẩn.
Hãy để tiện ích mở rộng tạo mẫu cơ bản cho chúng tôi. Đối với điều này, chúng tôi gõ !b5-$
Thao tác này sẽ tạo mã mà bạn sẽ tìm thấy trong thư mục ví dụ như example1.html
Chúng ta sẽ thấy như sau:
Đây là mã được tạo bởi phần mở rộng Bootstrap.
Chúng tôi sẽ thực hiện một số thay đổi đối với tệp này. Bạn sẽ tìm thấy các sửa đổi dưới tên example2.html
- Ở dòng 2, chúng tôi thay đổi ngôn ngữ bằng cách thay thế eng bằng es. Điều này cho các công cụ tìm kiếm biết rằng ngôn ngữ của trang web là tiếng Tây Ban Nha.
- Trong dòng 6, chúng tôi thay đổi văn bản dưới nhãn tiêu đề. Chúng tôi đặt Trang web Bootstrap đầu tiên của tôi.
- Trong dòng 12, chúng tôi thay đổi nội dung giữa các thẻ h1 qua Đây là một trang web được tạo bằng Bootstrap.
Tiếp theo, chúng tôi sẽ thực hiện một số sửa đổi quan trọng. Những sửa đổi này liên quan đến:
- Nhà phát triển plugin không thể theo kịp các phiên bản Bootstrap và có nhiều phiên bản hiện tại hơn.
- Có nhiều tùy chọn cho các thành phần bootstrap và tôi quan tâm đến một tùy chọn khác.
- Theo tài liệu chính thức, các lệnh gọi đến thư viện Javascript phải nằm bên trong các thẻ body.
Ví dụ 2, chúng tôi sửa đổi nội dung của dòng 7, xóa dòng 8 và 9 và tải lên nội dung còn lại để duy trì khả năng tương thích đánh số. Sau đó chúng ta click vào cuối dòng 10 để tạo dòng 11 mới và đặt liên kết đến các thư viện Javascript.
Đừng lo lắng nếu bạn không hiểu mã. Tôi sẽ giải thích chức năng của từng dòng trong bài viết tiếp theo.