Hướng dẫn vue bootstrap util - vue bootstrap sử dụng

Tài liệu tham khảo bên ngoài

Sau đây là các liên kết tiện lợi đến tài liệu của Bootstrap V4:

• Tiện ích biên giới
• Tiện ích ClearFix
• Đóng các tiện ích biểu tượng
• Tiện ích màu sắc
• Tiện ích hiển thị
• Nhúng các tiện ích
• Tiện ích Flex
• Tiện ích nổi
• Tiện ích thay thế hình ảnh
• Tiện ích tràn
• Tiện ích vị trí
• Tiện ích đầu đọc màn hình
• Tiện ích bóng tối
• Tiện ích kích thước
• Tiện ích khoảng cách
• Tiện ích liên kết kéo dài
• Tiện ích văn bản
• Các tiện ích căn chỉnh dọc
• Tiện ích hiển thị

Bootstrap V4 cũng có các kiểu và lớp kiểu chữ xác định cho các yếu tố HTML bản địa khác nhau. Bạn có thể tìm hiểu thêm tại các liên kết sau:

• Khởi động lại
• Kiểu chữ
• Mã số
• Số liệu

• Các tính năng và API sau đây được sử dụng bởi bootstrapvue:
• ES6 (ví dụ:

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  79,

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  80,

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  81,

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  82, v.v.)

• <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  85 (tùy chọn)
• Nếu bạn muốn hỗ trợ các trình duyệt web IE, Android và iOS cũ hơn, bạn có thể muốn sử dụng Core-JS và Intersection-Observer:
• Sau đó nhập polyfills vào điểm nhập chính của ứng dụng của bạn:not required

Nếu sử dụng DEVERATED @Babel/Polyfill:

Ngoài ra, sử dụng polyfill.io để phục vụ động, trình duyệt polyfills cụ thể thông qua các thẻ

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

$body-bg: #000;
$body-color: #111;


@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';

Bootstrapvue cung cấp các tệp trợ giúp bổ sung để hoàn thành tự động trong các biên tập viên IDE phổ biến.

Vs Code + Vetur

• Nếu bạn đang sử dụng mã VS làm trình chỉnh sửa văn bản của mình, BootStrapVue sẽ tự động hoàn thành IntelliSense cho các thuộc tính và chỉ thị thành phần có sẵn thông qua các tệp

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  88 và

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  89.
• JetBrains Webstorm (và tương thích)
• Đối với trình soạn thảo WebStorm (hoặc tương thích với các loại web), BootStrapVue cung cấp tệp

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  90 cho thuộc tính thành phần và tự động hoàn thành chỉ thị.v2.2.0+
• Vue.js

  npm install vue bootstrap bootstrap-vue
  
  
  yarn add vue bootstrap bootstrap-vue

  6 là bắt buộc,

  npm install vue bootstrap bootstrap-vue
  
  
  yarn add vue bootstrap bootstrap-vue

  7 được khuyến nghị
• Bootstrap

  npm install vue bootstrap bootstrap-vue
  
  
  yarn add vue bootstrap bootstrap-vue

  8 là bắt buộc,

  npm install vue bootstrap bootstrap-vue
  
  
  yarn add vue bootstrap bootstrap-vue

  9 được khuyến nghị
• Chủ đề - Chủ đề và bảng điều khiển

Điều kiện tiên quyết

Tài liệu bootstrapvue này giả định rằng bạn đã quen thuộc với Vue và Bootstrap V4 CSS. Điểm khởi đầu tốt cho những điều này:

• Hướng dẫn Vue
• Vue API
• Tài liệu Bootstrap v4.6
• Vue Loader phạm vi phạm vi CSS, nếu sử dụng các kiểu vạch trong SFC (thành phần tệp đơn)

  import Vue from 'vue'
  import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
  
  
  import 'bootstrap/dist/css/bootstrap.css'
  import 'bootstrap-vue/dist/bootstrap-vue.css'
  
  
  Vue.use(BootstrapVue)
  
  Vue.use(IconsPlugin)

  6 Tệp

Thông tin tài liệu

