Boostrap là gì – Framework thiết kế website responsive phổ biến nhất

Bởi
Khánh Hùng
-
0
3829

Boostrap là gì? Đây là một framework HTML CSS JS template. Hiểu nôm na là Boostrap có sẵn các elements, các HTML, các CSS và các JS sẵn có cho một website cơ bản, có bao gồm cả responsive.

Boostrap có sẵn các phần như: typography, forms, buttons, tables, navigation, modals, image carousels và nhiều thứ khác. Trong bootstrap có thêm các plugin Javascript trong nó.

Bootstrap là dược phát triển bởi Mark Otto và Jacob Thornton tại Twitter. Nó được xuất bản như là một mã nguồn mở vào tháng 8 năm 2011 trên GitHub. Tính ra đến thời điểm mình viết bài viết này nó cũng đã phát triển được 3 năm rồi. Bản bootstrap mới nhất bây giờ là bootstrap 3.

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

Những điểm thuận lợi khi bản sử dụng bootstrap:

Tiết kiệm thời gian: vì nó có sẵn rất nhiều thành phần của một website cơ bản nên nó tất nhiên là tiết kiệm thời gian hơn là code tay từ đầu.

Tính năng Responsive: một số developer gần như mù cách để dựng ra một website responsive (phiên bản di động)

Mobile: Trong Bootstrap 3 mobile-first styles là một phần của core framework

Tương thích với trình duyệt: Nó tương thích với tất cả các trình duyệt (Chrome, Firefox, Internet Explorer, Safari, and Opera) có điều IE phiên bản cũ mà không chạy cũng là chuyện thường vì trình duyệt đó đã rất lỗi thời. Nhưng mà nếu khách nhất định muốn website hoạt động tốt trên IE vì một số mục đích kinh doanh thì không nên dùng boostrap mà nên code tay từ đầu.

Cách khai báo Boostrap

MaxCDN hỗ trợ lưu trữ dạng CDN cho CSS và JavaScript của Bootstrap. Bạn chỉ cần sử dụng các liên kết Bootstrap CDN.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

Cài đặt với thông qua Bower

Cài đặt và quản lý các tập tin Less, CSS, JavaScript và font của Bootstrap bằng cách sử dụng Bower.

$ bower install bootstrap

Bootstrap được tải về theo hai dạng, bên trong mỗi dạng bạn sẽ tìm thấy các tập tin và thư mục được nói dưới đây, nhóm các tài nguyên dùng chung một cách logic và cung cấp cả hai biến thể đã biên dịch và đã nén.

Khai báo jQuery

Toàn bộ các plugin của element trong Boostrap đều cần sử dụng Jquery nên bạn cần khai báo đầu tiên trước khi khai báo Boostrap. Ngoài ra bạn nên tham khảo hướng dẫn boostrap khởi đầu. Hãy tham khảo tập tin bower.json để biết được phiên bản jQuery nào được hỗ trợ.

Source Code Boostrap

Khi tải về bạn sẽ nhận được boostrap combile rất hoàn chỉnh như cây thu mực bên dưới:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── 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

Đây là các file cơ bản cho một dự án khởi đầu bằng Boostrap, bạn có thể paste vào dự án đang chạy của bạn và khai báo trên code là có thể sử dụng được.

Ngoài ra trong Boostrap còn có sẵn các mã nguồn Sass và Less Cụ thể hơn, cấu trúc của nó tương tự như sau:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

Các thư mục less/, js/, và fonts/ là nơi lưu trữ mã nguồn CSS, JS và font của chúng tôi. Thư mục dist/ lưu trữ toàn bộ những tập tin được biên dịch đã nói ở trên. Thư mục docs/ lưu trữ mã nguồn của phần tài liệu hướng dẫn sử dụng, và thư mục examples/ lưu trữ các ví dụ về cách sử dụng Bootstrap. Ngoài ra, các tập tin khác đi kèm được sử dụng để hỗ trợ cho việc đóng gói, cung cấp thông tin bản quyền và thông tin phát triển của Bootstrap.

Biên dịch CSS và JavaScript

Bootstrap sử dụng Grunt để xây dựng hệ thống, với các phương thức thuận tiện khi làm việc với framework. Đây là cách mà chúng tôi biên dịch nên mã nguồn, chạy kiểm thử và nhiều hơn thế nữa.

Cài đặt Grunt

Để cài đặt Grunt, trước hết bạn phải tải về và cài đặt node.js (đã bao gồm npm). npm là tên viết tắt của node packaged modules và là một cách để quản lý sự phụ thuộc khi phát triển thông qua node.js.

Sau đó từ màn hình giao diện dòng lệnh (command-line):

  1. Cài đặt grunt-cli một cách toàn cục bằng lệnh npm install -g grunt-cli.
  2. Chuyển đến thư mục làm việc /bootstrap/, sau đó chạy lệnh npm install. npm sẽ tìm kiếm tập tin package.json và tự động cài đặt tính phụ thuộc được liệt kê trong tập tin này.

Sau khi cài đặt xong, bạn sẽ có thể chạy các lệnh Grunt từ màn hình command-line.

Các lệnh Grunt sẵn có

grunt dist (chỉ biên dịch CSS và Javascript)

Tái tạo lại thư mục /dist/ với các tập tin CSS và Javascript đã được biên dịch và nén lại. Nếu bạn là người sử dụng Bootstrap, thì thông thường đây là lệnh mà bạn sẽ sử dụng.

grunt watch (Theo dõi)

Theo dõi các tập tin mã nguồn Less và tự động biên dịch lại các tập tin CSS bất cứ khi nào có thay đổi.

grunt test (Chạy kiểm thử)

Chạy JSHint và chạy các kiểm thử QUnit trên cùng trong PhantomJS.

grunt (Tạo nên tất cả mọi thứ và chạy kiểm thử)

Biên dịch và nén CSS với Javascript, xây dựng tài liệu hướng dẫn sử dụng, chạy HTML5 validator so sánh với tài liệu, tái tạo lại các tài nguyên Customizer và nhiều hơn thế nữa. Lệnh này thường chỉ cần thiết khi bạn muốn can thiệp vào Bootstrap.

Vấn đề

Nếu bạn gặp các vấn đề khi cài đặt sự phụ thuộc hoặc chạy các lệnh Grunt thì trước hết hãy xóa bỏ thư mục /node_modules/ được tạo ra bởi npm. Sau đó, hãy chạy lại lệnh npm install.

Template cơ bản

Hãy bắt đầu với template cơ bản này, hoặc chỉnh sửa các ví dụ này. Chúng tôi hy vọng bạn sẽ thay đổi các template và ví dụ của chúng tôi để phù hợp với nhu cầu của bạn.

Hãy copy đoạn mã HTML bên dưới để bước đầu làm việc với Bootstrap.

<!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 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[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>
  <body>
    <h1>Hello, Mona Media!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Có thể bạn quan tâm:

BÀI VIẾT LIÊN QUANXEM THÊM