Download

Bootstrap 5.2

Bootstrap Core Team
Miễn phí 16/06/2022 0-100
5,0
Tải xuống

Bootstrap là gì?

Bootstrap là một framework phát triển fornt-end miễn phí và mã nguồn mở để tạo các trang web và ứng dụng web. Framework Bootstrap được xây dựng trên HTML, CSS và JavaScript (JS) để tạo điều kiện phát triển các ứng dụng và trang web đáp ứng ưu tiên cho thiết bị di động.

Thiết kế đáp ứng giúp trang web hoặc ứng dụng có thể phát hiện kích thước và hướng màn hình của khách truy cập, sau đó tự động điều chỉnh màn hình cho phù hợp; phương pháp tiếp cận đầu tiên dành cho thiết bị di động giả định rằng điện thoại thông minh, máy tính bảng và ứng dụng dành cho thiết bị di động dành riêng cho công việc là công cụ chính để hoàn thành công việc và giải quyết các yêu cầu của những công nghệ đó trong thiết kế.

Bootstrap bao gồm các thành phần giao diện người dùng, bố cục và các công cụ JS cùng với framework để triển khai. Phần mềm có sẵn được biên dịch trước hoặc dưới dạng mã nguồn.

Mark Otto và Jacob Thornton đã phát triển Bootstrap tại Twitter như một phương tiện cải thiện tính nhất quán của các công cụ được sử dụng trên trang web và giảm thiểu việc bảo trì. Phần mềm này trước đây được gọi là Twitter Blueprint và đôi khi được gọi là Twitter Bootstrap.

Bootstrap

Những điều cơ bản về Bootstrap

Cấu trúc file

Khi bạn tải xuống file lưu trữ zip và giải nén Bootstrap, cấu trúc file cơ bản sẽ giống như sau:

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

Cấu trúc Bootstrap khá đơn giản và dễ hiểu. Nó bao gồm các file được biên dịch trước cho phép sử dụng nhanh chóng trong bất kỳ dự án web nào. Bên cạnh các file CSS và JS được biên dịch và rút gọn, nó cũng bao gồm các phông chữ từ Glyphicons và theme Bootstrap khởi động tùy chọn.

Cấu trúc này có thể được kết hợp dễ dàng trong cấu trúc file của dự án bằng cách chỉ bao gồm các file Bootstrap chính xác như khi chúng ra khỏi kho lưu trữ zip hoặc nếu muốn phù hợp với dự án của bạn hơn, bạn có thể sắp xếp lại các file này và đặt chúng ở bất kỳ đâu bạn muốn. Chỉ cần đảm bảo rằng thư mục phông chữ Glyphicons ở cùng cấp với thư mục CSS.

Template HTML Bootstrap cơ bản

Một tempalte HTML Bootstrap cơ bản sẽ trông giống như sau:

<!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 Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Điều quan trọng là bắt đầu bất kỳ HTML nào với khai báo Doctype HTML 5, để các trình duyệt biết loại tài liệu có thể mong đợi. Phần head chứa 3 thẻ <meta> quan trọng phải được khai báo trước và bất kỳ thẻ bổ sung nào cũng chỉ được thêm vào sau những thẻ này. Nếu muốn hỗ trợ các trình duyệt cũ hơn như IE8, bạn cũng có thể đưa vào phần head của HTML 5, điều này sẽ cho phép sử dụng các phần tử HTML5 trong những trình duyệt cũ hơn và Respond.js, sẽ tạo nhiều CSS3 Media Queries, trong các phiên bản Internet Explorer cũ.