Trong nhiều ví dụ được hiển thị trong tài liệu của Bootstrapvue, bạn có thể thấy việc sử dụng các lớp CSS như

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'


import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'


Vue.use(BootstrapVue)

Vue.use(IconsPlugin)

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'


import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'


Vue.use(BootstrapVue)

Vue.use(IconsPlugin)

Nhiều ví dụ trong tài liệu này là trực tiếp và có thể được chỉnh sửa tại chỗ cho trải nghiệm học tập nâng cao (lưu ý một số ví dụ có thể không hoạt động trong IE 11 do sử dụng mã JavaScript ES6 trong phần

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'


import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'


Vue.use(BootstrapVue)

Vue.use(IconsPlugin)

Bootstrapvue cũng cung cấp một sân chơi tương tác nơi bạn có thể thử nghiệm các thành phần khác nhau và xuất kết quả của bạn sang JSFiddle, CodePen và/hoặc CodeSandbox.

HTML toàn cầu quan trọng

Bootstrap V4 CSS sử dụng một số ít các phong cách và cài đặt toàn cầu quan trọng mà bạn sẽ cần nhận thức được khi sử dụng nó, tất cả đều chỉ hướng đến việc chuẩn hóa các kiểu trình duyệt chéo. Tham khảo các phần phụ sau đây để biết chi tiết.

HTML5 DOCTYPE

Bootstrap yêu cầu sử dụng

$body-bg: #000;
$body-color: #111;


@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';

html>
<html lang="en">
  ...
html>

Thẻ meta đáp ứng

Bootstrap được tối ưu hóa cho các thiết bị di động trước và sau đó chia tỷ lệ các thành phần khi cần thiết bằng cách sử dụng các truy vấn phương tiện CSS. Để đảm bảo kết xuất và chạm vào phù hợp cho tất cả các thiết bị, hãy thêm thẻ Meta Viewport đáp ứng vào

$body-bg: #000;
$body-color: #111;


@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';

$body-bg: #000;
$body-color: #111;


@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Kích thước hộp CSS

Để có kích thước đơn giản hơn trong CSS, giá trị

$body-bg: #000;
$body-color: #111;


@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';

$body-bg: #000;
$body-color: #111;


@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';

$body-bg: #000;
$body-color: #111;


@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';

$body-bg: #000;
$body-color: #111;


@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';

Trong dịp hiếm hoi, bạn cần phải ghi đè nó, sử dụng một cái gì đó như sau:

.selector-for-some-widget {
  box-sizing: content-box;
}

Với đoạn trích ở trên, các phần tử lồng nhau - bao gồm nội dung được tạo thông qua

$body-bg: #000;
$body-color: #111;


@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';

$body-bg: #000;
$body-color: #111;


@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';

$body-bg: #000;
$body-color: #111;


@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';

$body-bg: #000;
$body-color: #111;


@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';

Tìm hiểu thêm về mô hình hộp và kích thước tại các thủ thuật CSS.

Phong cách khởi động lại

Để kết xuất trình duyệt chéo được cải thiện, Bootstrap V4.6 sử dụng khởi động lại để điều chỉnh sự không nhất quán trên các trình duyệt và thiết bị trong khi cung cấp các thiết lập lại có ý kiến ​​hơn một chút cho các phần tử HTML thông thường.

Sử dụng các gói mô -đun

Nhiều khả năng bạn đang sử dụng các gói mô -đun như WebPack, Parcel hoặc Rollup.js, giúp dễ dàng đưa gói hàng vào dự án của bạn dễ dàng. Để làm điều này, hãy sử dụng

import Vue from 'vue'
import { BootstrapVue } from 'bootstrap-vue'

import './app.scss'

Vue.use(BootstrapVue)

import Vue from 'vue'
import { BootstrapVue } from 'bootstrap-vue'

import './app.scss'

Vue.use(BootstrapVue)

npm install vue bootstrap bootstrap-vue


yarn add vue bootstrap bootstrap-vue

Sau đó, đăng ký bootstrapvue trong điểm nhập ứng dụng của bạn (thường là

import Vue from 'vue'
import { BootstrapVue } from 'bootstrap-vue'

import './app.scss'

Vue.use(BootstrapVue)

import Vue from 'vue'
import { BootstrapVue } from 'bootstrap-vue'

import './app.scss'

Vue.use(BootstrapVue)

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'


import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'


Vue.use(BootstrapVue)

Vue.use(IconsPlugin)

Theo chủ đề bootstrap

Nếu bạn muốn thay đổi các kiểu mặc định của Bootstrap (ví dụ:

import Vue from 'vue'
import { BootstrapVue } from 'bootstrap-vue'

import './app.scss'

Vue.use(BootstrapVue)

Tạo tệp

import Vue from 'vue'
import { BootstrapVue } from 'bootstrap-vue'

import './app.scss'

Vue.use(BootstrapVue)

import Vue from 'vue'
import { BootstrapVue } from 'bootstrap-vue'

import './app.scss'

Vue.use(BootstrapVue)

import Vue from 'vue'
import { BootstrapVue } from 'bootstrap-vue'

import './app.scss'

Vue.use(BootstrapVue)

$body-bg: #000;
$body-color: #111;


@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';

Sau đó nhập tệp

import Vue from 'vue'
import { BootstrapVue } from 'bootstrap-vue'

import './app.scss'

Vue.use(BootstrapVue)

import Vue from 'vue'
import { BootstrapVue } from 'bootstrap-vue'

import './app.scss'

Vue.use(BootstrapVue)

Không nhập riêng các tệp SCSS riêng lẻ vào dự án của bạn, bởi vì các biến và chức năng sẽ không được chia sẻ giữa các tệp.

Để biết thông tin về bootstrap theo chủ đề, hãy xem phần tham chiếu theo chủ đề.

Nhập khẩu Vue Vue

Bootstrapvue và PortalVue yêu cầu truy cập vào tham chiếu toàn cầu ____70 (thông qua

const path = require('path')

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set(
      'vue$',
      
      path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
      
      
    )
  }
}

Nếu bạn đang sử dụng một bản dựng Vue cụ thể (tức là chỉ chạy so với trình biên dịch + thời gian chạy), bạn sẽ cần thiết lập bí danh thành

const path = require('path')

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set(
      'vue$',
      
      path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
      
      
    )
  }
}

const path = require('path')

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set(
      'vue$',
      
      path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
      
      
    )
  }
}

const path = require('path')

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set(
      'vue$',
      
      path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
      
      
    )
  }
}

Ví dụ: Bí danh Vue cho Vue CLI trong

const path = require('path')

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set(
      'vue$',
      
      path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
      
      
    )
  }
}

const path = require('path')

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set(
      'vue$',
      
      path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
      
      
    )
  }
}

Ví dụ: Bí danh Vue trong

const path = require('path')

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set(
      'vue$',
      
      path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
      
      
    )
  }
}

module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}

Lưu ý: Nếu dự án của bạn có nhiều tệp cấu hình webpack (tức là

const path = require('path')

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set(
      'vue$',
      
      path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
      
      
    )
  }
}

const path = require('path')

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set(
      'vue$',
      
      path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
      
      
    )
  }
}

const path = require('path')

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set(
      'vue$',
      
      path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
      
      
    )
  }
}

module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}

module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}

const path = require('path')

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set(
      'vue$',
      
      path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
      
      
    )
  }
}

const path = require('path')

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set(
      'vue$',
      
      path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
      
      
    )
  }
}

const path = require('path')

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set(
      'vue$',
      
      path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
      
      
    )
  }
}

module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}

module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}

Xem Hướng dẫn Vue.js để biết chi tiết đầy đủ về việc thiết lập các bí danh cho Webpack, Rollup.js, Parcel, ETC.

Cách sử dụng Bundler mô -đun nâng cao

Hỗ trợ WebPack và bưu kiện chi tiêu các mô -đun

import Vue from 'vue'
import { BootstrapVue } from 'bootstrap-vue'

import './app.scss'

Vue.use(BootstrapVue)

module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}

import Vue from 'vue'
import { BootstrapVue } from 'bootstrap-vue'

import './app.scss'

Vue.use(BootstrapVue)

