bootstrap custom css navbar - javascript

I've got this thing in common condition,
but the thing is I am a new guy and now I learn how to create HTML with bootstrap to "typing less"
This is the case I just get, I create my own navigation with UL Li tags and I want a responsive one with bootstrap, first thought it just simple to using bootstrap responsive by inputting the ID from bootstrap and toggle, but it's not.
Please somebody tell me where should I begin to learn bootstrap and modifying things and what is so wrong with my code, I think it's good to join bootstrap to my code
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.navigation {
text-align: center;
margin: 0;
margin-top: 15px;
}
.navigation-modified ul,
li,
ol {
margin: 0;
font: #000;
list-style: none;
display: inline-block;
}
.navigation-modified li {
border: 2px solid red;
min-width: 200px;
padding: 5px 30px;
}
.navigation-modified li:nth-child(n+2) {
margin-left: -2px;
}
.navigation-modified li:hover {
padding: 10px 40px;
margin-top: -15px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<title>Test2</title>
</head>
<body>
<header>
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<nav id="navbarCollapse" class="navigation navbar-collapse">
<ul class="navigation-modified">
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>Registration</li>
</a>
<a href="#">
<li>Tutorial</li>
</a>
<a href="#">
<li>Contact Us</li>
</a>
</ul>
</nav>
</header>
</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>
</html>
Note: I don't put bootstrap CSS and JS, it's too long. Please run on your local using bootstrap.

Use this.........
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css" />
<title>Test2</title>
<style>
body {
margin: 0;
padding: 0;
}
.navigation-modified
{
margin:0px;
padding:0px;
}
.navigation {
text-align: center;
margin: 0;
margin-top: 15px;
}
.navigation-modified ul,
li,
ol {
margin: 0;
font: #000;
list-style: none;
display: inline-block;
}
.navigation-modified li {
border: 2px solid red;
min-width: 200px;
padding: 5px 30px;
}
.navigation-modified li:nth-child(n+2) {
margin-left: -2px;
}
.navigation-modified li:hover {
padding: 10px 40px;
margin-top: -15px;
}
</style>
</head>
<body>
<header>
<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>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="navigation-modified">
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>Registration</li>
</a>
<a href="#">
<li>Tutorial</li>
</a>
<a href="#">
<li>Contact Us</li>
</a>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
</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="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
</html>

Related

How to change classes when navbar collapses?

I am fairly new to Javascript, when it comes to web development. I am using a bootstrap to build a navbar. My navbar looks fine when it is expanded but when it collapses, the design messes up. My code looks like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Commerce</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="">E-Commerce</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
<div class='form-inline my-2 my-lg-0'>
SignUp
Login
<img id="cart-icon" src="" alt="cart">
<p id="cart-total">0</p>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
My custom style sheet main.css has the following code
#cart-icon {
width: 25px;
display: inline-block;
margin-left: 15px;
}
.bg-dark {
background-color: #4f868c !important;
}
#cart-total {
display: block;
text-align: center;
background-color: red;
color: #fff;
border-radius: 50%;
font-size: 14px;
width: 20px;
height: 25px;
}
When the navbar collapses my login, signup buttons appear in a single line inside collapsed navbar menu but I want them to be shown as seperate navbar links just like the Home link and loose the btn class. I have tried writing the following js script, but it does not produce the desired effect.
var toggleButton = document.getElementsByClassName("navbar-toggler");
toggleButton[0].addEventListener("click", () => {
var buttons = document.getElementsByClassName("change-style");
for (i = 0; i < buttons.length; i++) {
buttons[i].className = "nav-link";
}
});
Can someone please help?
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="">E-Commerce</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
<div class='form-inline my-2 my-lg-0'>
SignUp
Login
<img id="cart-icon" src="" alt="cart">
<p id="cart-total">0</p>
</div>
</div>
</nav>
For CSS
#cart-icon {
width: 25px;
display: inline-block;
margin-left: 15px;
}
.bg-dark {
background-color: #4f868c !important;
}
#cart-total {
display: block;
text-align: center;
background-color: red;
color: #fff;
border-radius: 50%;
font-size: 14px;
width: 20px;
height: 25px;
}
#media only screen and (max-width: 600px){
.btn{
display: block;
margin-bottom: 1rem;
float: left;
}
.form-inline{
flex-direction: column;
align-items: flex-start;
}
}
I Hope this will be your desire effect. I know that My answer is not 100% perfect generally because what I am doing now is changing the BOOTSTRAP STYLE
This is a big no when its come to ui.
What you are doing now is you want to make a navbar by using the help of bootstrap.Using bootstrap will make it easy to create a naybar but Hard to style according to your need.
What I recommend is learn more about basic CSS and javascript then try again.
AND Your javascript code syntax is incorrect.
you have to make sure that your styling is being responsive, and you can set a bunch of extra styling for your classes or tag once it reaches specific height and width.

