0
ブートストラップこれは私の単純なHTMLコードです：ドロップダウンが機能しない -
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>.:Home Page:. The Indian Sentinel</title>
<link rel="stylesheet" href="assets/css/bootstrap/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="assets/css/fontawesome/font-awesome.css" type="text/css" />
<link rel="stylesheet" href="assets/css/genxcoders.css" type="text/css" />
</head>
<body>
<!-- Top Bar -->
<div class="top-bar">
<div class="top-bar-content">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<script>
<!-- Current Date -->
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
document.write(dayarray[day]+", "+montharray[month]+" "+daym+", "+year)
<!-- Current Date -->
</script>
</div>
<div class="col-md-6">
<ul class="login">
<a class="login-anchor" href="#"><li><i class="fa fa-user"></i> Sign In</li></a>
<a class="login-anchor" href="#"><li><i class="fa fa-edit"></i> Register</li></a>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Top Bar -->
<div class="ptop-20"></div>
<!-- Header -->
<div class="header">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<img src="assets/images/logo/header-logo.png" class="header-logo" />
</div>
<div class="col-md-8">
<img src="assets/images/advt/header850x120.png" class="header-advt" />
</div>
</div>
</div>
</div>
<!-- Header -->
<div class="ptop-30"></div>
<!-- Navbar -->
<nav class="navbar navbar-default navbar-static-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="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 hidden-md hidden-lg" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Navbar -->
<!-- Script -->
<script src="assets/js/jquery213.min.js" type="text/javacript"></script>
<script src="assets/js/bootstrap/bootstrap.js" type="text/javascript"></script>
<script>
<!-- Navbar Scroll to Top and Fix -->
<!-- Navbar Scroll to Top and Fix -->
</script>
<!-- Script -->
</body>
</html>
これは、ユーザー定義クラスのためのCSSです：
/*@import url('https://fonts.googleapis.com/css?family=Raleway');*/
@charset "utf-8";
body {
margin: 0px;
padding: 0px;
font-family: 'Raleway', sans-serif;
line-height: 16px;
color: #212121;
height: 1500px;
}
/* Spacing */
.ptop-5 {
padding-top: 5px;
}
.ptop-10 {
padding-top: 10px;
}
.ptop-20 {
padding-top: 20px;
}
.ptop-30 {
padding-top: 30px;
}
.ptop-40 {
padding-top: 40px;
}
.ptop-50 {
padding-top: 50px;
}
/* Spacing */
/* Containers */
.top-bar {
width: 100%;
height: 40px;
line-height: 40px;
background-color: #3498db;
}
.header {
width: 100%;
min-height: 1%;
overflow: hidden;
}
/* Containers */
/* Top-Bar */
.top-bar > .top-bar-content {
width: 90%;
height: auto;
margin: 0px auto;
line-height: inherit;
color: #ffffff;
}
/* Login */
ul.login {
list-style: none;
text-align: right;
margin-left: -40px;
}
ul.login > a.login-anchor > li {
text-decoration: none;
display: inline-block;
color: #ffffff;
margin: 0px 10px;
transition: all 0.3s ease;
}
ul.login > a.login-anchor:hover > li {
color: rgba(33, 33, 33, 0.5);
transition: all 0.3s ease;
}
/* Login */
/* Top-Bar */
/* Header */
img.header-logo {
width: 400px;
margin: 0px auto;
display: block;
}
.header-advt {
width: 98%;
}
/* Header */
/* Navbar */
.navbar-static-top {
border-top-width: 1px;
border-bottom-width: 1px;
}
/* Navbar */
/* Media Queries */
@media (min-width: 320px) and (max-width: 360px) {
.top-bar {
text-align: center !important;
height: auto;
}
ul.login {
text-align: center;
}
img.header-logo {
width: 90%;
margin-bottom: 20px;
}
img.header-advt {
width: 95%;
height: 60px;
margin: 0px auto 20px;
display: block;
}
}
@media (min-width: 480px) and (max-width: 640px) {
.top-bar {
text-align: center !important;
height: auto;
}
ul.login {
text-align: center;
}
img.header-logo {
width: 90%;
margin-bottom: 20px;
}
img.header-advt {
width: 90%;
height: 60px;
margin: 0px auto 20px;
display: block;
}
}
/* Media Queries */
ブートストラップ、FontawesomeとjQueryのファイルは変更されません。私はwww.getbootstrap.comテンプレートからNavbarのコードを取得しました。
ブートストラップWebサイトのコードフォームには、基本的な機能に必要なすべての前提条件コードがあります。
ここで問題は、ドロップダウンメニューが機能していないことです。私はそれをクリックすると、それは開かれません。また、私はウェブサイトをスクロールすることができるようにしたい、そして、navbarが一番上に達すると、それはそこにとどまるべきです。
私は以下を達成します： 1. Navbarのドロップダウン機能。 2.ブラウザの上にNavbarがスクロールしている。
ご協力いただければ幸いです。
P .:私は1000回以上行っていますが、私が間違っている場所に頭を上げることができません。すべてのコードに固執して、私は思考をブロックしているあまりにも多くの仕事の圧力を推測する。
誰かが子猫が死ぬ、 'document.write'を使用するたびに... – Hackerman
@Hackerman は：間違いを指すようにPグッド1 ... 私は、現在の日付を表示するためのコードを変更しました。これは次のとおりです。 HTMLパート：
スクリプトパート： まだそれが働いていた...私はjQueryの/ JavaScriptを台無しにしていたと仮定し... を交配 – GenXCoders