@import '~bootstrap';
@import '~bootstrap-vue';

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Để biết thêm chi tiết về cách định cấu hình tải tài sản và cách giải quyết các mô -đun, vui lòng tham khảo tài liệu của các gói mô -đun.

Notes::

• Cấu hình webpack để tải tệp CSS (Hướng dẫn chính thức)
• Trình tải webpack cho các tệp SASS/SCSS (Hướng dẫn chính thức)
• Bưu kiện CSS (Hướng dẫn chính thức)
• Parcel SCSS (Hướng dẫn chính thức)

Cây lắc với các gói mô -đun

Khi sử dụng Bundler mô -đun, bạn chỉ có thể nhập các nhóm thành phần cụ thể (plugin), các thành phần và/hoặc chỉ thị. Lưu ý rằng việc lắc cây chỉ áp dụng cho mã JavaScript và không phải CSS/SCSS.

LƯU Ý: Lắc cây tối ưu chỉ hoạt động khi WebPack 4 ở chế độ

module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}

module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}

Các nhóm thành phần và chỉ thị dưới dạng các plugin Vue

Bạn có thể nhập các nhóm thành phần và chỉ thị dưới dạng các plugin Vue bằng cách nhập từ

module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Khi nhập dưới dạng plugin, tất cả các thành phần con và các chỉ thị liên quan được nhập trong hầu hết các trường hợp. tức là khi nhập

module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}

module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}

Có hai plugin trợ giúp bổ sung để cung cấp các lần tiêm

module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}

@import '~bootstrap';
@import '~bootstrap-vue';

@import '~bootstrap';
@import '~bootstrap-vue';

@import '~bootstrap';
@import '~bootstrap-vue';

@import '~bootstrap';
@import '~bootstrap-vue';

• @import '~bootstrap';
  @import '~bootstrap-vue';

  4 - Cung cấp tiêm

  module.exports = {
    
    resolve: {
      alias: {
        
        vue$: 'vue/dist/vue.runtime.esm.js' 
        
        
      }
    }
  }

  9 để tạo hộp thông báo.

• @import '~bootstrap';
  @import '~bootstrap-vue';

  6 - Cung cấp tiêm

  @import '~bootstrap';
  @import '~bootstrap-vue';

  0 để tạo ra bánh mì nướng theo yêu cầu.

Khi nhập nhiều plugin nhóm thành phần và/hoặc nhóm chỉ thị, bao gồm tất cả các nhập khẩu trong một câu lệnh

@import '~bootstrap';
@import '~bootstrap-vue';

Các thành phần và chỉ thị riêng lẻ

Nếu bạn chỉ muốn kéo vào một thành phần hoặc tập hợp các thành phần cụ thể, bạn có thể làm điều này bằng cách nhập trực tiếp các thành phần đó.

Để chọn một thành phần/chỉ thị, hãy bắt đầu bằng cách nhập nó vào tệp nơi nó đang được sử dụng:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Sau đó, thêm nó vào định nghĩa thành phần của bạn:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Hoặc đăng ký chúng trên toàn cầu:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

VUE cho phép các cú pháp tên thành phần và chỉ thị khác nhau ở đây, vì vậy hãy thoải mái sử dụng thùng Kebab (hiển thị), Camelcasing, Pascalcasing và/hoặc đối tượng Shorthand (chỉ các thành phần).

Sử dụng mã nguồn bootstrapvue cho các gói nhỏ hơn

Khi sử dụng các gói mô-đun, chúng thường sẽ mặc định sử dụng bản dựng mô-đun

@import '~bootstrap';
@import '~bootstrap-vue';

Bạn có thể ghi đè lên việc sử dụng bản dựng

@import '~bootstrap';
@import '~bootstrap-vue';

@import '~bootstrap';
@import '~bootstrap-vue';

Ví dụ Webpack.config.js cho việc chuyển đổi Babel:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Bạn có thể cần cài đặt

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Để biết thêm chi tiết, xem:

• WebPack

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  06
• WebPack

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  07
• rollup.js
• Bưu kiện

Mô -đun Nuxt.js

