-1
Ich habe Bootstrap noch nie benutzt und versuche mein Navis ansprechbar zu machen. Ich habe mein Nav reagiert, aber es ist nicht richtig formatiert. Das Logo ist nicht zentriert und wenn der Abschnitt erweitert wird, ist der gesamte Inhalt unordentlich. Wie kann ich den Inhalt professioneller gestalten?Wie verbessere ich die Reaktionszeit meines Bootstrap-Nav?
/* 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 */<!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>
\t \t \t
\t \t \t <!-- Login -->
\t \t \t <div class='navbar-form navbar-right'>
\t \t \t <form action='#' method='post'>
\t \t \t <input type='text' placeholder='Email' id='email_form'>
\t \t \t <input type='text' placeholder='Password' type='password' id='password_form'>
\t \t \t <button class="btn btn-primary btn-sm" id='login_button'>Login</button>
\t \t \t </form>
\t \t \t
\t \t \t <input type='checkbox' name='remember' id='remember'> <label for='remember' id='remember_label'> Remember me </label>
\t \t \t
\t \t \t <a href='#' id='forgot_password'> Forgot Password? </a>
\t \t \t
\t \t \t </div>
\t \t \t
\t \t </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>