Css có hoạt động với bootstrap không?

Thiết kế web đáp ứng là tạo ra các trang web tự động điều chỉnh để trông đẹp mắt trên tất cả các thiết bị, từ điện thoại nhỏ đến máy tính để bàn lớn

Ví dụ Bootstrap

Trang Bootstrap đầu tiên của tôi

Thay đổi kích thước trang phản hồi này để xem hiệu ứng

Cột 1

Lorem ipsum dolor

Cột 2

Lorem ipsum dolor

Cột 3

Lorem ipsum dolor

Lịch sử Bootstrap

Bootstrap được phát triển bởi Mark Otto và Jacob Thornton tại Twitter và được phát hành dưới dạng sản phẩm mã nguồn mở vào tháng 8 năm 2011 trên GitHub

Vào tháng 6 năm 2014 Bootstrap là No. 1 dự án trên GitHub

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

Ưu điểm của Bootstrap

• dễ sử dụng. Bất kỳ ai chỉ có kiến ​​thức cơ bản về HTML và CSS đều có thể bắt đầu sử dụng Bootstrap
• tính năng đáp ứng. CSS đáp ứng của Bootstrap điều chỉnh cho điện thoại, máy tính bảng và máy tính để bàn
• Cách tiếp cận đầu tiên trên thiết bị di động. Trong Bootstrap 3, các kiểu ưu tiên thiết bị di động là một phần của khung cốt lõi
• Tính tương thích của trình duyệt web. Bootstrap tương thích với tất cả các trình duyệt hiện đại (Chrome, Firefox, Internet Explorer, Edge, Safari và Opera)

Phiên bản Bootstrap

Hướng dẫn này tuân theo Bootstrap 3, được phát hành vào năm 2013. Tuy nhiên, chúng tôi cũng bao gồm các phiên bản mới hơn;

Bootstrap 5 là phiên bản mới nhất của Bootstrap; . Nó hỗ trợ các bản phát hành ổn định, mới nhất của tất cả các trình duyệt và nền tảng chính. Tuy nhiên, Internet Explorer 11 trở xuống không được hỗ trợ

Sự khác biệt chính giữa Bootstrap 5 và Bootstrap 3 & 4 là Bootstrap 5 đã chuyển sang JavaScript thay vì jQuery

Ghi chú. Bootstrap 3 và Bootstrap 4 vẫn được nhóm hỗ trợ để sửa các lỗi quan trọng và thay đổi tài liệu, và hoàn toàn an toàn khi tiếp tục sử dụng chúng. Tuy nhiên, các tính năng mới sẽ KHÔNG được thêm vào chúng

Lấy Bootstrap ở đâu?

Có hai cách để bắt đầu sử dụng Bootstrap trên trang web của riêng bạn

Bạn có thể

• Tải xuống Bootstrap từ getbootstrap. com
• Bao gồm Bootstrap từ CDN

Đang tải xuống Bootstrap

Nếu bạn muốn tự download và host Bootstrap thì vào getbootstrap. com, và làm theo hướng dẫn ở đó

Bootstrap CDN

Nếu bạn không muốn tự tải xuống và lưu trữ Bootstrap, bạn có thể đưa nó vào từ CDN (Mạng phân phối nội dung)

MaxCDN cung cấp hỗ trợ CDN cho CSS và JavaScript của Bootstrap. Bạn cũng phải bao gồm jQuery

MaxCDN

Một lợi thế của việc sử dụng Bootstrap CDN.
Nhiều người dùng đã tải xuống Bootstrap từ MaxCDN khi truy cập một trang web khác. Do đó, nó sẽ được tải từ bộ đệm khi họ truy cập trang web của bạn, dẫn đến thời gian tải nhanh hơn. Ngoài ra, hầu hết các CDN sẽ đảm bảo rằng một khi người dùng yêu cầu một tệp từ nó, nó sẽ được phục vụ từ máy chủ gần họ nhất, điều này cũng dẫn đến thời gian tải nhanh hơn.

