Bootstrap 🍃

此包将 Bootstrap 元素封装成方便的 Leaf 标签。

安装

将 Bootstrap 添加到包依赖项中 (在你的 Package.swift 文件中)

dependencies: [
    ...,
    .package(url: "https://github.com/nodes-vapor/bootstrap.git", from: "4.0.0-beta")
]

以及你的目标 (例如 "App")

targets: [
    ...
    .target(
        name: "App",
        dependencies: [... "Bootstrap" ...]
    ),
    ...
]

开始使用 🚀

首先在你的 configure.swift 中导入 Bootstrap 和 Leaf

import Bootstrap
import Leaf

添加 Leaf 标签

为了渲染 Bootstrap 元素，你需要添加 Bootstrap Leaf 标签

public func configure(_ config: inout Config, _ env: inout Environment, _ services: inout Services) throws {
    services.register { _ -> LeafTagConfig in
        var tags = LeafTagConfig.default()
        tags.useBootstrapLeafTags()
        return tags
    }
}

支持的标签

Alert (警告框)
Badge (徽章)
Button (按钮)
Button Group (按钮组)
Button Toolbar (按钮工具栏)
Input (输入框)
Breadcrumb (面包屑)
Textarea (文本域)

Alert (警告框)

#bs:alert() { alert text }

Badge (徽章)

#bs:badge(type?, classExtras?, attributes?) { badge text }

Button (按钮)

#bs:button(type?, classExtras?, attributes?) { btn text }

Button Group (按钮组)

#bs:buttonGroup(isVertical, classExtras?, Aria?) { }

#bs:buttonGroup(false, "btn-group-sm") {
    #bs:button() { First Option }
    #bs:button("danger") { Second Option}
    #bs:button() { Third Option}
}

Button Toolbar (按钮工具栏)

#bs:buttonToolbar(classExtras?, Aria?) { }

#bs:buttonToolbar() {
    #bs:button() { First Option }
    #bs:button("danger") { Second Option}
    #bs:button() { Third Option}
}

Input (输入框)

#bs:input(type?, classExtras?, attributes?)

Breadcrumb (面包屑)

#bs:breadcrumb(classExtras?, attributes?) {
  #bs:breadcrumbItem(classExtras?, attributes?) { <a href="/"> Home </a> }
  #bs:breadcrumbItem(classExtras?, attributes?) { Profile }
}

Textarea (文本域)

#bs:textArea(classExtras?, attributes?, value?)

🏆 贡献者

此包由 Vapor 团队在 Nodes 开发和维护。此项目的负责人是 Martin。

📄 许可证

此包是根据 MIT 许可证授权的开源软件

文档

阅读文档