Hướng dẫn can i use bootstrap css without js? - Tôi có thể sử dụng bootstrap css mà không có js không?

Question

Cá nhân hoặc biên soạn

Các plugin có thể được bao gồm riêng lẻ (sử dụng cá nhân Bootstrap từ

var myModal = document.getElementById('myModal')

myModal.addEventListener('show.bs.modal', function (event) {
  if (!data) {
    return event.preventDefault() // stops modal from being shown
  }
})

3) hoặc tất cả cùng một lúc bằng cách sử dụng

var myModal = document.getElementById('myModal')

myModal.addEventListener('show.bs.modal', function (event) {
  if (!data) {
    return event.preventDefault() // stops modal from being shown
  }
})

4 hoặc

var myModal = document.getElementById('myModal')

myModal.addEventListener('show.bs.modal', function (event) {
  if (!data) {
    return event.preventDefault() // stops modal from being shown
  }
})

5 được thu nhỏ (don lồng bao gồm cả hai).

Nếu bạn sử dụng Bundler (WebPack, Rollup,), bạn có thể sử dụng các tệp

var myModal = document.getElementById('myModal')

myModal.addEventListener('show.bs.modal', function (event) {
  if (!data) {
    return event.preventDefault() // stops modal from being shown
  }
})

6 đã sẵn sàng.

Sử dụng bootstrap làm mô -đun

Chúng tôi cung cấp một phiên bản Bootstrap được xây dựng dưới dạng

var myModal = document.getElementById('myModal')

myModal.addEventListener('show.bs.modal', function (event) {
  if (!data) {
    return event.preventDefault() // stops modal from being shown
  }
})

7 (

var myModal = document.getElementById('myModal')

myModal.addEventListener('show.bs.modal', function (event) {
  if (!data) {
    return event.preventDefault() // stops modal from being shown
  }
})

8 và

var myModal = document.getElementById('myModal')

myModal.addEventListener('show.bs.modal', function (event) {
  if (!data) {
    return event.preventDefault() // stops modal from being shown
  }
})

9) cho phép bạn sử dụng Bootstrap làm mô -đun trong trình duyệt của bạn, nếu trình duyệt được nhắm mục tiêu của bạn hỗ trợ nó.

<script type="module">
  import { Toast } from 'bootstrap.esm.min.js'

  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
script>

Plugin không tương thích

Do các hạn chế của trình duyệt, một số plugin của chúng tôi, cụ thể là các plugin, chú giải công cụ và popover, không thể được sử dụng trong thẻ

$('#myTab a').on('shown.bs.tab', function () {
  // do something...
})

0 với loại

$('#myTab a').on('shown.bs.tab', function () {
  // do something...
})

1 vì chúng phụ thuộc vào popper. Để biết thêm thông tin về vấn đề, xem ở đây.

Phụ thuộc

Một số plugin và các thành phần CSS phụ thuộc vào các plugin khác. Nếu bạn bao gồm các plugin riêng lẻ, hãy đảm bảo kiểm tra các phụ thuộc này trong tài liệu.

Các thả xuống, popovers và chú giải công cụ của chúng tôi cũng phụ thuộc vào popper.

Vẫn muốn sử dụng jQuery? Nó có thể!

Bootstrap 5 được thiết kế để sử dụng mà không cần jQuery, nhưng nó vẫn có thể sử dụng các thành phần của chúng tôi với jQuery. Nếu Bootstrap phát hiện

$('#myTab a').on('shown.bs.tab', function () {
  // do something...
})

2 trong đối tượng

$('#myTab a').on('shown.bs.tab', function () {
  // do something...
})

3, nó sẽ thêm tất cả các thành phần của chúng tôi vào hệ thống plugin jQuery; Điều này có nghĩa là bạn sẽ có thể làm

$('#myTab a').on('shown.bs.tab', function () {
  // do something...
})

