搜索插件、代码仓与 APP 分类

插件详情v4.0.0+4

bootjack

Bootjack 是 Twitter Bootstrap 3.0.x 的 Dart 版本移植。

Web
近 30 天下载
316
喜欢数
0
Pub 分数
115

安装插件

flutter pub add bootjack

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

Bootjack 是 Twitter Bootstrap 3.0.x 的 Dart 实现,旨在为 Flutter Web 应用提供响应式 UI 组件和样式。它使开发者能够直接在 Flutter 的 Web 环境中使用熟悉的 Bootstrap 类和布局,确保设计的一致性和移动端优先的特性。支持网格系统、按钮、表单、模态框等,Bootjack 简化了基于成熟 Bootstrap 模式的响应式 Web 界面开发。该包由 quire.io 维护,并托管在 GitHub 上,供社区贡献。

适合场景

  • 构建响应式网络仪表板
  • 使用 Bootstrap 设计模式创建一致的 UI
  • 使用预设样式的组件进行快速原型设计
  • 将现有的 Bootstrap 项目迁移到 Flutter Web
  • 实施移动优先布局

主要特点

  • 完整的 Bootstrap 3.0.x 组件兼容性
  • Dart 原生集成 Flutter Web
  • 响应式网格系统
  • 预设样式的UI元素(按钮、表单、模态框)
  • 轻量且易于集成

适合对象

  • 寻求 Bootstrap 熟悉度的 Flutter Web 开发人员
  • 从纯 HTML/Bootstrap 迁移到 Flutter 的团队
  • 需要快速进行 UI 开发并保持一致样式的项目

使用建议

  • 仅限 Flutter Web 平台
  • 除了 Bootstrap 3.0.x 之外,没有活跃的更新
  • 可能需要自定义覆盖以适应现代设计趋势
  • 不适用于非Web Flutter目标

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

Bootjack

Bootjack is a porting of Twitter Bootstrap 3.0.x in Dart.

Install from Dart Pub Repository

Include the following in your pubspec.yaml:

dependencies:
  bootjack: any

Then run the Pub Package Manager in Dart Editor (Tool > Pub Install). If you are using a different editor, run the command (comes with the Dart SDK):

pub install

Usage

First of all in your HTML file, you need to include the CSS resource:

<head>
	...
	<link rel="stylesheet" href="packages/bootjack/css/bootstrap.min.css">
</head>

Most of the functions in Bootjack components are automatic -- you only need to give the right CSS class on DOM elements and call a global function to register.

For example, a Dropdown button component is prepared by giving the following HTML snippet:

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
	Button
	<span class="caret"></span>
</button>
<ul class="dropdown-menu">
	<li><a href="#">Menu Item #1</a></li>
	<li><a href="#">Menu Item #2</a></li>
	<li><a href="#">Menu Item #3</a></li>
</ul>

With the following global registration in Dart:

void main() {
	Dropdown.use();
}

That's right. All you need to do in Dart is to tell Bootjack you are using Dropdown components. You can also progammatically access and manipulate the Dropdown:

Dropdown dd = Dropdown.wire(element);
dd.toggle();

Check more examples and the API reference for more features. Also, you can read the reference of Bootstrap.

Notes to Contributors

Test and Debug

You are welcome to submit bugs and feature requests. Or even better if you can fix or implement them!

Fork Bootjack

If you'd like to contribute back to the core, you can fork this repository and send us a pull request, when it is ready.

Please be aware that one of Rikulo's design goals is to keep the sphere of API as neat and consistency as possible. Strong enhancement always demands greater consensus.

If you are new to Git or GitHub, please read this guide first.

Who Uses

  • Quire - a simple, collaborative, multi-level task management tool.
  • Keikai - a sophisticated spreadsheet for big data

所属分类

依赖

依赖清单 3 项

源码仓库

使用此插件的项目

暂无相关数据。