jQuery
Bootstrap sử dụng plugin jQuery cho JavaScript (như phương thức, chú giải công cụ, v.v.). Tuy nhiên nếu bạn chỉ dùng phần CSS của Bootstrap thì không cần jQuery.

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

1. Thêm loại tài liệu HTML5

Bootstrap sử dụng các phần tử HTML và thuộc tính CSS yêu cầu loại tài liệu HTML5

Luôn bao gồm loại tài liệu HTML5 ở đầu trang, cùng với thuộc tính lang và bộ ký tự chính xác

2. Bootstrap 3 ưu tiên thiết bị di động

Bootstrap 3 được thiết kế để tương thích với các thiết bị di động. Kiểu đầu tiên trên thiết bị di động là một phần của khung cốt lõi

Để đảm bảo hiển thị phù hợp và thu phóng cảm ứng, hãy thêm thẻ

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

Phần

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

Phần

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

3. Hộp đựng

Bootstrap cũng yêu cầu phần tử chứa để bọc nội dung trang

Có hai lớp container để lựa chọn

1. Lớp

   // custom.css
   :root {
     --bs-border-radius: .5rem;
     --bs-link-color: #333;
   }
   

   9 cung cấp vùng chứa chiều rộng cố định đáp ứng
2. Lớp

   // custom.css
   :root {
     --bs-border-radius: .5rem;
     --bs-link-color: #333;
   }
   

   0 cung cấp một thùng chứa có chiều rộng đầy đủ, bao trùm toàn bộ chiều rộng của khung nhìn

Hai trang Bootstrap cơ bản

Ví dụ sau đây hiển thị mã cho trang Bootstrap cơ bản (với vùng chứa chiều rộng cố định đáp ứng)

Bootstrap v5. 2. 0-beta1 đã thêm một loạt thuộc tính tùy chỉnh CSS hoặc biến CSS trên cấp độ

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

Với các biến CSS, giờ đây bạn có thể tùy chỉnh Bootstrap dễ dàng hơn bao giờ hết mà không cần bộ tiền xử lý CSS. Tất cả sức mạnh của Sass vẫn còn đằng sau hậu trường, nhưng các biến CSS sẽ bổ sung thêm rất nhiều sức mạnh cho tương lai. Sử dụng và soạn các giá trị mới, cập nhật kiểu trên toàn cầu mà không cần biên dịch lại, đặt giá trị dự phòng, thiết lập chế độ màu mới, v.v.

Nào cùng đào vào bên trong

Biến CSS?

Tên chính thức của chúng là các thuộc tính tùy chỉnh, nhưng chúng thường được gọi là các biến CSS nhờ trường hợp sử dụng trực tiếp nhất của chúng để đặt các giá trị cụ thể. Cân nhắc đọc bài viết thuộc tính tùy chỉnh MDN CSS hoặc hướng dẫn Thủ thuật CSS nếu bạn cần kiến ​​thức cơ bản

Tóm lại, các biến CSS cho phép bạn đặt tên cho các giá trị được sử dụng thường xuyên. Ví dụ: thay vì viết

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

:root {
  --purple: #6f42c1;
}
.custom-element {
  color: var(--purple);
}

Chúng tôi sử dụng các biến CSS trong Bootstrap để đặt nhiều giá trị thuộc tính trên toàn cầu, trên các thành phần của chúng tôi và trong một số tiện ích của chúng tôi

Các nhóm biến

Khi chúng ta nói về các biến CSS trong Bootstrap, chúng ta đang đề cập đến ba nhóm chính

• Biến gốc — Các biến có phạm vi toàn cầu có sẵn trên phần tử

  // custom.css
  :root {
    --bs-border-radius: .5rem;
    --bs-link-color: #333;
  }
  

  1 (thường là

  // custom.css
  :root {
    --bs-border-radius: .5rem;
    --bs-link-color: #333;
  }
  

  1) và có thể truy cập bởi bất kỳ phần tử nào trong DOM

