`
dcj3sjt126com
  • 浏览: 1871403 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Yii添加yii-bootstrap扩展

    博客分类:
  • YII
阅读更多

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。(来自百度百科)

优点的话就是加速网站的开发,对于一个php程序来说,如果美工不是特别的强并要求进度的话,可以考虑使用Bootstrap这个WEB框架。

bootstrap既然有这样的优点,那么自然也有人把bootstrap封装在yii的插件当中供大家使用了,安装方法也在这个插件的官网上公布了,但是由于在官网上值工作了在配置文件中的配置,没有提到需要在使用的时候载入一个方法,我还以为在安装好了配置文件中就可以直接使用了但是当我写入如下的代码的时候却没有按钮的效果

<span style="font-family: Consolas, Monaco, monospace; font-size: 12px; line-height: 18px;"><?php $this->widget('bootstrap.widgets.TbButton', array(</span>
    'label'=>'Primary',
    'type'=>'primary', // null, 'primary', 'info', 'success', 'warning', 'danger' or 'inverse'
    'size'=>'large', // null, 'large', 'small' or 'mini'
)); ?><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;">

 查看源码是没有载入css文件,我以为会在使用widget的时候就自动载入了。这个得手动载入吗?在百度谷歌上找了很久发现,经过一番折腾还是回到下载的插件当中的例子中查看发现需要多些一个方法来进行载入:

<?php Yii::app()->bootstrap->register(); ?>

 使用这个方法就可以载入所有需要的js和css文件了!~……~终于成功了!   教训:还是的先看官网给的例子啊!

========================$一步一步来$===================

第一步:首先下载扩展包解压至protected\extensions目录形成bootstrap文件夹

第二部:在配置文件中配置:

// 配置一个别名 使得可以bootstrap访问到扩展路径
Yii::setPathOfAlias('bootstrap', dirname(__FILE__).'/../extensions/bootstrap');
 
return array(
  //  'theme'=>'bootstrap', // 一个官网给的例子,这个可以暂时不配置
    'modules'=>array(
        'gii'=>array(
            'generatorPaths'=>array(  //添加一个gii检索的路径
                'bootstrap.gii',
            ),
        ),
    ),
    'components'=>array(
        'bootstrap'=>array(//添加一个新的bootstrap容器
            'class'=>'bootstrap.components.Bootstrap', //执行Bootstrap.php文件
        ),
    ),
);<span style="line-height: 19px; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: xx-small;">

 第三部:载入css:这个很重要,我就是没找到这个点,所以浪费了一些时间:

可以在layouts/main.php中加载

<?php Yii::app()->bootstrap->register(); ?>

 

这个是加载了所有的css以及js如果不需要这么多的话,可以查看Bootstrap.php文件,可以查看到registerAllCss(),registerCoreScripts()等这样的方法,分布区加载一些需要的文件!

第四部:写个例子试试!

http://www.redianying.com/yii-bootstrap/ 这里有很多的例子,可以去写写。如果没有效果的话,查看css是否加载了!

分享到:
评论

相关推荐

    yii2-bootstrap-markdown-editor:基于 Bootstrap Markdown 的 Yii2 Markdown 编辑器

    Yii2 Bootstrap Markdown 编辑器 Yii2 Markdown 编辑器基于 。... "uran1980/yii2-bootstrap-markdown-editor": "dev-master" 到composer.json的 require 部分 用法 活动小部件 以活动形式查看: &lt;?ph

    yii2-bootstrap-editor

    "alex290/yii2-bootstrap-editor": "*" 到composer.json文件的require部分。 Подключение вфайле web.php впапке config вставитьпараметр 'modules' =&gt; [ 'bs4-editor'...

    yii2-light-bootstrap:Creative Tim的Bootstrap管理模板

    Light Bootstrap管理模板Tim Creative提供的Yii2 Free Bootstrap管理模板扩展。 有关更多详细信息,访问安装安装此扩展的首选方法是通过 。 无论运行 ...

    yii2-bootstrap-material-design

    引导资产的 Yii2 材料设计 Yii2 Web 应用程序 Bootstrap 资产的材料设计。... "mist-webit/yii2-bootstrap-material-design": "*" 到 composer.json 文件的 require 部分。 用法 打开你的布局视图/

    yii2-bootstrap-tour:Yii 2 Bootstrap Tour扩展

    无论运行php composer.phar require mycademy/yii2-bootstrap-tour或添加"mycademy/yii2-bootstrap-tour": "dev-master"到composer.json文件的require部分。用法例如,视图文件中的以下代码行将呈现Bootstrap Tour...

    yii2-bootstrap-languages:Bootstrap 3 的语言标签和图标

    "xfg/yii2-bootstrap-languages": "*" 到composer.json文件的 require 部分。 用法 安装扩展后,只需将下一个代码添加到您的资产包中: public $depends = [ 'xfg\bootstrapLanguages\BootstrapLanguagesAsset',...

    yii2-bootstrap:Yii 2 Bootstrap 3扩展

    Twitter Yii 2的Bootstrap扩展 这是的Twitter Bootstrap扩展。 它根据Yii小部件封装了组件和插件,因此在Yii应用程序中使用Bootstrap组件/插件非常容易。 有关许可证信息,请检查文件。 文档位于 。 安装 安装此...

    yii2-bootstrap-confirmation:使用 Popover for Yii2 就地确认框的 Bootstrap 插件

    要么跑 php composer.phar require uran1980/yii2-bootstrap-confirmation "dev-master"或添加 "uran1980/yii2-bootstrap-confirmation": "dev-master"到composer.json的 require 部分用法要使用此组件,请向您的...

    Yii-Bootstrap插件

    Yii-Bootstrap插件是专为Yii框架设计的一个扩展,它整合了Twitter Bootstrap的前端开发工具集,使得在Yii中构建响应式、优雅的用户界面变得轻而易举。Bootstrap是一款广泛使用的开源UI框架,提供了丰富的组件和样式...

    yii2-bootstrap4:Yii 2 Bootstrap 4扩展

    Twitter Bootstrap 4 Yii 2扩展 这是的Twitter Bootstrap扩展。 它按照Yii小部件封装了组件和插件,因此在Yii应用程序中使用Bootstrap组件/插件非常容易。 有关许可证信息,请检查文件。 文档位于 。 安装 安装此...

    yii2-bootstrap-datetimepicker:Yii2 DateTimePicker小部件

    在Yii2中,我们经常会遇到需要用户输入日期和时间的情况,这时候`yii2-bootstrap-datetimepicker`就派上用场了。这是一个集成Bootstrap DateTimePicker插件的小部件,它为Yii2提供了一个美观、易用的日期和时间选择...

    yii2bootstrap4:yii2框架的bootstrap v4小部件

    Bootstrap 4上的Yii2引导小部件那些已移植并已部分更改的yiisoft/yii2-bootstrap小部件可与Bootstrap v4一起使用。 它在Bootstrap v4 CSS / JS中使用了twbs/bootstrap软件包。 与yiisoft/yii2-bootstrap软件包类似地...

    yii示例-下拉框-最新的yii框架

    要调整下拉框的外观,可以添加CSS类或使用前端框架如Bootstrap。Yii2默认使用Bootstrap样式,因此可以直接应用预定义的类。 7. **AJAX交互** 如果需要动态更新下拉框,可以通过AJAX实现。Yii2提供`yii\web\Js...

    Yii2框架引用bootstrap中日期插件yii2-date-picker的方法

    本文实例讲述了Yii2框架引用bootstrap中日期插件yii2-date-picker的方法。分享给大家供大家参考,具体如下: 最近在学习yii2 框架,发现框架很强大,而且结合了时下许多新的技术在里面。 简单记录一下yii2-date-...

    yii2-date-time-picker-widget:用于Yii2的Bootstrap DateTimePicker窗口小部件

    无论运行composer require 2amigos/yii2-date-time-picker-widget: ~ 1.0 或添加 " 2amigos/yii2-date-time-picker-widget " : " ~1.0 " 到应用程序的composer.json文件的require部分。用法此小部件呈现Bootstrap ...

    yii-basic-app-2.0.0.tgz

    它提供了一个起点,开发者可以在此基础上扩展和定制自己的项目。 在描述中提到,Yii是一个基于组件的框架,这意味着它由许多可重用和可配置的部件组成。这些组件相互协作,使得开发者能够以模块化的方式构建复杂的...

    yii2-bootstrap-radio-list:Yii2 Bootstrap 单选列表小部件

    Yii2 Bootstrap 单选列表小部件 使用示例 echo $ form -&gt; field ( $ model , 'list' )-&gt; widget ( 'kolyunya\yii2\widgets\bootstrap\RadioList' , [ 'items' =&gt; [ 'value-1' =&gt; 'label-1' , 'value-2' =&gt; '...

    yii2-widget-rating:一个Yii2小部件,用于简单但功能强大的引导星级评分插件,并支持分数评分(从yii2-widgets拆分子仓库)

    要安装,请运行$ php composer.phar require kartik-v/yii2-widget-rating "*"或添加"kartik-v/yii2-widget-rating": "*"到composer.json文件的require部分。最新发布的注意:有关各种发行版的详细信息,请参阅“”...

    yii2-starter-kit:Yii2入门套件

    Yii 2入门套件 这是Yii2启动应用程序模板。 它的创建和开发是快速构建基于Yii2的高级站点的开始。 它涵盖了新项目的典型用例,并且将帮助您避免浪费时间在每个项目中进行相同的工作 在你开始之前 请考虑通过或...

Global site tag (gtag.js) - Google Analytics