安排侧栏，导航栏和页脚

时间：2017-07-07 13:55:35

标签： javascript html css twitter-bootstrap

＆＃13;
＆＃13; 
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
  overflow-x: hidden;
}
/*footer*/
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;

  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

/*navbar*/
.navbar{
	background-color:black;
	
	font-family: sans-serif;
	font-size: 20px;
}
.navbar-brand{
	font-size: 20px;
	
}
.logo1{
	height: 50px;
	width: 75px;
	opacity: 0.1px;
	left: 0px;
	top: 0px;
	position: absolute;
}


.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #000;  /*Sets the text hover color on navbar*/
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active >   
 a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: white; /*BACKGROUND color for active*/
background-color: #030033;
}

  .navbar-default {
    background-color: #0f006f;
    border-color: #030033;
}

  .dropdown-menu > li > a:hover,
   .dropdown-menu > li > a:focus {
    color: #262626;
   text-decoration: none;
  background-color: #66CCFF;  /*change color of links in drop down here*/
   }

 .nav > li > a:hover,
 .nav > li > a:focus {
    text-decoration: none;
    background-color: silver; /*Change rollover cell color here*/
  }


  .navbar-default .navbar-nav > li > a {
   color: whites; /*Change active text color here*/
    }
body > .container {
  padding: 60px 15px 0;
}
.container .text-muted {
  margin: 20px 0;
}
/* side bar*/
/* Toggle Styles */

#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled {
    padding-left: 250px;
}

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background: #000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
    width: 250px;
}

#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -250px;
}

/* Sidebar Styles */

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
	z-index: 1;
}

.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #999999;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px;
}

.sidebar-nav > .sidebar-brand a {
    color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
}
.btn>.btn-default{

}


@media(min-width:768px) {
    #wrapper {
        padding-left: 0;
    }

    #wrapper.toggled {
        padding-left: 250px;
    }

    #sidebar-wrapper {
        width: 0;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 250px;
    }

    #page-content-wrapper {
        padding: 20px;
        position: relative;
    }

    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: 0;
    }
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
	<link rel="stylesheet" type="text/css" href="style1.css" />
	<link href="bootstrap.min1.css" rel="stylesheet">
  </head>
  <body>
  <!--top bar-->
  <nav class="navbar navbar-inverse navbar-static-top">
	<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<img class="logo1" src="images/capture.png" alt=" logo">
			<a class="navbar-brand" href="#">Web Portax</a>
		</div>
		<form class="navbar-form navbar-left" role="search">
		<div class="form-group">
		<input type="text" class="form-control" placeholder="Search">
		</div>
		<button type="submit" class="btn btn-default">Submit</button>
		</form>
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav navbar-right">
				<li><a href="#">Account Setting</a></li>
				<li><a href="#">Message</a></li>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services<span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#">Log Out</a></li>
						<li><a href="#">Edit Profile</a></li>
						<li><a href="#">Manage prefrences</a></li>
					</ul>
				</li>	
			</ul>
		</div>
	</div>
</nav>

<div id="wrapper">

        <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand">
                    <a href="#">
                        Start Bootstrap
                    </a>
                </li>
                <li>
                    <a href="#">Dashboard</a>
                </li>
                <li>
                    <a href="#">Shortcuts</a>
                </li>
                <li>
                    <a href="#">Overview</a>
                </li>
                <li>
                    <a href="#">Events</a>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#">Services</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </div>
        <!-- /#sidebar-wrapper -->

        <!-- Page Content -->
        <div id="page-content-wrapper">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                      
                        <a href="#menu-toggle" class="btn btn-default" id="menu-toggle"></a>
                    </div>
                </div>
            </div>
        </div>
        <!-- /#page-content-wrapper -->

    </div>
    <!-- /#wrapper -->

    <!-- jQuery -->
    <script src="jquery1.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="bootstrap.min1.js"></script>

    <!-- Menu Toggle Script -->
    <script>
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
    </script>



<!-- body-->

    <!-- Footer -->
    <div class="container">
      <div class="page-header">
        <h1>Content</h1>
      </div>
     
    </div>

    <footer class="footer">
      <div class="container">
	  <div class="row">
        <p class="text-muted"> All rights reserved.  </p>
		</div>
      </div>
    </footer>
	
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
＆＃13;
＆＃13;
＆＃13;

嘿家伙可以帮助我，因为我的当前页面看起来像这样[在此输入图像描述]

enter image description here

当我点击toogle扩展我的侧栏时，它看起来像这样。 enter image description here

如何修复标题和侧边栏之间的空白？如何移动小灰色的东西来切换侧边栏到左角？最后，我怎样才能转移Web Portax＆＃34;从顶部导航栏稍微向右，所以当我最小化它时，徽标和文字不会揉在一起？

我是html的新手，对业余问题感到遗憾。谢谢！

1 个答案:

答案 0 :(得分：0)

使用CSS中的margin属性调整元素周围的空间。

例：
    margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px;

和padding元素调整内容和元素边框之间的空间。

示例：

padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px;

您还可以使用height和width属性来调整元素的大小。

示例height: 100px;

相关问题
最新问题