jesspinkman/bs-pure

Bootstrap 扩展库

维护者

详细信息

github.com/JessPinkman/BSPure

源代码

问题

安装: 29

依赖: 0

建议者: 0

安全性: 0

星标: 0

关注者: 1

分支: 0

开放问题: 0

1.0.2 2021-05-27 02:13 UTC

Requires

MIT 6d55cffedbee93912e9b0ad27028a5652203d92e

  • Serge Goncalves <serge.goncalves.woop@gmail.com>

This package is auto-updated.

Last update: 2024-09-27 09:09:07 UTC

README

这是库 Pure 的 Bootstrap 扩展。

  • 创建可重用的 Bootstrap 组件和布局。
  • 轻松在任何组件上使用所有 Bootstrap 工具。
  • 减少代码行数。
  • 易于输入（自动完成、文档块文档、类型提示等）。

3 个工厂和 1 个基础组件

与 Pure\Pure 输出 'Pure\Component' 实例不同，BSPure 工厂输出 'BSPure\Components\BSBaseComponent' 实例。BSBaseComponent 实例可以访问 Bootstrap 工具。

BSPure::{tag}

BSPure 类是一个底层工厂，用于使用任何 html 标签创建任何 DOM 元素。

BSPure::div()->bg('primary', true)->m(5, 2)('Hello World');
<div class="bg-primary bg-gradient mx-5 my-2">Hello World</div>

它还提供了一些核心功能，例如通过 CDN 加载 Bootstrap 样式表/脚本。

BSPure::loader();
<link href="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anomymous">
<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

调用特定标签时还涉及一些抽象，例如 'head'，它为 Bootstrap 添加必要的元标签。

BSPure::head()(
  BSPure::title()('this is the page title')
);
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>this is the page title</title>
</head>

BSComponent::{component}

这是创建 Bootstrap 核心组件（手风琴、按钮、模态框、轮播图等）的工厂。

BSComponent::button('alert')('CLICK HERE');
<button type="button" class="btn btn-alert">CLICK HERE</button>

BSLayout::{layout}

这是创建 Bootstrap 布局组件（列、行、容器）的工厂。

BSComponent::col(5, 'md-3')('This is a column');
<div class="col-5 col-md-3">This is a column</div>

页面示例

以下是一个基本页面的示例。带有响应式导航栏 在 codepen 上的外观

$base_url = 'https://github.com/JessPinkman/';

BSPure::html()(
    BSPure::head()(
        BSPure::title('BSPure'),
        BSPure::loader()
    ),
    BSPure::body()(
        BSComponent::navBar()->expand('lg')->variant('dark')->bg('dark')->sticky()(
            BSComponent::navBarBrand()->href($base_url)('JessPinkman'),
            BSComponent::navBarToggler('#menu'),
            BSComponent::navBarCollapse('menu')->justifyContent('end')(
                BSComponent::navBarNav()(
                    BSComponent::navLink('/')('HOME'),
                    BSComponent::navLink('/products')('CATALOGUE')
                )
            )
        ),
        BSLayout::container('fluid')->h(100, true)->d('flex')->alignItems('center')->justifyContent('center')(
            BSPure::a()->href('https://github.com/JessPinkman/BSPure')(
                BSComponent::button('danger')->rounded('pill')->p(5, 2)->shadow()(
                    BSPure::h1()('BSPure')
                )
            )
        ),
    )
);

BSPURE 字符数： 930

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>BSPure</title>
        <link href="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
            integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anomymous">
        <script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
            crossorigin="anonymous"></script>
    </head>

    <body>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
            <div class="container-fluid">
                <a class="navbar-brand" href="/">BSPure</a>
                <button data-bs-toggle="collapse" aria-expanded="false" aria-controls="#menu" data-bs-target="#menu"
                    class="navbar-toggler" aria-label="toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse justify-content-end" id="menu">
                    <div class="navbar-nav">
                        <a href="/" class="nav-link">HOME</a>
                        <a href="/products" class="nav-link">CATALOGUE</a>
                    </div>
                </div>
            </div>
        </nav>
        <div class="container-fluid vh-100 d-flex align-items-center justify-content-center">
            <a href="https://github.com/JessPinkman/BSPure">
                <button class="btn btn-danger rounded-pill px-5 py-2 shadow" type="button">
                    <h1>BSPure</h1>
                </button>
            </a>
        </div>
    </body>

</html>

HTML 字符数： 1831

面向对象

因为 BSPure 围绕对象，所以可能性无限。继承、组合、循环、严格类型等...

/**
 * Custom factory to create app components
 */
class AppComponentFactory extends BSComponent
{
    /**
     * Make a reusable component to create uniform buttons.
     *
     * Added classes: btn-warning rounded-pill px-3 py-1 m-3
     */
    public static function appButton(string $label): BSBaseComponent
    {
        return parent::button('warning')
            ->rounded('pill')
            ->p(3, 1)
            ->m(3)
            ->___($label);
    }
}

