Mẫu trò chuyện bootstrap
|
Để bắt đầu làm việc với Boostrap, bạn cần nhúng thư viện Bootstrap vào trang web của bạn. Trong bài viết này, tôi sẽ hướng dẫn các bạn cách nhúng Boostrap vào trang web và giải thích các tệp trong bộ thư viện này Show
Tìm hiểu các tập tin trong thư viện BootstrapĐầu tiên, các bạn truy cập vào trang chủ Boostrap để tải bộ thư viện bootstrap này về máy tính. Sau khi tải về máy tính thành công, bạn tiến hành giải nén ra bạn sẽ thấy các tệp của bootstrap với cấu trúc như sau  Trong bài viết này, tôi xin phép bỏ qua file CSS
JS
Phông chữThư mục chứa toàn bộ phông chữ của thư viện glyphicons giúp việc trang trí trang web bằng biểu tượng phông chữ Lưu ý. Khi nhúng vào trang web, bạn nên sử dụng tệp. min để trang web tải nhanh hơn Hướng Nhúng Thư Viện Boostrap Vào WebsiteCách 1. Nhúng liên kết từ BootstrapBootstrap cung cấp sẵn cho chúng ta các liên kết để nhúng trực tiếp vào trang web nhưng chúng ta hạn chế sử dụng nó vì khi đó trang web phải tải các liên kết bên ngoài, dẫn đến việc trang web bị chậm
cách 2. Nhúng bằng cách tự động lưu trữTôi khuyến nghị các bạn nên sử dụng cách này, trang web của bạn sẽ tối ưu hơn, tải nhanh hơn. Bạn chủ động làm việc với nó Trước tiên, bạn hãy tải xuống cả bộ Boostrap về máy tính và thư mục cấu trúc thiết lập như sau Tiếp theo, bạn mở chỉ mục tệp. html and file cấu trúc định vị như sau
Kết luậnTrên đây, tôi đã hướng dẫn các bạn cách nhúng bộ thư viện Bootstrap vào trang web. Sau khi thực hiện nhúng xong Boostrap vào trang web, bạn có thể làm việc với các thành phần của Bootstrap Là lập trình viên web Full stack hay là lập trình viên Front end thì các bạn đều cần học bootstrap. học khởi độngNội dung chính Hiển thị
Nhưng ai cũng biết, sử dụng đầy đủ tính năng của Bootstrap lại làm cho web có hiệu năng không tốt Vì thế, thay vào đó, các thành viên lập trình chỉ sử dụng hệ thống lưới của bootstrap để giúp trang web bố trí dàn trang tốt hơn và đáp ứng dễ dàng hơn. hệ thống lưới của bootstrap để giúp bố cục trang web tốt hơn và đáp ứng dễ dàng hơn Và trong bài này mình sẽ giúp các bạn học bootstrap và hiểu nó trong 10 phút (Câu view tý =)) ) #1. BOOTSTRAP THIẾT LẬP DỰ ÁNBây giờ chúng ta sẽ tạo một mẫu Bootstrap cơ bản bằng cách thêm các tệp Bootstrap CSS và JS, cũng như JavaScript phụ thuộc khác như jQuery và Popper. js thông qua CDN Tôi khuyên bạn nên thêm Bootstrap vào dự án của mình thông qua CDN (Mạng phân phối nội dung) vì CDN mang lại lợi ích về hiệu suất theo cách thời gian tải, vì họ đang giảm lưu trữ tệp trên nhiều máy chủ trên toàn cầu Bước #1. Tạo trang HTML đơn giảnMở VSCode (hoặc trình soạn thảo yêu thích của bạn) và tạo tệp HTML mới với tên <html lang = "en"> <đầu> đầu> <nội dung> cơ thể> html> Sau đó, trong phần đầu và phần thân ta thêm nội dung cơ bản như sau > Lưu ý #1. Luôn bao gồm thẻ > Lưu ý #2. Nếu bạn không xem được thì bạn cần vào Codepen. io, vượt captcha và quay lại đây để tải lại trang nhé. Lưu ý #2 . Nếu bạn không xem được thì bạn cần vào Codepen. io, vượt captcha và quay lại đây để tải lại trang nhé. Bước #2. Set file HTML this doing TemplateĐể làm cho đơn giản tệp HTML này trở thành Mẫu Bootstrap, bạn chỉ cần thêm các tệp Bootstrap CSS và JS cũng như jQuery và Popper. js bắt buộc bằng cách sử dụng liên kết CDN Bạn nên bao gồm các tệp JavaScript ở cuối trang, ngay trước thẻ đóng |