我正在尝试设置导航栏的样式以删除bootstrap css默认的小边框半径。
我正在尝试实施我选择的谷歌字体。尽管我看似完美的执行,但没有任何工作。
我正在使用django,尽管对此并不重要,但它只是解释了一些语法。
我的HTML文件中的链接按以下顺序排列:
<!-- Loads the path to the static files-->
{% load staticfiles %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://googleapis.com/css?family=Satisfy" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="{% static 'music/style.css' %}">
<script src ="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
我想要操作的HTML属性如下,请注意类
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!--Header-->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class = "navbar-brand" href="{% url 'music:index' %}">Viberr</a>
</div>
顶部的div与导航栏的类是具有我想要更改的border属性。
带有navbar-brand类的div是我想要应用我的谷歌字体的那个。
这是我链接的css文件:
body{
background: white url("images/background1.jpg");
}
.navbar{
border-radius: 0;
}
.navbar-brand{
font-family: 'Satisfy', cursive;
}
正如你所看到的,除非我完全遗漏某些东西,否则没有理由不这样做。