Navbar changing from transparent to black on scroll / resize - load?

So I have a JS that allows me to get my navbar to change from transparent at the top of the screen, to black once you start scrolling.
However, with this script my page loads (on refresh for ex) and the bar starts off black and slowly fades to transparent.
How can I edit this code so that on load (AT THE TOP) the bar is always transparent. And only on scroll or resize it changes.
**Please don't point out that I have "load" in the JS.. without this it starts off black until i scroll down then back up to the top.
function checkScroll() {
var startY = $('.navbar').height() * 1; //The point where the navbar changes in px
if ($(window).scrollTop() > startY) {
$('.navbar').addClass("navbar-inverse");
} else {
$('.navbar').removeClass("navbar-inverse");
}
}
if ($('.navbar').length > 0) {
$(window).on("scroll load resize", function() {
checkScroll();
});
}
body {
height: 1000px;
}
.btn-gs {
background: blue;
border: 2px solid blue;
padding: 5px 23px !important;
border-radius: 25px;
font-weight: 500;
letter-spacing: 1px;
margin-top: 25px;
color: #fff !important;
text-transform: uppercase;
&.btn-gs-lg {
padding: 10px 33px !important;
.transition(background-color ease .3s);
&: hover {
background-color: transparent;
}
}
&.btn-gs-lg-alt {
padding: 10px 33px !important;
.transition(background-color ease .3s);
&: hover {
background-color: lighten(blue, 10%);
}
}
}
.navbar.navbar-inverse {
background: transparent;
transition: all .5s linear;
border: none !important;
}
.navbar.navbar-inverse.scrolled {
background: black;
}
.navbar-alt {
height: 80px;
}
.navbar-brand-alt {
padding: 0;
}
.navbar-signup {
margin-top: 3px;
margin-left: 10px;
}
.navbar-right-alt {
position: static !important;
padding-top: 20px !important;
a {
color: #fff !important;
font-size: 16px !important;
text-transform: uppercase;
&: hover {
color: darken(blue, 10%) !important;
}
}
}
<!DOCTYPE html>
<html lang="">
<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>Title Page</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="navbar navbar-inverse navbar-alt navbar-fixed-top scrolled">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand navbar-brand-alt">
<img src="#" />
</a>
</div>
<button type="button" class="navbar-toggle collapse" data-toggle="collapse" data-target="#o-navbar-collapse" 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>
<div class="navbar-collapse collapse" id="o-navbar-collapse" aria-expanded="false" style="height:1px;">
<ul class="nav navbar-nav navbar-right navbar-signup">
<li>
<a href="#" class="btn-gs">
<i class="fa fa-paper-plane-o"></i>
Free Trial
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-right-alt">
<li>
Home
</li>
<li>
Features
</li>
<li>
FAQ
</li>
<li>
Pricing
</li>
</ul>
</div>
</div>
</div>
</html>
TIA.
The issue is class navbar-inverse in your div.
bootstarp applies blackbackground color on the element where this class is used.
you should remove this class from html and use the below code in script.
Hope this helps.
if ($(window).scrollTop() > startY) {
$('.navbar').addClass("navbar-inverse");} else {
$('.navbar').removeClass("navbar-inverse");}
updated snippet
function checkScroll() {
var startY = $('.navbar').height() * 1; //The point where the navbar changes in px
if ($(window).scrollTop() > startY)
{
$(".navbar").fadeIn(1, function() {
$(this).css({opacity: 1.0});
$(this).addClass("navbar-inverse")
});
}
else
{
$(".navbar").fadeIn(1000, function() {
if($(window).scrollTop() <= startY)
{
$(this).fadeOut(1000, function()
{
$(this).css({opacity: 1.0}); $(this).removeClass("navbar-inverse")
});
}
});
}
}
if ($('.navbar').length > 0) {
$(window).on("scroll load resize", function () {
checkScroll();
});
}
body {
height:1000px;
}
.btn-gs {
background: blue;
border: 2px solid blue;
padding: 5px 23px !important;
border-radius: 25px;
font-weight: 500;
letter-spacing: 1px;
margin-top: 25px;
color: #fff !important;
text-transform: uppercase;
}
.navbar-alt {
height: 80px;
}
.navbar-brand-alt {
padding: 0;
}
.navbar-signup {
margin-top: 3px;
margin-left: 10px;
}
.navbar-right-alt {
position: static !important;
padding-top: 20px !important;
a {
color: #fff !important;
font-size: 16px !important;
text-transform: uppercase;
&:hover {
color: darken(#blue,10%) !important;
}
}
}
.navbar.navbar-inverse {
background: transparent;
transition: all .5s linear;
border: none !important;
}
.navbar.navbar-inverse.scrolled {
background: black;
}
<!DOCTYPE html>
<html lang="">
<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>Title Page</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="navbar navbar-alt navbar-fixed-top scrolled">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand navbar-brand-alt">
</a>
</div>
<button type="button" class="navbar-toggle collapse" data-toggle="collapse" data-target="#my-navbar-collapse" 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>
<div class="navbar-collapse collapse" id="my-navbar-collapse" aria-expanded="false" style="height:1px;">
<ul class="nav navbar-nav navbar-right navbar-signup">
<li>
<a href="#" class="btn-gs">
<i class="fa fa-paper-plane-o"></i>
Free Trial
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-right-alt">
<li>
Home
</li>
<li>
Features
</li>
<li>
FAQ
</li>
<li>
Pricing
</li>
</ul>
</div>
</div>
</div>
<section class="page-section page-section-xlg bs-bg" id="home">
<div class="container">
<div class="row wrap wrap-alt">
<div class="col-md-offset-6 col-md-6">
<h1 class="text-white heading-responsive largest">LOREM IPSUM</h1>
<h4 class="subheading subheading-md subheading-md-white thin">LOREM IPSUM DOLOR SIT AMET. LOREM IPSUM DOLOR SIT AMET.</h4>
<br />
<a href="#" class="btn-gs btn-gs-lg text-normalize">
<i class="fa fa-paper-plane-o"></i>
Free Trial
</a>
</div>
</div>
</div>
</section>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>

I want to make a div responsive and keep its aspect ratio. Always stay in the middle and keep hes ratio and distance from the header an footer

I am trying to make that div from the middle responsive and I really don't know how. I've tried some things but they haven't worked. I want it to be in the middle with the same white space both up and down. I want when I resize the browser it's size to resize to but keep it's ratio. Is it possible?
$(document).ready(function() {
$("[data-toggle = 'popover']").popover({
html: 'true',
content : '<button class="btn footer-buttons footerbuttonshov">About</button> ' +
'<button class="btn footer-buttons footerbuttonshov">Feedback</button>'
});
});
#navbar-main {
background: #017f55;
border:1px solid #000;
border-radius: 0;
clear:both;
}
#title {
color:#000;
font-size: 43px;
top:7px;
}
#select {
color:#000;
height:30px;
}
.login-container {
position:relative;
background-color: #017f55;
height:618px;
width:464px;
margin:0 auto;
top:150px;
}
#nav-footer {
background: #017f55;
display:inline;
text-align: right;
border:1px solid #000;
}
.footer-buttons {
display:inline;
font-size: 20px;
padding-right: 20px;
background: none;
}
.icon-bar{
border: 1px solid #fff;
}
#footer-navbar {
border-color: #000;
}
#footer-button {
border:1px solid #333
}
#footer-button:hover {
background-color: #333;
}
#footer-button:active {
background-color: #333333;
}
.footerbuttonshov:hover{
background:#f98500;
}
<!DOCTYPE html>
<html>
<head>
<title>Code Test</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="js/script.js"></script>
<!-- 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">
</head>
<body>
<!--Header-->
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<nav id="navbar-main" class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="images/test_logo.png">
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav center">
<li>Code Test</li>
<li><a>
<select id="select">
<option value="English">English</option>
<option value="Devanagari">Devanagari</option>
</select>
</a></li>
</ul>
</div>
</div>
</nav>
<!--Main Container-->
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<div class="login-container">
</div>
<!--Footer-->
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<nav id="nav-footer" class="navbar navbar-default navbar-fixed-bottom">
<div id="footer" class="container2">
<div class="navbar-header">
<button id="footer-button" type="button" class="navbar-toggle collapsed" data-toggle="popover" data-target="#footer-navbar" data-placement="top">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="footer-navbar" class="navbar-inner navbar-content-center collapse navbar-collapse">
<button class="btn footer-buttons">About</p>
<button class="btn footer-buttons">Feedback</p>
</div>
</div>
</nav>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
Is this what you want to achieve?
.login-container {
position:relative;
background-color: #017f55;
height:618px;
max-width:464px;
margin:0 auto;
top:150px;
}
If it is true, then never use fixed-width as in width:464px; in your code. Just give max-width like I suggest., etc
It's better if you use media queries to handle it. Or, use bootstrap snippet to wrap .login-container
Check DEMO HERE
MORE:
If you need .login-container inside bootstrap wrapper, you can use:
<div class="col-md-12">
<div class="login-container">
</div>
</div>
Check di Update (using wrapper) in HERE

