Я хочу знать, как изменить фоновый цвет класса "jumbotron", он имеет значение по умолчанию background-color #eee
в bootstrap.css.
Я попытался переопределить, стирая это и присвоив атрибуту none
, none !important
, transparent
в свой собственный css и все еще не работает.
Я попытался проверить элемент в окне браузера и удалить там свойство, чтобы увидеть, было ли какое-либо изменение, это все та же проблема.
Он примет любой другой цвет, за исключением полного удаления цвета. Причина, по которой я спрашиваю об этом, состоит в том, что у меня есть полное фоновое изображение и вы хотите, чтобы jumbotron просто прозрачен, без фона или цвета. Если,
Мне не хватает чего-то из документации BootStrap 3.1.1, в которой я также проверил там.
ПРИМЕЧАНИЕ. Я бы использовал jsfiddle.net, чтобы легко показать вам, но он не поддерживает 3.1.1 и не уверен, как реализовать загрузку в нем.
HTML
<title>Full Page Image Background Template for Bootstrap 3</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom CSS for the 'Full' Template -->
<link href="css/full.css" rel="stylesheet">
<!--Displays the Navigation Bar Style-->
<div class="navbar navbar-default navbar-fixed-top">
<!--Displays the Navigation Bar Content-->
<div class="navbar-header">
<!-- displays the icon bar in responsive view; when clicked reveals a list-->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<!-- displays the icon bars in responsive view;-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--Brand, Logo of your website-->
<a class="navbar-brand" href="#">Virtual Productionz, Inc.</a>
</div>
<!-- Allows collapse/show navbar in responsive view-->
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<!-- Dropdown menu-->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Products <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Integrated Laser Keyboard</a></li>
<li><a href="#">More...</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
<div class="jumbotron">
<h1>Welcome!</h1>
<p>We're an awesome company that creates virtual things for portable devices.</p>
<p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>
<!-- JavaScript -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script>
CSS (w/bootstrap.css)
@import url("bootstrap.min.css");
@import url("bootstrap-theme.css");
body {
margin-top: 50px; /* 50px is the height of the navbar - change this if the navbarn height changes */
}
.full {
/*background: url(http://placehold.it/1920x1080) no-repeat center center fixed;*/
background: url("../images/laser_keyboard.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.jumbotron{
color: #FFFFFF;
/*background-color:none !important;*/
}