Màn hình khởi động
Bắt đầu bằng cách bao gồm CSS và JavaScript sẵn sàng sản xuất của Bootstrap thông qua CDN mà không cần bất kỳ bước xây dựng nào. Xem nó trong thực tế với bản demo Bootstrap CodePen này Show
Để tham khảo, đây là các liên kết CDN chính của chúng tôi Mô tảURLCSS 2JS 0Bạn cũng có thể sử dụng CDN để tìm nạp bất kỳ bản dựng bổ sung nào của chúng tôi được liệt kê trong trang Nội dung Bước tiếp theothành phần JSTò mò không biết thành phần nào yêu cầu JavaScript và Popper của chúng tôi một cách rõ ràng? . Nếu bạn hoàn toàn không chắc chắn về cấu trúc trang chung, hãy tiếp tục đọc mẫu trang mẫu Hiển thị các thành phần yêu cầu JavaScript
Toàn cầu quan trọngBootstrap sử dụng một số kiểu và cài đặt toàn cầu quan trọng, tất cả đều hầu như chỉ hướng tới việc chuẩn hóa các kiểu trình duyệt chéo. Hãy đi sâu vào loại tài liệu HTML5Bootstrap yêu cầu sử dụng loại tài liệu HTML5. Không có nó, bạn sẽ thấy một số kiểu dáng ngộ nghĩnh và không đầy đủ
Bootstrap được phát triển trên thiết bị di động trước, một chiến lược trong đó chúng tôi tối ưu hóa mã cho thiết bị di động trước rồi sau đó mở rộng quy mô các thành phần khi cần bằng truy vấn phương tiện CSS. Để đảm bảo hiển thị phù hợp và thu phóng cảm ứng cho tất cả các thiết bị, hãy thêm thẻ meta chế độ xem đáp ứng vào của bạn
Bạn có thể xem một ví dụ về điều này đang hoạt động trong phần bắt đầu nhanh kích thước hộpĐể định cỡ đơn giản hơn trong CSS, chúng tôi chuyển giá trị toàn cầu 1 từ 2 thành 3. Điều này đảm bảo rằng 4 không ảnh hưởng đến chiều rộng được tính toán cuối cùng của một phần tử, nhưng nó có thể gây ra sự cố với một số phần mềm của bên thứ ba như Google Maps và Công cụ tìm kiếm tùy chỉnh của GoogleTrong trường hợp hiếm hoi, bạn cần ghi đè lên nó, hãy sử dụng một cái gì đó như sau
Với đoạn mã trên, các phần tử lồng nhau—bao gồm cả nội dung được tạo thông qua 5 và 6—tất cả sẽ kế thừa 1 đã chỉ định cho 8 đóTìm hiểu thêm về mô hình hộp và kích thước tại Thủ thuật CSS khởi động lạiĐể cải thiện khả năng hiển thị trên nhiều trình duyệt, chúng tôi sử dụng Khởi động lại để sửa lỗi không nhất quán giữa các trình duyệt và thiết bị đồng thời cung cấp các thiết lập lại có chủ ý hơn một chút cho các thành phần HTML phổ biến Luôn cập nhật về sự phát triển của Bootstrap và tiếp cận cộng đồng với những tài nguyên hữu ích này Chúng ta đã đến với các phần cuối cùng của khóa học Bootstrap. Trong bài học này, chúng ta sẽ thực hiện một bài tập lớn, làm web với Bootstrap. Chúng ta chia sẻ thực hiện phần đầu tiên là chia cục bộ và đáp ứng Nội dung chính
Video – Làm web với Bootstrap – Chia cục bộ và đáp ứngHướng dẫn chi tiết 4Lưu ý. mình chưa hướng dẫn cắt html và css từ file thiết bị photoshop nên phần file này sẽ làm theo một website mẫu Nội dung bài học làm web với Bootstrap – Chia cục bộ và đáp ứngNội dung bài học làm web với Bootstrap – Chia cục bộ và đáp ứng Chia cục bộ cho websiteMình sẽ làm chủ trang web bán hàng. Cấu trúc của trang web này như sau Bài viết cùng chủ đề Bài 11. Scrollspy – Hiệu ứng điều hướng khi… bài 10. Navbar – Tạo menu đa cấp với hiệu… 5+ Thanh menu đa cấp có tính năng responsive + Slide trình chiếu hình ảnh + Nội dung danh sách sản phẩm Thanh menu đa cấp có responsiveCác bạn có thể sử dụng mã có sẵn của Bootstrap (liên kết). Hoặc mã tự như hướng dẫn ở bài 10. Navbar – tạo thanh menu đa cấp với hiệu ứng di chuột và đáp ứng Nhìn chung, các bạn đang sử dụng thanh điều hướng sẵn có của Bootstrap. Chúng ta sẽ tùy chỉnh menu thả xuống trong thanh điều hướng như sau Phần html của danh sách thả xuống. chúng ta sẽ bỏ class=”dropdown-menu” và thay thế bằng class dropdown-content 6Nội dung thả xuống lớp sẽ định nghĩa thêm cs như sau 7Ngoài ra, để thanh menu trải dài suốt chiều rộng màn hình nhưng nội dung lại được canh giữa. Chúng ta thêm div có class=”container” bên trong thẻ điều hướng và đặt nội dung của menu vào trong vùng chứa Để thanh menu luôn luôn nằm trên cùng khi cuộn trang, chúng ta sử dụng thêm class=”stick-top” cho thẻ điều hướng Xem video hướng dẫn nhé Reference slide partĐể hiểu rõ tính năng, cách hoạt động của slide, các bạn xem thêm bài 4. Card và Carousel- Tạo slideshow trong Bootstrap. Mình sẽ sử dụng code trên getbootstrap luôn nhé. liên kết Use carousel slide with indicator Phần này chúng ta không cần chỉnh sửa nhiều, chỉ cần thêm đường dẫn hình cho slide. Một trang web cung cấp cấu hình như trong ví dụ là trình giữ chỗ. com Thêm đường dẫn và sửa lại theo kích thước bạn muốn sử dụng nhé. Đường dẫn hình cho slide này là. http. //thông qua. giữ chỗ. com/1920×530 Main content section – list product theo loạiCode hơi nhiều nên các bạn xem code mẫu cuối bài viết nhé Phần nội dung chính sẽ là div container, sau đó là div row cho từng loại sản phẩm Mỗi hàng loại sản phẩm sẽ bao gồm 1 thẻ htiêu đề, 1 div chứa thẻ mô tả loại sản phẩm và div nhóm 4 sản phẩm. Thêm lớp mt-5 cho hàng để tạo lề trên cho hàng Chúng ta sẽ chia lưới Bootstrap bên trong div group product. Mỗi cột sẽ sử dụng Card trong bootstrap để làm các sản phẩm khối đó nhé. Add class mb-3 to create bottom margin for blocks Xử lý responsive cho phần nội dungChúng ta sẽ chia 4 cột đối với màn hình lớn, 2 cột với màn hình máy tính bảng và 1 cột với màn hình nhỏ. Use Bootstrap mesh as after. class=”col-md-3 col-sm-6 col-12″ Nếu bạn còn bịt mắt vấn đề chia lưới Bootstrap và responsive, có thể tham khảo Bài 2. Hệ thống lưới Bootstrap – Grid System hàng div cho mỗi loại sản phẩm chúng ta sẽ thêm padding-left và right lần như 5px để khi responsive về 1 cột sẽ đẹp hơn Như vậy chúng ta đã chia cục bộ và đáp ứng cho web. Phần bài viết sau mình sẽ hướng dẫn cách tùy chỉnh lại các đối tượng và thuộc tính mẫu mã. Tải xuống Nếu có thắc mắc, hãy đặt câu hỏi bằng cách bình luận bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web |