Question

以下代码将显示我想要兼容的html文件

{% load staticfiles %}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
  <title>*****</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet" media="screen">
  <link href="{% static 'bootstrap/css/dashboard.css' %}"  rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
   <link href="{% static 'style_sample.css' %}"  rel="stylesheet">
   <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
   <script src="{% static 'script_sample.js' %}"></script>
  </head>

  <body>
{% block content %}
<div id="header>">
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">

    <div class="navbar-header">
      <a class="navbar-brand" ><img src="{% static "bootstrap/css/logo4.png" %}" alt="" style="margin-top:-5%;"/></a>
    </div>

    <div>
      <ul class="nav navbar-nav navbar-right">
<li></li>
        <li><a href="#"><span class="glyphicon glyphicon-user"></span>
 {{ user.first_name }}</a></li>

        <li><a href="{% url 'django.contrib.auth.views.logout' %}"><span class="glyphicon glyphicon-log-out\" ></span>Logout</a></li>

      </ul>

    </div>
 </div>
</nav>
</div>


<div class="menu_sample top_mar">
              <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
        <li><span style="color:blue; font-weight:bold;">Dashboards</span></li>
         {% for Dashboard in dashboards %}
<li><a href="{{ Dashboard.d_url }}">{{ Dashboard.d_name }}</a></li>
           {% endfor %}
          </ul>

        </div>

    </div>
    <div class="content pushed top_mar">
      <button onclick="toggleMenu()"><span id="menu-button"><span class="glyphicon glyphicon-chevron-left" id="glymphi" style="margin-left:24%;"></span></span></button>
</div>

<div style="margin-left:-1%; margin-top:3.5%; height: 625px;" class="col-sm-9" >
<iframe width="100%"  height="95%" name="iframe_a" frameborder="0"></iframe>
</div>


{% endblock %}
  </body>

</html>

使用bootstrap和css，我正在使用的css如下

/* Styles go here */

.menu_sample {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100px;
  border: solid 1px;
  transition: transform 0.1s ease-out;
}

.content {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 10px;
  transition: left 1s ease-out;
  margin-left: -2%;
  margin-top: 150%;
}

/*transition*/
.top_mar {
    margin-top: 25%;
}

/* on toggle*/
.content.pushed {
  left: 225px;
}

.hide {
  transform:translateX( -100px);
}

当我减少或增加浏览器的大小时，我可以看到奇怪的事情。需要帮助，以使其兼容所有尺寸..

Answer 1

要使网站兼容，您可以使用media queries - this introduction非常好

检查这些链接以获取更多参考： Link1 Link2

或者您可以尝试使用%而不是px作为宽度等。

Answer 2

您使用的是Bootstrap，但声明了HTML 4.01文档类型......您应该使用HTML5 doctype <!doctype html>。由于您使用的是Bootstrap，最好的例子是查看getbootstrap.com的源代码，您将看到他们使用的是HTML5 doctype。 HTML5 doctype将提供最佳兼容性，因为大多数现代智能手机/平板电脑都专注于它。

Bootstrap会为您处理媒体查询，除非您进行自定义编码。

http://getbootstrap.com/getting-started/#examples提供各种布局示例。找到最接近您想要的那个，并将其作为基础。然后建立它并定制它。在担心颜色和其他风格相关问题之前，先按照您想要的方式布置所有内容。

使用Bootstrap列可以为您提供所需的内容。

<div class="container">
    <div class="row">
        <div class="col-md-6">left side</div>
        <div class="col-md-6">right side</div>
    </div>
</div>

有12个cols组成1行。 12与父母的100％相同。所以6是父母的50％（＆＃34; row＆＃34;）。您必须将cols放在一行或其他列中。通过上面给出的示例，在较小的设备上，右侧将在左侧下方很好地下降。您可以通过调整浏览器窗口来复制它。

你需要的一切都已经在Bootstrap中了。我建议学习它，学习专栏，并使用工具将你的网站放在一起Bootstrap给你而不是试图破解你自己的。你已经加载了Bootstrap，所以使用它！

您可以使用Bootstrap为您提供的所有内容创建整个站点。然后你的样式表只需要用颜色，字体大小等使它们看起来像你想要的样式。你的样式表基本上是一个颜色方案来覆盖内置的Bootstrap主题。

Bootstrap会处理标题，导航栏，侧边栏，页脚，主要内容区域，如果您使用随附的提供的类，则会为您提供一切。然后，如果您需要标题更厚或更薄，不同的背景颜色，您可以使用样式表覆盖它。

最后：查看你的问题，你真的不清楚发生了什么。我建议你花更多的时间和重写问题。你的页面看起来像一个导航栏，一个按钮和一个iframe ..如果你在谈论iframe中的内容看起来搞砸了，那么这是另一个问题，因为它是另一个拥有它的网站如果它没有响应，将会scrunch的源代码。如果你不在iframe中拥有该页面，那么你就无法做任何事情。

使我的HTML网站兼容

2 个答案: