qcubed/bootstrap

Twitter Bootstrap 的 QCubed 包装器。专门针对 QCubed v4 及以上版本。

安装: 107

依赖: 0

建议者: 1

安全: 0

星标: 0

关注者: 7

分支: 3

开放问题: 0

类型:qcubed-library

v4.0.1-alpha 2017-07-06 20:59 UTC

This package is not auto-updated.

Last update: 2024-09-15 04:26:06 UTC


README

QCubed 插件,简化 Twitter Bootstrap 的集成

安装

  1. 使用 Composer 安装插件和 Twitter Bootstrap。在您的主安装目录中,从命令行执行以下操作
	composer require qcubed/bootstrap
	composer require twbs/bootstrap
  1. 接下来,您可能想修改 bootstrap.cfg.php 文件中的某些设置。在 /project/includes/configuration/active 中查找该文件。

QCUBED_BOOTSTRAP_CSS

该文件的默认设置是

	define ('QCUBED_BOOTSTRAP_CSS', QCUBED_VENDOR_URL . '/twbs/bootstrap/dist/css/bootstrap.min.css');

如果您正在编译自己的自定义版本的 bootstrap css 文件,只需将此定义设置为您自己的版本。

  1. 将基础类指向 Bootstrap 类,以便它们添加其功能。

在您的项目/qcubed/Control/ControlBase.php 文件中,从 Bootstrap Control 类扩展。例如,您应该将第一行更改为

abstract class ControlBase extends QCubed\Bootstrap\Control 
{

QCUBED_BOOTSTRAP_JS

此插件中包含的默认机制仅在使用插件小部件且需要它时加载 bootstrap.js 文件。如果您正在手动编写一些需要 bootstrap.js 的 bootstrap 表单,您应该执行以下两个操作以避免加载多个 bootstrap.js 文件

  1. 在 bootstrap.cfg.php 文件中定义 QCUBED_BOOTSTRAP_JS 并将其指向您想要的 bootstrap js 文件,如下所示
	define ('QCUBED_BOOTSTRAP_JS', QCUBED_VENDOR_URL . '/twbs/bootstrap/dist/js/bootstrap.js'); (or bootstrap.min.js if you prefer)
  1. 或者像这样将其添加到 footer.inc.php 文件中
	<script type="text/javascript" src="<?= QCUBED_BOOTSTRAP_JS ?>"></script>

或者像这样将其添加到 QForm.class.php 文件中自动加载的 JavaScript 表单列表中

	protected function getFormJavaScripts() {
		$scripts = parent::getFormJavaScripts();
		$scripts[] = QCUBED_BOOTSTRAP_JS;
		return $scripts;
	}

用法

请参阅示例页面以获取详细信息。主要功能包括

  1. 使用 RenderFormGroup 代替 RenderWithName 来以 Bootstrap 方式绘制表单对象。Bootstrap Control 类公开了一些实用类,可以将 Bootstrap 类添加到对象、标签、包装器,甚至在某些特殊情况下的内部包装器。

  2. 特定的 Bootstrap 类型控件来在屏幕上绘制特定内容。例如

  • 轮播图
  • 导航栏
  • 菜单按钮
  • 警报
  • 手风琴
  1. 扩展基本 QCubed 控件以添加额外的 Bootstrap 功能。包括
  • 复选框以 Bootstrap 方式绘制复选框,并将标签包裹在复选框周围
  • 文本框以添加将其作为内联组与其他对象一起绘制的功能
  1. 定义,通过 PHP 常量让您轻松访问所有各种 Bootstrap 类名。这些定义位于 Bootstrap.php 文件中。