bootstrap 3导航栏部分

时间:2016-02-05 12:50:32

标签: javascript html css twitter-bootstrap navbar

我使用了另一个网站的代码,其中包含HTML,CSS,Bootstrap和JavaScript,可用于我自己的网站。不幸的是,当我使用此代码时,代码的nav-bar部分中的另一个文件不起作用。

如何使此代码生效?

CODE:     

<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
   <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header page-scroll">
         <button type="button" class="navbar-toggle" 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="index.html">Halil Eren Ertan</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>
               <a href="index.html">Home</a>
            </li>
            <li>
               <a href="about.html">About</a>
            </li>
            <li>
               <a href="contact.html">Contact</a>
            </li>
         </ul>
      </div>
      <!-- /.navbar-collapse -->
   </div>
   <!-- /.container -->
</nav>

<!-- Probably the problem why nav-bar section does not work is not relevent after this line but I posted it maybe you want to look it. -->


<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('/home/eren/workspace/web-tutorial/my little startup/DSC_1481.JPG')">
   <div class="container">
      <div class="row">
         <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
            <div class="page-heading">
               <h1>WELCOME</h1>
               <hr class="small">
               <span class="subheading">What are you thinking about my sharing? </span>
            </div>
         </div>
      </div>
   </div>
</header>
<!-- Main Content -->

<div class="container">
   <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
         <div class="post-preview">
            <a href="post.html">
               <h2 class="post-title">
                        Kuralları Değiştirmenin İlk Kuralı
                    </h2>
               <h3 class="post-subtitle">
                        Problems look mighty small from 150 miles up
                    </h3>
            </a>
         </div>
         <hr>

         <!-- Pager -->
         <ul class="pager">
            <li class="next">
               <a href="#">Older Posts &rarr;</a>
            </li>
         </ul>
      </div>
   </div>
</div>


<div class="container">
   <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
         <p>Want to make comment? Just write any name and write things that you have tought about the content. The comment which is writen last is shown at the top of the comments.</p>
         <!-- Contact Form - Enter your email address on line 19 of the mail/contact_me.php file to make this form work. -->
         <!-- WARNING: Some web hosts do not allow emails to be sent through forms to common mail hosts like Gmail or Yahoo. It's recommended that you use a private domain email address! -->
         <!-- NOTE: To use the contact form, your site must be on a live web host with PHP! The form will not work locally! -->
         <form name="sentMessage" id="contactForm" novalidate>
            <div class="row control-group">
               <div class="form-group col-xs-12 floating-label-form-group controls">
                  <label>Name</label>
                  <input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
                  <p class="help-block text-danger"></p>
               </div>
            </div>
            <div class="row control-group">
               <div class="form-group col-xs-12 floating-label-form-group controls">
                  <label>Message</label>
                  <textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
                  <p class="help-block text-danger"></p>
               </div>
            </div>
            <br>
            <div id="success"></div>
            <div class="row">
               <div class="form-group col-xs-12">
                  <button type="submit" class="btn btn-default">Send</button>
               </div>
            </div>
         </form>
      </div>
   </div>
</div>
<footer>
   <div class="container">
      <div class="row">
         <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
            <ul class="list-inline text-center">
               <li>
                  <a href="#">
                     <span class="fa-stack fa-lg">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
                            </span>
                  </a>
               </li>
               <li>
                  <a href="#">
                     <span class="fa-stack fa-lg">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
                            </span>
                  </a>
               </li>
               <li>
                  <a href="#">
                     <span class="fa-stack fa-lg">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-github fa-stack-1x fa-inverse"></i>
                            </span>
                  </a>
               </li>
            </ul>
            <p class="copyright text-muted">Copyright &copy; Your Website 2014</p>
         </div>
      </div>
   </div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>

<!-- Custom Theme JavaScript -->
<script src="js/clean-blog.min.js"></script>

1 个答案:

答案 0 :(得分:0)

您必须包含bootstrap.js和bootstrap.css。

在您要应用的任何自定义CSS样式或样式表之前,将它放在标题部分的顶部:

<!-- 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">

并将其放在html页面正文的底部:

<!-- 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>

http://getbootstrap.com/getting-started/

了解详情