如何使用 Bootstrap 在 Yii 框架上响应式地制作普通的 div 块？

Posted 2023-02-23

【中文标题】如何使用 Bootstrap 在 Yii 框架上响应式地制作普通的 div 块？

【英文标题】：How to make normal div blocks responsively on top of the Yii framework with Bootstrap?

【发布时间】：2012-11-02 09:34:01

【问题描述】：

我已经设法使用 YII 框架构建了一个网站。我还安装了 Bootstrap 扩展，它允许我轻松实现响应式小部件。我的问题出现在网站的其他部分。假设我想要：

标题 菜单 主要内容 页脚

菜单是最简单的部分，因为我只是像这样使用 Bootstrap 小部件：

<?php 
     $this->widget('bootstrap.widgets.TbMenu', array(
     'type'=>'tabs', // '', 'tabs', 'pills' (or 'list')
     'stacked'=>false, // whether this is a stacked menu
     'items'=>array(
       array('label'=>'Home', 'url'=>array('/site/index')),
       array('label'=>'About', 'url'=>array('/site/page', 'view'=>'about')),
       array('label'=>'Contact', 'url'=>array('/site/contact')),
     ),
   )); 
?>

所以我的问题是让网站的其余部分具有响应性。那么：有没有一种简单的方法来创建也会自动响应的“块”？还是仅仅是创建 div 并响应式地对其进行样式设置的问题？换句话说，引导扩展是否仅限于特定组件，因此剩余的布局依赖于设计人员使用 CSS 进行排序？

【问题讨论】：

查看 Twitter Bootstrap 文档。 twitter.github.com/bootstrap/scaffolding.html

但是有没有通过 YII 实现调用这些的本地方法。检查这个 --> cniska.net/yii-bootstrap/index.html ...

【参考方案1】：

这完全取决于您在内容中添加的内容。 <div> 标签默认不是固定宽度的，其他 HTML 标签也不是默认宽度。在你的<img> 标签上使用width: 100% 和max-width: Xpx 也可以覆盖你的大部分基础，让它们以合理的限制灵活地调整到它们的父宽度。

在那之后，唯一限制布局的就是你添加的东西。因此，当您添加内容时，请确保您考虑在页面缩小和扩展时您希望此内容发生的情况。

如果你有一个更具体的案例，你正在努力寻找一个好的折衷方案，那么 bootstrap 和 Yii 有大量的资源。

【讨论】：

谢谢。这确实有帮助，但我试图了解是否必须将 YII 用作块/部分/“无论你想怎么称呼它”的小部件，或者我是否实际上必须创建自己的 div 并响应地定位它们。感谢上面的评论，我知道脚手架是第一步，但我没有看到任何 YII 函数。

脚手架没有真正的 Yii-Bootstrap 函数，因为它们是非常简单的类和结构。任何 Yii 特定的东西都只是语法糖。请记住，默认情况下，您的网站是响应式的，是您的内容搞砸了。边走边修，因为没有单一的，把它包起来忘记解决方案。

问题是，我正在尝试脚手架示例，但它们都不起作用。小部件工作，但不是脚手架的东西。认为一些CSS不包括然后。 ..

如果您的小部件工作正常，那么很可能所有需要的 CSS 都已包含在内。它都是从 Less 编译成一个文件（如果我没记错的话）。只需尝试回到一个基本的仅脚手架页面并从那里开始工作。没有一些更具体的例子很难说。如果您确实发现了问题，最好现在打开一个新问题。

我必须添加这个 --> 'components'=>array( 'bootstrap'=>array( 'class'=>'bootstrap.components.Bootstrap', 'responsiveCss'=>true, ),