Hoclaptrinh.net. Theme images by Storman. Powered by Blogger.

Instagram posts

About us

3/5/16

[Bootstrap] Bài 1: Giới thiệu BootStrap

Bootstrap là gì, tại sao lại được sử dụng nhiều như vậy ?

- Bootstrap là một nền tảng miễn phí giúp thiết kế giao diện người sử dụng dễ dàng và nhanh hơn.
- Bootstrap gồm các mẫu thiết kế sẵn dựa trên các thẻ HTML và CSS như bảng, biểu mẫu, nút bấm, điều hướng, slide và nhiều đối tượng khác.
- Với bootstrap, bạn sẽ dễ dàng sáng tạo hơn trong thiết kế web tương tác. Website tương tác là những trang có khả năng hiển thị trên nhiều nền tảng, kích cỡ màn hình khác nhau.

Bootstrap ra đời như nào ?
Tuy mới ra mắt vào tháng 8 năm 2011 bởi Mark Otto và Jacob Thornton, nhân viên của Twitter. Nhưng đến nay, Bootstrap đã sớm trở thành công nghệ được sử dụng nhiều nhất trong thiết kế website bởi sự đơn giản, dễ dàng học tập và sử dụng.

Bootstrap được tải ở đâu và sử dụng như nào ?
- Tải trực tiếp tại địa chỉ: www.getbootstrap.com
- Sử dụng Boostrap từ thư viện CDN

Để sử dụng CDN từ thư viện Bootstrap trực tuyến, các bạn sử dụng 03 dòng sau trong cặp thẻ <head></head>
<!-- Trình biên dịch CSS mới nhất -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Thư viện jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Trình biên dịch JavaScript mới nhất -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Ba bước cơ bản để xây dựng một trang web sử dụng Bootstrap:

1. Thêm lệnh doctype trong phần mở đầu

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>

2. Bổ sung thẻ <meta> với các thuộc tính và giá trị sau trong phần <head></head>
<meta name="viewport" content="width=device-width, initial-scale=1">

3. Thuộc tính container của thẻ <div> trong thẻ <body>
<div class="container">
  <h1>Giao diện tương tác với kích thước cố định</h1>
  <p>Một số dòng thông báo</p> 
</div>
- .container: dành cho giao diện màn hình tương tác có kích thước xác định
- .container-fluid: dành cho giao diện kín toàn màn hình

Xem thêm bài viết về cách sử dụng thẻ HTML trong CSS

Sau đây chúng ta xem hai ví dụ về cách sử dụng thư viện Bootstrap:

Ví dụ 1:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ bootstrap - Giao diện tương tác với kích thước cố định</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>Giao diện tương tác với kích thước cố định</h1>
  <p>Một số dòng thông báo</p> 
</div>
</body>

</html>

Kết quả:
lập trình web - bootstrap cơ bản

Ví dụ 2:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ bootstrap - Giao diện full màn hình</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>  
<div class="container-fluid">
  <h1>Giao diện full màn hình sử dụng bootstrap</h1>      
  <p>Sử dụng lớp .container-fluid cho thẻ DIV để có kích thước toàn màn hình </p>    
</div>
</body>
</html>

Kết quả:
thiết kế giao diện bootstrap full màn hình

Học HTML cơ bản


0 on: "[Bootstrap] Bài 1: Giới thiệu BootStrap"