Bootstrap - CSS Framework

Tổng quan Bootstrap 4.1

Tiêu đề này dùng .display-2 ngoài ra còn có thể dùng .display-1 .display-3 .display-4

bootstrap

Bootstrap là một Framework CSS, mã nguồn SASS/CSS cung cấp tại Bootstrap Git, bạn có thể clone về và phát triển - tùy biến - xây dựng theme. Ở cấp độ sử dụng thông thường thì có thể tải về ngay Bootstrap đã biên dịch CSS về (Download Bootstrap). Sau đó tích hợp vào trang muốn sử dụng. Ngoài ra bạn cũng cần tải jQuery để các JS của Bootstrap hoạt động

Đoạn mã cơ bản tích hợp Bootstrap vào trang (HTML)

<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="js/bootstrap.min.js"></script>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
CDN 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

Hộp giới thiệu này đang sử dụng Jumbotron

Layout/Grid .row .col-# .col-{breakpoint}-#

Kích thước màn hình trong Bootstrap chi thành các loại sm md lg xl gọi chúng là breakpoint

Layout cơ bản xây dựng với hệ lưới gồm các hàng và cột, chúng được tạo ra từ .container, .row, .col-*

Cột 3

Tiện ích cơ bản, màu sắc, căn lề, vị trí, hiện thị

Các thành phần sử dụng có liên quan đến màu sắc như (.bg-*), màu chữ (.text-*), các button (.btn btn-*) ... sử dụng với hậu tố có tên primary, secondary, success, info, warning, danger, light, dark

Ví dụ màu chữ : .text-primary .text-secondary .text-success .text-info .text-warning .text-danger .text-light .text-dark

Ví dụ màu nền : .bg-primary .bg-secondary .bg-success .bg-info .bg-warning .bg-danger .bg-light .bg-dark

Breadcrumb .breadcrumb .breadcrumb-item

  1. Trang chủ
  2. Trang cấp 1
  3. Trang cấp 2
  4. Trang hiện tại

Pagination .pagination .page-item

Nav và Tab .nav .nav-item .nav-link

Nội dung Tab1 - HTML code
Nội dung Tab2 - HTML code
Nội dung Tab3 - HTML code
Nội dung Tab1 - HTML code
Nội dung Tab2 - HTML code
Nội dung Tab3 - HTML code

Navbar .navbar

Badge - Nhãn badge badge-*

1 2 3 4 5 6 7 8
1 2 3 4 5 6 7 8
Link 1 Link 2 Link 3 Link 4 Link 5 Link 6 Link 7 Link 8

Button btn btn-* - Button Group .btn-group

Copy Cut Paste
Normal Bold Itatic
Link1 Link2 Link3 Link4 Link5

Card .card .card-deck .card-group

Tiêu đề Card
Ví dụ mẫu sử dụng Card

Nội dung văn bản trong .card-body này sử dụng .card-text.

Nút bấm
Footer của Card
Tiêu đề Card
Ví dụ mẫu sử dụng Card

Nội dung văn bản trong .card-body này sử dụng .card-text.

Nút bấm
Footer của Card
Tiêu đề Card
Ví dụ mẫu sử dụng Card

Nội dung văn bản trong .card-body này sử dụng .card-text.

Nút bấm
Footer của Card

Collapse .collapse

Nội dung hiện thị !

DropDown .dropdown .dropdown-menu

Menu 1 Menu item 2
Menu 3 ...

Alert .alert

List Group .list-group

  • Phần tử 1
  • Phần tử 2 | active
  • Phần tử 3 | disabled
  • Phần tử 4 | list-group-item-danger
  • Phần tử 5 21
  • Phần tử 3
  • List group item heading
    3 days ago

    Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

    Donec id elit non mi porta.

Progress .progress .progress-bar

Form

Carousel - Slides

Popover

Tooltip

Media .media .media-body

Nguyễn Thu Hà

Media là gì, cách sử dụng Media như thế nào?

Xuan Thu - Lab

Đọc nội dung bài viết này nhé: Đối tượng Media

Modal Dialog .modal