如何在 Joomla 2.5 中使用 twitter bootstrap 作为第三方组件？

Posted 2023-02-23

【中文标题】如何在 Joomla 2.5 中使用 twitter bootstrap 作为第三方组件？

【英文标题】：How to use twitter bootstrap as a third party component in Joomla 2.5?

【发布时间】：2013-06-11 22:49:54

【问题描述】：

我正在使用带有 RESPONSIVE TEMPLATE 的 Joomla 2.5。但是我的组件没有响应。 如何使用 TWITTER BOOTSTRAP 更改我的组件响应？

谁知道请给我建议

谢谢

大意

【问题讨论】：

没有代码很难帮助你。你加了bootstrap-responsive.css吗？

查看 Bootstrap 文档及其工作原理。正如 Pigueiras 所说，由于没有提及或提供任何代码或特定问题，因此很难以最轻微的方式甚至您。所以请这样做，你会得到答案。

【参考方案1】：

一个有趣的挑战。正如其他人指出的那样，如果没有看到示例 URL，就无法为您提供具体建议，但这会让您入门。

包括 bootstrap css 和可选的 bootstrap.js，可以通过将它们添加到模板来在站点范围内添加它们，或者使用 JS CSS Control 之类的扩展名并仅在特定页面上加载它们 自定义 CSS 可能需要仅针对使用扩展的页面上的元素。如果是模块添加模块类后缀（在模块管理器 > 高级设置下），或者如果它是菜单项，则链接 CSS 样式（在菜单管理器 > 链接 > 链接类型选项下） 某些插件和组件将需要引导 js，因此您可能需要也可能不需要它。如果你这样做了，你还必须在调用 bootstrap.js 之前添加 jQuery。由于您使用的是 Joomla 2.5，因此默认情况下会加载 MooTools。这可能会与 jQuery 发生冲突，因此 use an extension to load jQuery 或者您可以使用 disable mootools

然后有趣的部分开始了。

使用浏览器转到使用扩展程序的页面，检查由扩展程序插入的元素，并查找具有硬编码尺寸的元素，并使用自定义 CSS 样式表以百分比值覆盖这些元素。

例如，如果有一个带有硬编码尺寸的图像，并且您在上面的模块类后缀中使用 ma​​ke-responsive，则自定义 css 将类似于

.make-responsive img 宽度：30%； 高度：自动；

实际上，扩展程序可能会插入多个图像，并且您需要对它们进行不同的样式设置，因此请寻找其他属性或类，而不是仅针对有问题的图像（例如.make-responsive table img ..） p>

要进一步细化流程，您可能需要使用media queries 来定位不同的设备宽度 检查使用浏览器宽度时会发生什么。也许您需要在某些视口向某些选择器添加浮动和清除以获得所需的排列，或者您甚至需要隐藏一些元素。

如果你幸运的话，这就是你需要做的。如果扩展严重依赖表格布局，那么这可能很难使用。

祝你好运！