我想知道如何使用Semantic-UI将codeigniter 3.x作为前端框架。
我想使用LESS而不是css。感谢
答案 0 :(得分:0)
首先,重要的是要理解LESS是一个CSS预编译器,它扩展了CSS语言,其功能允许创建更易于维护,可主题化和可扩展的CSS。但最终它创建的CSS文件与网站中的任何其他CSS文件完全相同。
在CodeIgniter中,您可以使用<link>
标记,以与任何其他CSS(或javascript)文件相同的方式使用Semantic-UI创建的资源。
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script src="semantic/dist/semantic.min.js"></script>
CSS类在“view”文件中的使用方式与其他CSS定义的类完全相同。例如,以下内容将把由Semantic-UI设计的按钮放入CodeIgniter“视图”文件中。
<button class="ui button">Follow</button>
所以,对你的问题的简短回答是你在CodeIgniter中使用Semantic-UI,就像生成CSS和Javascript的任何其他前端框架一样。
如何使用自定义Semantic-UI所需的工具超出了Stackoverflow上“好”问题的范围。
如果您想自定义和构建自己的UI版本,那么您将面临陡峭的学习曲线。您可以在Semantic-UI的Getting Started页面和Learn Semantic网站上开始学习。
答案 1 :(得分:0)
我在基于CodeIgniter的应用程序启动器上进行了语义UI集成:https://github.com/ivantcholakov/starter-public-edition-4
要编译您自己的可视主题,您需要在开发机器node.js,less.js,postcss / cssnano上本地安装,它们应该能够从命令行启动。
请参阅配置文件platform / common / config / less_compile.php,您可以通过示例定义自己的视觉主题。另外,看看已经创建的主题,您将看到如何添加常见的语义UI自定义和主题特定的样式。
答案 2 :(得分:0)
在页眉中添加css链接,在页脚中添加js
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css">
<script type="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.js"></script>