BootStrapVue cung cấp mô -đun Nuxt.js để dễ dàng nhập bootstrapvue (hoặc các phần của bootstrapvue) vào ứng dụng Nuxt.js của bạn.

Bắt đầu với Nuxt.js

Phiên bản nuxt.js

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Cài đặt phụ thuộc:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Thêm

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Điều này sẽ bao gồm cả CSS được biên dịch sẵn

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Lưu ý rằng điều này sẽ không cài đặt các thành phần biểu tượng. Để xem làm thế nào để bao gồm các biểu tượng thông qua mô -đun Nuxt.js, hãy tham khảo phần biểu tượng bên dưới.not install the Icons components. To see how to include icons via the Nuxt.js module, refer to the Icons section below.

Sử dụng SCSS Bootstrap tùy chỉnh

Nếu bạn đang sử dụng SCSS Bootstrap tùy chỉnh, bạn có thể vô hiệu hóa việc bao gồm tự động các tệp CSS được biên dịch sẵn Bootstrap và BootstrapVue bằng cách đặt (các) tùy chọn sau thành

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

SCSS tùy chỉnh của BootStrapVue dựa trên các biến và mixin của Bootstrap SCSS và bất kỳ sự ghi đè biến nào bạn có thể đã đặt. Bạn có thể bao gồm Bootstrap và Bootstrapvue SCSS trong tệp SCSS tùy chỉnh của dự án:

.selector-for-some-widget {
  box-sizing: content-box;
}

Trong ứng dụng của bạn, điểm nhập chính bao gồm tệp SCSS tùy chỉnh duy nhất (khi sử dụng

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

15 với nuxt.js

Mô -đun plugin nuxt bootstrapvue sẽ tự động thêm vào hình ảnh cụ thể bootstrapvue

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Cây lắc với nuxt.js

Nếu bạn muốn giảm kích thước gói sản xuất của mình vì bạn chỉ sử dụng một tập hợp con của các plugin bootstrapvue có sẵn, bạn có thể định cấu hình danh sách bootstrapvue

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

.selector-for-some-widget {
  box-sizing: content-box;
}

Có hai plugin trợ giúp bổ sung để cung cấp các lần tiêm

module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}

@import '~bootstrap';
@import '~bootstrap-vue';

@import '~bootstrap';
@import '~bootstrap-vue';

@import '~bootstrap';
@import '~bootstrap-vue';

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

• @import '~bootstrap';
  @import '~bootstrap-vue';

  4 - Cung cấp tiêm

  module.exports = {
    
    resolve: {
      alias: {
        
        vue$: 'vue/dist/vue.runtime.esm.js' 
        
        
      }
    }
  }

  9 để tạo hộp thông báo.

• @import '~bootstrap';
  @import '~bootstrap-vue';

  6 - Cung cấp tiêm

  @import '~bootstrap';
  @import '~bootstrap-vue';

  0 để tạo ra bánh mì nướng theo yêu cầu.

Bạn cũng có thể nhập tùy ý nhập các thành phần và/hoặc chỉ thị riêng lẻ, bằng cách định cấu hình danh sách bootstrapvue

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

.selector-for-some-widget {
  box-sizing: content-box;
}

Hãy thoải mái trộn và kết hợp nhập khẩu plugin với các thành phần riêng lẻ và nhập khẩu chỉ thị.

Tham khảo phần tham chiếu ở dưới cùng của mỗi tài liệu thành phần và chỉ thị để biết chi tiết về tên plugin có sẵn (và các thành phần và chỉ thị nào được bao gồm trong mỗi plugin) và thành phần và/hoặc tên nhập chỉ thị.

Lưu ý rằng khi nhập các thành phần riêng lẻ, bất kỳ bí danh thành phần sẽ không có sẵn.not be available.

LƯU Ý: Lắc cây tối ưu chỉ hoạt động khi ứng dụng Nuxt.js của bạn ở chế độ

module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}

module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}

