2016-02-05 198 views
0

我使用了另一個網站的代碼,其中包含HTML,CSS,Bootstrap和JavaScript以供我自己的網站使用。不幸的是,當我使用這段代碼時,代碼的導航欄部分中的另一個文件不起作用。bootstrap 3導航欄部分

如何讓這段代碼有效?

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> 
+0

哪位代碼不能正常工作?我們需要整個片段嗎?你是否包含了所有必要的庫來使用bootstrap?哪裏合適的CSS? – Jay

+0

http://blackrockdigital.github.io/startbootstrap-clean-blog/此鏈接是我使用的原始網站。我試圖爲我個性化這一點,我複製並粘貼另一頁,但正如我所說的導航欄部分沒有工作。我沒有更改css文件,但在原始網站上有一些文件,例如名爲less和js文件。我沒有使用這些文件。問題是否與這些文件相關? –

+0

爲了引導工作,你必須**包含「bootstrap.css」文件,「boostrap.js」文件**和**鏈接jQuery庫**之前**「bootstrap.js」 – Jay

回答

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/

+0

別忘了jQuery – Jay

+0

我不知道。謝謝你的幫助。 –