1. Trang chủ
  2. Tin tức
  3. Bootstrap là gì? Giới thiệu và hướng dẫn cách sử dụng Bootstrap 3

Bootstrap là gì? Giới thiệu và hướng dẫn cách sử dụng Bootstrap 3

Bootstrap là gì?

Bootstrap là framework HTML, CSS và JavaScript phổ biến nhất để phát triển các trang web có tính phản hồi, tích hợp di động. Nếu bạn mong muốn sở hữu một Website Responsive, tương thích với mọi trình duyệt và thiết bị di động, chắc chắn sẽ cần dùng đến công nghệ này.

256716 03c1 2

Bootstrap bao gồm các mã CSS + HTML cơ bản cho typography, forms, buttons, tables, grids, navigation, và nhiều thành phần khác trong một website. Điều này giúp cho các designer tránh việc phải lặp đi lặp lại trong quá trình tạo ra các class CSS và các đoạn mã HTML giống nhau trong khi thiết kế web. Style của các phần tử HTML trong Bootstrap khá đơn giản và thanh lịch. Ví dụ như phần đổ bóng trong input, highlight của bảng biểu, các mã CSS hiển thị cảnh báo, tabs, phân trang…

Tại sao nên sử dụng Bootstrap?

Vậy giữa nhiều công nghệ thiết kế web hiện nay, tại sao nên sử dụng Bootstrap?

Bootstrap

  1. Lý do đầu tiên khiến Bootstrap dần trở nên phổ biến và xứng đáng được lựa chon đó là gần đây, các nhà lập trình đã bổ sung thêm tính năng Customize (Tùy chỉnh). Chức năng này giúp cho các nhà thiết kế linh hoạt hơn trong việc lựa chọn những thuộc tính, phần tử phù hợp với dự án họ đang theo đuổi. Chức năng này cũng cho phép bạn không cần phải tải toàn bộ mã nguồn về máy.
  2. Bootstrap không đòi hỏi kiến thức quá phức tạp. Chỉ cần biết sơ qua HTML, CSS, Javascript, Jquery là bạn có thể sử dụng nó để tạo nên một website chuyên nghiệp, website theo yêu cầu đúng như mong muốn.
  3. Boostrap được viết bởi những bộ não công nghệ tài năng trên khắp thế giới. Sự tương thích của trình duyệt với thiết bị đã được kiểm tra nhiều lần trước khi đưa vào sử dụng, nên khi lựa chọn Bootstrap, bạn có thể tin rằng mình sẽ tạo nên những sản phẩm hoàn hảo.
  4. Do sử dụng Grid System nên Bootstrap mặc định hỗ trợ Responsive. Bootstrap được viết theo xu hướng Mobile First tức là ưu tiên cho việc tương thích với các giao diện trên thiết bị di động. Sử dụng công nghệ này cho website của bạn sẽ giúp website trở nên tương thích với tất cả kích thước màn hình – một điều cực kì quan trọng và cần thiết trong trải nghiệm người dùng.
  5. Bootstrap hoạt động theo xu hướng mã nguồn mở nên bạn có thể vào mã nguồn của nó để thay đổi và chỉnh sửa tùy ý

Giới thiệu và hướng dẫn cách sử dụng Bootstrap 3

Không như các phiên bản trước đây, Bootstrap 3 được mặc định hỗ trợ Responsive. Ở bản bootstrap 3 font glyphicons-halflings-regular được thay thế cho glyphicons-halflings.png

227404

  • Boostrap 3 hỗ trợ Responsive cho nhiều kích thước màn hình khác nhau:

Ký hiệu lớp

Thiết bị Độ rộng lớp container Chú thích
.col-xs-$ Extra small Auto Dùng cho điện thoại kích thước nhỏ hơn 768 pixels
.col-sm-$ Small devices 750px Dùng cho tablets kích thước >= 768 pixels
.col-md-$ Medium devices 970px Dùng cho desktop ( >=992 pixels)
.col-lg-$ Large devices 1170px Dùng cho desktops >=1200 pixels

Với $ là một số nằm trong khoảng từ 1-12.

Cấu trúc bootstrap 3:

  • Sau khi lên trang chủ: http://getbootstrap.com/getting-started/ bạn tải mã nguồn của nó về (Bản mới nhất tính đến thời điểm hiện tại là v3.1.1).

Cấu trúc folder Boostrap 3 như sau:

Đây là cấu trúc file html (hoặc htm) được chứa trong folder bootstrap (bạn có thể đặt tên folder này là tùy ý) theo đường dẫn như ảnh trên.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <!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>Sài thử Bootstrap</title>       <!-- Khai báo sử dụng css của Bootstrap -->     <link alt="css/bootstrap.min.css" rel="stylesheet">       <!-- Sửa lỗi HTML5 cho IE 8 trở xuống -->     <!--[if lt IE 9]>       <script src="./data/upload/bootstrap-la-gi-gioi-thieu-va-huong-dan-cach-su-dung-bootstrap-3-5.js"></script>       <script src="./data/upload/bootstrap-la-gi-gioi-thieu-va-huong-dan-cach-su-dung-bootstrap-3-6.min"></script>     <![endif]-->   </head>   <body>     <span class="container">         <span>Hellow Bootstrap!</span>              </span>       <!-- Khai báo thư viện jQuery -->     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>     <!-- Khai báo sử dụng thư viện javascript của bootstrap -->     <script src="js/bootstrap.min.js"></script>   </body> </html>

Như vậy chúng tôi đã chia sẻ với bạn những kiến thức cơ bản nhất về Boostrap 3. Tin rằng đây là một công nghệ mới tối ưu và sẽ được sử dụng rất nhiều trong tương lai đặc biệt là trong thiết kế website chuyên nghiệp!

Download 1

Vẫn còn nhiều thắc mắc cần được giải đáp? Hãy liên hệ với chúng tôi ngay qua số hotline 1800 6016. Chúng tôi xin cam đoan sẽ hỗ trợ bạn hết mức và mang lại những giải pháp tốt nhất.