Question

要了解有关Web开发的更多信息，我正在尝试制作一个Web应用程序。

我的第一个挑战是如何界面Django，Bootstrap和自定义css。

我正在尝试创建一个导航栏，其中包含我可以覆盖个人资料图片的图片，指向您帐户设置的链接等。我希望它看起来如下图所示：

基本上它是一个响应式导航栏，其高度设置为200px，宽度始终为浏览器窗口的100％。

我的自定义css如下：

.wide {
  width:100%;
  height:100%;
  height:calc(100% - 1px);
  height:200px;
  background-size:cover;
}

我尝试将其与下面的HTML进行交互：

<head>
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
     {% load static %}
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/mapvpage/style.css">


  </head>


  <body>

<div class="wide">

<img src="{% static "mapvpage/BananaFarm.jpg" %}" alt="My image"/>
    <div class="col-xs-5 line"><hr></div>
    <div class="col-xs-2 logo">Logo</div>
    <div class="col-xs-5 line"><hr></div>
</div>
</body>
</html>

我已将图片放入我的页面。但是，我无法解决如何以任何方式更改图像大小。关于自定义CSS如何与Bootstrap和Django交互，我也有点困惑。我可以只使用Bootstrap和自定义CSS的混合，当我想要不同的元素时？

非常感谢您的帮助，我已经研究了一段时间并且无处可去，所以会感谢一些指导！

更新

CSS：

#header {
    background-image:url("paper.gif");
    max-width:100%;
    max-height:auto;
}

HTML：

 <head>
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
     {% load static %}
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="{% static "mapvpage/style.css" %}">


  </head>


  <body>

<div class="row" id="header">
    <div class="col-md-3 col-md-offset-9">
        <img src="{% static "mapvpage/BananaFarm.jpg" %}" alt="My image"/>
    </div>
</div>
</body>
</html>

注意我以不同的方式加载了CSS样式表（如另一个答案所示）。之前它正在工作（因为我用简单的字体大小等测试它）所以不确定是否有必要。

Answer 1

首先，我会回答你关于混合事物的问题。

当你使用Django时，这意味着你有一个Django应用程序，它呈现一些html并将其发送到客户端以在浏览器中显示它。这个html使用bootstrap来提供一致和响应的风格。 bootstrap做的是将一些css应用于你的html。但是，如果bootstrap提供的功能不够，您可以随时包含自己的自定义CSS，并且没有问题。

关于你的标题，我会做一个带有背景图像的bootstrap行和带填充的col来包含图像：

<div class="row" id="header">
    <div class="col-md-3 col-md-offset-9">
        <img src="{% static "mapvpage/BananaFarm.jpg" %}" alt="My image"/>
    </div>
</div>

然后，您需要将标题的背景图像添加到标题div：

#header {
    background-image:url("paper.gif");
}

您可以轻松找到一些要添加到标题css的属性，以便使图像居中，展开它以填充整个div ...

使用bootstrap

1 个答案: