Bootstrap网格布局在带有填充背景的顶部
请原谅我这里的所有条款，但我将尝试理解我希望实现的目标。现在，我设法创建了可缩放到窗口大小和导航栏的背景图像。我想开始在所有这些之上以及在导航栏下添加一些引导网格项。这是我三岁时对我要做的事情的描述：
到目前为止，我已经调用了背景图像类，然后调用了导航类。我现在正在尝试添加一个容器，以便可以使用某种类型的引导网格来添加四个按钮和一个面板。
我遇到的问题是，空白行的高度似乎为0，而不是从顶部创建缓冲区。我遇到的另一个问题是分层。我的引导网格项目显示在我的背景后面。
有人可以指出正确的布局方向吗？我是不是做错了，应该完全使用其他东西？我实际上是试图将所有这些都保存在一个index.html文件中，并避免导入不需要的资产或运行一堆脚本。
这是我现在正在使用的代码：
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body, html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
}
.bgimg-1, .bgimg-2, .bgimg-3 {
position: relative;
opacity: .80;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bgimg-1 {
background-image: url("img/home_bg.jpg");
height: 100%;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #fff;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
h3 {
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: #111;
}
/* Add a dark background color with a little bit see-through */
.navbar {
margin-bottom: 0;
background-color: #2d2d30;
border: 0;
font-size: 11px !important;
letter-spacing: 4px;
opacity:0.8;
}
/* Add a gray color to all navbar links */
.navbar li a, .navbar .navbar-brand {
color: #d5d5d5 !important;
}
/* On hover, the links will turn white */
.navbar-nav li a:hover {
color: #fff !important;
}
/* The active link */
.navbar-nav li.active a {
color: #fff !important;
background-color:#29292c !important;
}
/* Remove border color from the collapsible button */
.navbar-default .navbar-toggle {
border-color: transparent;
}
/* Dropdown */
.open .dropdown-toggle {
color: #fff ;
background-color: #555 !important;
}
/* Dropdown links */
.dropdown-menu li a {
color: #000 !important;
}
.dropdown-menu form div {
padding: 0px 20px;
}
/* On hover, the dropdown links will turn red */
.dropdown-menu li a:hover {
background-color: red !important;
}
</style>
</head>
<body>
<div class="bgimg-1"></div>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="myhomepage">title</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<?php if (isset($_SESSION['username']) && !empty($_SESSION['username'])): ?>
<li class="dropdown">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">WELCOME, <?php echo $_SESSION['username'] ?><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="registration/logout.php">LOGOUT</a></li>
</ul>
</li>
</li>
<?php else: ?>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">REGISTER<span class="caret"></span></a>
<ul class="dropdown-menu">
<form action="registration/register.php" method="post">
<div class="form-group">
<input type="text" name="reg_username" id="reg_username" class="form-control" placeholder=" Username" value="">
</div>
<div class="form-group">
<input type="email" name="reg_email" id="reg_email" class="form-control" placeholder=" Email Address" value="">
</div>
<div class="form-group">
<input type="password" name="reg_password_1" id="reg_password_1" class="form-control" placeholder=" Password">
</div>
<div class="form-group">
<input type="password" name="reg_password_2" id="reg_password_2" class="form-control" placeholder=" Confirm Password">
</div>
<div class="form-group">
<div class="row">
<div>
<input type="submit" name="register-submit" id="register-submit" class="form-control btn btn-info" value=" Register Now">
</div>
</div>
</div>
</form>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">LOGIN<span class="caret"></span></a>
<ul class="dropdown-menu">
<form action="registration/register.php" method="post">
<div class="form-group">
<input type="text" name="log_username" id="log_username" class="form-control" placeholder=" Username" value="">
</div>
<div class="form-group">
<input type="password" name="log_password" id="log_password" class="form-control" placeholder=" Password">
</div>
<!--
<div class="form-group">
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
-->
<div class="form-group">
<div class="row">
<div>
<input type="submit" name="login-submit" id="login-submit" class="form-control btn btn-info" value=" Login Now">
</div>
</div>
</div>
</form>
</ul>
</li>
<?php endif; ?>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-12"></div>
</div>
<div class="row">
<div class="col-sm-12"></div>
</div>
<div class="row">
<div class="col-sm-12"></div>
</div>
<div class="row">
<div class="col-sm-12"></div>
</div>
<div class="row">
<div class="col-sm-12"></div>
</div>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-2" style="background-color:yellow;">test1</div>
<div class="col-sm-2" style="background-color:yellow;">test2</div>
<div class="col-sm-2" style="background-color:yellow;">test3</div>
<div class="col-sm-2" style="background-color:yellow;">test4</div>
<div class="col-sm-2"></div>
</div>
</div>
</body>
</html>
我非常感谢您的帮助。谢谢。
1 个答案:
答案 0 :(得分：0)
好吧，在弄乱了这一点之后，我发现您可以只堆叠容器，然后在样式部分使最高级的容器具有图像。我不确定这是否是正确的方法，但似乎将引导容器放在背景的顶部。我看到的唯一问题是此刻缺少填充，现在我的导航栏下拉列表现在显示在容器按钮的后面。话虽如此，我至少希望在这里讲到这个，以防任何人可以填补空白。
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body, html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #fff;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
h3 {
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: #111;
}
/* Add a dark background color with a little bit see-through */
.navbar {
margin-bottom: 0;
background-color: #2d2d30;
border: 0;
font-size: 11px !important;
letter-spacing: 4px;
opacity:0.8;
}
/* Add a gray color to all navbar links */
.navbar li a, .navbar .navbar-brand {
color: #d5d5d5 !important;
}
/* On hover, the links will turn white */
.navbar-nav li a:hover {
color: #fff !important;
}
/* The active link */
.navbar-nav li.active a {
color: #fff !important;
background-color:#29292c !important;
}
/* Remove border color from the collapsible button */
.navbar-default .navbar-toggle {
border-color: transparent;
}
/* Dropdown */
.open .dropdown-toggle {
color: #fff ;
background-color: #555 !important;
}
/* Dropdown links */
.dropdown-menu li a {
color: #000 !important;
}
.dropdown-menu form div {
padding: 0px 20px;
}
/* On hover, the dropdown links will turn red */
.dropdown-menu li a:hover {
background-color: red !important;
}
.button, .tablinks {
margin-bottom: 0;
background-color: #2d2d30;
color: #d5d5d5;
border: none;
outline:none;
font-size: 11px !important;
letter-spacing: 4px;
opacity:0.8;
}
.active, .button:hover, .tablinks:hover {
color: #fff;
background-color: #555 !important;
}
.container-bg {
position: relative;
opacity: .80;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("img/home_bg.jpg");
height: 100%;
}
</style>
</head>
<body>
<div class="container-bg">
<div class="container-fluid">
<div class="row">
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="myhomepage">title</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<?php if (isset($_SESSION['username']) && !empty($_SESSION['username'])): ?>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">WELCOME, <?php echo $_SESSION['username'] ?><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="registration/logout.php">LOGOUT</a></li>
</ul>
</li>
<?php else: ?>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">REGISTER<span class="caret"></span></a>
<ul class="dropdown-menu">
<form action="registration/register.php" method="post">
<div class="form-group">
<input type="text" name="reg_username" id="reg_username" class="form-control" placeholder=" Username" value="">
</div>
<div class="form-group">
<input type="email" name="reg_email" id="reg_email" class="form-control" placeholder=" Email Address" value="">
</div>
<div class="form-group">
<input type="password" name="reg_password_1" id="reg_password_1" class="form-control" placeholder=" Password">
</div>
<div class="form-group">
<input type="password" name="reg_password_2" id="reg_password_2" class="form-control" placeholder=" Confirm Password">
</div>
<div class="form-group">
<div class="row">
<div>
<input type="submit" name="register-submit" id="register-submit" class="form-control btn btn-info" value=" Register Now">
</div>
</div>
</div>
</form>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">LOGIN<span class="caret"></span></a>
<ul class="dropdown-menu">
<form action="registration/register.php" method="post">
<div class="form-group">
<input type="text" name="log_username" id="log_username" class="form-control" placeholder=" Username" value="">
</div>
<div class="form-group">
<input type="password" name="log_password" id="log_password" class="form-control" placeholder=" Password">
</div>
<!--
<div class="form-group">
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
-->
<div class="form-group">
<div class="row">
<div>
<input type="submit" name="login-submit" id="login-submit" class="form-control btn btn-info" value=" Login Now">
</div>
</div>
</div>
</form>
</ul>
</li>
<?php endif; ?>
</ul>
</div>
</nav>
</div>
<!-- Tab links -->
<div class="tab" id="tab">
<button class="tablinks" onclick="openTab(event, 'tab1')" id="defaultOpen">tab1</button>
<button class="tablinks" onclick="openTab(event, 'tab2')">tab2</button>
<button class="tablinks" onclick="openTab(event, 'tab3')">tab3</button>
<button class="tablinks" onclick="openTab(event, 'tab4')">tab4</button>
</div>
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
<!-- Tab content -->
<div id="tab1" class="tabcontent">
<h3>tab1</h3>
<p>list stuff for tab1</p>
</div>
<div id="tab2" class="tabcontent">
<h3>tab2</h3>
<p>list stuff for tab2</p>
</div>
<div id="tab3" class="tabcontent">
<h3>tab3</h3>
<p>list stuff for tab3</p>
</div>
<div id="tab4" class="tabcontent">
<h3>tab4</h3>
<p>list stuff for tab4</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function openTab(evt, tabName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</body>
</html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？