パッケージ、リポジトリ、アプリカテゴリを検索

パッケージ詳細v4.0.0+4

bootjack

Bootjack は、Twitter Bootstrap 3.0.x を Dart に移植したものです。

Web
30日間ダウンロード
316
いいね数
0
Pub ポイント
115

パッケージをインストール

flutter pub add bootjack

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

Bootjack は、Flutter Web アプリケーションに応答性のある UI コンポーネントとスタイリングをもたらすために設計された、Twitter Bootstrap 3.0.x の Dart 実装です。開発者が Flutter の Web 環境内でなじみのある Bootstrap クラスやレイアウトを直接利用できるようにし、一貫性がありモバイルファーストのデザインを保証します。グリッドシステム、ボタン、フォーム、モーダルなどに対応しており、検証済みの Bootstrap パターンを使用して応答性のある Web インターフェースを簡単に構築できます。このパッケージは quire.io によってメンテナンスされており、コミュニティによる貢献のために GitHub でホストされています。

用途

  • 応答性のあるWebダッシュボードの構築
  • Bootstrap デザインパターンを使用して一貫した UI を作成する
  • 事前スタイル化されたコンポーネントによる迅速なプロトタイピング
  • 既存のBootstrapプロジェクトをFlutter Webに移行する
  • モバイルファーストレイアウトの実装

主な機能

  • 完全な Bootstrap 3.0.x コンポーネント互換性
  • Flutter Web との Dart ネイティブ統合
  • レスポンシブグリッドシステム
  • 事前スタイル化された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 件

ソースリポジトリ

このパッケージを使用しているプロジェクト

データはまだありません。