Phần 1: Giới thiệu Bootstrap 4

05/12/2018 Nguyễn Văn Huynh

Bootstrap là 1 framework JavaScript, CSS và HTML miễn phí và phổ biến nhất trong việc thiết kế giao diện web đáp ứng trên di động.

Bootstrap được phát triển bởi Mark Otto và Jacob Thornton tại Twitter, và được xuất bản thành sản phẩm mã nguồn mở vào tháng 08 năm 2011 trên GitHub. Vào tháng 06 năm 2014, Bootstrap là dự án số 1 ở GitHub.

1. Các gói Bootstrap

Bạn có thể tại Bootstrap về máy ở địa chỉ: http://getbootstrap.com/getting-started/#download. Theo đó, Bootstrap được chia thành 3 gói chính:

a. Bootstrap: gói này chứa CSS, JavaScript và font được biên dịch và rút gọn. Không có tài liệu hướng dẫn hay các tập tin mã nguồn trong gói này. Cấu trúc thư mục của gói này như sau:

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

b. Source code: gói này chứa CSS, JavaScript và font cùng với các tài liệu hướng dẫn.

c. Sass: gói này chứa Rails, Compass hoặc các dự án Sass.

2. Ưu điểm của Bootstrap

  • Dễ sử dụng: Bất kỳ ai có kiến thức căn bản về HTML và CSS cũng đều có thể bắt đầu dùng Bootstrap
  • Các tính năng đáp ứng: Bootstrap chứa các CSS cho phép thiết kế giao diện đáp ứng có thể hiện thị trên nhiều kích thước màn hình khác nhau như ở tablet, phone hay desktop.
  • Tiếp cận ưu tiên thiết bị di động: Ở Bootstrap phiên bản 3, các phong cách sử dụng cho di động là 1 phần chính của framework.
  • Tương thích với các trình duyệt khác nhau: Bootstrap cho phép tương thích với tất cả trình duyệt hiện nay như Chrome, Firefox, Internet Explorer, Safari hay Opera.

3. Tạo trang web đầu tiên với Bootstrap

Trong phần này, chúng ta sẽ tìm hiểu cách tạo 1 trang đơn giản sử dụng framework Bootstrap. Như các bạn đã biết 1 trang HTML5 có cấu trúc như trang Index.html sau:

1
2
3
4
5
6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>

Tuy nhiên nếu bạn dùng Bootstrap, đầu tiên bạn phải tải gói Bootstrap như phần trên, sau đó nhúng 3 tập tin bootstrap.min.css,  jquery.min.js và bootstrap.min.js trong gói Bootstrap vào trang Index.html.

 

Chú ý tập tin jquery bạn phải download từ https://jquery.com/download/ với phiên bản mới nhất khi viết bài này là jquery-3.1.1.min.js và đặt trong thư mục js của Bootstrap.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/jquery-3.1.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</head>
<body>
//Nội dung trang Web
</body>
</html>

Bước tiếp theo bạn sẽ học cách tạo nội dung Bootstrap nằm trong phần tử <body>. Vì Bootstrap là framework được thiết kế nhắm đến đối tượng là màn hình di động (mobile) vì vậy để đảm bảo giao diện web được hiển thị chính xác, chúng ta phải dùng thẻ meta với nội dung:

1
<meta name="viewport" content="width=device-width, initial-scale=1">

Trong đó:

  • width=device-width: thiết lập độ rộng của màn hình, độ rộng này sẽ co giãn phụ thuộc vào kích thước màn hình mà trang web được duyệt.
  • initial-scale=1: chỉnh độ zoom (phóng to, thu nhỏ) khi trang web được tải lên lần đầu. Nếu độ zoom là 1 có nghĩa là trang hiển thị đúng kích thước mặc định của nó (100%).

Bootstrap cũng cần một phần tử để chứa các nội dung trang. Có 2 lớp chứa (container) có thể áp dụng đó là:

  • Lớp .container cung cấp 1 vùng chứa với kích thước cố định đáp ứng
  • Lớp .container-fluid cung cấp một vùng chứa với kích thước đầy đủ, trải rộng toàn bộ độ rộng của màn hình.

Lưu ý: Các vùng chứa không thể nằm trong 1 vùng chứa khác.

Ví dụ 1: Vùng chứa .container

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/jquery-3.1.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h1>Trang Bootstrap nằm trong vùng chứa .container, thẻ h1</h1>
  <p>Văn bản, thẻ p</p>
</div>
 
</body>
</html>

Ví dụ 2: Vùng chứa .container-fluid

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/jquery-3.1.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
  <h1>Trang Bootstrap nằm trong vùng chứa .container-fluid, thẻ h1</h1>
  <p>Văn bản thẻ p</p>
</div>
 
</body>
</html>

 

Bài này giúp các bạn đã học được các khái niệm cơ bản về Bootstrap, cách tải Bootstrap và áp dụng xây dựng các ví dụ cơ bản.

Tag:

Đang phát triển ...

Bài viết liên quan

Phần 5. Màu sắc văn bản trong Bootstrap 4

Bootstrap 4 xây dựng sẵn những lớp cho phép chúng ta có thể dùng để định nghĩa “màu sắc” cho văn bản trong trang web.

Phần 4: Văn bản trong Boostrap