<head>
  ...
  <!--[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>

Tuy nhiên, điều này không quan trọng lắm nếu bạn chỉ nhắm mục tiêu các trình duyệt hiện đại.

Các file JavaScript được thêm vào cuối nội dung để cho phép trang web load rõ ràng trước khi bất kỳ JavaScript nào được thực thi. jQuery là cần thiết cho các plugin Bootstrap và cần load trước bootstrap.js. Nếu không sử dụng bất kỳ tính năng tương tác nào của Bootstrap, bạn cũng có thể bỏ các file này khỏi nguồn.

Đây là mức tối thiểu cần thiết để thiết lập và chạy một bố cục Bootstrap cơ bản. Nếu là nhà phát triển, bạn có thể muốn xem một số ví dụ nâng cao hơn tại trang ví dụ của Bootstrap. Nếu bạn là một nhà thiết kế hoặc chỉ đang tìm kiếm nguồn cảm hứng, Bootstrap Expo sẽ giới thiệu các trang web được xây dựng bằng Bootstrap. Mọi phần của Bootstrap đều có thể dễ dàng tùy chỉnh trong CSS. Nhưng nếu đó không phải là sở thích của bạn và bạn đang tìm kiếm một giao diện hơi khác so với các theme Bootstrap được đóng gói sẵn, thì có rất nhiều theme miễn phí, mã nguồn mở và cao cấp có sẵn từ các nguồn như Bootswatch và WrapBootstrap.

Bootstrap template và thành phần giao diện người dùng

Bootstrap đi kèm với các template thiết kế HTML và CSS cơ bản bao gồm nhiều thành phần giao diện người dùng phổ biến. Chúng bao gồm kiểu chữ, bảng, biểu mẫu, nút, Glyphicons, bảng drop-down, nút và nhóm đầu vào, điều hướng, phân trang, nhãn và huy hiệu, cảnh báo, thanh tiến trình, tab và nhiều thứ khác. Nhiều thứ trong số này sử dụng tiện ích mở rộng JavaScript và plugin jQuery.

Các template Bootstrap này được tạo sẵn dưới dạng những layer CSS được kiểm chứng rõ ràng mà bạn có thể áp dụng cho HTML của mình để đạt được nhiều hiệu ứng khác nhau. Điều này làm cho việc sử dụng Bootstrap trở nên rất tiện lợi. Bằng cách sử dụng các tên layer ngữ nghĩa như .success, .warning và .info, những thành phần này có thể dễ dàng tái sử dụng và mở rộng. Nhưng trong khi Bootstrap sử dụng tên layer mô tả có ý nghĩa, chi tiết triển khai lại không cụ thể. Tất cả các layer có thể được ghi đè bằng kiểu và màu CSS tùy chỉnh, và ý nghĩa của layer sẽ vẫn giữ nguyên.

Hệ thống lưới Bootstrap

Trước khi đi sâu hơn vào các thành phần Bootstrap và những template thiết kế, điều quan trọng là phải đề cập đến một trong những tính năng chính mà Bootstrap đã giới thiệu trong phiên bản 3: Triết lý thiết kế ưu tiên thiết bị di động, dẫn đến việc Bootstrap có thiết kế đáp ứng. Kết quả cuối cùng là Bootstrap mở rộng quy mô dễ dàng và hiệu quả với một cơ sở mã duy nhất, từ điện thoại, qua máy tính bảng, đến máy tính để bàn.

Khả năng đáp ứng này đạt được bằng cách sử dụng hệ thống lưới Bootstrap linh hoạt có thể được áp dụng để chia tỷ lệ thích hợp lên đến 12 cột theo kích thước của thiết bị hoặc khung nhìn. Lưới cung cấp cấu trúc cho bố cục, xác định các đường chuẩn ngang và dọc để sắp xếp nội dung và lề. Lưới cũng cung cấp một cấu trúc trực quan cho người xem, vì giúp dễ dàng theo dõi luồng nội dung từ trái sang phải hoặc từ phải sang trái khi di chuyển xuống trang.

Để sử dụng hệ thống lưới Bootstrap, cần tuân thủ một số quy tắc. Các phần tử cột lưới được đặt bên trong những phần tử hàng, các phần tử này tạo ra những nhóm cột theo chiều ngang. Bạn có thể có bao nhiêu hàng tùy ý trên trang, nhưng các cột phải là phần tử con của các hàng.

Các hàng cần được đặt trong một wrapper bố cục có chiều rộng cố định, có layer .container và chiều rộng 1170px hoặc trong wrapper bố cục có chiều rộng đầy đủ, có class .container-fluid và cho phép hành vi đáp ứng trong hàng đó.

Trước đây, hệ thống lưới Bootstrap có 4 cấp class: xs cho điện thoại (<768px), sm cho máy tính bảng (≥768px), md cho máy tính để bàn (≥992px) và lg cho máy tính để bàn lớn hơn (≥1200px). Hiện nay, hệ thống lưới Bootstrap 5 có 6 class:

  • .col- (thiết bị cực nhỏ - chiều rộng màn hình nhỏ hơn 576px)
  • .col-sm- (thiết bị nhỏ - chiều rộng màn hình bằng hoặc lớn hơn 576px)
  • .col-md- (thiết bị trung bình - chiều rộng màn hình bằng hoặc lớn hơn 768px)
  • .col-lg- (thiết bị lớn - chiều rộng màn hình bằng hoặc lớn hơn 992px)
  • .col-xl- (thiết bị xlarge - chiều rộng màn hình bằng hoặc lớn hơn 1200px)
  • .col-xxl- (thiết bị xxlarge - chiều rộng màn hình bằng hoặc lớn hơn 1400px)

Các class trên có thể được kết hợp để tạo ra những bố cục năng động và linh hoạt hơn.

Mẹo: Mỗi class mở rộng quy mô, vì vậy nếu bạn muốn đặt cùng độ rộng cho sm và md, bạn chỉ cần chỉ định sm.

Những điều này về cơ bản xác định kích thước mà tại đó các cột sẽ thu gọn hoặc trải ra theo chiều ngang. Các tầng class có thể được sử dụng trong bất kỳ sự kết hợp nào để có được bố cục năng động và linh hoạt.

Ví dụ, nếu muốn có 2 hàng, một có 2 cột và một có 4, có thể viết như sau:

<div class="row">
  <div class="col-md-6">First column</div>
  <div class="col-md-6">Second column</div>
</div>
<div class="row">
  <div class="col-md-3">First column</div>
  <div class="col-md-3">Second column</div>
  <div class="col-md-3">Third column</div>
  <div class="col-md-3">Fourth column</div>
</div>

Cũng có thể sử dụng chiều rộng cột hỗn hợp:

<div class="row">
  <div class="col-md-9">Wider column</div>
  <div class="col-md-3">Smaller column</div>
</div>

Thậm chí có thể thay đổi các cột bằng cách sử dụng offset, chẳng hạn như để tạo nội dung hẹp và tập trung hơn:

<div class="row">
  <div class="col-md-6 col-md-offset-3">Centered column</div>
</div>

Các cột có thể được lồng vào nhau. Có thể có ít hơn 12 cột và như đã đề cập ở trên, bạn có thể chọn các cột có chiều rộng cố định hoặc toàn chiều rộng bằng cách sử dụng những wrapper .container hoặc .container-fluid tương ứng.

<div class="container">
  <div class="row">
    <div class="col-md-8">
      Parent fixed-width column
      <div class="row">
        <div class="col-md-6">Nested column</div>
        <div class="col-md-6">Nested column</div>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-4">Fluid ..</div>
    <div class="col-md-4">.. and full-width ..</div>
    <div class="col-md-4">.. example</div>
  </div>
</div>

Nếu kết hợp các tầng class khác nhau, bạn sẽ nhận được các giao diện khác nhau trên thiết bị di động và trên màn hình máy tính. Trong ví dụ dưới đây, trên máy tính để bàn sẽ có 4 cột trên một dòng và trên thiết bị di động, bạn sẽ có chiều rộng đầy đủ và xếp chồng lên nhau.

<div class="row">
  <div class="col-xs-12 col-md-3">.col-xs-12 .col-md-3</div>
  <div class="col-xs-12 col-md-3">.col-xs-12 .col-md-3</div>
  <div class="col-xs-12 col-md-3">.col-xs-12 .col-md-3</div>
  <div class="col-xs-12 col-md-3">.col-xs-12 .col-md-3</div>
</div>

Có thể vô hiệu hóa hoàn toàn khả năng phản hồi của trang. Điều này về cơ bản sẽ vô hiệu hóa các khía cạnh “trang web di động” của Bootstrap. Chỉ cần lưu ý rằng nếu bạn tắt tính năng phản hồi, bất kỳ thành phần có chiều rộng cố định nào, chẳng hạn như thanh điều hướng cố định, sẽ không hiển thị khi chế độ xem trở nên hẹp hơn nội dung trang. Đối với container không đáp ứng, điều đó có nghĩa là chiều rộng 970px. Cũng trong trường hợp này, các thanh điều hướng sẽ không thu gọn trong những chế độ xem trên thiết bị di động.

5 ★ 35 👨 180

Tải Bootstrap:

Tải về cho Windows

Bạn có thể tải phiên bản khác dưới đây:

Tải Bootstrap cho Windows
Tải về 1,4 MB
0 Bình luận
Sắp xếp theo
❖
Xóa Đăng nhập để Gửi

    Ứng dụng liên quan

    Bạn nên đọc