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

时间:2016-09-30 15:06:03

标签: twitter-bootstrap semantic-ui

我正在建立一个网站,其中很多主题和样式都基于Bootstrap 3。但我想使用多个选择下拉搜索框之类的内容,这些内容在Semantic UI中很容易获得,但在Bootstrap中则不然。我认为将项目完全转移到Semantic UI已经太迟了。此外,我知道这些框架之间存在大量的命名冲突。因此,在Semantic UI旁边使用Bootstrap似乎不是一个好主意。那我该怎么办?我的问题是双重的。

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

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

3 个答案:

答案 0 :(得分:8)

[答案可能会迟到]

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

您可以只包含四个组件以使其正常工作,它们是:

此外,您需要添加一些css来标注样式(因为它与bootstrap冲突)并显示删除图标。 这是我在codepen中创建的一个工作示例:http://codepen.com/cambyliverson/pen/mRreXo

如果你喜欢semantic-ui,你可以考虑bootstrap的语义ui皮肤:SMTB

答案 1 :(得分:2)

作为一般经验法则,我会说不要这样做。参与这两个项目的CSS很容易发生冲突并导致这样的事情......

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

由于css冲突,模式弹跳和闪烁的

^ GIF

答案 2 :(得分:1)

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

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

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

  4. 您也可以使用github repo来选择您需要的元素,但总是建议使用构建工具,以便您可以将所有多个CSS文件(或JS文件)编译成一个。

  5. P.S。例如,为了避免您正在使用的元素发生命名空间冲突,您可以在modalsemantic-modal中使用semantic.js重命名所有semantic.css个关键字。您可以对所有人执行此操作其他具有命名冲突的元素。