Xin chào các bạn quay lại blog của mình. Hôm nay mình sẽ đi vào các ví dụ về việc phát triển giao diện cho trang web bằng Bootstrap 4. Nào hãy cùng mình khám phá nhé
Khung khởi động 4
Phát triển giao diện bằng Bootstrap 4
Để bạn nắm rõ hơn và thực hiện những gì mình đã học, chúng ta sẽ đi vào dự án thiết kế giao diện cho công ty web về dịch vụ bằng Bootstrap 4. Đầu tiên thì mình sẽ phát họa ra những phần của trang web giúp bạn có thể hiểu được cái sườn mà ta sẽ làm. Để hiểu rõ hơn bạn xem hình ảnh dưới đây nhé
Sau khi đã xác định rõ bố cục, mình sẽ đi vào tạo những file cần thiết cho việc thiết kế trang web là HTML, CSS, JS và Bootstrap. Để không làm mất thời gian của bạn, mình đã tạo một thư mục chứa sắn các tệp cần thiết và đường dẫn bên dưới để tải về nhé
Đường dẫn tải File Mã nguồn Dự Án Bootstrap 4
Mình có lưu ý nhỏ là ở trên mình sử dụng link CDN link với file Bootstrap 4 để thiết lập nhanh hơn còn nếu bạn thích tải file về để sử dụng thì có thể xem thêm tại đây nhé. Cách tải Bootstrap 4. Bạn nên để các file Javascript nằm cuối cùng trang HTML để tối ưu hiệu suất trang web và nếu cần chỉnh sửa CSS thì bạn phải đặt file CSS của mình cũng nằm bên dưới file CSS của Bootstrap nhé.
Bây giờ chúng ta sẽ đi vào cách tạo thanh điều hướng bằng cách sử dụng thanh điều hướng thành phần trong Bootstrap 4. Để biết mã xác định hơn là bạn xem đoạn mã dưới đây nhé
HTML
Niềm Vui Lập Trình
Về Chúng Tôi
Tiện Ích
Giá Dịch Vụ
Liên Hệ
Ở trên mình sử dụng thuộc tính
Niềm Vui Lập Trình
Mang đến niềm vui cho các bạn học lập trình.
Facebook
Google
3 trong thẻ div lớp
Niềm Vui Lập Trình
Mang đến niềm vui cho các bạn học lập trình.
Facebook
Google
4 được sử dụng để ghi các phần tử trong thanh điều hướng nằm sang bên phải và sử dụng lớp
Niềm Vui Lập Trình
Mang đến niềm vui cho các bạn học lập trình.
Facebook
Google
5 để xác định màu nền cho thành phần Navbar. Bạn có thể thay đổi tùy chọn màu sắc vào mục đích của mình bằng cách gọi
Niềm Vui Lập Trình
Mang đến niềm vui cho các bạn học lập trình.
Facebook
Google
6 với màu sắc là các màu cơ bản trong Bootstrap như là chính, thành công. To known more than you view example after here nhéXem Ví dụ về Pen Navabar Bootstrap 4 của haycuoilennao19 [@haycuoilennao19] trên CodePen
Để xem kết quả bạn chuyển sang chế độ màn hình 0. 5x, 0. 25x nha. Bây giờ chúng ta sẽ vào thiết kế phần thứ hai của trang web và để hiểu rõ hơn các bạn xem đoạn code sau nhé
HTML
Niềm Vui Lập Trình
Mang đến niềm vui cho các bạn học lập trình.
Facebook
Google
CSS
.container-fluid {
padding: 0 !important;
}
section#header-gioi-thieu {
background-image: url["Hinh_Anh/Hinh_anh_1.jpg"];
background-size: cover;
height: 400px;
background-position: center center;
}
section#header-gioi-thieu .wrap-headline {
position: relative;
padding-top: 5%;
}
section#header-gioi-thieu h1,
section#header-gioi-thieu h2 {
color: #FFF;
}
section#header-gioi-thieu h2 {
font-size: 1.5rem;
}
Ở trên đây mình có một vài lưu ý là
7 ,
Niềm Vui Lập Trình
Mang đến niềm vui cho các bạn học lập trình.
Facebook
Google
0,
Niềm Vui Lập Trình
Mang đến niềm vui cho các bạn học lập trình.
Facebook
Google
1. Nếu bạn muốn tìm hiểu thêm về flex trong Bootstrap có thể tham khảo tại đây nhé. Bootstrap linh hoạt 4Mình đang sử dụng Font Awesome 4. 7 to create icon for buttons. Bạn có thể tham khảo tại đây nhé. Cài đặt Font Awesome 4. 7Mình tạo tên thư mục là Hinh_Anh và trong đó đặt tên tệp ảnh là Hinh_anh_1. jpg. Sau đó sử dụng thuộc tính
Niềm Vui Lập Trình
Mang đến niềm vui cho các bạn học lập trình.
Facebook
Google
2 để thiết lập ảnh nền cho thẻ div id
Niềm Vui Lập Trình
Mang đến niềm vui cho các bạn học lập trình.
Facebook
Google
3. Dưới đây là File hình ảnh nếu bạn cần nhé.
Tải xuống hình ảnh. Mình thiết lập thuộc tính
Niềm Vui Lập Trình
Mang đến niềm vui cho các bạn học lập trình.
Facebook
Google
4 cho lớp
Niềm Vui Lập Trình
Mang đến niềm vui cho các bạn học lập trình.
Facebook
Google
5 để mở rộng phạm vi của nó bằng với trang webDo Code pen không hiển thị được phần này nên các bạn xem kết quả thông tin qua hình bên dưới nhé
Mình cũng sẽ để thư mục bên dưới để các bạn có thể tải về và xem lại đoạn code ở phần này
Đường dẫn tải File Mã nguồn Dự Án Bootstrap 4 Phần 2
Tiếp theo mình sẽ đi vào phần thứ ba là tạo hình ảnh sản phẩm và tiêu đề, nội dung cho nó. Để đáp ứng trên nhiều màn hình thiết bị, chúng ta sẽ sử dụng hệ thống lưới trong Bootstrap 4 để thực hiện phần này. Để hiểu rõ hơn bạn xem đoạn mã sau nhé
HTML
Tiêu Đề Máy Tính 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis iaculis sodales. Etiam ante elit, commodo vitae enim vel, imperdiet aliquet lectus. Curabitur id consequat quam, vitae convallis lacus. Suspendisse potenti. Curabitur rhoncus vestibulum pulvinar. Nullam mauris ex, dapibus sed nisi sed, posuere pulvinar eros.
Tiêu Đề Máy Tính 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis iaculis sodales. Etiam ante elit, commodo vitae enim vel, imperdiet aliquet lectus. Curabitur id consequat quam, vitae convallis lacus. Suspendisse potenti. Curabitur rhoncus vestibulum pulvinar. Nullam mauris ex, dapibus sed nisi sed, posuere pulvinar eros.
CSS
Niềm Vui Lập Trình
Mang đến niềm vui cho các bạn học lập trình.
Facebook
Google
0Bạn xem kết quả bên dưới nhé
Xem Pen Thong tin san pham Bootstrap 4 by haycuoilennao19 [@haycuoilennao19] trên CodePen
Ở trên mình sử dụng lớp
Niềm Vui Lập Trình
Mang đến niềm vui cho các bạn học lập trình.
Facebook
Google
6 có nghĩa là khi màn hình điện thoại và nhỏ hơn thì nó sẽ hiển thị độ rộng 12 cột và đối với màn hình máy tính bảng và lớn hơn thì độ rộng cột sẽ là 6. Và chúng ta sử dụng lớp
Niềm Vui Lập Trình
Mang đến niềm vui cho các bạn học lập trình.
Facebook
Google
7 để tự động điều chỉnh hình ảnh theo kích thước của trang. Để bạn có thể tải về và xem lại đoạn mã ở phần này thì mình có đường dẫn để tải về ở bên dướiĐường dẫn tải File Mã nguồn Dự Án Bootstrap 4 Phần 3
Tổng kết
Qua đây mình mong bài viết sẽ giúp các bạn thực hành về một số thành phần trong Bootstrap 4 và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