nhat.dev
  • Tin tức
  • Dịch vụ
  • Lập trình
    • ReactJS
    • React Native
    • Angular
    • VueJS
  • Hackintosh
    • Hackintosh
    • Opencore
  • Liên hệ
No Result
View All Result
  • Đăng nhập
logo nhat.dev
  • Tin tức
  • Dịch vụ
  • Lập trình
    • ReactJS
    • React Native
    • Angular
    • VueJS
  • Hackintosh
    • Hackintosh
    • Opencore
  • Liên hệ
No Result
View All Result
nhat.dev
No Result
View All Result
Home Lập trình

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

Nhat Tran by Nhat Tran
21 Tháng Tám, 2019
Bootstrap 4.3 và những điều cơ bản cần biết
482
SHARES
1.6k
VIEWS
Chia sẻ lên FacebookChia sẻ lên Twitter

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.

Có thể bạnquan tâm

Vì sao Flutter là lựa chọn tốt nhất để làm mobile app 2021

4 xu hướng Front-end 2021

Low-code là gì? Tương lai của lập trình

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

Tags: bootstrapcss
Bài viết trước

“Code dễ đọc” là như thế nào?

Bài viết sau

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

Nhat Tran

Nhat Tran

Chia sẻ vài thứ hay ho bản thân tìm hiểu và tìm kiếm được đến mọi người

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

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

Subscribe
Notify of
guest
guest
0 Comments
Inline Feedbacks
View all comments

Recommended.

Danh sách những website hữu ích dành cho lập trình web 2019

Danh sách những website hữu ích dành cho lập trình web 2019

24 Tháng Mười, 2019
OpenCore Computer: Máy tính cài sẵn Hackintosh Catalina mà không được sự cho phép của Apple

OpenCore Computer: Máy tính cài sẵn Hackintosh Catalina mà không được sự cho phép của Apple

14 Tháng Sáu, 2020

Trending.

Hướng dẫn cài macOS trên Laptop, PC 2019

Hướng dẫn cài macOS trên Laptop, PC 2019

6 Tháng Chín, 2020
Chuẩn bị kiến thức cơ bản trước khi “vọc” hackintosh

Hướng dẫn tạo bộ cài vanilla hackintosh dễ dàng nhất

6 Tháng Ba, 2020
Cách “lách” bản quyền âm thanh và hình ảnh video Youtube 2020

Cách “lách” bản quyền âm thanh và hình ảnh video Youtube 2020

2 Tháng Mười Một, 2020
Chuẩn bị kiến thức cơ bản trước khi “vọc” hackintosh

Cài đặt Clover vào ổ cứng sau khi cài macOS

30 Tháng Mười Một, 2019
Chuẩn bị kiến thức cơ bản trước khi “vọc” hackintosh

Kích hoạt âm thanh trong hackintosh với AppleALC

30 Tháng Mười Một, 2019
nhat.dev

© 2019 nhat.dev

Chia sẻ chút kiến thức, kinh nghiệm, thủ thuật mà bản thân đã tìm hiểu và đọc được với mọi người

  • About me
  • Privacy & Policy
  • Advertise
  • Contact

Theo dõi tôi

No Result
View All Result
  • Tin tức
  • Dịch vụ
  • Lập trình
    • ReactJS
    • React Native
    • Angular
    • VueJS
  • Hackintosh
    • Hackintosh
    • Opencore
  • Liên hệ

© 2019 nhat.dev

Xin chào

Sign In with Facebook
OR

Đăng nhập bằng SSO Nhatdev

Quên mật khẩu?

Create New Account!

Fill the forms below to register

All fields are required. Đăng nhập

Lấy lại mật khẩu

Vui lòng nhập tên người dùng hoặc địa chỉ email của bạn để đặt lại mật khẩu của bạn.

Đăng nhập