4 để bật các chú giải công cụ. Điều tương tự cũng xảy ra với các thành phần khác của chúng tôi.If Bootstrap detects
$('#myTab a').on('shown.bs.tab', function () { // do something... })
2 in the
$('#myTab a').on('shown.bs.tab', function () { // do something... })
3 object it’ll add all of our components in jQuery’s plugin system; this means you’ll be able to do

$('#myTab a').on('shown.bs.tab', function () {
  // do something...
})

4 to enable tooltips. The same goes for our other components.

Thuộc tính dữ liệu

Gần như tất cả các plugin Bootstrap có thể được bật và cấu hình thông qua HTML một mình với các thuộc tính dữ liệu (cách sử dụng chức năng JavaScript ưa thích của chúng tôi). Hãy chắc chắn chỉ sử dụng một bộ thuộc tính dữ liệu trên một phần tử (ví dụ: bạn không thể kích hoạt một chú giải công cụ và phương thức từ cùng một nút.)only use one set of data attributes on a single element (e.g., you cannot trigger a tooltip and modal from the same button.)

Người chọn

Hiện tại để truy vấn các thành phần DOM, chúng tôi sử dụng các phương thức gốc

$('#myTab a').on('shown.bs.tab', function () {
  // do something...
})

5 và

$('#myTab a').on('shown.bs.tab', function () {
  // do something...
})

6 vì lý do hiệu suất, vì vậy bạn phải sử dụng các bộ chọn hợp lệ. Nếu bạn sử dụng bộ chọn đặc biệt, ví dụ:

$('#myTab a').on('shown.bs.tab', function () {
  // do something...
})

7 hãy chắc chắn thoát khỏi chúng.

Sự kiện

Bootstrap cung cấp các sự kiện tùy chỉnh cho hầu hết các hành động độc đáo của plugin. Nói chung, những thứ này có dạng phân từ nguyên bản và quá khứ - trong đó nguyên bản (ví dụ

$('#myTab a').on('shown.bs.tab', function () {
  // do something...
})

8) được kích hoạt khi bắt đầu một sự kiện và hình thức phân từ quá khứ của nó (ví dụ

$('#myTab a').on('shown.bs.tab', function () {
  // do something...
})

9) được kích hoạt khi hoàn thành một hành động.

Tất cả các sự kiện nguyên bản cung cấp chức năng

var myModalEl = document.getElementById('myModal')

var modal = new bootstrap.Modal(myModalEl) // initialized with defaults
var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard

0. Điều này cung cấp khả năng ngăn chặn việc thực hiện một hành động trước khi nó bắt đầu. Trả lại sai từ một người xử lý sự kiện cũng sẽ tự động gọi

var myModalEl = document.getElementById('myModal')

var modal = new bootstrap.Modal(myModalEl) // initialized with defaults
var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard

0.

var myModal = document.getElementById('myModal')

myModal.addEventListener('show.bs.modal', function (event) {
  if (!data) {
    return event.preventDefault() // stops modal from being shown
  }
})

Sự kiện jQuery

Bootstrap sẽ phát hiện jQuery nếu

$('#myTab a').on('shown.bs.tab', function () {
  // do something...
})

2 có trong đối tượng

$('#myTab a').on('shown.bs.tab', function () {
  // do something...
})

3 và không có thuộc tính

var myModalEl = document.getElementById('myModal')

var modal = new bootstrap.Modal(myModalEl) // initialized with defaults
var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard

4 được đặt trên

var myModalEl = document.getElementById('myModal')

var modal = new bootstrap.Modal(myModalEl) // initialized with defaults
var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard

5. Nếu JQuery được tìm thấy, Bootstrap sẽ phát ra các sự kiện nhờ hệ thống sự kiện của JQuery. Vì vậy, nếu bạn muốn nghe các sự kiện Bootstrap, bạn sẽ phải sử dụng các phương thức jQuery (

var myModalEl = document.getElementById('myModal')

var modal = new bootstrap.Modal(myModalEl) // initialized with defaults
var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard

6,

var myModalEl = document.getElementById('myModal')

var modal = new bootstrap.Modal(myModalEl) // initialized with defaults
var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard

7) thay vì

var myModalEl = document.getElementById('myModal')

var modal = new bootstrap.Modal(myModalEl) // initialized with defaults
var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard

8.

$('#myTab a').on('shown.bs.tab', function () {
  // do something...
})

API lập trình

Tất cả các hàm tạo chấp nhận một đối tượng tùy chọn tùy chọn hoặc không có gì (bắt đầu một plugin với hành vi mặc định của nó):

var myModalEl = document.getElementById('myModal')

var modal = new bootstrap.Modal(myModalEl) // initialized with defaults
var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard

Nếu bạn muốn có được một phiên bản plugin cụ thể, mỗi plugin sẽ hiển thị một phương thức

var myModalEl = document.getElementById('myModal')

var modal = new bootstrap.Modal(myModalEl) // initialized with defaults
var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard

9. Để lấy nó trực tiếp từ một yếu tố, hãy làm điều này:

var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

0.

Bộ chọn CSS trong các hàm tạo

Bạn cũng có thể sử dụng bộ chọn CSS làm đối số đầu tiên thay vì phần tử DOM để khởi tạo plugin. Hiện tại, phần tử cho plugin được tìm thấy bằng phương thức

$('#myTab a').on('shown.bs.tab', function () {
  // do something...
})

5 vì các plugin của chúng tôi chỉ hỗ trợ một phần tử duy nhất.

var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

Các chức năng không đồng bộ và chuyển tiếp

Tất cả các phương thức API lập trình đều không đồng bộ và quay lại người gọi sau khi quá trình chuyển đổi được bắt đầu nhưng trước khi nó kết thúc.asynchronous and return to the caller once the transition is started but before it ends.

Để thực hiện một hành động sau khi quá trình chuyển đổi hoàn tất, bạn có thể nghe sự kiện tương ứng.

var myCollapseEl = document.getElementById('myCollapse')

myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
  // Action to execute once the collapsible area is expanded
})

Ngoài ra, một cuộc gọi phương thức trên một thành phần chuyển tiếp sẽ bị bỏ qua.transitioning component will be ignored.

var myCarouselEl = document.getElementById('myCarousel')
var carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

myCarouselEl.addEventListener('slid.bs.carousel', function (event) {
  carousel.to('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

carousel.to('1') // Will start sliding to the slide 1 and returns to the caller
carousel.to('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!

Thiết lập mặc định

Bạn có thể thay đổi cài đặt mặc định cho một plugin bằng cách sửa đổi đối tượng plugin plugin

var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

2:

// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false

Không có xung đột (chỉ khi bạn sử dụng jQuery)

Đôi khi cần phải sử dụng các plugin bootstrap với các khung UI khác. Trong những trường hợp này, va chạm không gian tên đôi khi có thể xảy ra. Nếu điều này xảy ra, bạn có thể gọi

var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

3 trên plugin bạn muốn hoàn nguyên giá trị.

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality

Số phiên bản

Phiên bản của mỗi plugin Bootstrap, có thể được truy cập thông qua thuộc tính

var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

4 của hàm tạo plugin. Ví dụ: cho plugin Tooltip:

bootstrap.Tooltip.VERSION // => "5.0.2"

Không có dự phòng đặc biệt khi JavaScript bị tắt

Các plugin Bootstrap, don don trở lại đặc biệt duyên dáng khi JavaScript bị vô hiệu hóa. Nếu bạn quan tâm đến trải nghiệm người dùng trong trường hợp này, hãy sử dụng

var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

5 để giải thích tình huống (và cách thử lại JavaScript) cho người dùng của bạn và/hoặc thêm các dự phòng tùy chỉnh của riêng bạn.

Thư viện của bên thứ ba

Bootstrap không chính thức hỗ trợ các thư viện JavaScript của bên thứ ba như nguyên mẫu hoặc UI jQuery. Mặc dù

var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

3 và các sự kiện theo tên, có thể có các vấn đề tương thích mà bạn cần tự khắc phục. like Prototype or jQuery UI. Despite

var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

3 and namespaced events, there may be compatibility problems that you need to fix on your own.

Chất khử trùng

Tooltips và PopoVers sử dụng chất khử trùng tích hợp của chúng tôi để vệ sinh các tùy chọn chấp nhận HTML.

Giá trị

var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

7 mặc định là như sau:

var myModal = document.getElementById('myModal')

myModal.addEventListener('show.bs.modal', function (event) {
  if (!data) {
    return event.preventDefault() // stops modal from being shown
  }
})

0

Nếu bạn muốn thêm các giá trị mới vào mặc định này

var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

7, bạn có thể làm như sau:

var myModal = document.getElementById('myModal')

myModal.addEventListener('show.bs.modal', function (event) {
  if (!data) {
    return event.preventDefault() // stops modal from being shown
  }
})

1

Nếu bạn muốn bỏ qua chất khử trùng của chúng tôi vì bạn thích sử dụng thư viện chuyên dụng, ví dụ như Dompurify, bạn nên làm như sau:

var myModal = document.getElementById('myModal')

myModal.addEventListener('show.bs.modal', function (event) {
  if (!data) {
    return event.preventDefault() // stops modal from being shown
  }
})

2

Tôi có thể sử dụng bootstrap mà không cần jQuery không?

Bootstrap 5 được thiết kế để sử dụng mà không cần jQuery, nhưng vẫn có thể sử dụng các thành phần của chúng tôi với jQuery. Nếu Bootstrap phát hiện jQuery trong đối tượng cửa sổ, nó sẽ thêm tất cả các thành phần của chúng tôi vào hệ thống plugin của JQuery; Điều này có nghĩa là bạn sẽ có thể thực hiện $ ('[Data-bs-Toggle = "ToolTip"]'). Tooltip () để bật các chú giải công cụ., but it's still possible to use our components with jQuery. If Bootstrap detects jQuery in the window object it'll add all of our components in jQuery's plugin system; this means you'll be able to do $('[data-bs-toggle="tooltip"]'). tooltip() to enable tooltips.

Bootstrap có hoạt động không có javascript không?

Bootstrap băng chuyền trong thiết kế web, bạn có thể tạo một băng chuyền CSS thuần túy mà không cần JavaScript - hoặc bạn có thể sử dụng Bootstrap để tạo một.Trong bootstrap, băng chuyền được chế tạo với các biến đổi 3D CSS và một chút JavaScript.you can create a pure CSS carousel without JavaScript — or you can use Bootstrap to create one. In Bootstrap, carousels are built with CSS 3D transforms and a bit of JavaScript.

Bạn có thể sử dụng bootstrap với CSS thông thường không?

Có. Bạn sẽ muốn đặt các bổ sung của mình vào một tệp riêng và liên kết nó bên dưới liên kết bootstrap.css.Sau đó, bạn có thể thêm các lớp của riêng bạn và/hoặc ghi đè các lớp bootstrap trong tệp của riêng bạn. You will want to put your additions in a separate file and link it below the bootstrap. css link. Then you can add your own classes and/or overwrite the Bootstrap classes in your own file.

Bạn có cần JavaScript và CSS không?

Key Takeaway: Tất cả ba ngôn ngữ - HTML, CSS và JavaScript - đều rất cần thiết để tạo các trang web hiện đại.Cùng nhau, họ cung cấp cấu trúc, phong cách và người dùng tương tác đã mong đợi từ web.Nếu bạn chỉ bắt đầu, tôi khuyên bạn nên học HTML và CSS trước.All three languages — HTML, CSS, and JavaScript — are essential for creating modern web pages. Together, they provide the structure, style, and interactivity users have come to expect from the web. If you're just starting, I recommend learning HTML and CSS first.

programming css Bootstrap 5