I have made a website in dreamweaver using bootstrap 3 and less.
I have used navbar default and customised it.
I have just added some extra pages to my site, such as about.html and blog.html
however, on these extra pages the dropdown menu doesn't seem to work. It does work fine on the homepage, with exactly the same code.
I have wrapped with a < li > already and just copy and pasted all the html into my new html files as follows, to have the navbar there on each page. Please advise if I have done something wrong, I am pretty much a complete beginner.Thanks!
<div class="header clearfix">
<nav class="text-center">
<ul class="nav nav-pills">
<li role="presentation" class="active">Home</li>
<li>
Our Services <span class="caret"></span>
<ul class="dropdown-menu">
<li>jhdhalbalb</li>
<li>hdjdjjdj</li>
<li>bdjdshbd</li>
</ul>
</li>
<li role="presentation">About us</li>
<li role="presentation">Blog</li>
<li role="presentation">Contact</li>
</ul>
</nav>
</div>
Add this to the head section of all your pages:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Sometimes bootstrap local files don't work - doing this will let you know if you should re-download them. This is something that has happened to me before.
Also your HTML is very messy, making it hard to really look through. Try cleaning it up a bit and making sure you're following W3 standards so you can follow your code and others can read it.
You should also read this: http://getbootstrap.com/javascript/#dropdowns Bootstrap dropdowns require an extra .js plugin.
Related
I was trying to style a php file called dashboard.php with bootstrap. I only wrote some html code in the file to begin. When I test it, I found the styling in 'ul' tag was wrong. However other classes such as 'class="col-sm-2"' 'class="row"' are working as expect.
This is code in the dashboard.php:
<?php ?>
<!DOCTYPE>
<html>
<head>
<title>Dashboard</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
<ul class="nav nav-pills nav-stacked" >
<li><a href="dashboard.php">
<span class="glyphicon glyphicon-th"></span>Dashboard</a></li>
<li><a href="#">
<span class="glyphicon glyphicon--list-alt"></span>Add New Post</a></li>
<li>Categories</li>
<li>Manage Admins</li>
<li>Comments</li>
<li>Live Blog</li>
<li>Logout</li>
</ul>
</div><!-- End of side area-->
<div class="col-sm-10">
</div><!-- End of main area-->
</div><!-- End of raw-->
</div>
</body>
</html>
This is the screen shot I made when testing the dashboard.php:
enter image description here
If you chack the image. The left side with words in blue belongs to 'ul' tag. The style is completely wrong. It also failed to add glyphicon icons. I checked the syntax of my html code , there seems nothing wrong.
I also want to add more information:
the extension of the file is .php
I opened the XAMPP with Apache opened
the url that opens the file dashboard.php is correct:
http://localhost/studyexample/PHPCMS/dashboard.php
Can you help me to find why the styling in 'ul' tag is completely wrong? Thank you so much.
The problem here may be that you are using relative URLs for your assets, but have not used a base tag. The easiest thing to do is just add a forward slash to the path to your assets. When I run your code in CodePen it looks like it should:
https://codepen.io/anon/pen/vpWLqo
So, what I mean is, for the following assets:
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Add a forward slash so the URLs are absolute:
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
<script src="/js/jquery-3.2.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
Once you do that, I think you'll find that things start looking different for you. If not, you'll need to specify more of a complete path to the assets, meaning you may need to have the full path, like:
<link rel="stylesheet" type="text/css" href="/studyexample/PHPCMS/css/bootstrap.min.css">
<script src="/studyexample/PHPCMS/js/jquery-3.2.1.min.js"></script>
<script src="/studyexample/PHPCMS/js/bootstrap.min.js"></script>
I encountered this error while trying to create a navbar with Bootstrap,
the result should be a navbar but it's not, trying to understand the nature of the error I copied W3schools's code( https://www.w3schools.com/bootstrap/bootstrap_navbar.asp )in the editor (Atom). Both my code and W3schools's code aren't working, but they seems to be correctly written. Where am I wrong? May I have your help please?
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<nav class=“navbar”>
<nav class="navbar">
<a class="navbar-brand" href=“#”>Something</a>
<ul class="navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">One</li>
</ul>
</nav>
</body>
</html>
Before including bootstrap, you should include jquery...
For example:
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
Change your Text Formatted Quotes from this.
<nav class=“navbar”>
To Non text Formatted quotes.
<nav class="navbar">
In your code you are using Bootstrap 4.x, which is the newest release and is completely different, many things look quite similar between 3.x and 4.x but in short anything that worked in 3.x has more chances to break in 4.x.
So instead of using W3School's code as your reference, use Twitter Bootstrap's documentation for version 4.0 :
https://getbootstrap.com/docs/4.0/getting-started/introduction/
Also, your HTML code doesn't look quite right, for e.g this line
<li class="nav-item"><a href="#" class="nav-link">One</li>
You forgot to close <a>. So it is important you take a look at your code and see if something is being caused by a syntax error. Other than that if fix the code the output is what you will get from the HTML. Nothing sort of a navbar because you have to follow Twitter Bootstrap 4's guideline on lay-outing a navbar
https://getbootstrap.com/docs/4.0/components/navbar/
Another issue is that you have put boostrap.min.js before jQuery, for Bootstrap's JavaScript to work you first have to load jQuery.
Good luck.
Dreamweaver library elements are buggy and cause so many updating problems and I don't want to use them anymore. How does everyone else update, for example, the header section of every html page simultaneously without having to manually edit each page?
Here's 3 ways that aren't javascript's include function:
You could have php on your stack, and include files with php:
<?php
include('header.html');
This way used to be standard a long time ago, but no new site should be doing this anymore.
You could use a site generator, like Jekyll. Jekyll parses liquid statements on generation:
{% include header.html %}
This staticcms type of site generation is modern
You could use a javascript framework, like Angular. With angular, your pages get placed inside of a container div, and then you can put anything that shows up on every page (header, nav, footer) outside of the container:
<!DOCTYPE html>
<html>
<head>
<!-- SCROLLS -->
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<!-- load angular and angular route via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body>
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
</header>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
</div>
</body>
</html>
https://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating
Personally, I use angular. At work, our sites are react apps built in Jekyll. I assume that Facebook uses php, or a php framework like CodeIgniter
This is probably extremely simple but I can't figure it out. I am trying to have a pill show up as it appears in the Bootstrap documentation, however it is simply showing up as basic html text with a bullet next to it. I've looked through the documentation and other similar questions asked here but can't seem to figure out what is wrong.
My code:
<div>
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active">Home</li>
</ul>
</div>
What it shows up as:
Home
Included in my header is:
<link rel="stylesheet" href="{% static 'personal/css/bootstrap.min.css' %}" type = "text/css"/>
Using Bootstrap 3.3
This seems to be a CSS problem. It is difficult to help you without your full code. Are using local files or do you load bootstrap from CDN?
Make sure Bootstrap is loaded correctly (CSS & Js).
Try replacing your link code with the following to see if it works
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
If it does, your link has a problem.
I am building a web page that uses the tag to navigate the page -
Menu
...
<nav id="mymenutag">
<ul>
<li class="first">Index</li>
<li>Happy</li>
<li class="last">Nowhere</li>
</ul>
/nav>
This generally works fine, except when I also include the script reference-
<script src="libs/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
Then, the navigation no longer functions. There are a number of other jquery mobile scripts being loaded as well, but this is the one that breaks the navigation. There are some other ID Selectors that still work, but I think they are processed through jquery mobile. This one is not; it just navigates to a new location on the same page.
I set up a working example on github which can be found here:
https://github.com/hypnoboy/jqmobile_breaks_html5_navt
The behavior can be observed by clicking through the pages. As a bonus and to make it easier to see, I added a jpg photo of my favorite "WTF" software installation moment.
Here is a complete sample web page in which the problem can occur:
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<!--begin entries for jquerymobile-->
<link href="css/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>
<script src="libs/jquery-1.9.1.min.js" type="text/javascript"></script>
<!--end entries for jquerymobile-->
</head>
<body>
<!-- start of navigation -->
Menu
<!-- end of navigation -->
<script src="libs/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<!-- causes href navigation in the page to fail -->
<header><div class=main_heading>
<h1>Sad Test App (jquery.mobile-1.3.1.min.js is running)</h1></div>
</header>
<p>This is some sample text
</p>
Menu
Menu
<img id="front" src="WP_000241.jpg"/>
<!--start of navigation-->
<nav id="mymenutag">
<ul>
<li class="first">Index</li>
<li>Happy</li>
<li class="last">Nowhere</li>
</ul>
</nav>
<!-- /end of navigation -->
<script src="js/vendor/jquery-2.0.2.min.js"></script>
<script src="js/helper.js"></script>
<script src="js/main.js"></script>
<script src="libs/app.js" type="text/javascript"></script>
<script src="pages.js" type="text/javascript"></script>
<footer data-role="footer" data-position="fixed">
<h1>Footer</h1>
</footer>
</body>
</html>
Any assistance appreciated.
One of JQuery Mobile traits is loading 2 pages at once into the DOM and showing just one. It is part of the JQM ajax functionality. If you have used an ID in a master page or part that is loaded into more than 1 of your pages you will probably find that upon inspecting your source at runtime you have duplicate IDs
Turning off the ajax functionality and having it do postbacks is a workaround, or use classes
Image showing the issue (image from pluralsight course video)