Bootstrap navbar toggle button not collapsing

Important: I checked similar questions on Stack Overflow, but none seems to fix my problem:
1. I did include Bootstrap JS file.
2. It does not seem like I included JS files twice.
3. I deleted the navbar-default class because I needed to restyle it otherwise (as seen in the tutorial, see below).
I am trying to implement a responsive menu with Bootstrap navbar toggle button, as explained in TutsPlus Power Up Your Portfolio With Bootstrap.
When I shrink the window, the text menu items turn into the hamburger menu button.
However, when I click the hamburger menu button, nothing happens.
Here is the HTML code:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<nav class="navbar">
<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">
<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="#">Red Beluga</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 navbar-right">
<li>Home</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/js/bootstrap.min.js">
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>
And here is the CSS code:
#import 'main.css';
#import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700);
#import url(http://fonts.googleapis.com/css?family=Abril+Fatface);
html{
background: #222 url(../img/abstract-bg.svg) bottom right no-repeat;
height: 100%;
background-position: fixed;
overflow-y: scroll;
}
body{
background: none;
line-height: 1.5;
color: #F5F5F5;
font-family: 'Source Sans Pro', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Abril Fatface', cursive;
margin-top: 0;
}
p {
margin-bottom: 1rem;
}
.navbar-brand, .navbar-nav>li>a{
color: #F5F5F5;
font-weight: bold;
}
.navbar-brand:hover, .navbar-nav>li>a:hover{
color: #F5F5F5;
font-weight: bold;
background: none;
}
.navbar-nav>li>a:after{
content: '/';
margin-left: 30px;
}
.navbar-nav>li:last-child>a:after{
content: '';
}
.navbar-toggle{
background: #111;
}
.navbar-toggle .icon-bar{
background: #F5F5F5;
}
#media (max-width: 768px) {
.navbar-nav>li>a:after{
content: '';
}
.navbar-nav>li>a{
background: #111;
border-radius: 4px;
margin-bottom: 3px;
}
}
Any idea why it is not working.
You should be using the <script> tag to reference JS files
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js">
Not <link>. These are for stylesheets.
<link rel="stylesheet" href="bower_components/bootstrap/dist/js/bootstrap.min.js">