• Các biến thành phần — Các biến có phạm vi cụ thể cho từng thành phần, thường là trên lớp cơ sở của thành phần và các lớp bổ trợ của chúng và các mixin Sass

• Biến tiện ích - Được sử dụng làm công cụ sửa đổi trong các lớp tiện ích khác

Bất kể chúng ở đâu, tất cả các biến CSS của chúng tôi đều có tiền tố là

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

Cũng cần đề cập đến hai nỗ lực lớn hơn vẫn đang xoay quanh các biến CSS

1. Thêm các biến CSS vào tất cả các biểu mẫu của chúng tôi
2. Thêm các biến chủ đề toàn cầu nhiều sắc thái hơn và hỗ trợ các chế độ màu như chế độ tối

Chúng có khả năng đến trong v5. 3. 0 (bản phát hành nhỏ tiếp theo của chúng tôi sau v5. 2. 0 ổn định), vì vậy trong lúc này, hãy xem repo GitHub để xem mọi thứ đang hình thành như thế nào

Biến gốc

Bootstrap có rất nhiều biến gốc và chúng tôi sẽ chỉ bổ sung thêm trong các bản cập nhật trong tương lai để hỗ trợ chế độ màu nói trên. Kể từ bài đăng này, chúng tôi có các biến CSS sau trên phần tử

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

• Màu sắc — Tất cả các màu được đặt tên, màu xám và màu chủ đề. Điều này cũng bao gồm tất cả

  // custom.css
  :root {
    --bs-border-radius: .5rem;
    --bs-link-color: #333;
  }
  

  5 của chúng tôi ở định dạng

  // custom.css
  :root {
    --bs-border-radius: .5rem;
    --bs-link-color: #333;
  }
  

  6

• Các kiểu phông chữ cơ thể — Mọi thứ từ

  // custom.css
  :root {
    --bs-border-radius: .5rem;
    --bs-link-color: #333;
  }
  

  7 đến

  // custom.css
  :root {
    --bs-border-radius: .5rem;
    --bs-link-color: #333;
  }
  

  8 và hơn thế nữa, tất cả đều được áp dụng cho phần tử

  // custom.css
  :root {
    --bs-border-radius: .5rem;
    --bs-link-color: #333;
  }
  

  9 của chúng tôi

• Thuộc tính được chia sẻ — Đối với các cặp thuộc tính-giá trị mà chúng tôi coi là chủ đề cụ thể, như màu liên kết và kiểu đường viền

Các biến CSS gốc được sử dụng rộng rãi trên các phần khác của Bootstrap để cho phép bạn dễ dàng ghi đè các kiểu mặc định của chúng tôi ở cấp độ toàn cầu. Ví dụ: nếu bạn muốn điều chỉnh

// custom.css
:root {
  --bs-border-radius: var(--bs-border-radius-lg);
  --bs-link-color: var(--bs-gray-800);
}

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

Bạn thậm chí có thể sử dụng các biến gốc khác để ghi đè các giá trị đó

________số 8

Nếu không có biến CSS, bạn sẽ phải sử dụng bộ tiền xử lý như Sass hoặc viết bộ chọn mới cho mọi phiên bản của các thuộc tính này trên tất cả các thành phần. Cái trước tương đối dễ, cái sau không quá nhiều. Các biến CSS giúp giải quyết vấn đề đó

biến thành phần

Trên các thành phần của chúng tôi, các biến CSS thậm chí còn có nhiều sức mạnh hơn để tùy chỉnh. Gần như mọi thứ trong phần Thành phần trong thanh bên tài liệu của chúng tôi hiện có sẵn các biến CSS cho bạn

• đàn phong cầm
• cảnh báo
• huy hiệu
• vụn bánh mì
• nút
• Nhóm nút
• Thẻ
• băng chuyền
• Sự sụp đổ
• thả xuống
• Nhóm danh sách
• phương thức
• thanh điều hướng
• Điều hướng và tab
• vải bố
• phân trang
• Trình giữ chỗ
• Popovers
• Phát triển
• người kéo sợi
• chúc rượu
• Chú giải công cụ

