Menu

  • Trang chủ
  • Trending
  • Gợi ý bạn đọc

Chuyên mục

  • Tin tức
  • Hackintosh
  • Lập trình
  • Software
  • Thủ thuật
  • Chia sẻ
  • GenZA Can Cook
  • GenZA Beauty
  • Cảm nhận cuộc sống

Liên hệ hợp tác

admin@genzakit.com
Genzakit
Không có kết quả phù hợp
Xem tất cả kết quả
  • Đăng nhập
Genzakit
Không có kết quả phù hợp
Xem tất cả kết quả

Bootstrap 4.3 và những điều cơ bản cần biết

390
CHIA SẺ
2.6k
LƯỢT XEM
Chia sẻ lên FacebookChia sẻ lên TwitterLưu lại trên Pinterest

Nhắc đến boostrap (bt) thì chả ai còn xa lạ, dù là frontend hay backend thì cũng đều học và sử dụng. Thế nhưng có nhiều người tuy dùng bt thường xuyên lại không nắm hết sức mạnh của framework này, hay không hiểu những thứ cơ bản của boostrap như grid được làm như thế nào. Trong bài này mình sẽ nói 1 chút để ai đó còn mơ màng hay mới học bt sẽ dễ hình dung hơn.

Những điều nên biết

Bootstrap là một framework bao gồm HTML templates, CSS templates và Javascript tạo ra những thứ cơ bản có sẵn như: typography, forms, buttons, tables, navigation, modals, image carousels và nhiều thứ khác. Trong bootstrap có thêm các plugin Javascript giúp cho việc thiết kế reponsive của bạn dễ dàng hơn và nhanh chóng hơn.

Grid

Grid có lẽ là thứ nổi tiếng nhất của bt, về cơ bản bt chia layout thành 12 phần, 12 là con số rất hợp lý, nó có thể dễ dàng chia layout thành nhiều phần tùy biến. Nguyên lý của grid bt là, bạn sẽ bao nội dung trong 1 container hoặc container-fluid, 2 class này padding 2 đầu 15px, điều này sẽ giúp nội dung không quá sát với lề, thử tưởng tượng text mà dính sát vào lề xem, cả desktop lẫn moblie, chắc chắn bạn sẽ muốn out web ngay lập tức, quá xấu ????
Trong content, muốn chia các phần thì các bạn đọc col bt, mình muốn nói đến class row và col-xxx. row thì margin-left và margin-right -15px, tức là nó sẽ dài hơn cái bao nó 30px, nên nếu dùng row các bạn hãy cẩn thận tránh trường hợp vỡ giao diện, còn col thì padding-left và padding-right 15px, tức là col nằm trong row thì sẽ bù trừ vừa đúng 2 mép trái phải, và các col sẽ cách nhau 15px x 2 = 30px. Vậy nên nếu các bạn muốn tạo 1 bộ grid cho riêng mình với các khoảng cách khác nhau, hãy áp dụng cách này của bt ????

Modal

Với mình thì modal là thứ tiện lợi thứ 2 sau grid của bt. Nó rất tuyệt và bạn chẳng cần làm thêm hiệu ứng gì, nó bỏ scroll page khi modal show, fade dễ nhìn, cách dùng đơn giản. Nguyên lý của modal là bạn sẽ có 1 nút hoặc link với thuộc tính data-target=”#exampleModal”, khi click vào link này, bt sẽ open modal có id là exampleModal, vì là id nên không lo trùng với modal khác. Đây cũng là cách các bạn nên dùng để tự viết modal hoặc tab hoặc gì đó tương tự.

Form, button

Đây là thứ tiện lợi tiếp theo của bs. 1 trang web thì luôn có các form, form field, button các loại, có lẽ đây là thứ thường xuất hiện nhiều nhất trên trang web, vì nó cũng đẹp sẵn rồi nên các bạn cứ dùng luôn nếu không có design khác biệt.

Carousel

1 dạng slide đơn giản, hữu dụng, không cần nhiều tùy biến thì cứ Carousel bt mà dùng, nhanh gọn lẹ khỏi cần tự viết hoặc thêm plugin nặng nề ????

Một số class hữu dụng

