README

Bootstrap CSS 库集成到 Laravel 组件中。目标是让每个 Bootstrap 的关键功能都能映射到一个 Laravel 组件，以便于项目和一致性集成。

这些组件中完成的所有操作都可以使用纯 HTML 在 blade 中完成，但这些组件允许在不使用一系列自定义 blade 部件的情况下更好地抽象逻辑。

用法

安装

包含此库

~ composer require stonehilt/bootstrap

在您的布局中添加 CSS 和 JavaScript

<x-bootstrap::css />
<x-bootstrap::javascript />

大多数功能都通过 StoneHiltBootstrapServiceProvider 自动注入，尽管在某些情况下可能需要替换/编辑 ViewServiceProvider。简单的方法是在 app 配置中包含 StoneHilt\Bootstrap\Providers\ViewServiceProvider::class 而不是 Illuminate\View\ViewServiceProvider::class（或者如果已经替换了 Illuminate 类，则扩展它）。

自定义

每个组件背后的所有视图都可以发布到应用程序的资源目录中，以进行项目定制。

~ php artisan vendor:publish --tag=bootstrap-views

要使用本地（即非 CDN）资源，需要发布和更新配置。如果使用基于 composer 的源文件，还需要发布资源本身。

~ php artisan vendor:publish --tag=bootstrap-config
~ php artisan vendor:publish --tag=bootstrap-assets

除非出于安全或性能原因，否则不建议使用本地资源，并简单地使用默认设置来包含 CDN 提供的副本。

要更改使用的 Bootstrap 版本，需要发布配置。

可用组件

示例

查看 tests/Feature/views 以获取更多关于各种参数和布局方法的用法示例。

Bootstrap 组件

手风琴

https://bootstrap.ac.cn/docs/5.3/components/accordion/

<x-bootstrap::component.accordion id="test" ref="something">
    <x-bootstrap::component.accordion-item header="Accordion Text 1">
        This is the body of block 1
    </x-bootstrap::component.accordion-item>
    <x-bootstrap::component.accordion-item header="Accordion Text 2">
        This is the body of block 2
    </x-bootstrap::component.accordion-item>
</x-bootstrap::component.accordion>

徽章

https://bootstrap.ac.cn/docs/5.3/components/badge/

<div class="btn btn-primary position-relative">
    Example heading
    <x-bootstrap::component.badge type="danger">Danger</x-bootstrap::component.badge>
</div>
<div class="btn btn-primary position-relative">
    Example heading
    <x-bootstrap::component.badge type="secondary">Secondary</x-bootstrap::component.badge>
</div>
<div class="btn btn-primary position-relative">
    Example heading
    <x-bootstrap::component.badge type="danger" position="bottom-start">Bottom Start</x-bootstrap::component.badge>
</div>
<div class="btn btn-primary position-relative">
    Example heading
    <x-bootstrap::component.badge type="danger" position="bottom-end">Bottom End</x-bootstrap::component.badge>
</div>

面包屑

https://bootstrap.ac.cn/docs/5.3/components/breadcrumb/

<x-bootstrap::component.breadcrumb :items="['/' => 'Home', 'engineering.dashboard' => 'Engineering']" current="Bootstrap - Breadcrumb" divider="|"/>

下拉菜单

https://bootstrap.ac.cn/docs/5.3/components/dropdowns/

<x-bootstrap::component.dropdown label="Demo Dropdown 1">
    <x-bootstrap::component.dropdown.item>Item 1</x-bootstrap::component.dropdown.item>
    <x-bootstrap::component.dropdown.item>Item 2</x-bootstrap::component.dropdown.item>
    <x-bootstrap::component.dropdown.divider />
    <x-bootstrap::component.dropdown.item href="#">Item 3</x-bootstrap::component.dropdown.item>
</x-bootstrap::component.dropdown>

使用插槽的项目

<x-bootstrap::component.dropdown label="Demo Dropdown 2">
    <x-slot:items><li><a class="dropdown-item" href="#">Item A</a></x-slot:items>
    <x-slot:items><li><a class="dropdown-item" href="#">Item B</a></x-slot:items>
</x-bootstrap::component.dropdown>

导航 & 选项卡

https://bootstrap.ac.cn/docs/5.3/components/navs-tabs/ 基于 "nav" 的简单导航

<x-bootstrap::component.nav>
    <x-bootstrap::component.nav.item>Item 1</x-bootstrap::component.nav.item>
    <x-bootstrap::component.nav.item active="true">Item 2</x-bootstrap::component.nav.item>
    <x-bootstrap::component.nav.item href="#" disabled="true">Item 3</x-bootstrap::component.nav.item>
    <x-bootstrap::component.nav.item href="#">Item 3</x-bootstrap::component.nav.item>
</x-bootstrap::component.nav>

选项卡样式导航

<x-bootstrap::component.nav display="tabs">
    <x-bootstrap::component.nav.item>Item 1</x-bootstrap::component.nav.item>
    <x-bootstrap::component.nav.item active="true">Item 2</x-bootstrap::component.nav.item>
    <x-bootstrap::component.nav.item href="#" disabled="true">Item 3</x-bootstrap::component.nav.item>
    <x-bootstrap::component.nav.item href="#">Item 3</x-bootstrap::component.nav.item>
</x-bootstrap::component.nav>

药丸样式导航

<x-bootstrap::component.nav display="tabs">
    <x-bootstrap::component.nav.item>Item 1</x-bootstrap::component.nav.item>
    <x-bootstrap::component.nav.item active="true">Item 2</x-bootstrap::component.nav.item>
    <x-bootstrap::component.nav.item href="#" disabled="true">Item 3</x-bootstrap::component.nav.item>
    <x-bootstrap::component.nav.item href="#">Item 3</x-bootstrap::component.nav.item>
</x-bootstrap::component.nav>

下拉菜单作为项目

<x-bootstrap::component.nav display="pills" type="ol">
    <x-bootstrap::component.nav.item active="true">Dropdown Alpha</x-bootstrap::component.nav.item>
    <x-bootstrap::component.nav.dropdown label="Dropdown">
        <x-bootstrap::component.dropdown.item>Drop Item 1</x-bootstrap::component.dropdown.item>
        <x-bootstrap::component.dropdown.item>Drop Item 2</x-bootstrap::component.dropdown.item>
        <x-bootstrap::component.dropdown.divider />
        <x-bootstrap::component.dropdown.item href="#">Drop Item 3</x-bootstrap::component.dropdown.item>
    </x-bootstrap::component.nav.dropdown>
    <x-bootstrap::component.nav.item href="#" disabled="true">Dropdown Delta</x-bootstrap::component.nav.item>
    <x-bootstrap::component.nav.item href="#">Dropdown Gamma</x-bootstrap::component.nav.item>
</x-bootstrap::component.nav>

进度条

https://bootstrap.ac.cn/docs/5.3/components/progress/

<x-bootstrap::component.progress value="25"/>

表单

表单

使用方法和操作。

<x-bootstrap::form method="POST" action="/post/2" class="special-form">
    Component Form Controls 2
</x-bootstrap::form>

使用命名路由

<x-bootstrap::form :route="['post.update', ['post' => 1]]" id="the-id">
    Component Form Controls 2
</x-bootstrap::form>

通用

标准网格

https://bootstrap.ac.cn/docs/5.3/layout/grid/

<x-bootstrap::row>
    <x-bootstrap::col width="3">
        First Column
    </x-bootstrap::col>
    <x-bootstrap::col width="3">
        Middle Column
    </x-bootstrap::col>
    <x-bootstrap::col width="3">
        Last Column
    </x-bootstrap::col>
</x-bootstrap::row>