Jquery mobile script conflicting on bootstrap 3

Is there a way for me to use jquery mobile script without conflicting it on my bootstrap 3? My issue are my links is not working when I used Jquery mobile script but whenever I remove the script my links are working fine. I use Jquery mobile for my pop up feature. I'm a newbie on jquery and bootstrap web development, I apologize if my question seems too newbie.. Any help in my case is highly appreciated.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
</head>
<style>
body {
padding: 20px 50px 150px;
font-size: 20px;
text-align: center;
}
.jumbotron {
margin-bottom: 40px !important;
height: 350px !important;
background-repeat: no-repeat;
color: white;
text-shadow: black 0.3em 0.3em 0.3em;
}
#picbg
{
background: url('board.jpeg') no-repeat center center;
}
#container
{
margin: 0 auto;
width: 850px;
background: #fff;
}
</style>
<style>
.centered-pills { text-align:center; }
.centered-pills ul.nav-pills { display:inline-block; }
.centered-pills li { display:inline; }
.centered-pills a { float:left; }
* html .centered-pills ul.nav-pills { display:inline; }
*+html .centered-pills ul.nav-pills { display:inline; }
</style>
<body>
<div class="container">
<div class="jumbotron" id="picbg">
<h1><font face = "brush script mt" color="#fff">My Page</font><h1></div>
</div>
<div class="row">
<div class="span12 centered-pills">
<ul class="nav nav-pills" role="tablist">
<li class="active"><span class="glyphicon glyphicon-home"></span><h2><b>Home</b></h2></li>
<li><span class="glyphicon glyphicon-envelope"></span><h2><b>Contact Me</b></h2></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="glyphicon glyphicon-user"></span><h2><b>Profile</b></h2> </a>
<ul class="dropdown-menu" role="menu">
<li><h2><b>Web</b></h2></li>
<li><h2><b>Author</b></h2></li>
<li>About</b></h2></a></li>
</ul>
</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div data-role="popup" id="myPopup" class="ui-content" data-overlay-theme="a" data-theme="d" data-corners="false">
<img class="popphoto" src="image1.png" style="width:600px;height:756px;" alt="">
</div>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</body>
</html>

Categories