Scrollspy và nút đóng không có biến CSS liên quan, vì vậy chúng bị loại trừ ở đây

Trong toàn bộ tài liệu của chúng tôi, bạn sẽ tìm thấy các ví dụ về cách tùy chỉnh các thành phần mặc định của chúng tôi bằng cách ghi đè các biến CSS của chúng. Một ví dụ tuyệt vời đến từ tài liệu của chúng tôi, nơi chúng tôi viết các kiểu nút của riêng mình để tạo nút màu tím

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

Trông như thế này

Một ví dụ tuyệt vời khác là từ chú giải công cụ của chúng tôi. Bạn có thể thêm các lớp tùy chỉnh vào chú giải công cụ và cửa sổ bật lên trong Bootstrap với

// custom.css
:root {
  --bs-border-radius: var(--bs-border-radius-lg);
  --bs-link-color: var(--bs-gray-800);
}

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

Trông như thế này

Có hàng chục biến CSS đang hoạt động trên các thành phần của chúng tôi. Tất cả chúng được tham chiếu trong một phần mới trên trang tài liệu liên quan. Ví dụ: đây là các biến CSS phương thức của chúng tôi. Đây là phần bổ sung cho tất cả các biến Sass, mixin, vòng lặp và bản đồ được sử dụng cho từng thành phần

biến tiện ích

Không phải mọi lớp tiện ích đều sử dụng các biến CSS, nhưng những lớp có được sức mạnh và khả năng tùy chỉnh tốt. Các tiện ích nền, đường viền và màu đều có cái mà chúng tôi gọi là “biến CSS cục bộ” để cải thiện tính hữu dụng của chúng. Mỗi người trong số họ sử dụng các biến CSS để tùy chỉnh giá trị độ trong suốt alpha của

// custom.css
:root {
  --bs-border-radius: var(--bs-border-radius-lg);
  --bs-link-color: var(--bs-gray-800);
}

Hãy xem xét các tiện ích màu nền của chúng tôi,

// custom.css
:root {
  --bs-border-radius: var(--bs-border-radius-lg);
  --bs-link-color: var(--bs-gray-800);
}

// custom.css
:root {
  --bs-border-radius: var(--bs-border-radius-lg);
  --bs-link-color: var(--bs-gray-800);
}

// custom.css
:root {
  --bs-border-radius: var(--bs-border-radius-lg);
  --bs-link-color: var(--bs-gray-800);
}

// custom.css
:root {
  --bs-border-radius: var(--bs-border-radius-lg);
  --bs-link-color: var(--bs-gray-800);
}

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

Đây là cách

// custom.css
:root {
  --bs-border-radius: var(--bs-border-radius-lg);
  --bs-link-color: var(--bs-gray-800);
}

// custom.css
:root {
  --bs-border-radius: var(--bs-border-radius-lg);
  --bs-link-color: var(--bs-gray-800);
}

Và điều tương tự cũng có sẵn đối với độ mờ của màu đường viền (

// custom.css
:root {
  --bs-border-radius: var(--bs-border-radius-lg);
  --bs-link-color: var(--bs-gray-800);
}

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

Theo mặc định, chúng tôi cung cấp năm giá trị cho các tiện ích độ mờ khác nhau này

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

// custom.css
:root {
  --bs-border-radius: .5rem;
  --bs-link-color: #333;
}

// custom.css
:root {
  --bs-border-radius: var(--bs-border-radius-lg);
  --bs-link-color: var(--bs-gray-800);
}

Mong đợi nhiều biến CSS hơn để đưa vào các tiện ích của chúng tôi. Có rất nhiều sức mạnh trong việc tùy chỉnh theo thời gian thực, ngay cả đối với những gì chúng tôi coi là phong cách bất biến

Sẵn sàng để bắt đầu với Bootstrap?

Tôi có thể sử dụng CSS với Bootstrap không?

Làm cách nào để thêm CSS tùy chỉnh vào Bootstrap?