标签: skeleton-css-boilerplate

根据响应式网页设计的原则,Skeleton可以扩展以适应移动浏览器.Bootstrap提供相同的功能吗？

我正在使用 getsculpt.com 作为响应式网站，我试图在后台显示网格线，例如http://nimb.ws/fTE2AR或http://fearonhay.com/residential/courtyard-house。实现这一目标的最佳方法是什么？

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

任何帮助,将不胜感激.

我希望有2列100%高度,不使用<table>和使用骨架css的响应列.

html, body {
    height: 100%;
}
.container {
    min-height: 100%;
}
.column, .columns {
    min-height: 100%;
}

<div class="container">
    <div class="ten columns alpha">
               bla bla bla
    </div>
    <div class="six columns omega">
        bla bla bla
    </div>
</div>

容器看起来像100%高度但不是列.有没有办法实现这个目标？

对于我的一个项目,我第一次使用Skeleton Boilerplate.我正在寻找在Skeleton中居中div而不会抨击Skeleton规则的最佳实践.

目前,我有一个登录页面的结构.

HTML:

<div class="container">
<div class="sixteen columns vertical-offset-by-one">
<div id="loginBox">
<img src="images/yeditepeLogo.png" alt="Yeditepe Logo" class="yeditepeLogo" />
<form action="" id="loginForm">
<input type="text" name="username" required placeholder="username" class="loginTextField">
<input type="password" name="password" required placeholder="password" class="loginTextField">
<input type="submit" value="Log In" class="loginButton" />
</form>
</div><!-- loginBox -->

</div><!-- sixteen columns -->

<div class="sixteen columns">
<p align="center"><a href="registration.html" target="_blank">Click here to register</a></p>
</div>
</div><!-- container -->

CSS:

#loginBox, #registrationBox {
  width: 470px;
  height: 450px;
  background-color: white;
  left: 245px; */
  top: 20px; */
  position: relative; 
  margin: …

我对如何在dash. 如何将dropdown和 并datepicker排放在同一行？

html.Div(
      [
        html.Div(
          [
            dcc.Dropdown(id='dropdown',
              options=[{'label': i, 'value': i} for i in all_options],
              multi=False,
               placeholder='Select Symbol...',
            ),
            dcc.DatePickerSingle(
              id='my-date-picker-single',
              min_date_allowed=today,
              max_date_allowed=today,
              initial_visible_month=today,
              date=today)
          ],
          className='row'
       ),
     ]
    ),

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

然而，在进行一些编辑后（我不知道是什么编辑导致了这个）我开始得到non_object_property_callError

non_object_property_callError: Cannot call method 'charAt' of null in /Volumes/Clients/htdocs/ergonomiq/domains/clients/polaris5/less/mediaqueries.less:14:2
13  h1 {
14      font-size: 100px;
15      margin-bottom: 60px;

template.less 导入 12 个文件：

@import "cssindex.less";
@import "fonts.less";
@import "colors.less";
@import "variables.less";
@import "mixins.less";
@import "base.less";
@import "skeleton.less";
@import "flexslider.less";
@import "prettyPhoto.less";
@import "layout.less";
@import "scrollbars.less";
@import "mediaqueries.less";

另外，fonts.less本身导入了5个文件

@import "font-awesome.less";
@import "font-awesome-ie7.less";
@import "font.bebas.less";
@import "font.leaguegothic.less";
@import "font.sourcesanspro.less";

该错误似乎与 media requests.less 文件相关/关联

/* Media Queries CSS File
================================================== */ …

是否有可能使根div(容器)100%的文件？
这是我的代码:

<div class="container" style="width:100%;">
    <div id="topbar" class="sixteen columns" style="background-color:green;">topbar topbar topbar topbar topbar topbar </div>
</div>

谢谢

我正在尝试根据骨架向我的网站添加“粘性页脚”，但我无法让它正常工作。我是根据此网站上的说明执行此操作的：http://www.cssstickyfooter.com/using-sticky-footer-code.html。在 Chrome 中，我在页面高度中获得一两个额外的像素，这导致垂直滚动条，而在 IE 中，主容器变为左对齐。

知道我应该如何基于骨架正确实现这个吗？感谢戴夫所做的出色工作！

我在看www.getskeleton.com.我的页眉和页脚应该超过100%.我可以在不"破坏"框架的情况下做到这一点吗？或者我应该将我的布局限制在960px？

我最近发现了这个 "样板",并立即爱上它,主要是因为它简单,相当轻巧,与其他css框架不同,不会影响你的设计.

不过,看看它的源代码,它提出了一些问题,比如这里的这一部分

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; } …

前言:

我使用的是一个反应灵敏的主题(骨架).它将布局更改为单个列,用于小屏幕尺寸,

我的问题是:

调整屏幕大小时,我的标题图像(我使用管理面板中的主题选项插入)不会缩放.它一直保持在940x150.当在移动设备上查看时,这会导致一个完整大小的标题,其内容位于左侧的单个列中,因此我留下了所有类型的空白.

我想:使图像缩小屏幕宽度

要么

将标题图像替换为适合较小屏幕尺寸的标题图像.

选项2的问题并非所有设备都具有相同的屏幕宽度,因此它仍然需要可扩展到某一点.

理想的情况是:

当高于下述宽度时,图像将缩放以适应700-something(ipad landscape)和940标准之间的屏幕.

当低于某个屏幕宽度(比如下面的平板电脑/ ipad尺寸,所以700-something max-width)时,图像会换成较小的一个,然后在300到700之间向上或向下扩展(略低于ipad尺寸) ).

通过这种方式,图像将始终是用于呈现网站的适当大小.

这个特定图像的问题是中间的空白量(空白空间).在一定的宽度以下,我会认为图像的元素会因为它们之间的空间太大而变得混乱和混乱.

网站:

porthuronairportshuttle.com

我正在使用响应式CSS框架Skeleton,由于某种原因,当屏幕大小是移动宽度时,css没有响应移动媒体查询.

它响应了平板电脑媒体查询,但在屏幕进入移动尺寸后,它又恢复到标准的CSS宽度.

这是我正在使用的实时网站:

http://fine-grain-2.myshopify.com/

这是我正在使用的HTML:

<div class="container">
    <div class="one column alpha">One</div>
    <div class="eleven columns omega">Eleven</div>
    <div class="two columns alpha">Two</div>
    <div class="ten columns omega">Ten</div>
</div>

这是移动媒体查询CSS:

/*  #Mobile (Portrait) 
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {
        .container { width: 300px; }
        .columns, .column { margin: 0; }

        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container …