问题标签 [skeleton-css-boilerplate]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
586 浏览

user-interface - 是否有任何 javascript 库可以在没有媒体查询的情况下实现响应式设计

哪些现有的 UI 框架在非现代浏览器上提供了完整的响应式设计工具?

我尝试了BootstrapSkeleton,但没有成功,因为它们大量使用了不支持 IE-7 等旧浏览器的媒体查询

0 投票
1 回答
321 浏览

css - CSS框架比较

我正在评估一个 css 框架的 twitter bootstrap、foundation 和骨架。我正在设计一个支持桌面和移动设备的网站,包括 iPad 和其他平板电脑。每个框架的优缺点是什么?我在 SO 和 google 上发现了其他一些类似的问题,但它们似乎都是一种片面的观点。另外,由于新版本的 bootstrap 刚刚推出,我发现的大部分内容都与旧版本的 bootstrap 进行比较。

此外,我不想将其仅限于我命名的 3 个框架。

谢谢!

0 投票
1 回答
1971 浏览

css - 如何在响应式 css 中更改元素的顺序和控制流

我正在使用骨架,这是我想要的响应式布局:

移动布局 - 标题、图像、描述都在一个列堆栈中

桌面布局 - 图片右侧的标题和描述

移动和桌面布局

我应该如何构建 html 和 css 以便响应式布局可以仅使用 css 和媒体查询从一种更改为另一种?我尝试在桌面布局中将图像浮动到左侧,并使标题成为移动布局中的块元素:

移动 CSS

桌面 CSS

这似乎在大多数情况下都有效,除了如果文本足够长,描述会在照片底部围绕它的照片下方包裹,而不是仅仅保留在右栏。

如果我使用骨架或响应式网格系统之一,我应该如何执行此操作,我应该使用它们的列类吗?

0 投票
3 回答
6319 浏览

responsive-design - 使骨架网格系统更宽

我很好奇那里是否有人曾经将骨架网格系统转换为具有更宽的最大宽度。这些天 960 像素有点小,我希望能接近 1100 像素。

如果有人以前这样做过或有任何开始更改的提示,那将是惊人的!

0 投票
2 回答
8408 浏览

css - 修复了带有骨架响应式布局的侧边栏

我有一个带有骨架样板的简单的两列响应式设计。对于侧边栏,我有这个div,在容器 div内:

我喜欢它在宽视口中的外观以及它如何堆叠在较窄的视口上,但我希望更宽尺寸的侧边栏(四列 div)始终固定在左侧,同时滚动另一个div的内容。

尝试了几件事,但最终搞砸了响应式布局,我想我对 CSS 定位没有全面的了解......

任何帮助表示赞赏!谢谢。

0 投票
1 回答
4650 浏览

css - 将 Skeleton 框架默认更改为 1400px

我对骨架很陌生,但我想将它用于一个项目。该项目由 4 个 div 组成,最大宽度为 1400px,我需要这些与浏览器一起缩小。我不确定如何将标准的 16 列宽 960px 更改为 1400px 以及与之相关的各种媒体查询。

任何帮助,将不胜感激。

0 投票
1 回答
1839 浏览

jquery - 当屏幕尺寸小于 jQuery 时,从元素更改属性

我正在使用Skeleton创建一个响应式网站。

当屏幕小于像素数量时,我想更改一个类 - 使用 jQuery
像这样:(当然这是行不通的)

0 投票
1 回答
5735 浏览

css - LESS 编译错误

我正在使用 Incident57 的 CodeKit 预处理器来编译一系列较少的文件,这些文件被导入并缩小到一个名为 template.css 的 CSS 文件中。

但是,在进行了一些编辑之后(我不知道是什么编辑导致了这个)我开始得到 non_object_property_callError

template.less 导入 12 个文件:

此外,fonts.less 本身导入了 5 个文件

该错误似乎与 media queries.less 文件有关/关联

除此之外,我完全迷失了。

non_object_property_callError : Cannot call method 'charAt' of null错误是什么意思,我该如何解决?

任何意见,将不胜感激。

0 投票
1 回答
2940 浏览

css - 位置:固定 - Firefox 和 chrome 的区别

我正在使用Skeleton 样板来创建响应式设计。

这是它分别在 Chrome 和 Firefox 中的外观

铬:http ://screensnapr.com/v/iaXYDS.jpg

火狐:http ://screensnapr.com/v/EW6HZM.jpg

如您所见,应该是菜单的灰色条在 chrome 中看起来很好。我想要实现的是一个粘性菜单,它在其父级中相对固定。

这是#menu的CSS(灰色条)

这是使用 Skeleton 样板的#menu 类。

这将为#menu提供以下样式

您可以通过此网址进行测试

http://home.piratelufi.com/sticky/

并下载源代码(对不起,杂乱的文件)

http://home.piratelufi.com/sticky/sticky.zip

0 投票
1 回答
3286 浏览

css - 如何用骨架制作 100% 高度的柱子?

我想要 2 列高度为 100%,而不使用<table>和使用骨架 css 中的响应列。

容器看起来是 100% 的高度,但不是列。有没有办法做到这一点?