3.5 KiB
Bootstrap ウィジェット
Note|注意: この節はまだ執筆中です。
Yii は、追加設定なしで、マークアップとコンポーネントのフレームワーク Bootstrap 3 ("Twitter Bootstrap" としても知られています) をサポートしています。 Bootstrap は優れた、レスポンシブなフレームワークであり、クライアント側の開発プロセスを大いにスピードアップすることが出来るものです。
Bootstrap のコアは二つの部分によって表されます。
- CSS の基礎。例えば、グリッドのレイアウトシステム、タイポグラフィ、ヘルパクラス、レスポンシブユーティリティなど。
- そのまま使えるコンポーネント。フォーム、メニュー、ページネーション、モーダルボックス、タブなど。
基礎
Yii は bootstrap の基礎を PHP コードでラップすることをしていません。
なぜなら、この場合の HTML コードがそれ自体として非常にシンプルだからです。
bootstrap の基礎を使用することに関する詳細は、bootstrap ドキュメントウェブサイト で見ることが出来ます。
それでも、Yii はあなたのページに bootstrap のアセットをインクルードするための便利な方法を提供しています。
@app/assets
ディレクトリに配置されている AppAsset.php
に一行を加えるだけで大丈夫です。
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset', // この行です
];
Yii のアセットマネージャによって bootstrap を使うと、bootstrap のリソースを最小化したり、必要な場合にはあなた自身のリソースと結合したりすることが出来ます。
Yii ウィジェット
複雑な bootstrap コンポーネントのほとんどは Yii ウィジェットでラップされて、より堅牢な構文を与えられ、フレームワークの諸機能と統合されています。
全てのウィジェットは \yii\bootstrap
名前空間に属します。
- yii\bootstrap\ActiveForm
- yii\bootstrap\Alert
- yii\bootstrap\Button
- yii\bootstrap\ButtonDropdown
- yii\bootstrap\ButtonGroup
- yii\bootstrap\Carousel
- yii\bootstrap\Collapse
- yii\bootstrap\Dropdown
- yii\bootstrap\Modal
- yii\bootstrap\Nav
- yii\bootstrap\NavBar
- yii\bootstrap\Progress
- yii\bootstrap\Tabs
Bootstrap の .less ファイルを直接に使用する
あなたが Bootstrap CSS をあなたの less ファイルに直接含める ことを望む場合は、オリジナルの CSS ファイルがロードされないように無効化する必要があるでしょう。
yii\bootstrap\BootstrapAsset の css
プロパティを空に設定することによって、そうすることが出来ます。
そのためには、assetManager
アプリケーションコンポーネント を以下のように構成します。
'assetManager' => [
'bundles' => [
'yii\bootstrap\BootstrapAsset' => [
'css' => [],
]
]
]