module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Nếu bạn muốn nhập các thành phần bootstrapvue riêng lẻ vào các trang cụ thể và/hoặc các thành phần của ứng dụng Nuxt của bạn, bạn có thể muốn bỏ qua mô -đun Nuxt.js và thay vào đó, hãy theo các gói mô -đun và lắc cây với các phần của các gói mô -đun ở trên. Ngoài ra, bạn có thể muốn chỉ nhập một vài plugin (chẳng hạn như

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Biểu tượng

Plugin biểu tượng không được tự động cài đặt khi sử dụng mô -đun Nuxt.js. Bạn phải kích hoạt rõ ràng

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Tất cả các biểu tượng:

.selector-for-some-widget {
  box-sizing: content-box;
}

Biểu tượng cụ thể:

.selector-for-some-widget {
  box-sizing: content-box;
}

Plugin biểu tượng:

.selector-for-some-widget {
  box-sizing: content-box;
}

Vượt qua cấu hình bootstrapvue tùy chỉnh với nuxt.js

Nếu bạn cần vượt qua cấu hình Bootstrapvue tùy chỉnh, bạn có thể làm như vậy bằng cách đặt thuộc tính

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

.selector-for-some-widget {
  box-sizing: content-box;
}

Sử dụng phiên bản trước của bootstrapvue cho nuxt.js

Mô-đun Nuxt.js sử dụng các phiên bản bootstrapvue được transpvue trước để xây dựng phát triển nhanh hơn và nguồn (

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Bạn có thể ghi đè tùy chọn này bằng tùy chọn

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Vue cli 3

Không giống như V2, Vue CLI 3 không sử dụng các mẫu.

Tạo một dự án mới trong thư mục

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

.selector-for-some-widget {
  box-sizing: content-box;
}

Nhập thư mục

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

module.exports = {
  
  resolve: {
    alias: {
      
      vue$: 'vue/dist/vue.runtime.esm.js' 
      
      
    }
  }
}

.selector-for-some-widget {
  box-sizing: content-box;
}

Dưới mui xe, Vue CLI sử dụng webpack, vì vậy chúng tôi có thể đăng ký plugin Bootstrapvue như với các hướng dẫn webpack.

.selector-for-some-widget {
  box-sizing: content-box;
}

Để biết cấu hình bổ sung cho Vue CLI 3 để sử dụng các đường dẫn tương đối dự án cho các đạo cụ SRC hình ảnh trên các thành phần bootstrapvue khác nhau, hãy tham khảo phần Vue CLI 3 của trang tham chiếu giải quyết hình ảnh SRC.

Plugin Vue CLI 3

Thay vào đó, bạn có thể sử dụng plugin Bootstrap-Vue Vue CLI 3 để giúp bạn định cấu hình ứng dụng của mình.

npm install vue bootstrap bootstrap-vue


yarn add vue bootstrap bootstrap-vue

Điều này sẽ tạo ra một ứng dụng mới với các cài đặt bootstrapvue cơ bản để bắt đầu dự án của bạn.

Trong tương lai plugin này sẽ cung cấp các tùy chọn cho các cấu hình và mẫu nâng cao hơn.

Đối với hỗ trợ biểu tượng, bạn có thể cần chỉnh sửa tệp cấu hình kết quả.

Trình duyệt

Nếu không sử dụng quy trình Bundler hoặc biên dịch mô -đun, thay vào đó, bạn có thể thêm URL CSS Bootstrap và Bootstrapvue vào phần HTML

$body-bg: #000;
$body-color: #111;


@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';

Khi hỗ trợ các trình duyệt cũ hơn (xem hỗ trợ trình duyệt bên dưới), bạn sẽ cần bao gồm một polyfill để xử lý các tính năng JavaScript hiện đại trước khi tải các tệp JavaScript Vue và Bootstrapvue.

npm install vue bootstrap bootstrap-vue


yarn add vue bootstrap bootstrap-vue

Xây dựng các biến thể

Chọn biến thể tốt nhất cho môi trường xây dựng / gói của bạn giúp giảm kích thước gói. Nếu Bundler của bạn hỗ trợ các mô -đun ESM, nó sẽ tự động thích nó hơn CommonJS.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Khôngdoes not include BootstrapVue icons support. All other variants listed above do include the

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Các biểu tượng chỉ mô -đun:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

UMD

Trình duyệt

60 hoặc 61

Bản dựng mô-đun

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Tất cả các biến thể xây dựng được liệt kê ở trên đã được giao dịch trước nhắm mục tiêu các trình duyệt được hỗ trợ bởi bootstrapvue. Tuy nhiên, nếu bạn chỉ nhắm mục tiêu các trình duyệt hiện đại, bạn có thể muốn nhập 66 từ 67, (bằng phương đề module.exports = { resolve: { alias: { vue$: 'vue/dist/vue.runtime.esm.js' } } }6 đến 69) và liệt kê trắng 70 để chuyển đổi thông qua dự án của riêng bạn. Điều này có khả năng làm giảm kích thước gói dự án cuối cùng. Xem bằng cách sử dụng mã nguồn bootstrapvue cho phần các gói nhỏ hơn ở trên để biết thêm chi tiết.

Phụ thuộc

• Bootstrapvue dựa trên

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  71 (đối với định vị công cụ, popover và thả xuống),

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  72 (cho bánh mì nướng) và

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  73 (được sử dụng bởi các thành phần chức năng của chúng tôi). Ba phụ thuộc này được bao gồm trong gói bootstrapvue

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  74, trong khi các biểu tượng UMD (Trình duyệt) chỉ bao gồm

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  73. Tất cả các bản dựng khác không bao gồm các phụ thuộc này.
• Di chuyển một dự án đã sử dụng bootstrapdoes not depend on

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  77
• Nếu bạn đã sử dụng Bootstrap V4, có một vài điều chỉnh bạn có thể cần thực hiện cho dự án của mình:
• Xóa tệp

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  76 khỏi các tập lệnh trang của bạn hoặc xây dựng đường ống

Nếu bootstrap là thứ duy nhất dựa vào 77, bạn có thể loại bỏ nó một cách an toàn - bootstrapvue không phụ thuộc vào 77

Chuyển đổi đánh dấu html bootstrap gốc của bạn thành đánh dấu thành phần tùy chỉnh bootstrapvue đơn giản

Bắt đầu bằng cách chỉ chuyển đổi các điều khiển tương tác yêu cầu JavaScript của Bootstrap trước tiên.

Hỗ trợ trình duyệt

CSS

Bootstrapvue sẽ được sử dụng với Bootstrap v4.6 CSS/SCSS. Vui lòng xem trình duyệt và thiết bị để biết thêm thông tin về trình duyệt hiện được hỗ trợ bởi Bootstrap V4.

• JS

• <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  83

• <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  84
• Bootstrapvue được viết bằng Vue.js! Vì vậy, tùy thuộc vào dự án của bạn và Bundler mà các trình duyệt được hỗ trợ.

Các tính năng và API sau đây được sử dụng bởi bootstrapvue:

npm install vue bootstrap bootstrap-vue


yarn add vue bootstrap bootstrap-vue

ES6 (ví dụ:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

npm install vue bootstrap bootstrap-vue


yarn add vue bootstrap bootstrap-vue

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

npm install vue bootstrap bootstrap-vue


yarn add vue bootstrap bootstrap-vue

ES6 (ví dụ:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

npm install vue bootstrap bootstrap-vue


yarn add vue bootstrap bootstrap-vue

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Nếu bạn muốn hỗ trợ các trình duyệt web IE, Android và iOS cũ hơn, bạn có thể muốn sử dụng Core-JS và Intersection-Observer:

Sau đó nhập polyfills vào điểm nhập chính của ứng dụng của bạn:

Nếu sử dụng DEVERATED @Babel/Polyfill:

Ngoài ra, sử dụng polyfill.io để phục vụ động, trình duyệt polyfills cụ thể thông qua các thẻ 86 trong phần HTML $body-bg: #000; $body-color: #111; @import 'node_modules/bootstrap/scss/bootstrap.scss'; @import 'node_modules/bootstrap-vue/src/index.scss';1. Xem phần Trình duyệt ở trên cho một ví dụ.

Bootstrapvue cung cấp các tệp trợ giúp bổ sung để hoàn thành tự động trong các biên tập viên IDE phổ biến.