This is my first try using bootstrap. I am just trying to get a basic menu bar working. From what I see everything works fine, but just doesnt look ok. I tried to switch out the css with a new download, but still doesnt seem to fix anything.
This is the HTML
<!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>Test</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[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]-->
</head>
<body>
<div class="container">
<div class="row">
<nav class="navbar">
<div class="navbar-inner">
test
<ul class="nav">
<li>Item1</li>
<li class="divider-vertical"></li>
<li>Item1</li>
<li class="divider-vertical"></li>
<li>Item1</li>
<li class="divider-vertical"></li>
<li class="dropdown">
Connect<b class="caret"></b>
<ul class="dropdown-menu">
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Nothing complex. Got the basic structure from Bootstrap website. Just added the new menu.
It looks like this
I have checked the CSS files to be in the right place and also the bootstrap js file.
Add the class navbar-brand to the first 'a' tag
test
And add the class navbar-nav to the first 'ul' tag:
<ul class="nav navbar-nav ">
With these changes the example looks better.
I can't post images yet, but in the next link you can see how the example look after this changes:
Related
I'm trying to use Bootstrap's navigation tab feature, but I can't seem to get it working.
What am I doing (or not doing) wrong?
<!DOCTYPE html>
<html>
<head>
<title>Luis Gonzalez's portfolio</title>
<link rel="stylesheet" type="text/css" href="portstyle.css"/>
</head>
<body>
<div class="header">
<div class="navi">
<ul class="nav nav-tabs">
<li class="active">Creations</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
you'll need to reference the bootstrap files.
for now you can use these links:
<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/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Example:
<!DOCTYPE html>
<html>
<head>
<title>Luis Gonzalez's portfolio</title>
<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/3.2.0/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<link rel="stylesheet" type="text/css" href="portstyle.css"/>
</head>
<body>
<div class="header">
<div class="navi">
<ul class="nav nav-tabs">
<li class="active">Creations</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
If you want to download and host Bootstrap yourself, go to getbootstrap.com, and follow the instructions there.
If you don't want to download and host Bootstrap yourself, you can include it from a CDN (Content Delivery Network).
MaxCDN provides CDN support for Bootstrap's, CSS and JavaScript. Though you must also include jQuery:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
side note - ensure that you link to your own stylesheet last, meaning after you've linked to all the bootstrap files. Otherwise, you might get some unexpected behaviours as in bootstrap CSS overriding your own CSS etc.
I'm am having a hard time making websites responsive so i downloaded the basic template and navigation sample from bootstrap, now i'm wondering how do i edit the navigation bar? Because their are already multiple css folders. I tried creating a new css file and editing through there but I can't seem to make it work. What i'm trying to do specifically is making the text centre in the container/wrapper (I'm not sure what exactly it is called, but each word is in a box and i would like to centre the word in that box
html:
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Example</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="navbar.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[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]-->
</head>
<body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4">Work</div>
<div class="col-md-4">About</div>
<div class="col-md-4">Contact</div>
</div>
</body>
</html>
Thanks for taking the time to help, have a good day!
First, make sure your custom CSS file is called after the Bootstrap CSS:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="navbar.css" rel="stylesheet">
<link rel="stylesheet " href="yourCustom.css" />
Second, add this to your custom css:
.col-md-4 {
text-align:center;
}
Why not use Bootstrap's own structure?
jsFiddle Demo
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
I have a website I'm creating, still in it's beginning stages. I have it hosted locally, but when I click the links, it says the files cannot be found even though they do in fact exist. Also, the styling won't apply. My index.html is below:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<base href="/">
<title>Sports</title>
<!-- CSS -->
<link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="libs/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="css/style.css"> <!-- custom styles -->
<!-- JS -->
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<!-- ANGULAR CUSTOM -->
<script src="js/controllers/MainCtrl.js"></script>
<script src="js/controllers/TeamsCtrl.js"></script>>
<script src="js/services/TeamsService.js"></script>
<script src="js/appRoutes.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="myApp" ng-controller="MainController">
<div class="container">
<!-- HEADER -->
<nav class="container-fluid navbar navbar-default navbar-fixed-top" role="navigation" ng-controller="HeaderController">
<div class="navbar-header">
<a class="navbar-brand" href="/"><i class="fa fa-home fa-lg"></i>Sports</a>
</div>
<ul class="nav navbar navbar-nav">
<li ng-class="{ active: isActive('/teams') }">Teams</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-user"></i> Log In</li>
</ul>
</nav>
<!-- ANGULAR DYNAMIC CONTENT -->
<div ng-view></div>
</div>
</body>
</html>
The part I do not understand is that this runs fine on my work computer. I zipped it up, sent it to myself at home, and it doesn't run correctly. When I click the Teams link, it takes me here: file:///C:/teams, which isn't correct. I have no idea where to even start looking, as this is my first web project. Any help would be greatly appreciated as to where I should start/what the issue could be. Thank you ahead of time.
use ~ symbol infront of all your links. For example use ~/teams instead of /teams.
~ symbol will take you current folder where the files are located.
I wasn't running a localhost web server on my machine. Once I did, everything worked fine.
UPDATE: By locally when I preview my work in the browser. My files are stored in the same folder structure on one of our severs.
UPDATE: Which jpeg reference do you mean? Is this before I try your way of doing it?
UPDATE: this page doesn't load comments or answers so I'll be posting my answers here.
UPDATE: the console does say that the files are missing, but they're not. The site files in their entirety have been uploaded several times. I can provide a screenshot of the folder within the sever if need be.
I have a background video inserted into my index page but it doesn't play once the site is live. I believe it uses the image fallback. It works fine locally but having problems with absolute urls. I downloaded this from github and the update for this problem is below but the package I downloaded was a newer version anyways. Test link is below the github link.
https://github.com/VodkaBears/Vide/archive/0.1.1.zip#
http://bit.ly/1xLpFiu
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Pragma" content="no_cache" />
<title>M&T Printing Group</title>
<link rel=”author” href=”https://plus.google.com/+MTPrintingGroupKitchener“/>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css">
<![endif]-->
<link rel="stylesheet" type="text/css" href="css/content.css" />
<link rel="stylesheet" type="text/css" href="css/font.css" />
<link rel="stylesheet" type="text/css" href="QuotesRotator/css/default.css" />
<link rel="stylesheet" type="text/css" href="QuotesRotator/css/component.css" />
<script src="QuotesRotator/js/modernizr.custom.js" type="text/javascript"></script>
<!-- github.com/scottjehl/Respond - for IE 8, 7.... -->
<script src="Respond-master/dest/respond.min.js" type="text/javascript"></script>
<!--<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".subnav").prev().mouseover(function(){
var sub_menu_shift = parseInt($(this).next().css("height")) + 100;
$(this).next().css({'position':'relative','bottom':sub_menu_shift});
});
});
</script>-->
<style>
html, body {
margin: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body data-vide-bg="Vide-0.1.2/examples/video/videoMain">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="Vide-0.1.2/src/jquery.vide.js"></script>
<script>window.jQuery || document.write('<script src="Vide-0.1.2/libs/jquery/jquery-1.11.1.min.js"><\/script>')</script>
<script src="Vide-0.1.2/src/jquery.vide.js"></script>
<script>
// $(document).ready(function () {
// $(document.body).vide("Vide-0.1.2/examples/video/videoMain"); // Non declarative initialization
//
// var instance = $(document.body).data("vide"); // Get instance
// var video = instance.getVideoObject(); // Get video object
// instance.destroy(); // Destroy instance
// });
</script>
<div id="indexBG">
<div id="colour-bar-black"></div> <!-- colour-bar-black -->
<div id="nav-wrap">
<ul>
<li id="link-one" class="orange">
<span>Printing</span>
<div class="subnav" id="subnav">
<ul>
<li>Digital Printing</li>
<li>Offset Printing</li>
<li>Business Cards & Stationery</li>
<li>Manuals, Reports & Catalogues</li>
<li>Bindery Services</li>
<li>Canada Post</li>
<li>Graphic Design & Typesetting</li>
</ul>
</div><!-- /.subnav -->
</li>
<li class="red"><span class="doubleLine">Promotional Products</span>
<div class="subnav">
<ul>
<li>Awards & Mounting</li>
<li>Binders</li>
<li>Clothing & Apparel</li>
<li>Bags</li>
<li>Drinkware</li>
<li>Lanyards</li>
<li>Magnets</li>
<li>Pens & Writing Instruments</li>
<li>Presentation Folders</li>
<li>USB Flash Drives</li>
<li>Umbrellas</li>
</ul>
</div><!-- /.subnav -->
</li>
<li class="pink"><span class="doubleLine">Banners & Signage</span>
<div class="subnav">
<ul>
<li>Drafting & CAD services</li>
<li>Coroplast & FoamCore</li>
<li>Retractable Banners</li>
<li>Posters & Banners</li>
<li>Wraps & PVC</li>
<li>Displays & Canvas</li>
</ul>
</div><!-- /.subnav -->
</li>
<li class="purple"><span>POOL</span></li>
<li class="blue"><span>Volumes</span></li>
<li class="green"><span>Contact</span>
<div class="subnav">
<ul>
<li>Locations</li>
<li>Media</li>
<li>Digital Link</li>
<li>FTP site</li>
<li>Client Login</li>
<li>Estimate Request</li>
<li>Submit A File</li>
<li>Recognition</li>
<li>Graphics Factory</li>
<li>Careers</li>
</ul>
</div><!-- /.subnav -->
</li>
<li class="yellow-facebook"><span></span></li>
</ul>
</div> <!-- nav-wrap -->
<div id="logo"><img src="images/logo-main.png" alt="M&T Printing Group" title="M&T Printing Group" /></div> <!-- logo -->
<!-- used for mobile -->
<div id="logo-mobile"><img src="images/M&T-Printing-Group-Logo-moble.jpg" alt="M&T Printing Group" title="M&T Printing Group" /></div> <!-- logo-mobile -->
<h1>“Your Partners In Print”</h1>
<div id="footer">
<ul class="footer-left">
<li>M&T Printing Group - © 2014</li>
</ul>
<ul class="footer-right">
<li>Client Login</li>
<li>Locations</li>
<li>Pool</li>
</ul>
</div> <!-- footer -->
</div> <!-- indexBG -->
</body>
</html>
I would just do something like this, using jquery. You can have the videoURL go to whichever you like and it will load right up. I have done this in the past for several websites and it works wonderfully. The below is just html and JQUERY. Your issue seems to me seems to be were you have the video stored. You said it works fine "locally" Well where are you hosting your webpage? Your video should be stored in the same venue.
<section class="content-section video-section">
<div class="pattern-overlay">
<a id="bgndVideo" class="player" data-property="{videoURL:'https://www.youtube.com/watch?v=sd4bqmP_460',containment:'', quality:'large', autoPlay:true, mute:true, opacity:1}">bg</a>
</div>
</section>
$(document).ready(function () {
$(".player").mb_YTPlayer();
});
I see the edit you added. Remove the jpeg or reference the mp4 file.
--Sorry for editing your comment but it's the only way I can respond.Which jpeg reference do you mean?
I have a problem with Twitter Bootstrap's class="nav."
When I include "data-toggle='tab'", none of my menu items function.
(BTW: If I remove data-toggle, the first option does not work, but the rest will i.e. if data-toggle is removed, Google does NOT work, but Bing and Bing2 will, and Yahoo won't work, but CNN and Weather do)
This is the code:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.js"></script>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<meta charset=utf-8 />
</head>
<body>
<ul id="myTab" class="nav nav-tabs" data-tabs="tabs">
<li class="active">Google</li>
<li>Bing</li>
<li>Bing2</li>
<li class="dropdown">
More choices <b class="caret"></b>
<ul class="dropdown-menu">
<li>Yahoo</li>
<li>CNN</li>
<li>Weather</li> <!-- NOTE data-toggle removed -->
</ul>
</li>
</ul>
</body>
</html>
Here is a working example: http://jsbin.com/ujujub/1/edit
Three things:
Remember to include bootstrap-tab.js
Write a script responsible for handling navigation from tab to tab
The links should not point directly to the content of your sites, but rather to the the ID of divs that wrap the content of your sites.