Logo
- Home
- About
- Contact
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.
Logo
- Home
- About
- Contact
Logo
- Home
- About
- Contact
Bootstrap Tutorial Sample Page
9. Nếu nó, nói, trong một thư mục con có tên HTML, bạn sẽ liên kết với nó như vậy:5Đó 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.
Logo
- Home
- About
- Contact
Logo4 và
- Home
- About
- Contact
Logo5 được gán cho chúng tương ứng.
- Home
- About
- Contact
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.
Logo
- Home
- About
- Contact
Logo7 đảm bảo sự xuất hiện và sự biến mất của nó là đột ngột. Đồng thời,
- Home
- About
- Contact
Logo8 xác định kích thước của cửa sổ phương thức và
- Home
- About
- Contact
Logo9 trung tâm theo chiều dọc trên màn hình.
- Home
- About
- Contact
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ẻ
2 và bên dưới các cuộc gọi cho jQuery và bất kỳ tệp javascript nào.Logo
- Home
- About
- Contact
Đ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
Logo5:8
- Home
- About
- Contact
Lưu ý lớp
03 cho hình ảnh. Nó là một lớp tiện ích bootstrap để tập trung tất cả các loại yếu tố. Thêm về nó ở đây. Đối với nút đóng, bạn cần bao gồm 04 để nó thực sự đóng cửa sổ bật lên.Ở đâ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
05 và điều đó sẽ bao gồm một tiêu đề, văn bản và biểu mẫu để bao gồm địa chỉ email của bạn. Ở đây, bản đánh dấu:9Nếu bạn đã theo dõi theo hướng dẫn Bootstrap, các lớp
06 và
Bootstrap Tutorial Sample Page
0 phải tự giải thích. Tuy nhiên, lưu ý 08 ở phía dưới. Đây là một lớp bootstrap cho phép bạn đặt các đầu vào như trường mẫu và nút bên cạnh nhau.Lớp
09 đặt nút sau trường biểu mẫu. Ngoài ra còn có 10, nếu bạn muốn đặt bất cứ thứ gì trước nó. Đây là những gì nó xuất hiện như:Đượ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:
015. 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!