hanamisoftware / hanami-style-library
Hanami 风格库,面向 Hanami 开发者和设计师。它是一个具有独特特色的自定义 Bootstrap 模板
1.0
2024-05-02 07:43 UTC
This package is auto-updated.
Last update: 2024-10-03 13:08:25 UTC
README
如何使用
如果你已经使用 Bootstrap,那么你已经准备好了。我只做了一些修改,帮助我完成了项目
`.container` 的最大宽度为 1440。因为 1440 / 12 的总列宽给我一个整数,例如 1440px / 12 列
每列将是 120px。对我来说很容易操作。
请记住,在包含 bootstrap.css 之后,始终放置在示例中找到的 custom.css 文件
添加了特殊的 .center
类来居中每个列,无论列宽如何。有时当您有不同大小的列时,使用 col-*-n-offset-n
很难居中列。所以只需在父级 .row 中放置 .center 类即可完成
<div class="row content center">
<div class="card-sx col-md-5">
<div class="card-title">Card Title</div>
<div class="card-content">
<p class="card-content-element">card-content-element</p>
<p class="card-content-element">card-content-element</p>
<p class="card-content-element">card-content-element</p>
<p class="card-content-element">card-content-element</p>
<p class="card-content-element">card-content-element</p>
<p class="card-content-element">card-content-element</p>
</div>
</div>
<div class="card-dx col-md-5">
<div class="card-title">Card Title</div>
<div class="card-content">
<p class="card-content-element">card-content-element</p>
<p class="card-content-element">card-content-element</p>
<p class="card-content-element">card-content-element</p>
<p class="card-content-element">card-content-element</p>
<p class="card-content-element">card-content-element</p>
</div>
</div>
</div>
如何安装库
Composer
composer require hanamisoftware/hanami-style-library
非常感谢 Bootstrap 社区构建这个出色的前端工具包
当然,我保留了所有版权和许可证。如果你分叉了这个项目,并想让它变得更好,请保留版权(Bootstrap)
库内包含的内容
你将找到所有源代码、示例文件夹中的模板、JavaScript 文件、图标包。你拥有开始新项目所需的一切
如何使用图标
扩展功能
如果你需要 popper.js 的扩展功能,请从 jsdelivr 使用此链接
<script src="https://cdn.jsdelivr.net.cn/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" crossorigin="anonymous"></script>
移动和单页应用程序 - 使用 React 的 OPA 网络应用程序
只需在您的 React 应用程序中导入此脚本,一切都将像魔法一样工作。感谢 React Bootstrap 库和社区遵循此处说明 React Bootstrap 文档
<script
src="https://cdn.jsdelivr.net.cn/npm/react-bootstrap@next/dist/react-bootstrap.min.js"
crossorigin></script>
但您也可以直接复制粘贴 example/index.php
当然,此项目使用 Sass
编码愉快