搜尋套件、儲存庫與 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 實作,專為將響應式 UI 元件與樣式帶入 Flutter web 應用而設計。它讓開發者能直接在 Flutter 的 web 環境中使用熟悉的 Bootstrap 類別與佈局,確保一致且以行動裝置為首的設計。支援網格系統、按鈕、表單、對話方塊等,Bootjack 簡化了使用經過驗證的 Bootstrap 模式來建構響應式 web 界面的過程。此套件由 quire.io 維護,並 hosted 在 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 項

原始碼儲存庫

使用此套件的專案

暫無相關資料。