card: class để đóng gói các phần nội dung liên quan, có sẵn border jumbotron: ý nghĩa giống card, nhưng mặc định sẽ có background xám màu margin, padding: có sẵn các class pt: padding-top, px: padding left và right, py: padding top và bottom, tương tự với các class còn lại, khoảng cách thì từ 1 đến 5, ví dụ pt-1 là padding-top: 0.25rem, pt-2 là padding-top: 0.5rem… border, border-radius, box-shadow: rất tiện lợi, có khi nào bạn nghĩ không biết box-shadow bao nhiêu cho đẹp mắt? cứ nhìn bs nó làm mà theo thôiwidth, height, mw, mh, min-wm, min-wh, có các size là w-25, w-50, w-75, w-100 ứng với 25%… …
Dưới đây là vài thứ hay dùng của bootstrap, framework này vẫn còn nhiều thứ thú vị các bạn nên xem qua, sử dụng thì rất dễ thôi, chủ yếu là mình biết nó có để sau này tra cho dễ. Khi nào thì nên sử dụng bt? Khi bạn không có design chi tiết làm theo, cần nhanh, gọn, dễ nhìn, khi có những chi tiết không áp dụng được cho nhiều chỗ, thay vì đặt class hoặc style vào phần tử đó, bạn có thể tìm class bt mà áp vào. Bootstrap tiện lợi thật nhưng các bạn mới học nên xem và tìm hiểu nó làm như thế nào thay vì cứ áp dụng không cần biết lý do, vì bs không nhẹ chút nào, bạn sẽ không muốn áp cả framework nào mà dùng mỗi cái grid để responsive, đã thế grid còn chả giống hệt design phải custom lại. Đừng nói mình thành thạo bootstrap khi chỉ biết sử dụng những thứ có sẵn mà không hiểu bản chất nhé. ✌️
Github: https://github.com/twbs/bootstrap
Home: https://getbootstrap.com

Từ khoá: bootstrapcss
Next Post

Những công việc cần chuẩn bị trước khi bắt đầu một dự án mới

Theo dõi
Đăng nhập
Thông báo của
guest
guest
0 Comments
Phản hồi nội tuyến
Xem tất cả bình luận

Có thể bạn quan tâm

Cách làm món giò tai ngày Tết thơm giòn đơn giản

Cách làm món giò tai ngày Tết thơm giòn đơn giản

by Huệ Minh
25 Tháng Chín, 2021
0
2.6k

Bạn muốn làm món giò tai thơm ngon chỉ trong 4 bước? Bằng những nguyên liệu vô cùng...

Cách làm kem vải cốt dừa cực ngon xua tan nắng nóng

Cách làm kem vải cốt dừa cực ngon xua tan nắng nóng

by Huệ Minh
24 Tháng Mười, 2021
0
2.6k

Món kem mát lạnh thơm mùi nước cốt dừa kết hợp với cùi vải chua chua ngọt ngọt...

Làm thế nào để người ấy yêu bạn hơn?

Làm thế nào để người ấy yêu bạn hơn?

by Huệ Minh
17 Tháng Chín, 2021
0
2.6k

Những điều tưởng chừng ai cũng biết mà không phải vậy ???? 1. Cải thiện giao tiếp giữa...

Setup Bios cho Hackintosh

by Anthony Tran
15 Tháng Mười, 2019
1
2.7k

Vì có quá nhiều hãng máy và main nên mình không thể làm cụ thể từng loại bios...

  • Giới thiệu
  • Liên hệ
  • Chính sách bảo mật

© 2023 Genzakit

Không có kết quả phù hợp
Xem tất cả kết quả
  • Trending
  • Gợi ý bạn đọc
  • Tin tức
  • Hackintosh
  • Lập trình
  • Software
  • Thủ thuật
  • Chia sẻ
  • GenZA Can Cook
  • GenZA Beauty
  • Vui mỗi ngày
  • Cảm nhận cuộc sống

© 2022 Genzakit - Ngôi nhà giới trẻ

Chào mừng trở lại!

Đăng nhập bằng Facebook
Sign In with Google
OR

Đăng nhập

Quên mật khẩu?

Retrieve your password

Please enter your username or email address to reset your password.

Đăng nhập
wpDiscuz