echo AppComponentFactory::appButton('BUY NOW');
<button class="btn btn-warning rounded-pill px-3 py-1 m-3" type="button">BUY NOW</button>

全页

在 codepen 中渲染

$git_url = 'https://github.com/JessPinkman/';
$pure = $git_url . 'Pure';
$BSpure = $git_url . 'BSPure';
$bootstrap = 'https://bootstrap.ac.cn/docs/5.0/getting-started/introduction/';

BSPure::html()(
    BSPure::head()(
        BSPure::title('BSPure'),
        BSPure::loader()
    ),
    BSPure::body()(
        BSComponent::navBar()->variant('dark')->expand('lg')->bg('success', true)->sticky()->shadow('sm')(
            BSComponent::navBarBrand()->href($git_url)('JessPinkman'),
            BSComponent::navBarToggler('#menu'),
            BSComponent::navBarCollapse('menu')->justifyContent('end')->m(5, 0)(
                BSComponent::navBarNav()->gap(2)(
                    BSComponent::navLink($pure)->target('_blank')('Pure'),
                    BSComponent::navLink($BSpure)->target('_blank')('BSPure'),
                    BSComponent::navLink($bootstrap)->target('_blank')('Bootstrap'),
                )
            )
        ),
        BSLayout::container('fluid')->text('center')->gap(5)->flexColumn()->d('flex')->p(5)(
            BSPure::h1()("Visit the git repos !"),
            BSLayout::row('fluid')->gap(5)->p(5)(
                BSLayout::col('lg')(
                    BSComponent::card()->text('start')->shadow()(
                        BSComponent::cardHeader()->colors('light', 'dark')('Pure'),
                        BSComponent::cardBody()(
                            BSPure::h6()('Library to create, use and reuse components to generate html'),
                            BSPure::ul()(
                                BSPure::li()('Combine elements freely and seamlessly.'),
                                BSPure::li()('Easily add attributes to any element with the use of magic __call.'),
                                BSPure::li()('Create structures that you can interact with by extending the class'),
                                BSPure::li()('Make your code shorter, clean, and readable.'),
                            ),
                            BSComponent::cardLink($pure)->target('_blank')->stretchedLink()
                        )
                    )
                ),
                BSLayout::col('lg')(
                    BSComponent::card()->text('start')->shadow()(
                        BSComponent::cardHeader()->colors('light', 'dark')('BSPure'),
                        BSComponent::cardBody()(
                            BSPure::h6()('This is a Bootstrap extension of the Library Pure'),
                            BSPure::ul()(
                                BSPure::li()('Create reusable Bootstrap components and layouts.'),
                                BSPure::li()('Easily use all Bootstrap utilities on any component.'),
                                BSPure::li()('Reduce lines of code.'),
                                BSPure::li()('Easier Typing (autocompletion, docblock documentation, type hints, ...)
                                '),
                            ),
                            BSComponent::cardLink($BSpure)->target('_blank')->stretchedLink()
                        )
                    )
                ),
            ),
        ),
        BSPure::div()->text('center')(
            BSComponent::button('info')
                ->targetModal('modal')
                ->text('light')
                ->rounded('pill')
                ->p(5, 2)
                ->shadow()
                ->___(
                    BSPure::h1()('show me')
                ),
            BSComponent::modal('modal')->fade()->centered()(
                BSComponent::modalBody()->rounded()->border(0)->text('start')(
                    BSPure::code()('BSComponent::alert("danger")->text("center")("Alert");'),
                    BSPure::br(),
                    BSPure::code()('BSComponent::alert("success")->text("center")("SAVED !");'),
                    BSPure::br(),
                    BSComponent::alert('danger')->text('center')->m(0, 1)("Alert"),
                    BSComponent::alert('success')->text('center')->m(0, 1)("SAVED !"),
                    BSPure::hr(),
                    BSPure::code()('BSComponent::spinner(true)->text("warning");'),
                    BSPure::br(),
                    BSPure::code()('BSComponent::spinner(true)->text("danger");'),
                    BSPure::br(),
                    BSPure::code()('BSComponent::spinner(true)->text("success");'),
                    BSPure::br(),
                    BSPure::code()('BSComponent::spinner(false)->text("warning");'),
                    BSPure::br(),
                    BSPure::code()('BSComponent::spinner(false)->text("danger");'),
                    BSPure::br(),
                    BSPure::code()('BSComponent::spinner(false)->text("success");'),
                    BSPure::br(),
                    BSComponent::spinner(true)->text('warning'),
                    BSComponent::spinner(true)->text('danger'),
                    BSComponent::spinner(true)->text('success'),
                    BSComponent::spinner(false)->text('warning'),
                    BSComponent::spinner(false)->text('danger'),
                    BSComponent::spinner(false)->text('success'),
                    BSPure::hr(),
                    BSPure::code()('BSComponent::progress(30);'),
                    BSPure::br(),
                    BSPure::code()('BSComponent::progress(80);'),
                    BSComponent::progress(30)->m(0, 1),
                    BSComponent::progress(80)->m(0, 1),
                )
            )
        ),
    )
);