패키지, 저장소 및 앱 카테고리 검색

패키지 상세v4.0.0+4

bootjack

Bootjack은 Twitter Bootstrap 3.0.x를 Dart로 이식한 것입니다.

Web
30일 다운로드
316
좋아요
0
Pub 점수
115

패키지 설치

flutter pub add bootjack

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

Bootjack은 반응형 UI 컴포넌트와 스타일링을 Flutter 웹 애플리케이션에 제공하기 위해 설계된 Twitter Bootstrap 3.0.x의 Dart 구현체입니다. 개발자들이 Flutter 웹 환경 내에서 익숙한 Bootstrap 클래스와 레이아웃을 직접 사용할 수 있게 해주며, 일관성 있고 모바일 우선 디자인을 보장합니다. 그리드 시스템, 버튼, 폼, 모달 등과 같은 기능을 지원하며, 검증된 Bootstrap 패턴을 활용해 반응형 웹 인터페이스를 쉽게 구축할 수 있습니다. 이 패키지는 quire.io에서 유지보수되며 커뮤니티 기여를 위한 GitHub에 호스팅되어 있습니다.

사용 사례

  • 반응형 웹 대시보드 구축
  • Bootstrap 디자인 패턴을 사용하여 일관된 UI 만들기
  • 사전 스타일링된 컴포넌트를 사용한 빠른 프로토타이핑
  • 기존의 Bootstrap 프로젝트를 Flutter Web으로 마이그레이션하기
  • 모바일 우선 레이아웃 구현

주요 기능

  • 완전한 부트스트랩 3.0.x 컴포넌트 호환성
  • Flutter Web과의 Dart 네이티브 통합
  • 반응형 그리드 시스템
  • 사전 스타일링된 UI 요소(버튼, 폼, 모달)
  • 경량이고 통합하기 쉬움

적합한 대상

  • Bootstrap에 익숙한 Flutter 웹 개발자
  • 순수 HTML/Bootstrap에서 Flutter로 이전하는 팀
  • 일관된 스타일링과 함께 빠른 UI 개발이 필요한 프로젝트

고려 사항

  • Flutter Web 플랫폼에 제한됨
  • Bootstrap 3.0.x 이후 활성 업데이트 없음
  • 현대적인 디자인 트렌드를 위해 사용자 지정 오버라이드가 필요할 수 있습니다
  • 웹이 아닌 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 개

소스 저장소

이 패키지를 사용하는 프로젝트

아직 데이터가 없습니다.