first commit
This commit is contained in:
29
vendor/yiisoft/yii2-bootstrap5/docs/guide-zh-CN/README.md
vendored
Normal file
29
vendor/yiisoft/yii2-bootstrap5/docs/guide-zh-CN/README.md
vendored
Normal file
@ -0,0 +1,29 @@
|
||||
基于Yii 2 的 Twitter Bootstrap 扩展
|
||||
=====================================
|
||||
|
||||
扩展包括对 [Bootstrap 5](https://getbootstrap.com/) 标记和组件框架的支持
|
||||
(也称为“Twitter Bootstrap”)。 Bootstrap是一个优秀的,响应式框架,可以大大加快
|
||||
客户端的开发过程。
|
||||
|
||||
Bootstrap的核心由两部分组成:
|
||||
|
||||
- 基础CSS样式,如栅格化布局,排版,帮助类和响应式工具。
|
||||
- 开箱即用的组件,如表单,菜单,分页,模态框,标签等。
|
||||
|
||||
起步
|
||||
---------------
|
||||
|
||||
* [安装](installation.md)
|
||||
* [基本用法](basic-usage.md)
|
||||
|
||||
使用
|
||||
-----
|
||||
|
||||
* [Yii 小部件](usage-widgets.md)
|
||||
* [Html 助手](helper-html.md)
|
||||
* [Asset Bundles(资源包)](asset-bundles.md)
|
||||
|
||||
其他
|
||||
-----------------
|
||||
|
||||
* [直接使用Bootstrap的.sass文件](topics-sass.md)
|
||||
14
vendor/yiisoft/yii2-bootstrap5/docs/guide-zh-CN/asset-bundles.md
vendored
Normal file
14
vendor/yiisoft/yii2-bootstrap5/docs/guide-zh-CN/asset-bundles.md
vendored
Normal file
@ -0,0 +1,14 @@
|
||||
资源包
|
||||
=============
|
||||
|
||||
Bootstrap是一个复杂的前端解决方案,其中包括 CSS , JavaScript ,字体等。
|
||||
为了灵活的控制 Bootstrap 组件,此扩展提供了多个资源包。
|
||||
如下:
|
||||
|
||||
- [[yii\bootstrap5\BootstrapAsset|BootstrapAsset]] - 只包含主要的 CSS 文件.
|
||||
- [[yii\bootstrap5\BootstrapPluginAsset|BootstrapPluginAsset]] - 包含 javascript 文件, 依赖于 [[yii\bootstrap5\BootstrapAsset]] .
|
||||
|
||||
特定的应用可能需要加载不同的资源包,(或者资源包组合).
|
||||
如果只需要 CSS 文件, 引入 [[yii\bootstrap5\BootstrapAsset]] 即可. 但是, 如果需要使用 Bootstrap 的 JavaScript, 则需要引入 [[yii\bootstrap5\BootstrapPluginAsset]].
|
||||
|
||||
> 提示:大多数小部件会自动注册到 [[yii\bootstrap5\BootstrapPluginAsset]] 。
|
||||
13
vendor/yiisoft/yii2-bootstrap5/docs/guide-zh-CN/basic-usage.md
vendored
Normal file
13
vendor/yiisoft/yii2-bootstrap5/docs/guide-zh-CN/basic-usage.md
vendored
Normal file
@ -0,0 +1,13 @@
|
||||
使用
|
||||
===========
|
||||
|
||||
Yii不会将 bootstrap 合并到PHP代码中,因为HTML本身是非常简单的。猛击 [bootstrap 文档页](https://getbootstrap.com/docs/) 查看如何使用 bootstrap. 但是 Yii 还是提供了在框架中更为方便的管理和使用 bootstrap的方式,在 `@app/assets` 路径下的 `AppAsset.php` 文件中,添加如下代码即可:
|
||||
|
||||
```php
|
||||
public $depends = [
|
||||
'yii\web\YiiAsset',
|
||||
'yii\bootstrap5\BootstrapAsset', // this line
|
||||
];
|
||||
```
|
||||
|
||||
通过 Yii 的资源管理器(asset manager)引入 bootstrap ,可最小化的引入 bootstrap 并在需要时合并自定义资源文件一起使用。
|
||||
26
vendor/yiisoft/yii2-bootstrap5/docs/guide-zh-CN/helper-html.md
vendored
Normal file
26
vendor/yiisoft/yii2-bootstrap5/docs/guide-zh-CN/helper-html.md
vendored
Normal file
@ -0,0 +1,26 @@
|
||||
Html 助手
|
||||
===========
|
||||
|
||||
Bootstrap 引入了许多一致的 HTML 结构和骨架,允许创建不同的视觉效果。
|
||||
只有最复杂的部分由此扩展提供的小部件覆盖。 其余应使用直接 HTML 手动组合。
|
||||
但是, 有些特殊的 Bootstrap 标签被 [[\yii\bootstrap5\Html]] 重载.
|
||||
[[\yii\bootstrap5\Html]] 是基于 Bootstrap 的 [[\yii\helpers\Html]] 增强版.
|
||||
它提供了很多实用的方法,例如:
|
||||
|
||||
- `staticControl()` - 生成表单静态组件 "[static controls](https://getbootstrap.com/docs/5.1/forms/form-control/#readonly-plain-text)"
|
||||
|
||||
[[\yii\bootstrap5\Html]] 继承了 [[\yii\helpers\Html]] 的所有功能,所以不需要在视图文件中同时引入这两个文件,如果需要,仅使用 [[\yii\bootstrap5\Html]] 即可.
|
||||
例如:
|
||||
|
||||
```php
|
||||
<?php
|
||||
use yii\bootstrap5\Html;
|
||||
?>
|
||||
<?= Button::widget([
|
||||
'label' => Html::encode('Save & apply'),
|
||||
'encodeLabel' => false,
|
||||
'options' => ['class' => 'btn-primary'],
|
||||
]); ?>
|
||||
```
|
||||
|
||||
> 注意: 不要混淆 [[\yii\bootstrap5\Html]] 和 [[\yii\helpers\Html]], 一定注意你在视图中引入和使用的类.
|
||||
18
vendor/yiisoft/yii2-bootstrap5/docs/guide-zh-CN/installation.md
vendored
Normal file
18
vendor/yiisoft/yii2-bootstrap5/docs/guide-zh-CN/installation.md
vendored
Normal file
@ -0,0 +1,18 @@
|
||||
安装
|
||||
============
|
||||
|
||||
## 获取 Composer 包
|
||||
|
||||
安装此扩展的首选方式是通过 [composer](https://getcomposer.org/download/).
|
||||
|
||||
直接运行
|
||||
|
||||
```
|
||||
php composer.phar require --prefer-dist yiisoft/yii2-bootstrap5
|
||||
```
|
||||
|
||||
或者在项目目录的 `composer.json` 文件中添加如下代码
|
||||
|
||||
```
|
||||
"yiisoft/yii2-bootstrap": "~1.0.0"
|
||||
```
|
||||
17
vendor/yiisoft/yii2-bootstrap5/docs/guide-zh-CN/topics-sass.md
vendored
Normal file
17
vendor/yiisoft/yii2-bootstrap5/docs/guide-zh-CN/topics-sass.md
vendored
Normal file
@ -0,0 +1,17 @@
|
||||
直接使用Bootstrap的.sass文件
|
||||
=======================================
|
||||
|
||||
如果引入 [直接使用Bootstrap的.sass文件](https://getbootstrap.com/getting-started/#customizing)
|
||||
则需要禁用原始加载的 css 文件.
|
||||
通过设置 [[yii\bootstrap5\BootstrapAsset|BootstrapAsset]] 的 css 属性为空即可.
|
||||
为此,需要配置 `assetManager` [应用组件](https://github.com/yiisoft/yii2/blob/master/docs/guide/structure-application-components.md) 为如下:
|
||||
|
||||
```php
|
||||
'assetManager' => [
|
||||
'bundles' => [
|
||||
'yii\bootstrap5\BootstrapAsset' => [
|
||||
'css' => [],
|
||||
]
|
||||
]
|
||||
]
|
||||
```
|
||||
58
vendor/yiisoft/yii2-bootstrap5/docs/guide-zh-CN/usage-widgets.md
vendored
Normal file
58
vendor/yiisoft/yii2-bootstrap5/docs/guide-zh-CN/usage-widgets.md
vendored
Normal file
@ -0,0 +1,58 @@
|
||||
Yii 小部件
|
||||
===========
|
||||
|
||||
大多数复杂的 bootstrap 组件被包装到 Yii 小部件中,以允许更强大的语法并与框架特性集成。 所有小部件都在命名空间 `\yii\bootstrap5` 下:
|
||||
|
||||
- [[yii\bootstrap5\Accordion|Accordion]]
|
||||
- [[yii\bootstrap5\ActiveField|ActiveField]]
|
||||
- [[yii\bootstrap5\ActiveForm|ActiveForm]]
|
||||
- [[yii\bootstrap5\Alert|Alert]]
|
||||
- [[yii\bootstrap5\Breadcrumbs|Breadcrumbs]]
|
||||
- [[yii\bootstrap5\Button|Button]]
|
||||
- [[yii\bootstrap5\ButtonDropdown|ButtonDropdown]]
|
||||
- [[yii\bootstrap5\ButtonGroup|ButtonGroup]]
|
||||
- [[yii\bootstrap5\ButtonToolbar|ButtonToolbar]]
|
||||
- [[yii\bootstrap5\Carousel|Carousel]]
|
||||
- [[yii\bootstrap5\Dropdown|Dropdown]]
|
||||
- [[yii\bootstrap5\LinkPager|LinkPager]]
|
||||
- [[yii\bootstrap5\Modal|Modal]]
|
||||
- [[yii\bootstrap5\Nav|Nav]]
|
||||
- [[yii\bootstrap5\NavBar|NavBar]]
|
||||
- [[yii\bootstrap5\Offcanvas|Offcanvas]]
|
||||
- [[yii\bootstrap5\Popover|Popover]]
|
||||
- [[yii\bootstrap5\Progress|Progress]]
|
||||
- [[yii\bootstrap5\Tabs|Tabs]]
|
||||
- [[yii\bootstrap5\Toast|Toast]]
|
||||
- [[yii\bootstrap5\ToggleButtonGroup|ToggleButtonGroup]]
|
||||
|
||||
## 自定义小部件CSS类 <span id="customizing-css-classes"></span>
|
||||
|
||||
这些小部件可以快速构建基于 bootstrap CSS 样式的 bootstrap 组件,并直接生成 HTML 代码。
|
||||
特定组件的默认样式是自动添加的,也可以通过修改部件属性添加自定义样式类。
|
||||
|
||||
例如, 使用 [[yii\bootstrap5\Button::options]] 创建按钮。
|
||||
按钮中的 `btn` 样式将会被自动添加。只要再添加自己所需的按钮样式即可:
|
||||
|
||||
```php
|
||||
echo Button::widget([
|
||||
'label' => 'Action',
|
||||
'options' => ['class' => 'btn-primary'], // produces class "btn btn-primary"
|
||||
]);
|
||||
```
|
||||
|
||||
但是,有的时候需要将默认样式替换为自定义样式。
|
||||
例如, 小部件 [[yii\bootstrap5\ButtonGroup]] 默认使用 'btn-group' 类作为 div 容器的默认样式,但是我们希望使用 'btn-group-vertical' 作为默认样式以实现按钮组的垂直居中。
|
||||
直接在 'class' 选项中添加 'btn-group-vertical' 是替换不了 'btn-group' 的。
|
||||
为了重载组件的默认样式,需要在 'class' 选项中的 'widget' 选项中定义即可:
|
||||
|
||||
```php
|
||||
echo ButtonGroup::widget([
|
||||
'options' => [
|
||||
'class' => ['widget' => 'btn-group-vertical'] // replaces 'btn-group' with 'btn-group-vertical'
|
||||
],
|
||||
'buttons' => [
|
||||
['label' => 'A'],
|
||||
['label' => 'B'],
|
||||
]
|
||||
]);
|
||||
```
|
||||
Reference in New Issue
Block a user