Cái tên
Ngày nay, khi đi phỏng vấn công việc lập trình, kể cả front-end hay back-end, các nhà tuyển dụng đều hỏi bạn có biết Bootstrap không? Vậy nó có gì hay mà lại được ưa dùng như vậy?
Một vài chú ý bạn cần nhớ với Grid System:
Ngoài ra, việc triển khai ứng dụng ban đầu trên nền Bootstrap cũng giúp cho designer có thêm thời gian cũng như có sự thay đổi hợp lý dựa trên UX mà bạn đã bố trí sẵn.
Bản thân mình thì khuyên chỉ nên dùng giao diện mặc định của Bootstrap trong phần quản trị admin hoặc với những website hướng ứng dụng, nặng về phần quản lý và app.
Nếu bạn không thích giao diện mặc định bạn có thể tùy biến nó bằng công cụ Customize do Bootstrap cung cấp, hoặc bạn có thể sửa trực tiếp trong thư viện, Bootstrap cung cấp cho bạn cả source LESS và SASS nếu bạn thích.
Note: mình không khuyến khích các bạn sửa trực tiếp trong lib vì dù sao nó cũng là thư viện opensource. Nếu bạn muốn có các bạn update phía sau thì tốt nhất hãy để nguyên trạng nó. Tốt nhất bạn hãy viết style có độ ưu tiên cao hơn để override lại các thuộc tính mặc định của Bootstrap theo ý mình.
Xem thêm: Bootstrap Tabs: Add, Remove, Reposition
Việc sử dụng Bootstrap đem lại nhiều lợi ích như vậy đấy. Thế nên bạn đừng ngần ngại học và tìm hiểu thêm về nó nhé. Nắm vững nó trong tay cực kì có lợi, ít nhất là đối với những bạn đang thất nghiệp, cơ hội thành công khi đi xin việc sẽ cao hơn ;) Ngoài ra bạn cũng có thể tìm hiểu thêm 1 số CSS Framework khác như Gumby, Foundation,…
Nếu thích bài viết này, hãy subscriber blog của mình nhóe. Cám ơn các bạn đã đọc bài viết ;)
Bootstrap chắc không còn xa lạ với dân làm web nữa. Bootstrap là CSS Framework phổ biến được ưa dùng nhất hiện nay. Trước đây nó có tên đầy đủ là Twitter Bootstrap, tuy nhiên từ bản 3x nó mang tên ngắn gọn là Bootstrap.
Ngày nay, khi đi phỏng vấn công việc lập trình, kể cả front-end hay back-end, các nhà tuyển dụng đều hỏi bạn có biết Bootstrap không? Vậy nó có gì hay mà lại được ưa dùng như vậy?
1. Bootstrap Grid System
Hệ thống Grid của Bootstrap giúp cho website responsive được với nhiều loại màn hình, độ phân giải khác nhau. Tư tưởng thiết kế của Bootstrap làMobile first (ưu tiên giao diện Mobile) nên nếu bạn áp dụng chính xác Grid System và các component của nó, bạn sẽ không phải lo lắng về chuyện bị “bể” giao diện trên các device khác nhau ;)Một vài chú ý bạn cần nhớ với Grid System:
- Layout gồm 12 column. Các bạn thiết kế kiểu gì cũng được, nhưng muốn các col nằm trên 1 row thì tổng số col trong 1 row <= 12
- Rows (
.row) phải nằm trong.containerhoặc.container-fluid - Nội dung luôn phải nằm trong column
| Prefix | Container width | Usage |
|---|---|---|
| .col-xs- | Auto | Phone (< 768px) |
| .col-sm- | 750px | Tablets (>= 768) |
| .col-md- | 970px | Desktops (>=992px) |
| .col-lg- | 1170px | Large Desktops (>=1200px) |
2. Naming convention
Việc sử dụngNaming convention giúp ích rất nhiều trong lúc làm việc nhóm, ngoài ra nó cũng cho bạn 1 sự gợi nhớ. Bộ Naming convention của Bootstrap rất là chuẩn. Chẳng hạn:- nhắc đến
btnsẽ biết ngay nó là cái nút - nhắc đến
btn-primarysẽ biết ngay cái nút chính, dành cho việc submit - nhắc đến
btn-lgsẽ biết ngay nó là cái nút lớn
btn-red, btn-alert, btn-bla-bla,… :D3. Nhanh chóng có demo HOÀN CHỈNH
Chữ “NHẪN” của khách hàng rất lởm. Họ không thể ngồi chờ bạn “bôi tro trát trấu” cả một thời gian dài đẵng. Họ không biết rằng công việc của chúng ta còn có cả phầnback-end và front-end. Với Bootstrap, bạn chỉ tập trung chủ yếu vào back-end, chỉ khi render ra template, bạn cố gắng fill class theo chuẩn Bootstrap. Các component sẵn có của Bootstrap sẽ cho bạn một demo HOÀN CHỈNH trên nền xám bạc sẵn có. Việc này giúp tiết kiệm rất nhiều thời gian cho developer, đặc biệt khi làm việc với các khách hàng có tính nóng vội.Ngoài ra, việc triển khai ứng dụng ban đầu trên nền Bootstrap cũng giúp cho designer có thêm thời gian cũng như có sự thay đổi hợp lý dựa trên UX mà bạn đã bố trí sẵn.
4. Triển khai ứng dụng web trực tiếp
Ở mục số 3, mình cố tình viết hoa 2 chữHOÀN CHỈNH vì thực chất thì với những gì mà Bootstrap cung cấp, ta đã có thể sử dụng các component của nó để xây dựng một website lung linh mà không cần đụng tới CSS hay JS rồi. Thực tế cho thấy là hiện nay rất nhiều website, blog sử dụng giao diện chính là giao diện mặc định của Bootstrap.Bản thân mình thì khuyên chỉ nên dùng giao diện mặc định của Bootstrap trong phần quản trị admin hoặc với những website hướng ứng dụng, nặng về phần quản lý và app.
Nếu bạn không thích giao diện mặc định bạn có thể tùy biến nó bằng công cụ Customize do Bootstrap cung cấp, hoặc bạn có thể sửa trực tiếp trong thư viện, Bootstrap cung cấp cho bạn cả source LESS và SASS nếu bạn thích.
Note: mình không khuyến khích các bạn sửa trực tiếp trong lib vì dù sao nó cũng là thư viện opensource. Nếu bạn muốn có các bạn update phía sau thì tốt nhất hãy để nguyên trạng nó. Tốt nhất bạn hãy viết style có độ ưu tiên cao hơn để override lại các thuộc tính mặc định của Bootstrap theo ý mình.
Xem thêm: Bootstrap Tabs: Add, Remove, Reposition
Bắt đầu với Bootstrap
Đề bắt đầu với Bootstrap, bạn cần download nó tại đây http://getbootstrap.com/getting-started/#download hoặc nếu lười thì có thể sử dụng CDN<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>Việc sử dụng Bootstrap đem lại nhiều lợi ích như vậy đấy. Thế nên bạn đừng ngần ngại học và tìm hiểu thêm về nó nhé. Nắm vững nó trong tay cực kì có lợi, ít nhất là đối với những bạn đang thất nghiệp, cơ hội thành công khi đi xin việc sẽ cao hơn ;) Ngoài ra bạn cũng có thể tìm hiểu thêm 1 số CSS Framework khác như Gumby, Foundation,…
Nếu thích bài viết này, hãy subscriber blog của mình nhóe. Cám ơn các bạn đã đọc bài viết ;)