Bootstrap 4 如何实现Vue的引导类?

Bootstrap 4 如何实现Vue的引导类?,bootstrap-4,vuejs2,vue-formulate,Bootstrap 4,Vuejs2,Vue Formulate,根据,您可以向其添加引导: 通过提供的类道具,您可以全局或逐个添加自己的样式类集。顺风?没问题引导?您已被覆盖。你自己滚?没错,它是受支持的 好的,那你怎么做呢 我试过了,但没有成功: <FormulateInput type="email" class="form-control" <------bootstrap class label="What is your school email address?"

根据,您可以向其添加引导:

通过提供的类道具,您可以全局或逐个添加自己的样式类集。顺风?没问题引导?您已被覆盖。你自己滚?没错,它是受支持的

好的,那你怎么做呢

我试过了,但没有成功:

<FormulateInput
  type="email"
  class="form-control" <------bootstrap class
  label="What is your school email address?"
  validation="bail|required|email|ends_with:.edu"
  validation-name="School email"
  placeholder="user@university.edu"
/>

尝试使用
输入类
元素类
而不是
属性。您还可以全局自定义这些类。有关详细信息,请阅读Vue Formulate文档中关于的章节。

尝试使用
输入类
元素类
而不是
属性。您还可以全局自定义这些类。有关更多信息,请阅读Vue Formulate文档中关于的章节。

如中所述:

根据给定的输入更改类很容易。只需使用名为
[element class key]-class
的道具将要更改的类密钥作为目标。要以状态为目标,请使用
[element class key]-[state class key]-class
。 ` 还有

在:

窗体控件 像
s
s
s
这样的文本表单控件使用
表单控件
类设置样式。包括常规外观、焦点状态、大小等样式

这意味着您的目标是
输入

这样,您应该尝试:

<FormulateInput
  type="email"
  input-class="form-control"
  label="What is your school email address?"
  validation="bail|required|email|ends_with:.edu"
  validation-name="School email"
  placeholder="user@university.edu"
/>
正如它在报告中所说:

根据给定的输入更改类很容易。只需使用名为
[element class key]-class
的道具将要更改的类密钥作为目标。要以状态为目标,请使用
[element class key]-[state class key]-class
。 ` 还有

在:

窗体控件 像
s
s
s
这样的文本表单控件使用
表单控件
类设置样式。包括常规外观、焦点状态、大小等样式

这意味着您的目标是
输入

这样,您应该尝试:

<FormulateInput
  type="email"
  input-class="form-control"
  label="What is your school email address?"
  validation="bail|required|email|ends_with:.edu"
  validation-name="School email"
  placeholder="user@university.edu"
/>

我使用以下方法将Vue Formulate(2.5)应用的样式与Bootstrap 4进行全局匹配:

Vue.use(VueFormulate, {
    classes: {
        outer: 'form-group',
        input: 'form-control',
        inputHasErrors: 'is-invalid',
        help: 'form-text text-muted',
        errors: 'list-unstyled text-danger'
    }
})

我使用以下方法将Vue Formulate(2.5)应用的样式与Bootstrap 4进行全局匹配:

Vue.use(VueFormulate, {
    classes: {
        outer: 'form-group',
        input: 'form-control',
        inputHasErrors: 'is-invalid',
        help: 'form-text text-muted',
        errors: 'list-unstyled text-danger'
    }
})

谢谢如果一切顺利,我会调查并向你汇报!但是,这非常有效,添加验证引导类似乎会导致隐藏输入字段的问题。除此之外,谢谢你!帮助我,谢谢。如果一切顺利,我会调查并向你汇报!但是,这非常有效,添加验证引导类似乎会导致隐藏输入字段的问题。除此之外,谢谢你!帮助我。