使我的HTML網站兼容

下面的代碼將顯示，我想讓兼容使用引導和css使我的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>

，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); 
 
}

HTML文件

我可以看到奇怪的事情，當我減少或增加瀏覽器的大小。需要幫助，使之成爲各種規模兼容..

來源

2015-05-06 Vijay Kumar

有什麼奇怪的東西？ –

@KevinPaulKalis，就像divs會碰撞一樣，並且不會和正常顯示尺寸一樣 –

簡單的答案就是使用媒體查詢。 –

您使用Bootstrap，但聲明HTML 4.01文檔類型...您應該使用HTML5文檔類型<!doctype html>。自從使用Bootstrap以來，最好的例子就是查看getbootstrap.com的源代碼，您將看到他們正在使用HTML5文檔類型。由於大多數現代智能手機/平板電腦都將注意力放在了HTML5文檔上，因此它具有最佳的兼容性。

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列構成1排。 12與父母的100％相同。所以6是父母的50％（即「行」）。您必須將cols放在一行或其他列中。通過我剛剛給出的例子，在較小的設備上，右側會很好地落在左側。您可以通過調整瀏覽器窗口的大小來複制此內容。

您需要的一切已經在Bootstrap中。我建議學習它，學習專欄，並使用工具將您的站點放在一起Bootstrap爲您提供幫助，而不是試圖破解自己的網站。你已經加載Bootstrap，所以使用它！

您可以使用Bootstrap爲您提供的所有內容創建整個站點。然後你的樣式表只需要讓它們看起來像你想要的顏色，字體大小等。你的樣式表基本上是一個配色方案來覆蓋內置的Bootstrap主題。

Bootstrap處理標題，導航條，側邊欄，頁腳，主要內容區域，如果您使用隨附的類提供的所有內容。然後，如果您需要標題更厚或更薄，以及不同的背景顏色，則可以使用樣式表覆蓋它。

最後：回顧一下你的問題，你真的不清楚發生了什麼事情。我建議花更多的時間和重新說明你的問題。你的頁面看起來像一個導航欄，有一個按鈕和一個iframe ..如果你談論iframe裏面的東西看起來混亂了，那是另一個問題，因爲它是另一個有自己的源代碼的站點，如果它不是沒有反應。如果您不擁有iframe中的頁面，那麼您無法對此做任何事情。

來源

2015-05-06 07:32:53

我正在談論導航欄，我正在使用onclick圖標來切換導航欄。導航欄和onclick圖標對於不同的頁面大小表現得很奇怪 –

Bootstrap附帶的內置響應式導航欄有什麼問題？當您調整Bootstrap導航欄的大小時，它將更改爲帶有[=]外觀按鈕的移動菜單，該菜單將下拉菜單項。沒有額外的編碼是必要的。 –

爲了使網站兼容，你可以使用media queries - this introduction相當不錯

檢查這些鏈接，瞭解更多參考： Link1 Link2

或者你可以嘗試%而不是px的寬度等

來源

2015-05-06 07:05:52 kiran

使我的HTML網站兼容

回答

相關問題