Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Y
yii2bootstrap
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
夏彬
yii2bootstrap
Commits
bd2427e1
Commit
bd2427e1
authored
Dec 19, 2016
by
Ricky
Committed by
Alexander Makarov
Dec 19, 2016
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
translate guide to chinese simplified (#170) [skip ci]
parent
28b8bbc7
Changes
7
Hide whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
170 additions
and
0 deletions
+170
-0
README.md
docs/guide-zh-CN/README.md
+29
-0
asset-bundles.md
docs/guide-zh-CN/asset-bundles.md
+15
-0
basic-usage.md
docs/guide-zh-CN/basic-usage.md
+13
-0
helper-html.md
docs/guide-zh-CN/helper-html.md
+27
-0
installation.md
docs/guide-zh-CN/installation.md
+18
-0
topics-less.md
docs/guide-zh-CN/topics-less.md
+17
-0
usage-widgets.md
docs/guide-zh-CN/usage-widgets.md
+51
-0
No files found.
docs/guide-zh-CN/README.md
0 → 100644
View file @
bd2427e1
基于Yii 2 的 Twitter Bootstrap 扩展
=====================================
扩展包括对
[
Bootstrap 3
](
http://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的.less文件
](
topics-less.md
)
\ No newline at end of file
docs/guide-zh-CN/asset-bundles.md
0 → 100644
View file @
bd2427e1
资源包
=============
Bootstrap是一个复杂的前端解决方案,其中包括 CSS , JavaScript ,字体等。
为了灵活的控制 Bootstrap 组件,此扩展提供了多个资源包。
如下:
-
[
[yii\bootstrap\BootstrapAsset|BootstrapAsset
]
] - 只包含主要的 CSS 文件.
-
[
[yii\bootstrap\BootstrapPluginAsset|BootstrapPluginAsset
]
] - 包含 javascript 文件, 依赖于
[
[yii\bootstrap\BootstrapAsset
]
] .
-
[
[yii\bootstrap\BootstrapThemeAsset|BootstrapThemeAsset
]
] - 包含 Bootstrap 默认样式 CSS, 依赖于
[
[yii\bootstrap\BootstrapAsset
]
].
特定的应用可能需要加载不同的资源包,(或者资源包组合).
如果只需要 CSS 文件, 引入
[
[yii\bootstrap\BootstrapAsset
]
] 即可. 但是, 如果需要使用 Bootstrap 的 JavaScript, 则需要引入
[
[yii\bootstrap\BootstrapPluginAsset
]
].
> 提示:大多数小部件会自动注册到 [[yii\bootstrap\BootstrapPluginAsset]] 。
\ No newline at end of file
docs/guide-zh-CN/basic-usage.md
0 → 100644
View file @
bd2427e1
使用
===========
Yii不会将 bootstrap 合并到PHP代码中,因为HTML本身是非常简单的。猛击
[
bootstrap 文档页
](
http://getbootstrap.com/css/
)
查看如何使用 bootstrap. 但是 Yii 还是提供了在框架中更为方便的管理和使用 bootstrap的方式,在
`@app/assets`
路径下的
`AppAsset.php`
文件中,添加如下代码即可:
```
php
public
$depends
=
[
'yii\web\YiiAsset'
,
'yii\bootstrap\BootstrapAsset'
,
// this line
];
```
通过 Yii 的资源管理器(asset manager)引入 bootstrap ,可最小化的引入 bootstrap 并在需要时合并自定义资源文件一起使用。
\ No newline at end of file
docs/guide-zh-CN/helper-html.md
0 → 100644
View file @
bd2427e1
Html 助手
===========
Bootstrap 引入了许多一致的 HTML 结构和骨架,允许创建不同的视觉效果。
只有最复杂的部分由此扩展提供的小部件覆盖。 其余应使用直接 HTML 手动组合。
但是, 有些特殊的 Bootstrap 标签被
[
[\yii\bootstrap\Html
]
] 重载.
[
[\yii\bootstrap\Html
]
] 是基于 Bootstrap 的
[
[\yii\helpers\Html
]
] 增强版.
它提供了很多实用的方法,例如:
-
`icon()`
- 生成Glyphicon图标
-
`staticControl()`
- 生成表单静态组件 "static controls"
[
[\yii\bootstrap\Html
]
] 继承了
[
[\yii\helpers\Html
]
] 的所有功能,所以不需要在视图文件中同时引入这两个文件,如果需要,仅使用
[
[\yii\bootstrap\Html
]
] 即可.
例如:
```
php
<?php
use
yii\bootstrap\Html
;
?>
<?=
Button
::
widget
([
'label'
=>
Html
::
icon
(
'approve'
)
.
Html
::
encode
(
'Save & apply'
),
'encodeLabel'
=>
false
,
'options'
=>
[
'class'
=>
'btn-primary'
],
]);
?>
```
> 注意: 不要混淆 [[\yii\bootstrap\Html]] 和 [[\yii\helpers\Html]], 一定注意你在视图中引入和使用的类.
\ No newline at end of file
docs/guide-zh-CN/installation.md
0 → 100644
View file @
bd2427e1
安装
============
## 获取 Composer 包
安装此扩展的首选方式是通过
[
composer
](
http://getcomposer.org/download/
)
.
直接运行
```
php composer.phar require --prefer-dist yiisoft/yii2-bootstrap
```
或者在项目目录的
`composer.json`
文件中添加如下代码
```
"yiisoft/yii2-bootstrap": "~2.0.0"
```
docs/guide-zh-CN/topics-less.md
0 → 100644
View file @
bd2427e1
直接使用Bootstrap的.less文件
=======================================
如果引入
[
直接使用Bootstrap的.less文件
](
http://getbootstrap.com/getting-started/#customizing
)
则需要禁用原始加载的 css 文件.
通过设置
[
[yii\bootstrap\BootstrapAsset|BootstrapAsset
]
] 的 css 属性为空即可.
为此,需要配置
`assetManager`
[
应用组件
](
https://github.com/yiisoft/yii2/blob/master/docs/guide/structure-application-components.md
)
为如下:
```
php
'assetManager'
=>
[
'bundles'
=>
[
'yii\bootstrap\BootstrapAsset'
=>
[
'css'
=>
[],
]
]
]
```
\ No newline at end of file
docs/guide-zh-CN/usage-widgets.md
0 → 100644
View file @
bd2427e1
Yii 小部件
===========
大多数复杂的 bootstrap 组件被包装到 Yii 小部件中,以允许更强大的语法并与框架特性集成。 所有小部件都在命名空间
`\yii\bootstrap`
下:
-
[
[yii\bootstrap\ActiveForm|ActiveForm
]
]
-
[
[yii\bootstrap\Alert|Alert
]
]
-
[
[yii\bootstrap\Button|Button
]
]
-
[
[yii\bootstrap\ButtonDropdown|ButtonDropdown
]
]
-
[
[yii\bootstrap\ButtonGroup|ButtonGroup
]
]
-
[
[yii\bootstrap\Carousel|Carousel
]
]
-
[
[yii\bootstrap\Collapse|Collapse
]
]
-
[
[yii\bootstrap\Dropdown|Dropdown
]
]
-
[
[yii\bootstrap\Modal|Modal
]
]
-
[
[yii\bootstrap\Nav|Nav
]
]
-
[
[yii\bootstrap\NavBar|NavBar
]
]
-
[
[yii\bootstrap\Progress|Progress
]
]
-
[
[yii\bootstrap\Tabs|Tabs
]
]
## 自定义小部件CSS类 <span id="customizing-css-classes"></span>
这些小部件可以快速构建基于 boostrap CSS 样式的 bootstrap 组件,并直接生成 HTML 代码。
特定组件的默认样式是自动添加的,也可以通过修改部件属性添加自定义样式类。
例如, 使用
[
[yii\bootstrap\Button::options
]
] 创建按钮。
按钮中的
`btn`
样式将会被自动添加。只要再添加自己所需的按钮样式即可:
```
php
echo
Button
::
widget
([
'label'
=>
'Action'
,
'options'
=>
[
'class'
=>
'btn-primary'
],
// produces class "btn btn-primary"
]);
```
但是,有的时候需要将默认样式替换为自定义样式。
例如, 小部件
[
[yii\bootstrap\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'
],
]
]);
```
\ No newline at end of file
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment