Series tự học Bootstrap trong 7 ngày

Nếu bạn đang làm bất cứ điều gì liên quan đến web, rất có thể bạn đã nghe nói về Bootstrap. Nếu bây giờ bạn vẫn chưa biết Bootstrap là gì hoặc bạn chỉ muốn tìm một hướng dẫn về Bootstrap cho người mới bắt đầu để có cái nhìn tổng quan hơn về nó là gì và những gì nó hoạt động tốt nhất, thì bạn đã đến đúng nơi. Bootstrap là một bộ công cụ mạnh mẽ - một tập hợp các công cụ HTML, CSS và JavaScript để tạo và xây dựng các trang web và ứng dụng web. Đây là một dự án mã nguồn mở và miễn phí, được lưu trữ trên GitHub và được tạo bởi (và cho) Twitter.

Vì vậy, tại sao phải học Boostrap?

Sau khi phát hành mã nguồn mở vào năm 2011, Bootstrap đã trở nên phổ biến rất nhanh chóng và không phải không có lý do. Các nhà thiết kế web và nhà phát triển web thích Bootstrap vì nó linh hoạt và dễ làm việc. Ưu điểm chính của nó là nó đáp ứng theo thiết kế, nó duy trì khả năng tương thích với trình duyệt rộng, nó cung cấp thiết kế nhất quán bằng cách sử dụng các thành phần có thể tái sử dụng và nó rất dễ sử dụng và học hỏi nhanh chóng. Nó cung cấp khả năng mở rộng phong phú bằng cách sử dụng JavaScript, đi kèm với hỗ trợ tích hợp cho các plugin jQuery và một API JavaScript. Bootstrap có thể được sử dụng với bất kỳ IDE hoặc trình soạn thảo nào cũng như bất kỳ công nghệ và ngôn ngữ phía máy chủ nào, từ ASP.NET đến PHP đến Ruby on Rails.

Với Bootstrap, các nhà phát triển web có thể tập trung vào công việc phát triển mà không cần lo lắng về thiết kế và có được một trang web đẹp và chạy nhanh chóng. Ngược lại, nó cung cấp cho các nhà thiết kế web một nền tảng cực tốt để tạo ra các giao diện Bootstrap chuyên nghiệp.

Kiến thức cơ bản về Bootstrap

Bootstrap có sẵn ở hai dạng; dưới dạng phiên bản được biên dịch trước và dưới dạng phiên bản mã nguồn. Phiên bản mã nguồn sử dụng bộ tiền xử lý Less CSS, nhưng nếu bạn quan tâm nhiều hơn đến Sass, thì cũng có một bộ Sass chính thức của Bootstrap. Để giúp việc sử dụng các tiền tố của nhà cung cấp CSS dễ dàng hơn, Bootstrap sử dụng Autoprefixer.

Phiên bản mã nguồn có các kiểu mã nguồn được viết bằng Less (hoặc Sass), tất cả JavaScript và tài liệu kèm theo. Điều này cho phép các nhà thiết kế và nhà phát triển tham vọng hơn có thể thay đổi và tùy chỉnh, theo ý muốn của họ, tất cả các kiểu được cung cấp và xây dựng phiên bản Bootstrap của riêng họ. Nhưng nếu bạn không quen thuộc với Less (hoặc Sass), hoặc bạn không quan tâm đến việc thay đổi mã nguồn, đừng lo lắng. Bạn chỉ có thể sử dụng CSS vani được biên dịch trước. Tất cả các kiểu có thể được ghi đè sau này bằng cách sử dụng các kiểu tùy chỉnh.

Cấu trúc thư mục của bootstrap

Chúng ta sẽ tập trung vào phiên bản được biên dịch và nén trước, có thể tải xuống tại đây. Khi bạn tải xuống file zip và giải nén, cấu trúc thư mục sẽ giống như sau:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