Trong bài này, chúng ta sẽ học đến cách thiết lập mặc định cho phong cách văn bản trong Bootstrap.

Phần 3: Hệ thống lưới nâng cao Bootstrap

Trong phần này, các bạn tiếp tục tìm hiểu các lớp lưới khác trong Bootstrap để thực hiện việc phân vùng cho các giao diện phức tạp hơn.

Phần 2: Hệ thống lưới trong Bootstrap 4

Nội dung của phần này là về hệ thống lưới được sử dụng trong Bootstrap.

CSS định nghĩa sẵn trong bootstrap 3

Chương này chúng ta sẽ đi tìm hiểu những css được định nghĩa sẵn trong BS và cách sử dụng chúng.

Cài đặt và sử dụng Bootstrap 3

Để sử dụng được bootstrap chúng ta cần cầu hình cài đặt đưa các file thư viện của bootstrap vào dự án web của chúng ta

Giới thiệu về bootstrap (BS)

Bootstrap là gì: bootstrap là  Html, css, js được xây dựng sẵn để sử dụng trong các dự án phát triển web, các trang web đáp ứng lại các kích thước màn hình hiển thị.a

Tấn công ransomware cực lớn trên toàn cầu, tải về bản vá lỗi ngay

Tấn công ransomware cực lớn trên toàn cầu, tải về bản vá lỗi ngay

Cuộc tấn công vào NHS đã sử dụng một dạng ransomware có tên Wanacryptor và nhắm mục tiêu vào hàng nghìn tổ chức ở 74 quốc gia. Ransomware là một dạng tấn công mạng có liên quan đến việc các hacker nắm quyền kiểm soát máy tính hoặc thiết bị di động và yêu cầu đòi tiền chuộc. Bằng nhiều cách, những kẻ tấn công tải phần mềm độc hại vào thiết bị và mã hóa thông tin của nạn nhân.

Kỹ thuật tìm kiếm và thay thế từ cơ bản đến nâng cao trong MS Office (Word)

Kỹ thuật tìm kiếm và thay thế từ cơ bản đến nâng cao trong MS Office (Word)

Trong Word nói riêng, Office nói chung, có lẽ ai cũng biết chức năng tìm kiếm và thay thế nội dung văn bản, nhưng ngoài ra, còn nhiểu chức năng khác trong hộp thoại tìm kiếm và thay thế mà không phải ai cũng biết để sử dụng. Trong đó có tìm kiếm và thay thế định dạng, sử dụng các ký hiệu đại diện, các ký tự đặc biệt… 

Bài 6: Thủ thuật outlook 2010

Bài 6: Thủ thuật outlook 2010

Bài viết giới thiệu đến các bạn một số thủ thuật được dùng trong outlook 2010, để giúp công việc của các bạn được dễ dàng hơn.

Bài 5: Quản lý các thông tin trong  outlook 2010

Bài 5: Quản lý các thông tin trong outlook 2010

Bài viết giới thiệu về phương pháp quản lý thông tinn trong outlook 2010. Chúng ta hãy cùng tìm hiểu xem có điểm gì khác và nổi bật so với outlook 2007

Bài 4: Sử dụng lịch làm việc một cách hiệu quả outlook 2010

Bài 4: Sử dụng lịch làm việc một cách hiệu quả outlook 2010

Để công việc của đạt hiệu quả cao hơn, chúng ta hãy cùng nhau tìm hiểu cách sử dụng lịch làm việc một cách hiệu quả hơn trong outlook 2010

Bài 3: Quản lý hộp thư của bạn về dung lượng và lưu trữ outlook 2010

Bài 3: Quản lý hộp thư của bạn về dung lượng và lưu trữ outlook 2010

Bài viết sau đây sẽ giới thiệu về mục quản lý hộp thư của bạn về dung lượng và lưu trữ trong microsoft outlook 2010.

Hàm SLEEP trong PHP

Hàm SLEEP trong PHP

Có những lúc trong công việc lập trình ta cần mã tạm dừng theo một thời gian định trước thì trong php có hỗ trợ hàm sleep để các bạn làm điều này.

Hàm Rand trong PHP

Hàm Rand trong PHP

Đôi lúc chúng ta lập trình cần đến những con số sinh ngẫu nhiên vào những công việc khách nhau hôm này mình xin giới thiệu với mọi người hàm sinh số ngẫu nhiên trong PHP

Bài 9: Giới thiệu lập trình hướng đối tượng trong PHP (OOP)

Bài 9: Giới thiệu lập trình hướng đối tượng trong PHP (OOP)

Các bạn tự học PHP nên biết về lập trình hướng đối tượng trong PHP, kỹ thuật lập trình hỗ trợ công nghệ đối tượng

Bài 8: Hàm có sẵn thông dụng trong PHP

Bài 8: Hàm có sẵn thông dụng trong PHP

Hàm thông dụng trong php cần biết, các bạn mới bắt đầu lên nắm rõ ý nghĩa cấu trúc cách dùng những hàm này để bổ trợ kiến thức sau này

Bài 7: Hàm trong PHP

Bài 7: Hàm trong PHP

Hàm do người sử dụng định nghĩa cho phép bạn xử lý những tác vụ thường lặp đi lặp lại trong ứng dụng. cách khai báo, cú pháp của hàm trong php