I have a website I'm trying to design and I have a general layout page where everything will be placed i.e content from other pages I've made, I ran into a problem where my content overflowed and no scrollbar appeared; I looked around and tried a couple of ways to resize my content but none of them worked out so I settled for a temporary fix and made the window size static, can anyone help me with resizing my page based on the screen it's running on. I'm using webmatrix and there will be some C# code in these pages so the extension is cshtml. I am also very new to web development so sorry if my code is messy.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="/Shared/css/bootstrap.css" />
<style type="text/css">
.body
{
padding-top: 60px;
padding-bottom: 40px;
}
.renderBody {
height: 462px;
overflow: auto;
padding-top: 60px;
padding-left: 440px;
margin: initial;
}
#login{
padding-right: 0px;
}
</style>
<link rel="stylesheet" type="text/css" href="/Shared/css/bootstrap-responsive.css"/>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/latest/js/bootstrap.min.js"></script>
<script src="/downloads/twitter-bootstrap-hover-dropdown/twitter-bootstrap-hover-dropdown.js?view=1"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="navContainer">
<img src="/Shared/Images/Logo.png" alt="LogoImage"></img>
<form class="navbar-form pull-right">
<ul class="breadcrumb" id="login">
<li> Login
<span class="divider"> /
Register</span></li>
</ul>
</form>
</div>
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="http://www.facebook.com">Some Information</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">More Information</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="active">Traveling</li>
<li class="active">Moving</li>
<li class="active">Sports</li>
</ul>
<!--<form class="navbar-form pull-right">
<ul class="nav"><li class="active">Register</li></ul>
</form>
</div>-->
</div>
</div>
</div>
<div class="renderBody">
#RenderBody()
</div>
</div>
</body>
</html>
There are a few things you can try layout-wise, before you go down the road of screen measurement in script:
First, be sure to use the viewport meta tag (https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag):
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Next, wrap RenderBody with the bootstrap container class:
<div id="main" class="container">
#RenderSection("featured", required: false)
<section>
#RenderBody()
</section>
</div>
Also, if you're not already familiar with it, you may want to read up on the fluid grid system in bootstrap (http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem)
Lastly, if all else fails, you can use the overflow CSS property on your content container:
.renderBody {
overflow-x: scroll;
}
Related
I have a problem with hiding some of my content. I am very new to coding, i started with coding for a week ago. Until now i have learned html, the most inportaint css, and how to use bootstrap 4. My problem is I want to hide some content. I have searched around on the web for hours, and the only ting i found useful was the d-none and d-sm-block and all the other hide and show tags. I tried it several places in my code without any luck, so hope anyone can help.
I want the search bar, log in and register button on small screens to disappear, and then a small dropdown menu shows up instead(only on the small screens). In the dropdown menu i want to have the log in an register button. I know i didn't use boopstrap as navbar at the top, but thats beacause I hadn't learn it yet, and i didn't want to change it since I liked the size on the buttons.
Hope anyone can help.
The top of my html code.(The hotpink buttons are bigger in my real code since I have other text in it)
<head>
<title>hello world</title>
<link rel="stylesheet" href="../test_sublime/css/bootstrap.css">
<link href="test1.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h2><em><u>Header</u></em>.no</h2>
<nav class="headnav">
<ul>
<li class="hotpink"><a class="b_link" href="#">Test</a></li>
<li class="hotpink"><a class="b_link" href="#">Test</a></li>
<li class="hotpink"><a class="b_link" href="#">Test</a></li>
<li class="hotpink"><a class="b_link" href="#">Test</a></li>
<li class="hotpink"><a class="b_link" href="#">Test</a></li>
</ul>
</nav>
<div class="btn-group">
Logg In
Register
<!--This is the search bar I want to hide when the screen is small-->
</div>
<form class="form-inline my-lg sok">
<input class="form-control mr-sm-2 msok" type="search" placeholder="Søk" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0 msok" type="submit">Søk</button>
</form>
<!--I want this dropdown menu to show up when the screen is small-->
<div class="dropdown-menu d-block d-sm-none" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="../test_sublime/logg in.html">Logg Inn</a>
<a class="dropdown-item" href="../test_sublime/registrer.html">Register Deg</a>
<div class="dropdown-divider"></div>
</div>
</header>
...
<footer>
...
<script src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script scr="../test_sublime/jQuery/jquery.js"><\/script>');</script>
<script type="text/javascript" src="../test_sublime/js/test.js"></script>
<script src="test_sublime/js/bootstrap.min.js"></script>
</footer>
</body>
Parts of my css
body {
background: pink;
margin-left: 12px;
margin-right: 12px;
margin-top: 10px;
}
h2 {
display:inline;
background: mediumvioletred;
padding: 20px 40px 7px 40px;
margin: 0px 5px 40px -15px;
border-radius: 4px;
}
ul {
display: inline;
margin: 0px 0px 0px -38px
}
.sok {
display: inline-block;
float: right;
margin-right: 35px;
margin-top: 10px;
}
.msok {
margin-top: 0px;
}
.btn-group {
padding: 0px 10px 0px -10px
display: inline;
float: right;
margin-top: 10px;
}
nav.headnav {
display: inline-block;
}
Is it any ways to fix it with bootstrap, or do i have to use JavaSript or something else?
(Sorry for the colors)
Use a media query in your css
#media (max-width: 767.98px) {
form.sok {
display: none;
}
You can hide the elements based on screen size.
Bootstrap Responsive Break Points
This will solve your problem using navbar class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="bootstrap.css">
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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>
<a class="navbar-brand" href="#">yourbrand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li>About</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="btn input-group-addon">Search</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<div class="btn-group">
Logg In
Register
</div>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
I would like to use a bootstrap navbar fixed at the top of my page. I then would like to have a div bellow that that covers the rest of the page. I have the width solved by applying the class container-fluid. However i have adjusted the containers height to 93.5% and set the html overflow to hidden. This works fine with a full screen window. However this solution does not appear o be responsive and fails with window size adjustments. I would like the height of the div container to automatically fill the rest of the page. Code is bellow:
CSS
html {
height:100%;
overflow:hidden;
}
body {
height:100%;
}
#map-container{
height:93.5%;
border-color: black;
border-style:solid;
border-width:2px;
margin:5px;
}
.navbar{
margin-left:5px;
margin-right: 5px;
margin-top:5px;
margin-bottom:0px;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>quickMap</title>
<!-- Bootstrap Core CSS -->
<link href="~/Content/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="~/Content/quickMap.css" rel="stylesheet" >
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid" id="map-container">
<div>
</div>
</div>
<!-- jQuery -->
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>
I think overflow: hidden is messing you up. I changed it to auto and it worked well enough for me.
html {
height:100%;
overflow:auto;
}
Not sure that 93.5% is the exact right number for the height, as, at least on my browser, the div ends up being slightly too tall for the window, but this can be fixed by adjusting the height slightly shorter. Something more like 91%.
I am writing the header for a basic sie, and am having trouble grasping the idea of the proper way to override the bootstrap CSS with my own CSS. I added the form-control input and buttom to act as a site search, but am having trouble with positioning. Positioning always seems to be an issue I run into, as I always add features that require me o adjust positioning of others. Anyway, I wrote some code for my header that I want to act as logo > menu > search > social buttons all in a row. My HTML is:
<!doctype html>
<html>
<head>
<link rel = "stylesheet" href = "css/style_samp2.css">
<link rel = "stylesheet" href = "css/bootstrap.min.css">
<meta charset="utf-8">
<title>Site</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="logo_header_test1.html">
<img alt="My Logo" src="logo.gif">
</a>
</div>
<div class="container">
<ul class = "dropdown-menu-right">
<div class = "top-menu">
<li>About</li>
<li>Blog</li>
<li>Resume</li>
<li>Portfolio</li>
</div>
</ul>
<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>
</div>
</div>
</nav>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/scripts.js" type="text/javascript"></script>
</body>
</html>
CSS:
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
.container-fluid {
background-color: #30302f;
height: 90px;
}
.top-menu a{
color: #fff;
font-size: 18px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
position: relative;
left: 320px;
top: 64px;
}
.top-menu a:hover {
text-decoration: underline;
color: #fff;
}
.container .top-menu li{
display: inline-block;
}
.social{
position: relative;
top: 20px;
left: 900px;
}
.navbar-header a {
background-color: #30302f;
height: 69px;
width: 367px;
position: relative;
left: 120px;
}
Pseudo ::before element
:after, :before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Pseudo ::after element
:after, :before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Here is a fiddle (the logo isn't working, but the dimensions are correct):
https://jsfiddle.net/yp1pm3e8/
Thanks for any kind of input as to the correct way to position the divs!
Check out this page http://getbootstrap.com/css/ and view bootstrap's "Grid System". This will help you understand rows and columns. As for your custom css I agree with the above answer. You must have your style sheet after the bootstrap stylesheet in the head.
The logo and the search bar should not be wrapped in a nav tag. http://www.w3schools.com/TAgs/tag_nav.asp Check this page out for a good definition on the use of nav. The nav should only wrap your site navigation or other main/utility site navigation. In this instance it would be your about, blog, resume and portfolio.
Bootstrap makes it easy to create fluid layouts. So you should be careful trying to override the code. Based on the code you provided and the question you are asking I would try wrapping everything like I have below. This will put everything on the same row and help you position like you want. You can then wrap everything in your tags and style how you want. Just remember bootstrap is a fluid and responsive layout.
<div class="container-fluid">
<div class="row">
<div class="col-md-4">Logo tags and code goes heare</div>
<div class="col-md-4">Navigation and tags goes here</div>
<div class="col-md-4">Search code and tags goes here</div>
</div>
</div>
I would recommend setting the .img-responsive to your logo to keep it fluid. In js fiddle I noticed there was problems with the logo overlapping your navigation. I think this is because you provided fixed dimensions. Also, you are setting things to position relative when you may not need to. Let me know if you need further explanation.
Hope this helps!
EDIT: okay so after reviewing your question one more time and looking over your new code in jsfiddle I came up with this solution: https://jsfiddle.net/8yufLL4n/embedded/result/
here is link to editable jsFiddle code: https://jsfiddle.net/8yufLL4n/
I used a few resources for this: http://getbootstrap.com/components/#navbar-default I copied the code over from bootstrap and I made slight alterations to fit what I think you are trying to do. Now on large screens and normal tablet view the logo, navigation and search form all sit in the same row. As you adjust the screen size this changes like in all fluid and responsive designs. To get the dropdown working you will have to add javascript. This link should help: http://getbootstrap.com/javascript/#dropdowns
Here is the html:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed menuIcon" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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" href="#">
<img alt="Brand" src="http://i.imgur.com/jeJYf95.gif" class="img-responsive" id="brandImage" />
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
About <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
Blog <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
Resume <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
Portfolio <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<label for="search" class="sr-only">Search Bar</label>
<input type="text" name="search" class="form-control" placeholder="Search" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
And the css:
.container {
background:#30302f;
}
.menuIcon {
background:rgb(200,200,200);
}
.navbar-brand {
height:auto;
}
#brandImage {
max-width:60%;
}
#media (max-width:600px) {
.navbar-brand {
width:95%;
padding:8px 2.5%;
}
#brandImage {
max-width:100%;
}
}
#media (min-width:990px) and (max-width:1200px) {
.navbar-brand {
width:250px;
}
}
Notice that I use media queries to style it at different screen sizes. I am not trying to make drastic changes to the bootstrap css. Instead, try adding id or classes to the elements that you need to style (like what I did with menuIcon and brandImage). Try making small changes one at a time to see how it effects the design.
Let me know if this helps!
You must include your new style settings AFTER the bootstrap definitions, so that the bootstrap css definitions will get overwritten.
So first need to include the default bootstrap css and afterwards your new style definiton file, so that settings get overwritten by the new settings.
well this pretty simple buddy you should place your custom css file below the bootstap css file. something like this:
<!doctype html>
<html>
<head>
<link rel = "stylesheet" href = "css/bootstrap.min.css"> <!-- first place bootstrap -->
<link rel = "stylesheet" href = "css/style_samp2.css"> <!-- place of custom css file to override your bootstrap css file
</head>
<body>
<!-- your body -->
</body>
</html>
this way you can override bootstrap css file
I'm hand-coding my first website, and it's been a fun adventure so far, but I've run into a css glitch with the navigation menu. Here's my website-in-progress. On my 15" laptop, when I initially load the site, the nav bar extends to the full-width of the container (80% width of the screen) as I expect it to. However, if I zoom the webpage, or view it through different resolutions through screenfly, the nav bar extends past the container and also the header image becomes short. Can anyone help me figure out why this is? Below is the css, then the html
*{ margin: 0 auto;}
body {
background:black;
margin: 0 auto;
font-family:georgia, times,serif;
}
#outer-content-wrapper{
position:relative;
height:100%;
width:80%;
margin:0 auto;
}
#navwrap{
margin:0;
height:60px;
width:100%;
}
#nav{
position:relative;
background:black;
height:60px;
width:100%;
border-top-style:dashed;
border-bottom-style:dashed;
border-width:1px;
border-color:#696969;
z-index:9000;
}`
<div id="outer-content-wrapper">
<div id="header">
<div id="greenlight"></div>
</div>
<div id="navwrap">
<div id="nav">
<div id="logo"></div>
<div class="menu">
<div class="pagesmenu">
<ul>
<li>bio</li>
<li>listen</li>
<li>contact</li>
<li>blog </li>
</ul>
</div>
Peace
use bootstrap instead of plain css. Bootstraps helps to work your site as per screen resoultion http://getbootstrap.com/. use my html code for help
HTML:
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>MENU</title>
<link href="bootstrap.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="custom.css" />
<link type="text/css" rel="stylesheet" href="css/media.css" />
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<script src= "respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="application.js"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<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>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
</body>
</html>
Your complete site will pe resposive and can also work on mobile
I am using bootstrap framework and tried to replicate http://twitter.github.com/bootstrap/examples/hero.html
can any one please tell me why the dropdown-menu is not working.
the drop down menu which works in the example is not working with my code and i have included proper styles and js ! and one other styles are working so thinking its not a prob with the style any help ll be greatly appreciated
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<meta charset="utf-8">
<title> The first step</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form pull-right">
<input class="span2" type="text" placeholder="Email">
<input class="span2" type="password" placeholder="Password">
<button type="submit" class="btn">Sign in</button>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<hr>
<footer>
<p>© Company 2013</p>
</footer
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
#bana close the footer close tag
Edit your Script Reference like this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
I have used the below online utility before and it has worked for me. It is free and quick. I created a sample dropdown menu and then examined the code to apply to my website. Good luck.
CSS Menu Maker
Use the css and js file the following way: Check Jsfiddle Example with cloud hosted bootstrap css and js
Also you are using wrong version of Jquery in your page it has to be
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
The html should like below :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<meta charset="utf-8">
<title> The first step</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
</head>
And in footer :
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>