Cấu trúc Bootstrap khá đơn giản và dễ hiểu. Nó bao gồm các tệp được biên dịch trước cho phép sử dụng nhanh chóng trong bất kỳ dự án web nào. Bên cạnh các tệp CSS và JS được biên dịch và rút gọn, nó cũng bao gồm các phông chữ từ Glyphicons và chủ đề Bootstrap khởi động tùy chọn. Chỉ cần đảm bảo rằng thư mục phông chữ Glyphicons ở cùng cấp với thư mục CSS.

Mẫu HTML Bootstrap cơ bản

Một mẫu HTML Bootstrap cơ bản sẽ trông giống như sau:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Điều quan trọng là bắt đầu bất kỳ HTML nào với khai báo HTML 5 Doctype, để các trình duyệt biết loại tài liệu mà  trình duyệt sẽ hiển thị. Phần đầu chứa ba thẻ <meta> quan trọng phải được khai báo trước và bất kỳ thẻ bổ sung nào sẽ phải được thêm vào sau những thẻ này. Nếu bạn muốn hỗ trợ các trình duyệt cũ hơn như IE8, bạn cũng có thể đưa vào phần đầu của HTML 5, điều này sẽ cho phép sử dụng các phần tử HTML5 trong các trình duyệt cũ hơn và Respond.js, sẽ tạo nhiều Truy vấn phương tiện CSS3, trong các phiên bản Internet cũ. 

<head>
  ...
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

Mặc dù, việc thêm thẻ [if lt IE 9] không quan trọng lắm nếu bạn xây dựng các website chạy trên các trình duyệt hiện đại.

Các tệp JavaScript được thêm vào cuối trang để cho phép trang web tải trước khi bất kỳ thư viện JavaScript nào được thực thi. jQuery là cần thiết cho các plugin Bootstrap và cần tải trước bootstrap.js. Nếu bạn không sử dụng bất kỳ tính năng tương tác nào liên quan đến JS của Bootstrap, bạn cũng có thể bỏ qua các tệp này khỏi code.

Đây là mức tối thiểu cần thiết để thiết lập và chạy một bố cục Bootstrap cơ bản. Nếu bạn là nhà phát triển, bạn có thể muốn xem một số ví dụ nâng cao hơn tại trang ví dụ của Bootstrap. Nếu bạn là một nhà thiết kế hoặc chỉ đang tìm kiếm nguồn cảm hứng, Bootstrap Expo sẽ giới thiệu các trang web được xây dựng bằng Bootstrap. Như chúng ta sẽ thấy ở phần sau, mọi phần của Bootstrap đều có thể dễ dàng tùy chỉnh trong CSS. Nhưng nếu đó không phải là sở thích của bạn và bạn đang tìm kiếm một giao diện hơi khác so với các chủ đề Bootstrap được đóng gói sẵn, thì có rất nhiều chủ đề miễn phí, mã nguồn mở và cao cấp có sẵn từ các nguồn như Bootswatch và WrapBootstrap.

Giao diện bootstrap mẫu

Giao diện bootstrap mẫu

Các thành phần giao diện trong bootstrap

Bootstrap đi kèm với các template HTML và CSS cơ bản bao gồm nhiều thành phần giao diện người dùng phổ biến. Chúng bao gồm Kiểu chữ, Bảng, Form, Nút, Glyphicons,  Dropdown, Button, Input, Điều hướng, Phân trang, Nhãn và Huy hiệu, Cảnh báo, Thanh tiến trình, Modal, Tab, Sắp xếp, carousel và nhiều thứ khác.

Một số thành phần giao diện sử dụng JavaScript và plugin jQuery.

Các mẫu Bootstrap này được tạo sẵn dưới dạng các lớp CSS được kiểm chứng mà bạn có thể dùng cho HTML của mình để đạt được các hiệu ứng khác nhau. Điều này làm cho việc sử dụng Bootstrap trở nên rất tiện lợi. Bằng cách sử dụng các tên class ngữ nghĩa như .success, .warning và .info, các thành phần này có thể dễ dàng tái sử dụng và mở rộng. Nhưng trong khi Bootstrap sử dụng tên lớp mô tả có ý nghĩa, nó không cụ thể về chi tiết triển khai. Tất cả các lớp có thể được ghi đè bằng kiểu và màu CSS tùy chỉnh, và ý nghĩa của lớp sẽ vẫn giữ nguyên.

 

