Bootstrap và những điều cần biết: Khi thiết kế web hay sử dụng các dịch vụ thiết kế web chắc hẳn bạn đã nghe qua nhiều lần khái niệm này… Khi một lập trình viên nói rằng họ thiết kế web dựa trên “công nghệ Boostrap”, có lẽ bạn vẫn chưa hình dung được nó là gì và cách nó vận hành như thế nào trong một website. Bài viết này của chúng tôi sẽ giải đáp cho bạn các khúc mắc cơ bản!
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.
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?
- 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.
- 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.
- 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.
- 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.
- 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
- 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 href="css/bootstrap.min.css" rel="stylesheet"> <!-- Sửa lỗi HTML5 cho IE 8 trở xuống --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <h1>Hellow Bootstrap!</h1> </div> <!-- 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!
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.
—
? WEBICO – GIẢI PHÁP THIẾT KẾ WEB HÀNG ĐẦU CHO DOANH NGHIỆP ?
? Địa chỉ: Mekong Tower, 235-241 Cộng Hòa, Phường 13, Quận Tân Bình, TP.HCM
? Hotline: 1800 6016
? Email: email@webico.vn
? Website: www.webico.vn
➡ Facebook: https://www.facebook.com/webico.vn/
Liên lạc ngay với chúng tôi hoặc để lại thông tin của bạn, bộ phận tư vấn của WEBICO sẽ liên lạc lại ngay để giải đáp mọi thắc mắc! Trong trường hợp tổng đài BẬN LIÊN TỤC và QUÁ TẢI đơn hàng, vui lòng để lại thông tin của bạn thông qua emai hoặc tin nhắn để chúng tôi có thể tìm lại bạn trong hàng ngàn khách hàng.
Ngoài ra các bạn cũng có thể xem BẢNG BÁO GIÁ WEBSITE CHUẨN của chúng tôi tại đây.
