0
現在忽略平滑滾動，我沒有生效。
我爲一些圖像創建了一個引導程序傳送帶，它看起來不正確;格式化遍佈全球。如果有人知道什麼是錯的，將不勝感激Bootstrap傳送帶無法正常工作 - 格式化奇怪
<!DOCTYPE html>
<html>
<title> Home </title>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<span id="backtotop">
<nav class="navbar navbar-default navbar-default-top" >
<div class="container">
<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 href="#" class="navbar-brand">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li><a href="index.html"> Home </a>
</li>
<li><a href="aboutus.html"> About me </a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="login.html" id="a2"> Contact </a>
</li>
</li>
</ul>
</div>
</div>
</nav>
</span>
<span id="backtotop">
<div class="jumbotron" id="jumbotron-1">
<div class="container text-left" >
<h1>Hello.</h1>
<BR>
<p>Welcome to my porfolio website.</p>
<p id="gray">This page is a showcase of my web development skills.</p>
<a data-scroll href="#languages">Languages</a>
</div>
</div>
</div>
</div>
</span>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="my slider" class="carousel slide" data-ride="carousel">
<!-- indicators dot nov -->
<!-- wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://www.gaslampmedia.com/media/bootstrap.png" alt="Bootstrap"/>
<div class="carousel-caption">
<h1>Bootstrap</h1>
</div>
</div>
</div>
<!-- controls (next and prev buttons) -->
</div>
</div>
</div>
</div>
<!-- <span id="languages">
<div class="jumbotron" id="jumbotron-language">
<div class="container text-left">
<div class="row">
<div class="col-xs-6 col-md-3">
</div>
<h2>Languages/Frameworks I have experience with</h2>
<hr>
<p>HTML(5)</p>
<a href="http://getbootstrap.com"><p>Bootstrap</p></a>
<p>CSS(3)</p>
</div>
</div>
</div>
</div>
</span>
-->
<div class="container" align="right" id="backtotopcontainer">
<div class="col-lg-6">
<a data-scroll href="#backtotop" id="backtotop">Back to top</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="dist/js/smooth-scroll.js"></script>
</body>
<script>
smoothScroll.init();
</script>
<script>
$(document).ready(function(){
$(window).scroll(function() { // check if scroll event happened
if ($(document).scrollTop() > 50) { // check if user scrolled more than 50 from top of the browser window
$(".navbar-fixed-top").css("background-color", "#000"); // if yes, then change the color of class "navbar-fixed-top" to white (#f8f8f8)
$(".navbar.navbar-default .nav > li > #a2").css("color:#000, #a2"); // if yes, then change the color of class "navbar-fixed-top" to white (#f8f8f8)
} else {
$(".navbar-fixed-top").css("background-color", "transparent"); // if not, change it back to transparent
}
});
});
</script>
</html>