courses

[BOOTSTRAP] Bài 12: Modal, Tooltip, Popover, và Toast trong bootstrap 4

Trong bài viết này codecamp sẽ hướng dẫn các bạn cách sử dụng Modal, Tooltip, Popover, và Toast - đây đều là các component phổ biến trong bootstrap dùng để xây dựng website.

Chi tiết
courses

[BOOTSTRAP] Bài 11: Tất tần tật về form trong bootstrap

Bài hôm nay sẽ hướng dẫn các bạn tìm hiểu và thực hành với form và các component trong bootstrap.

Chi tiết
courses

[BOOTSTRAP] Bài 10: NAV và NAVBAR trong bootstrap đầy đủ nhất

Hôm nay chúng ta sẽ nghiên cứu và thực hành việc sử dụng nav và navbar trong việc xây dựng các thanh điều hướng trong website cực kỳ đơn giản bằng bootstrap.

Chi tiết
courses

[BOOTSTRAP] Bài 9: Dropdown trong bootstrap

Hôm nay chúng ta sẽ tiếp tục nghiên cứu và thực hành với dropdown trong bootstrap

Chi tiết
courses

[BOOTSTRAP] Bài 8: Sử dụng card trong bootstrap đầy đủ nhất

Card là một thẻ  trong  bootstrap  4  là  một hộp với padding  xung quanh nội dung. Nó  bao gồm các tùy chọn  cho  header,  footers, content ,  màu sắc, …

Chi tiết
courses

[BOOTSTRAP] Bài 7: Phân trang, list và breadcrumbs trong bootstrap.

Phân trang, list và breadcrumbs được sử dụng rất nhiều khi xây dựng các ứng dụng và website, hôm nay chúng ta sẽ nghiên cứu và thực hành với phân trang, list và breadcrumbs.

Chi tiết
courses

[BOOTSTRAP] Bài 6: Badges, Progress Bars và Spinner trong bootstrap

Hôm nay chúng ta sẽ tiếp tục nghiên cứu cách sử dụng các component của bootstrap: Badges, Progress Bars và Spinner trong bootstrap

Chi tiết
courses

[BOOTSTRAP] Bài 5: Hình ảnh, JUMBOTRON, ALERTS và BUTTON trong bootstrap 4

Hôm nay chúng ta sẽ tiếp tục nghiên cứu cách sử dụng các component trong bootstrap, bao gồm Hình ảnh, JUMBOTRON, ALERTS và BUTTON

Chi tiết
courses

[BOOTSTRAP] Bài 4: Sử dụng bảng trong bootstrap 4 - hướng dẫn và ví dụ

Bảng là một trong những thành phần quan trọng khi thiết kế và xây dựng web, chúng ta có thể dùng bảng để trình bày và thể hiện dữ liệu. Table trong bootstrap rất dễ sử dụng, hôm nay chúng ta sẽ tìm hiểu các loại bảng trong bootstrap nhé.

Chi tiết
courses

[BOOTSTRAP] Bài 3: Kiểu chữ và màu sắc trong bootstrap

Kiểu chữ và màu sắc trong bootstrap là những thành phần cơ bản và quan trọng trong bootstrap. Bài hôm nay chúng ta sẽ tìm hiểu sâu hơn về kiểu chữ và màu sắc

Chi tiết
courses

[BOOTSTRAP] Grid, Container để dựng bố cục layout

Là một trong các khái niệm rất quan trọng nhất trong Bootstrap, nó đưa ra cách làm sao để bạn bố trí được các thành phần trên giao diện. Và làm sao để website của bạn có thể tương thích với các màn hình thiết bị khác nhau.

Chi tiết
courses

[BOOTSTRAP] Bài 1: GIỚI THIỆU VỀ BOOTSTRAP

Bootstrap là một (framework) miễn phí, mã nguồn mở, dựa trên JavaScript, CSS và HTML nó được tạo ra để xây dựng các giao diện Website tương thích với tất cả các thiết bị có kích thước màn hình khác nhau .

Chi tiết