在基于 Bootstrap 的项目中使用语义 UI 元素

Question

我正在构建一个网站，其中很多主题和样式都基于 Bootstrap 3。但我想使用多个 Select 下拉搜索框之类的东西，它们在 Semantic UI 中很容易获得，但在 Bootstrap 中却不行。我认为将项目完全转移到 Semantic UI 有点太晚了。另外，我知道这些框架之间存在大量的命名冲突。因此，将 Semantic UI 与 Bootstrap 一起使用似乎不是一个好主意。那我该怎么办？我的问题有两个。

1. Semantic UI 建议使用 Node JS 安装。 Semantic UI 可以在具有 PHP 后端的项目中使用吗？

2. 我不能只使用 Semantic UI Github 存储库中这些元素的源代码并在我的项目中使用它而无需实际安装 Semantic UI?

Answer 1

1. 您也可以使用 composer 安装 semantic-ui。相关link：https://packagist.org/packages/semantic/ui

2. NodeJS 是首选，因为您可以使用它来创建具有所需组件类型的文件。uild。如果您安装了 NodeJS，您可以使用 交互式安装程序 为您 assemble 和 build 相关文件。 http://semantic-ui.com/introduction/getting-started.html#install-semantic-ui

3. 您还可以对特定元素使用 CDN：https://cdnjs.com/libraries/semantic-ui

4. 您也可以使用 github 存储库来简单地选择您需要的元素，但始终建议您使用 build 工具以便您可以编译将所有多个 CSS 文件（或 JS 文件）合并为一个。

P.S。例如，为了避免您正在使用的元素的名称空间冲突，您可以在 semantic.js 和 semantic.css 中使用 semantic-modal 重命名所有 modal 关键字。其他有命名冲突的元素。

Answer 2

[回答可能晚了]

我有在bootstrap项目中使用语义ui下拉插件的经验。

您只需包含四个组件即可使其正常工作，它们是：

• dropdown.min.js
• transition.min.js
• dropdonw.min.css
• transition.min.css

此外，您需要添加一些 css 来设置标签的样式（因为它与 bootstrap 冲突）并使删除图标出现。 这是我在 codepen 中制作的一个工作示例：http://codepen.com/cambyliverson/pen/mRreXo

喜欢semantic-ui的可以考虑bootstrap的semantic-ui皮肤：SMTB

Answer 3

根据一般经验，我会说不要这样做。他们CSS参与了这两个项目，很容易发生冲突并导致这样的事情...

https://slack-files.com/T0VNSF68H-F4NL9M950-ae64b77fc1

^ 模态因冲突而跳动和闪烁的GIF css