Question

我已经制作了一个表单来取用用户名，它在桌面上工作得很好，但是在移动设备上看起来太小了，尽管我使用了bootstrap。

<form method="post" id="mainform">
    <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-6 col-md-offset-2">
            <div class="form-group">
                <input type="text" name="user_name"
                       placeholder="Eg. John Doe"
                       class="form-control"
                       required="required">
            </div>
        </div>
    </div>
</form>

Answer 1

简短回答：使用您需要的任何媒体查询编写您自己的css规则，以更改宽度较小的设备上的布局。我们通常这样做：调整浏览器窗口的大小，直到找到它看起来不再好看的位置（或者看起来不再像你想要的那样），然后通过调整大小找到确切的像素宽度浏览器窗口逐个像素，然后写入该宽度的媒体查询来修复它。

我建议使用更具语义的fieldset标记来代替你的div.form-group（如果真正的html中还有其他输入）。你的html肯定会被不必要的标签和类过度污染（并且缺少标签）。 Clean html可能如下所示：

<form method="post" id="mainform"><label for="input-user_name">Name:</label><input id="input-user_name" name="user_name" placeholder="John Doe" required></form>

还有一些需要注意的事项： - 你可以使用aria属性来进一步增强你的html（例如aria-describedby） - 如果你正在使用HTML5（你现在应该是这样），那么指定布尔（开/关）属性的正确方法就像是＆＃39; required＆＃39;而不是＆＃39; required =＆＃34; required＆＃34;＆＃39;，例如您已经使用它将其设置为true，并且不必为此设置任何值 - 总是认为FFF - 形式遵循功能 - 以及：CSS应该用于控制光学外观，不应该需要额外的html（我知道有些情况下你不能绕过它，但大多数时候是额外的html不需要，特别是没有“混乱”＃）;

我建议踢踢引导并使用普通媒体查询（可选地使用你喜欢的任何css预处理器，例如手写笔，sass / scss，less，......）。如果你真的认为你需要使用框架，那么基础似乎总是更好的选择。

但最终它只是简单的html和css，没有人限制你只使用框架提供的东西 - 你总是可以用自己的css规则覆盖思考。

现在已经和一个大约15人的团队一起做了8年的web开发，有些使用更喜欢框架，而其他人（包括我）坚持普通css（添加任何预处理器是最实用的该项目，例如节点项目使用手写笔更好地工作，而php项目更容易与sasss集成）。我认为框架确实有助于加快开发的唯一情况是 - 恕我直言 - 当项目从第一步开始设计时，就构建在特定框架上。

如上所述，这是我个人的意见，我希望它能帮助您了解使用自定义css规则覆盖个别事物的有效选择 - 如果没有，请随意扩展您的问题并提供更多信息。

Answer 2

关于drupal cms行为 - 如果您要将JavaScript添加到自定义模块中，那么简单地添加它就非常容易和诱人：

jQuery(document).ready(function($){
  alert(‘hot dog flavored water’);
});

现在这段代码运行得非常好但是如果你的JavaScript需要在页面加载和AJAX请求之后执行呢？想象一下，你有一个使用“Views Infinite Scroll”的视图，你想为每个结果添加一个CSS类：

jQuery(document).ready(function($){
  $('.view-display-id-page .views-row').addClass('fancy-pants');
});

这将适用于最初显示的结果，但对于Infinite Scroll的AJAX调用加载的所有结果，不会添加该类。这就是Drupal行为派上用场的地方。行为将在包括AJAX请求在内的每个请求上执行，所以让我们做相同的代码，但这次使用这个方法：

Drupal.behaviors.infiniteScrollAddClass = {
  attach: function (context, settings) {
    $('.view-display-id-page .views-row').addClass('fancy-pants');
  }
};

我承认这很快 - 所以这里有一些解释：

infiniteScrollAddClass：这是你的命名空间，应该是唯一的。例如，这通常是模块的名称，但不是必需的。 context：这实际上非常酷，在页面加载时，上下文将包含整个文档，并且在AJAX请求之后将包含所有新加载的元素。这样，您可以通过AJAX处理加载的内容与其他内容不同。设置：这包含通过PHP传递给JavaScript的信息，类似于通过Drupal.settings访问它。为了进一步理解，我推荐这个来源。显然有些情况下不应该对每个请求执行某些功能。在这种情况下，使用jQuery的.once（）方法非常棒。所以，假设我们想在我们的视图中为所有初始加载的结果提供一个额外的类，对于类似这样的事情我们会这样做：

Drupal.behaviors.infiniteScrollAddClass = {
  attach: function (context, settings) {
    // these are the elements loaded in first
    $('.view-display-id-page').once(function(){
      $(this).find('.views-row').addClass('i-was-here-first');
    });

    // everybody
    $('.view-display-id-page .views-row').addClass('fancy-pants');
  }
};

这会将“i-was-here-first”类添加到页面加载中出现的所有视图结果中，所有通过AJAX加入的人都将获得“fancy-pants”类。

这样就可以快速了解一下Drupal的行为，如果你还没有使用它，请使用它！

如果您正在寻找关于此主题的其他理论见解，我可以推荐这两个来源以供进一步阅读：

Drupal JavaScript API（适用于Drupal 6，但解释得非常好，大部分也适用于Drupal 7）在Drupal 7中管理JavaScript

Answer 3

这是您可以使网站完全响应的方式，

关于响应式Bootstrap 响应设备媒体查询允许基于多种条件 - 比率，宽度，显示类型等的自定义CSS，但通常关注min-width和max-width。

修改网格中列的宽度在必要时堆叠元素而不是浮动调整标题和文本的大小以使其更适合设备负责任地使用媒体查询，仅作为移动受众的开始。对于大型项目，请考虑专用代码库而不考虑媒体查询层。

支持的设备 Bootstrap在单个文件中支持少量媒体查询，以帮助您的项目更适合不同的设备和屏幕分辨率。这是包含的内容：

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

阅读本文，http://getbootstrap.com/2.3.2/scaffolding.html将帮助您:)

请记住，Retina（Apple产品屏幕的东西）确实具有特定的分辨率/像素比

你可以看看这里：http://stephen.io/mediaqueries/他们解释并有示例

制作移动优化表格

3 个答案: