Symfony 4 - 使用 bootstrap 4 和 Select2
Symfony 4 - Use bootstrap 4 with Select2
在我的 symfony 4 项目中,我对某些字段使用 Select2:https://select2.org/
所以,我有这个:
所以,在我的表格中,我已经:
->add('user', EntityType::class, [
'class' => User::class,
'label' => 'Agent',
'placeholder' => "Agent",
'choice_label' => 'fullName',
'choice_value' => 'fullName',
'attr' => [
'class' => 'js-example-basic-single',
]
])
在我看来 :
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
<script>
$('.js-example-basic-single').select2({
placeholder: 'Choisissez un agent',
allowClear: true,
language: 'fr'
});
</script>
我想在此字段中使用 bootstrap 4,以便它与其他字段具有相同的设计。
所以,我找到了这个 link:https://github.com/ttskch/select2-bootstrap4-theme
好看吗link?
第一次使用npm,所以执行了以下命令:
npm install @ttskch/select2-bootstrap4-theme
但我看不到 css link 在哪里,无法在我的视图中导入它们
您只需在 select2 字段定义中传递正确的主题名称即可。
所以在你的情况下它看起来像这样:
<script>
$('.js-example-basic-single').select2({
placeholder: 'Choisissez un agent',
allowClear: true,
language: 'fr',
theme: 'bootstrap4',
});
</script>
如果您按照官方文档的建议使用 webpack,则应添加以下行:
assets/js/app.js
require('select2');
assets/css/app.scss:
@import "~select2-bootstrap4-theme/dist/select2-bootstrap4.min.css";
在我的 symfony 4 项目中,我对某些字段使用 Select2:https://select2.org/
所以,我有这个:
所以,在我的表格中,我已经:
->add('user', EntityType::class, [
'class' => User::class,
'label' => 'Agent',
'placeholder' => "Agent",
'choice_label' => 'fullName',
'choice_value' => 'fullName',
'attr' => [
'class' => 'js-example-basic-single',
]
])
在我看来 :
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
<script>
$('.js-example-basic-single').select2({
placeholder: 'Choisissez un agent',
allowClear: true,
language: 'fr'
});
</script>
我想在此字段中使用 bootstrap 4,以便它与其他字段具有相同的设计。
所以,我找到了这个 link:https://github.com/ttskch/select2-bootstrap4-theme 好看吗link?
第一次使用npm,所以执行了以下命令:
npm install @ttskch/select2-bootstrap4-theme
但我看不到 css link 在哪里,无法在我的视图中导入它们
您只需在 select2 字段定义中传递正确的主题名称即可。 所以在你的情况下它看起来像这样:
<script>
$('.js-example-basic-single').select2({
placeholder: 'Choisissez un agent',
allowClear: true,
language: 'fr',
theme: 'bootstrap4',
});
</script>
如果您按照官方文档的建议使用 webpack,则应添加以下行:
assets/js/app.js
require('select2');
assets/css/app.scss:
@import "~select2-bootstrap4-theme/dist/select2-bootstrap4.min.css";