如何提高Bootstrap导航的响应速度？

时间：2017-03-12 02:03:59

标签： css twitter-bootstrap

我从未使用过Bootstrap，我试图让我的导航响应。我的导航响应速度很快，但格式不正确。徽标不居中，当扩展部分时，所有内容都很混乱。如何让内容看起来更专业？

＆＃13;
＆＃13; 
/* Navigation */

.navbar {
  background: #007BC4 !important;
  padding: 10px !important;
}

.nav a {
  color: white !important;
}

#sign_up {
  position: absolute;
  left: 100%;
  top: 100%;
  transform: translatex(-50%);
}

#email_form, #password_form {
  padding: 5px;
  font-family: 'Open Sans', sans-serif;
  border-radius: 3px;
  border: 1px solid #007BC4;
}

#login_button {
  background: #0092ea !important;
  border: 1px solid #005c93;
  font-weight: bold;
  font-size: 14px !important;
}

#login_button:hover {
  background: #007BC4 !important;
}

#remember_label {
  color: white !important;
  font-weight: normal !important;
  font-size: 13px;
  font-family: 'Open Sans', sans-serif;
}

#forgot_password {
  color: white !important;
  position: relative;
  left: 65px;
  font-size: 13px !important;
}

#remember {
  position: relative;
  top: 2px;
}

/* End of Navigation */
＆＃13; 
<!DOCTYPE html>
<html>
<head>
    <!-- CSS Files -->
    <link rel='stylesheet' href='http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>

<body>
  <!-- navigation -->
    <div class="navbar navbar-default navbar-fixed-top">
    <div class="container">

        <div class="navbar-header">
          <button button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" rel="home" href="#" title="Buy Sell Rent Everyting">
                <img style="max-width: 250px; margin-top: -5px;"
                     src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a">
            </a>
        </div>
        
        
        <!-- Sign Up -->
        <div id="navbar" class="collapse navbar-collapse navbar-responsive-collapse">
            <ul class="nav navbar-nav">
                <li> <a href="#"><button class="btn btn-success btn-sm" id='sign_up'> Sign Up </button></a> </li>
            </ul>
			
			<!-- Login -->
			<div class='navbar-form navbar-right'>
			  <form action='#' method='post'>
			    <input type='text' placeholder='Email' id='email_form'>
			    <input type='text' placeholder='Password' type='password' id='password_form'>
			    <button class="btn btn-primary btn-sm" id='login_button'>Login</button>
			  </form>
			  
			  <input type='checkbox' name='remember' id='remember'> <label for='remember' id='remember_label'> Remember me </label>
			  
			  <a href='#' id='forgot_password'> Forgot Password? </a>
			  
			</div>
			
		</div>

    </div>
</div>
  <!-- end of navigation -->

  <!-- JS Files -->
  <script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
  <script src='http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
</body>
<script type="text/javascript">

</script>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

我试图给出专业的外观。请在这里找到代码：

.navbar {
  background: #007BC4 !important;
  padding: 10px !important;
}

.nav a {
  color: white !important;
}

#sign_up {
  position: absolute;
  left: 100%;
  top: 100%;
  transform: translatex(-50%);
}

#email_form, #password_form {
  padding: 5px;
  font-family: 'Open Sans', sans-serif;
  border-radius: 3px;
  border: 1px solid #007BC4;
}

#login_button {
  background: #0092ea !important;
  border: 1px solid #005c93;
  font-weight: bold;
  font-size: 14px !important;
}

#login_button:hover {
  background: #007BC4 !important;
}

#remember_label {
  color: white !important;
  font-weight: normal !important;
  font-size: 13px;
  font-family: 'Open Sans', sans-serif;
}

#forgot_password {
  color: white !important;
  position: relative;
  left: 65px;
  font-size: 13px !important;
}

#remember {
  position: relative;
  top: 2px;
}

.navbar-brand{
	height:auto;
	padding: 0px 15px;
}
.navbar-brand img{ max-width:250px;width:100%;}
.navbar-nav > li > a{padding-top: 0;}
@media (max-width:1000px) {
	.navbar-header {
    	float: left;
		width:25%;
	}
	.navbar-brand{
		width: 100%;
		margin-top: 12px;	
		padding:0;
	}
}
@media (max-width:767px) {
	.navbar-header {
    	float: left;
		width:100%;
		margin-left: 0 !important;
	}
	.navbar-brand{
		width: auto;
		margin-top: 0px;
	}
	.navbar-brand img {
    	max-width: 200px;
	}
	.navbar-nav {
		width: 100%;
		float: left;
		margin: 7.5px 0;
	}
	.navbar-nav > li > a{
		padding: 10px 0;
	}
	.navbar-form{
		float: left;
	}
	#sign_up {
		position: relative;
		left: 50%;
		top: 0;
		width: 100%;
		padding: 8px 0px;
	}
	#email_form, #password_form{
		margin-bottom: 5px;
		width: 100%;
	}
	#login_button{
		width: 100%;
	}
}
<!-- CSS Files -->
    <link rel='stylesheet' href='http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<div class="navbar navbar-default navbar-fixed-top">
    <div class="container">

        <div class="navbar-header">
          <button button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" rel="home" href="#" title="Buy Sell Rent Everyting">
                <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a">
            </a>
            
        </div>
        
        
        <!-- Sign Up -->
        <div id="navbar" class="collapse navbar-collapse navbar-responsive-collapse">
            
			<ul class="nav navbar-nav">
                <li> <a href="#"><button class="btn btn-success btn-sm" id='sign_up'> Sign Up </button></a> </li>
            </ul>
			<!-- Login -->
			<div class='navbar-form navbar-right'>
			  <form action='#' method='post'>
			    <input type='text' placeholder='Email' id='email_form'>
			    <input type='text' placeholder='Password' type='password' id='password_form'>
			    <button class="btn btn-primary btn-sm" id='login_button'>Login</button>
			  </form>
			  
			  <input type='checkbox' name='remember' id='remember'> <label for='remember' id='remember_label'> Remember me </label>
			  
			  <a href='#' id='forgot_password'> Forgot Password? </a>
			  
			</div>
			
		</div>

    </div>
</div>

<!-- JS Files -->
  <script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
  <script src='http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>

相关问题
最新问题