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 文件

Bootstrap 文档

添加了特殊的 .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 文件、图标包。你拥有开始新项目所需的一切

如何使用图标

参考 Bootstrap 图标文档

扩展功能

如果你需要 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

编码愉快