Hãy hình dung: Bạn đang chăm chỉ học ngôn ngữ back-end như Python, và tập trung vào framework như Flask hoặc Django. Bạn muốn trưng bày chức năng trang web, nhưng không có nhiều thời gian để học thiết kế front-end web cùng với kỹ năng back-end bạn đang học. À, và bạn cũng cần front-end này mobile-first và responsive — điều hiển nhiên trong thời đại ngày càng nhiều người xem trang web trên thiết bị di động.
Làm sao?
May mắn thay, có giải pháp: Bootstrap. Bootstrap là framework CSS bao gồm CSS viết sẵn và một số plugin JavaScript. Mục đích của nó là đảm bảo front-end của bạn mobile-first và tuân theo nguyên tắc thiết kế web responsive.
Trong hướng dẫn này, chúng tôi đã tổng hợp ý tưởng về cách bạn có thể bắt đầu dùng Bootstrap cho dự án phát triển web của mình.
Bootstrap là gì?
Bootstrap là framework CSS. Bootstrap có style cho nút bấm, menu thả xuống (drop-down), lưới (grid), hàng (row), form, và các yếu tố phổ biến khác tìm thấy trên nhiều trang web. Bootstrap cũng có nhiều thành phần JavaScript, như accordion, thành phần có thể thu gọn (collapsible), và popup.
Bootstrap hoạt động bằng cách dùng hệ thống lưới 12 cột (12-column grid system). Có 12 cột và một yếu tố trang web có thể chiếm tất cả chúng. Ví dụ, một đoạn văn toàn bộ có thể chiếm 12 cột, hoặc bạn có thể để hình ảnh chiếm 4 cột và văn bản chiếm 8 cột.
Tính năng chính của Bootstrap là gì?
Bootstrap mobile-first và dùng nguyên tắc thiết kế responsive. "Mobile-first" có nghĩa là CSS được viết với thiết bị di động làm kích thước viewport (khung nhìn) chính. Nhiều người tiêu dùng nội dung trên thiết bị di động, vì vậy rất quan trọng rằng bất kỳ trang web bạn xây dựng ưu tiên người dùng mobile, nghĩa là front-end của bạn có thể dễ dàng điều hướng dùng thiết bị di động.
"Thiết kế responsive" (Responsive design) có nghĩa là trang web có thể điều chỉnh định dạng để phù hợp với kích thước viewport. "Viewport" đề cập đến kích thước không gian người dùng xem trang web. Viewport phổ biến bao gồm máy tính để bàn, máy tính bảng, và thiết bị di động. Nếu người dùng xem trang web của bạn trên điện thoại, họ sẽ có trải nghiệm khác so với xem trên desktop.
"Mobile-first" có nghĩa là trải nghiệm này sẽ chất lượng cao như trên desktop, không phải suy nghĩ sau. Hệ thống lưới 12 cột của Bootstrap cho phép các yếu tố trên trang web điều chỉnh và "chồng chéo" (stack) khi cần thiết khi người dùng xem trang web trên thiết bị di động.
Bootstrap là kỹ năng tuyệt vời để có như nhà phát triển web. Nó được dùng để đảm bảo trang web front-end của bạn mobile-first, responsive, và có tất cả yếu tố của trang web hoạt động đầy đủ.
Học Bootstrap
Nếu bạn muốn làm nhà phát triển web, biết Bootstrap có thể là lợi thế lớn. Điều này đúng dù trọng tâm của bạn là thiết kế web front-end hay phát triển back-end. Bootstrap có thể tiết kiệm thời gian và đảm bảo trang web của bạn responsive và mobile-first.
Tại sao tôi nên học Bootstrap?
Có nhiều lý do bạn nên học Bootstrap.
Bootstrap đảm bảo bạn có trang web responsive, mobile-first. Cho phép người dùng điều hướng nội dung trên điện thoại là quan trọng trong bất cứ gì bạn xây dựng vì họ thường truy cập trang web trên điện thoại nhiều hơn desktop ngày nay.
Hệ thống lưới 12 cột của Bootstrap xếp chồng (stack) các yếu tố nên người dùng không cuộn ngang (horizontally) khi họ trên điện thoại. "Responsive" đề cập đến cách trang web phản hồi với kích thước màn hình người dùng xem.
Bootstrap tiết kiệm thời gian xây dựng front-end. CSS viết sẵn và plugin JavaScript của Bootstrap cho phép bạn tiết kiệm thời gian xây dựng front-end. Plugin có thể giúp nếu bạn có deadline gấp, đặc biệt như nhà phát triển cho công ty khởi nghiệp (startup).
Bootstrap tuyệt vời cho prototyping (tạo nguyên mẫu). Bạn có thể đang làm dự án lớn và cần phát triển dự án tối thiểu khả thi (MVP) nhanh chóng. Với Bootstrap, bạn có thể phát triển giao diện người dùng đơn giản mà không phải dành quá nhiều thời gian làm thiết kế. Sau đó, bạn có thể áp dụng style bổ sung cho thiết kế, khi bạn sẵn sàng.
Bootstrap có cộng đồng nhà phát triển thân thiện. Bạn có thể dễ dàng tham gia cộng đồng Bootstrap bằng cách tham gia thảo luận liên quan Bootstrap trên các trang như StackOverflow. Đội ngũ Bootstrap cũng có blog và tài khoản Twitter.
Bootstrap là kỹ năng việc làm có giá trị. Có hơn 6.000 kết quả việc làm trên LinkedIn nhắc đến Bootstrap cho các vai trò tại Mỹ. Các tin tuyển dụng bao gồm tiêu đề như "UI Developer", "Web Designer – Bootstrap", và "Front-end Developer".
Bootstrap cũng có giá trị để học nếu công việc của bạn bao gồm phát triển web và khía cạnh kinh doanh khác, như marketing. Ví dụ, một tin tuyển dụng trên LinkedIn có tiêu đề "Digital Marketing Web Developer". Công ty đăng tin đang tìm người hiểu chiến lược marketing như SEO và khả năng áp dụng những nguyên tắc đó vào phát triển front-end.
Học Bootstrap mất bao lâu?
Bootstrap không mất nhiều thời gian để học. Tùy vào mức độ bạn tùy chỉnh stylesheet, Bootstrap có thể chỉ mất một hoặc hai ngày để thiết lập. Bên cạnh thiết lập ban đầu, bạn có thể thành thạo dùng Bootstrap trong khoảng bốn tuần, giả sử bạn làm việc trên dự án hai giờ một ngày.
Khi thiết lập Bootstrap, bạn có thể hoặc tải tất cả file nguồn vào thư mục gốc (root folder) hoặc dùng phương pháp CDN (Content Delivery Network). Phương pháp CDN cho phép tải file nhanh hơn, vì khi người dùng truy cập trang web, tất cả file Bootstrap sẽ được tải từ server.
Bootstrap có thể tùy chỉnh và bạn có thể ghi đè (override) style Bootstrap bằng CSS của chính bạn. Tùy vào dự án, bạn có thể cần nhiều thời gian hơn để tùy chỉnh Bootstrap cho phù hợp nhu cầu.
Một lời cảnh báo ở đây: Nếu bạn cố tạo front-end độc đáo, Bootstrap có thể không phải lựa chọn tốt nhất. Tùy chỉnh Bootstrap cho phù hợp tầm nhìn của bạn về front-end nên là gì tốn công hơn là hard-code (viết cứng) CSS tự thân. Giống như bất kỳ công nghệ nào, quan trọng là xác định use case (trường hợp sử dụng) và đảm bảo dùng đúng công cụ cho công việc.
Học Bootstrap có khó không?
Bootstrap không khó học nếu bạn có hiểu biết cơ bản về CSS và HTML. Nếu bạn dùng plugin JavaScript, hiểu biết cơ bản về cách JavaScript hoạt động được khuyến khích.
Bạn không cần thuộc lòng class CSS trong Bootstrap, nhưng bạn phải có thể điều hướng tài liệu Bootstrap để tìm ra class nào bạn cần.
Cách học Bootstrap: Từng bước
Không có cách đơn lẻ để học Bootstrap. Một số người học thích đọc tài liệu trên trang web Bootstrap trước, trong khi những người khác thích xem video hoặc làm khóa học trực tuyến trước khi bắt đầu dự án.
Học công nghệ mới đòi hỏi hiểu một số khái niệm giới thiệu trước khi bạn bắt đầu tải file và cấu hình framework. Bên cạnh đó, hành trình học của bạn có thể khác với người học khác. Tuy nhiên, hãy biết rằng có nguyên tắc bức tranh lớn (big-picture) chung bạn có thể áp dụng khi học Bootstrap.
Dưới đây là các bước chung bạn nên theo dõi khi học Bootstrap:
- Quyết định tại sao bạn muốn học Bootstrap. Động lực chính của bạn là gì? Bạn muốn chỉ có nó như kỹ năng phòng khi cần? Bạn muốn xây dựng dự án back-end? Bạn đang nỗ lực trở thành nhà phát triển front-end?
- Quyết định tải file Bootstrap hay dùng CDN. Xem trang web Bootstrap để biết chi tiết cách truy cập Bootstrap và quyết định phương pháp nào tốt nhất cho bạn.
- Xây dựng dự án mẫu để bắt đầu. Xem ví dụ trên trang web Bootstrap để giúp bạn nhanh chóng bắt đầu xây dựng thành phần của riêng bạn.
- Tìm ra cần bao nhiêu tùy chỉnh. Tùy vào dự án, bạn có thể cần chỉ vài hoặc nhiều sửa đổi.
- Tiếp tục học. Tiếp tục xem video hướng dẫn, đọc bài viết, và làm dự án để giữ kỹ năng sắc bén.
- Chia sẻ kỹ năng với người khác. Một trong những cách tốt nhất để củng cố học tập là dạy người khác cách làm điều gì đó. Nói với người khác trong team cũng đang xây dựng trang web hoặc làm hướng dẫn YouTube chia sẻ những gì bạn đã học.
Các khóa học Bootstrap tốt nhất
Có nhiều tài nguyên học Bootstrap, và có thể khó biết khóa học nào để đầu tư. Đây là lựa chọn hàng đầu của chúng tôi cho khóa học Bootstrap tốt nhất.
Coursera: Portfolio Building for Beginners using Bootstrap
Chi phí: Thành viên Coursera (thay đổi)
Guided Project (Dự án có hướng dẫn) do Coursera cung cấp là trải nghiệm hai giờ cho những người mới bắt đầu với Bootstrap. Trong dự án này, bạn sẽ học cách xây dựng portfolio dùng Bootstrap. Yếu tố của portfolio bao gồm thanh điều hướng (navigation bar - navbar), phần "About Me" (Về tôi), và form email.
Web Design for Everybody: Basics of Web Development & Coding Specialization
Chi phí: Thành viên Coursera (thay đổi)
Trong specialization (chuyên ngành) này, bạn sẽ học về tất cả khía cạnh thiết kế web, bao gồm Bootstrap và cách dùng nó cùng HTML, CSS, và JavaScript. Ước tính mất sáu tháng để hoàn thành specialization này, ở ba giờ mỗi tuần. Khi hoàn thành, bạn sẽ nhận chứng chỉ để trưng bày kỹ năng.
Udemy: Bootstrap – Create 4 Real World Projects
Chi phí: $19.99
Trong khóa học này, bạn sẽ học Bootstrap bằng cách tạo bốn dự án. Bạn cũng sẽ học về CSS Flexbox. Flexbox là phương pháp bố cục một chiều (one-dimensional layout method) bạn có thể dùng cho nhu cầu định dạng. Biết Flexbox quan trọng trong trường hợp bạn muốn dùng nó cùng thành phần Bootstrap. Khóa học bao gồm 10 giờ nội dung video cộng với tài nguyên khác và chứng chỉ hoàn thành.
Codecademy: Learn Bootstrap
Chi phí: Codecademy Pro Membership ($19.99/tháng)
Khóa học này sẽ mất khoảng ba giờ để hoàn thành. Bạn sẽ học cách Bootstrap làm cho việc tạo trang web tương tác và responsive dễ dàng. Bạn nên biết HTML cơ bản trước khi làm khóa học này, và sự quen thuộc với CSS có giúp ích.
Sách Bootstrap
'Bootstrap: Responsive Web Development' bởi Jake Spurlock
Image credit: Amazon
Cuốn sách này sẽ giúp bạn thiết kế giao diện và trang web responsive hàng đầu với Bootstrap. Bạn sẽ học về phần tử HTML cho typography (chữ in), bảng, form, nút bấm, và hình ảnh. Cuốn sách này cũng dạy nguyên tắc điều hướng trang web, breadcrumbs (mô ước bánh mì), và cửa sổ modal tùy chỉnh (custom modal windows). Nếu bạn tìm sách all-inclusive về phát triển web responsive, đây là cuốn đó.
'Practical Bootstrap: Learn to Develop Responsively with One of the Most Popular Frameworks' bởi Panos Matsinopoulos
Image credit: Amazon
Cuốn sách này đi qua dự án thực tế liên quan đến xây dựng trang dashboard admin responsive. Bạn sẽ thành thạo hệ thống lưới Bootstrap, tích hợp thư viện JavaScript Bootstrap với trang HTML, và học cách dùng Scrollspy và tạo tooltip và popover. Cuốn sách này là bước tiếp theo tuyệt vời sau khi bạn đã có một chút tiếp xúc làm việc với Bootstrap.
Tài nguyên Bootstrap trực tuyến
W3Schools.com Responsive Web Design Tutorial
Image credit: W3Schools.com
W3Schools.com có Responsive Web Design Tutorial với bài học bao gồm chủ đề như viewport, media queries, và framework. Làm theo bài tập theo nhịp của bạn và có nền tảng vững chắc trong thiết kế web responsive.
Tài liệu Bootstrap (Bootstrap Documentation)
Image credit: Bootstrap Documentation
Một trong những tài nguyên tốt nhất để hiểu cách dùng Bootstrap là tài liệu trên trang web Bootstrap. Tài liệu này bao gồm từ cách bắt đầu với Bootstrap và vai trò của JavaScript trong Bootstrap đến cách tùy chỉnh Bootstrap cho nhu cầu trang web. Xem trang Introduction/Getting Started ở đây.
Start Bootstrap: Bootstrap Resources – Templates and Themes
Image credit: Start Bootstrap
Nếu bạn cảm thấy đã làm chủ cơ bản Bootstrap, đây là tài nguyên tuyệt vời cho bạn. Trang web này cung cấp danh sách được tuyển chọn (curated lists) nơi bạn có thể mua chủ đề Bootstrap (themes).
Kết luận
Bootstrap là framework CSS được thiết kế để giúp bạn xây dựng trang web responsive, mobile-first. Framework này có thể rất hữu ích cho bạn trong sự nghiệp phát triển web. Bootstrap có thể giúp bạn xây dựng trang web bạn tự hào trưng bày trên portfolio.
Bạn không cần phải chuyên gia thiết kế web hoặc CSS để bắt đầu với Bootstrap. Bạn nên có một chút kiến thức HTML và CSS trước khi bắt đầu làm việc với framework này. Nếu bạn sẽ dùng plugin JavaScript mà Bootstrap cung cấp, bạn nên biết cơ bản JavaScript. Có kiến thức sâu về các công nghệ này sẽ giúp đảm bảo bạn có trải nghiệm thành công với Bootstrap.
Nếu bạn đang cố trở thành chuyên gia thiết kế web front-end, Bootstrap chắc chắn là công cụ bạn sẽ muốn học. Tuy nhiên, đừng dựa hoàn toàn vào Bootstrap hoặc bất kỳ framework CSS nào khác: Hãy chắc chắn học cách dùng đúng CSS và JavaScript tự thân cũng.
Bất kỳ mục đích nào bạn học Bootstrap, bạn sẽ thấy có rất nhiều tài nguyên giúp bạn trong hành trình. Những thứ này bao gồm khóa học trực tuyến, sách, hướng dẫn, và cộng đồng Bootstrap.