I'm having difficulty with ScrollSpy on my web page. I've tried to put the class file indicators into the correct locations but they are still not showing up.
fiddle
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Unix Command Crib Sheet</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.ico">
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="command-crib-sheet.css" rel="stylesheet">
</head>
<body data-spy="scroll" data-target=".thingy">
<div class="navbar-fixed-top">
<h2>Unix Command Crib Sheet</h2>
</div>
<div class="container">
<div class="col-md-3">
<div id="centered-nav" class="bs-sidebar hidden-print affix">
<nav id="thingy" class="nav bs-sidenav">
<li>
...
Yes, just add a class 'thingy' to
<div class="container thingy">
added new css to highlight the text(change style accordingly)
li.active a {
color: red;
}
and finally add this script to page
<script type="text/javascript">
$('body').scrollspy({
target: '.thingy'
});
</script>
last but not least i have changed <nav> to <ul>
<nav id="thingy" class="nav bs-sidenav">
to
<ul id="thingy" class="nav bs-sidenav">
That's it..!
Related
I have a simple html page
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Firefox title</title>
<link rel="stylesheet" type="test/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="test/css" href="static/music/style.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="http://127.0.0.1:8000/music/">Viberr</a>
</div>
</div>
</nav>
<h3>Here are all my albums:</h3>
<ul>
<li>Master of puppets - Metallica</li>
<li>Black album - Metallica</li>
</ul>
</body></html>
The problem is that firefox doesn't load css styles. It works well in chrome. I tried to run this page on two different pcs with same result.
Why firefox doesn't load styles?
You can check out the page here
There had been a few issues:
1) typo here text no text:
instead of :
<link rel="stylesheet" type="test/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
it should:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
Another typo:
use:
<link rel="stylesheet" type="text/css" href="static/music/style.css">
IMPORTANT type="text/css" is deprecated so you don't need it.
This is not correct either:
I hope that helped.
Take away the type attribute from both links, and it should now work.
hi i'm working in visual studio with bootstrap.
i'm trying to design the section at the and of code, but it doesn't work (i don't have the access to id="TikNehesTitle".
i added my HTML and CSS (in comment) code here.
thanks for responding.
my HTML code:
<!DOCTYPE html>
<html lang="he">
<head>
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="Stylesheet" type="text/css" href="StyleSheet.css" />
</head>
<body dir="rtl">
<div class="container">
<nav class="navbar navbar-inverse">
<!-- menu list-->
<ul class="nav navbar-nav">
<li>הירשם</li>
<li>התחבר</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>צור קשר</li>
<li>אודות</li>
<li>איזור מגורים</li>
<li>דף הבית</li>
</ul>
</nav>
</div>
<section>
<div class="container" id="TikNehesTitle"><h1>תיק נכס</h1></div>
</section>
</body>
</html>
CSS id is set with # prefix.
Simply set your CSS to:
body {
}
#TikNehesTitle {
height: 100px;
width: 100px;
border: 1px solid red;
}
I am trying to reference my own CSS and Bootstrap CSS in my personal website. But I only can reference to Bootstrap's styles and my CSS background color is gone. Why does that happen?
<!DOCTYPE html>
<html>
<head>
<link href="bio.css" rel="stylesheet">
<meta name="viewport" content="width=device=width,initial-scale=1.0">
<link href="bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<ul class="nav nav-tabs">
<li class="active"><span class="glyphicon glyphicon-home"></span>Home</li>
<li><span class="glyphicon glyphicon-user">About me</li>
<li><span class="glyphicon glyphicon-home"></span>Resume</li>
<li><span class="glyphicon glyphicon-inbox"></span>Contact </li>
</ul>
<body>
<a href="bio.css">
<div class="row">
<div class="col-sm-12">
<h1><a href="bio.css"> Bio </h1>
</div>
</div>
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-4">
<a href="#"><img src="propic.jpg" alt="Propic" width="354" height="354">
</div>
<div class="col-sm-7">
<p><a href="#"> paragraph 1 </p>
<p><a href="#"> paragraph 2</p>
<p><a href="#"> paragraph 3</p>
</div>
</div>
</body>
</html>
Just put your own bio.css after bootstrap.css framework so that your css can overwrite bootstrap.css.
<meta name="viewport" content="width=device=width,initial-scale=1.0">
<link href="bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bio.css" rel="stylesheet">
Your head css calls should be in the right order, bootstrap first, and your stylesheet last so it will override anything in bootstrap css:
<meta name="viewport" content="width=device=width,initial-scale=1.0">
<link href="bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bio.css" rel="stylesheet">
Also make sure not to call a css file in a href tag inside the body as you have done, it's semantically incorrect, unless you want to show that stylesheet, but I don't think you ever would:
<body><a href="bio.css">
Set <link href="bio.css" rel="stylesheet"> after <link href="bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
Check if the color is white
You should put you own css sheet after bootstrap, otherwise the bootstrap will cover you own css since "The last rule defined overrides any previous, conflicting rules". Your head css should be write in that order:
<head>
<meta name="viewport" content="width=device=width,initial-scale=1.0">
<link href="bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bio.css" rel="stylesheet">
</head>
And here is a nice article about css specificity(priority), you can find more rules there: http://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
Put you own css sheet after bootstrap, otherwise the bootstrap will override your own css and simply change your css name to custom.css.
<meta name="viewport" content="width=device=width,initial-scale=1.0">
<link href="bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">
I cannot connect bootstrap's files from my index.html.as my code file belong ; my index.html file locates in /var/www/html as "localhost" . but when i start to localhost/bootstrap/index.html , i can access my website only without any CSS properties.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Bilsay Mavi
</title>
<link href=../css/bootstrap.min.css rel="stylesheet">
</head>
<body>
<h1>DENEME</h1>
<nav class="navbar">
<div class="container">
<a class="navbar-brand" href="#">Bilsay</a>
</div>
</nav>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
I tried <link href=localhost/bootstrap/css/bootstrap.min.css rel="stylesheet"> and <link href=/var/www/html/bootstrap/css/bootstrap.min.css rel="stylesheet">
but I can't access with CSS file .how can i solve this error?
using a windows 7 and just a few days back i downloaded the bootstrap 3.3.1 dist file..... but i don't know how to install it.... i also don't know what to put for my href="???" in the link ....
this code is a mixture of my own writing and some copy/paste of the scripts from the bootstrap site... i'm totally messed up...someone please help......
<!DOCTYPE html>
<html lang="en">
<head>
<title>Edwin's School of Music</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap theme -->
<link href="../../dist/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="theme.css" rel="stylesheet">
<link rel="stylesheet" href="../../dist/css/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
</head>C:\Users\user\Desktop\bootstrap-3.3.1-dist\dist\css\bootstrap.min.css
<body>
<div class="nav">
<div class="container">
<ul class="pull-left">
<li>Home</li>
<li>About</li>
<li>Materials</li>
</ul>
<ul class="pull-right">
<li>Sign Up</li>
<li>Log In</li>
</ul>
</div>
</div>
<div class="jumbotron">
<h2>Welcome to...</h2>
<h1><strong>Edwin's School Of Music</strong></h1>
<h2>Make your DREAMS come true ...</h2>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/docs.min.js"></script>
</body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
This will work & no need to install things
However, this will only work if you have an internet connection as they are being fetched from a server, rather than a local file on your machine.