Twitter bootstrap 基于引导的站点可以在本地主机上工作,但不能在Web服务器上工作

Twitter bootstrap 基于引导的站点可以在本地主机上工作,但不能在Web服务器上工作,twitter-bootstrap,Twitter Bootstrap,当我在本地主机上运行一切时,一切都正常,但我不明白为什么它不能在Web服务器上运行。旋转木马甚至不显示,按钮也不工作。但这一切都在本地主机上完美运行 <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery.js"></script> <meta http-equiv="X-UA-Compatible

当我在本地主机上运行一切时,一切都正常,但我不明白为什么它不能在Web服务器上运行。旋转木马甚至不显示,按钮也不工作。但这一切都在本地主机上完美运行

<!DOCTYPE html>

<html>
    <head>
        <script src="http://code.jquery.com/jquery.js"></script>

        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <!-- Website Title & Description for Search Engine purposes -->
        <title></title>
        <meta name="description" content="">
        <meta charset="utf-8">
        <!-- Mobile viewport optimized -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">



        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link href="includes/css/bootstrap-glyphicons.css" rel="stylesheet">

        <!-- Custom CSS -->
        <link href="includes/css/styles.css" rel="stylesheet">

        <!-- Include Modernizr in the head, before any other Javascript -->
        <script src="includes/js/modernizr-2.6.2.min.js"></script>

    <style>
      .carousel-indicators {
          foreground-color:#;
      }
      .carousel-indicators {
          background-color:#;
      }

      .greenbutton, btn {

        border:2px solid #0099cc;
        color: #0099cc;
        background:none;

      }
      span.glyphicon-home {
        font-size:1.6em; 
        color:orange; 
      }
      .navbar {height:80px; }

      .navbar {
          margin-bottom:0px !important;}

      .carousel {
       margin-top:70px !important 
      }

     .footer {
       background-color: #F90;
       font-color: white;
       font-size: 12px;
       padding: 15px;
   }

   .navbar-default .navbar-nav .open .dropdown-menu>li>a, .navbar-default .navbar-nav .open
   .dropdown-menu {
       background-color: #ffffff;
       color:#F90;
   }

    .navbar {
        background-repeat:no-repeat;
        border-bottom: 1px solid #186ACC;
        box-shadow: 0px 1px 10px rgba(0.0.0.0.1);
        border-radius: 0px; 
    }


    .navbar-default {
        background-color: #ffffff
    }
    </style>    

    </head>

    <body>

    <div class="container" id="main">

         <div class="navbar navbar-default navbar-fixed-top navbar">
             <div class="container-fluid">



            <ul class="nav navbar-nav pull-left">

                         <li class="dropdown">
                             <a href"#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-home"></span> "Your Roof Now" <strong class="caret"></strong></a>

                             <ul class="dropdown-menu">

                                 <li>
                         <a href="..\public/clogin/login.php"
<span class="glyphicon glyphicon-dashboard"></span> Log-In</a>
                                 </li>
                                 <li>
                         <a href="http//www.theweathernetwork.com">
<span class="glyphicon glyphicon-pencil"></span> Weather Network</a>        
                                 </li>                             
                             </ul>

                         </li>


                     </ul><!-- end nav pull-right --> 








                 <div class="nav-collapse collapse navbar-responsive-collapse pull-right">

                     <ul class="nav navbar-nav">

                         <li class="active">

                         <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Services                                 <strong class="caret"></strong></a>

                        <ul class="dropdown-menu">

                            <li>
                             <a href="#">Sorry, this section is being updated</a>
                            </li>

                              <li class="divider"></li>

                            <li>
                              <a href="#"></a>
                            </li>

                              <li class="divider"></li>

                            <li>
                              <a href="#"></a>
                            </li>
                                </li>                       
                        </ul>
                         </li>
                       </li>
                     </ul><!-- end dropdown-menu-->







                 </div><!--end nav-collapse -->

             </div><!--end container -->

         </div><!-- end navbar-->




         <div class="carousel slide" id="myCarousel" data-ride="carousel">


         <ol class="carousel-indicators">
             <li class="active" data-slide-to="0" data-target="#myCarousel"></li>
             <li data-slide-to="1" data-target="#myCarousel"></li>
             <li data-slide-to="2" data-target="#myCarousel"></li>  
             <li data-slide-to="3" data-target="#myCarousel"></li> 
         </ol>

         <!-- wrapper for slides -->
             <div class="carousel-inner">
                 <div class="item active" id="slide1">
                     <div class="carousel-caption">

                     </div><!-- end carousel caption -->
                 </div><!-- end item -->


                 <div class="item " id="slide2">
                     <div class="carousel-caption">

                     </div><!-- end carousel caption -->
                 </div><!-- end item -->


                 <div class="item" id="slide3">
                     <div class="carousel-caption">

                     </div><!-- end carousel caption -->
                 </div><!-- end item -->


                 <div class="item" id="slide4">
                     <div class="carousel-caption">
                     </div><!-- end carousel caption -->
                 </div><!-- end item -->

             </div><!--carousel-inner -->

             <a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="icon-prev"></span></a>
             <a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="icon-next"></span></a>

         </div><!-- end myCarousel -->


         <div class="row" id="bigCallout">
             <div class="col-12">

                 <div class="alert alert-success alert-block fade in" id="successAlert">
                     <button type="button" class="close" data-dismiss="alert">&times;</button>

                     <h4>Answer</h4>
                     <h4>'Monier Tile' and 'Columbia Tile'.  If you own a tiled roof chances are your tiles are from one of these two manufacturers.  <p class="lead">In most cases we find matches for tiles that are no longer being manufactured but require replacement.</p> Click the 'x' to close</h4>
                 </div><!-- end alert -->
                <!-- visible only on small devices -->
                <div class="well well-small visible-sm">
                 <a href="tel:+1-855-336-6772" class="btn btn-large btn-block btn-default"><span class="glyphicon glyphicon-phone"></span> 1-855-336-6772</a>

                </div><!-- end well-small -->




                 <div class="well">
                     <div class="page-header">
                         <h2>Its ok. We Know A lot About Tile. <small><hr>Which two tile brands are most commonly found on homes throughout the lower mainland? Click the answer button.</small></h2>


                     </div><!-- end page-header -->


                     <a href="" class="btn btn-small btn-warning" id="alertMe">Answer</a>
                     <hr>


      <div>
      <a href="form.php" class="greenbutton btn btn-small btn-success btn-responsive text-center">Request Estimate</a> <hr> 
      </div> 
      <div>
      <p class="lead"style="text-center">Can't use the phone? -Submit a request for an estimate here instead!</p>
      </div>             
                 </div><!--end well -->
             </div><!-- end column 12 this is the section right below carousel -->

         </div><!-- end bigCallout -->


         <div class="row" id="featuresHeading">
             <div class="col-12">
                <h4>We're making some improvements just below in order to better serve our customers.</h4>
                <p class="lead">Sorry for any inconvenience. Please scroll down.</p>
             </div><!-- end col-12 -->
         </div><!-- end featuresHeading -->


         <div class="row" id="features">
             <div class="col-sm-4 feature">
                 <div class="panel">
                     <div class="panel-heading">
                         <h3 class="panel-title">Under renovation</h3>
                     </div><!--end panel-heading-->
                     <img src="images/squaretwo200x200.jpg" alt="HTML5" class="img-circle img-responsive centre-block">

                     <p></p>
                     <a href="#" target="_blank" class="btn btn-warning btn-block">Being updated</a>
                 </div><!-- end panel -->
             </div><!-- end feature -->

             <div class="col-sm-4 feature">
                 <div class="panel">
                     <div class="panel-heading">
                         <h3 class="panel-title">Under renovation</h3>
                     </div><!--end panel-heading-->
                     <img src="images/squaretwo200x200.jpg" alt="CSS3" class="img-circle img-responsive centre-block">

                     <p></p>
                     <a href="#" target="_blank" class="btn btn-danger btn-block">Being updated</a>
                 </div><!-- end panel -->
             </div><!-- end feaauture -->

             <div class="col-sm-4 feature">
                 <div class="panel">
                     <div class="panel-heading">
                         <h3 class="panel-title">Under renovation</h3>
                     </div><!--end panel-heading-->
                     <img src="images/squaretwo200x200.jpg" alt="Bootstrap 3" class="img-circle img-responsive centre-block">

                     <p></p>
                     <a href="#" target="_blank" class="btn btn-info btn-block">Being updated</a>
                 </div><!-- end panel -->
             </div><!-- end feaauture -->

         </div><!-- end features -->




         <div class="row" id="moreInfo">
              <div class="col-sm-6">

                 <div class="tabbable">
                     <ul class="nav nav-tabs">
                         <li class="active"><a href="#tab1" data-toggle="tab"><strong>Introducing our 'Your Roof Now Portal' </strong><br></h4>-Another first for our customers.</a></li>
                         <li><a href="#tab2" data-toggle="tab">'Water Shortage Update'</a></li>
                     </ul>
           <div class="tab-content>
            <div class="tab-pane active" id="tab1">
     <img src="images/untitled-20.png" class="thumbnail pull-left img-responsive text-center">                   <small>As a customer you'll automatically recieve access to 'Your Roof Now'.</small>

     <small><br>With 'Your Roof Now' while the surface of your concrete or terra-cotta roof tiles is being restored you can monitor the restoration process by logging onto your account.  Whether your half way around the world doing business, or taking a vacation. At home or at work, via laptop, tablet, or smartphone, you'll see the changes, any time of day, anywhere you are.</small> You know what they say...seeing is believing!<br><p>Call today and discover how easy it is.  1-855-336-6772</p>                





                         </div><!-- end tab-pane -->

        <div class="tab-pane" id="tab2">


         <h4>More about water restrictions </h4> 
        <p>In the event that water restrictions are in place, cleaning with water is permitted
        when done so for the purpose of painting or surface treatments.  We take pride in our work and in providing our customers with the information they need when they need it.  Click the link below for current water restrictions in the lower mainland.</p>    

                             <hr>

   <a href="#myModal" role="button" class="btn btn-warning" data-toggle="modal"><span class="glyphicon glyphicon-hand-up"></span> Vancouver Water Restriction Table </a>

    <div class="modal fade" id="myModal">
     <div class="modal-dialogue">
      <div class="modal-content">
       <div class="modal-header">
          <button class="close" data-dismiss="modal">&times;</button>
       </div><!--end modal-header -->
             <div class="modal-body">
               <h4>Greater Vancouver Water Restriction Plan.</h4>

               <p>Guidelines we follow.</p>


               <a href="#" class="btn btn-danger pop" data-toggle="popover" data-placement="top" data-original-title="Current Restriction" data-content="Level 1">Click for current water  restriction level</a>

                <img src="images/gvrd.png" class="thumbnail pull-left img-responsive text-center">
                                        <hr>







        <div class="modal-footer">
         <button class="btn btn-default pull-left" data-dismiss="modal" type="button">Close</button>  
        </div><!-- end modal-footer -->      
                                   </div><!-- end modal-body -->
                              </div><!-- end modal-content -->
                         </div><!-- end modal-dialogue -->
                    </div><!-- end myModal -->


                </div><!-- end tab-pane -->
            </div><!-- end tab-content :this is content tabs will toggle!-->
        </div><!-- end tabbable --> 
     </div><!-- end col-sm-6 -->


     <div class="col-sm-3">
      <div class="well">
         <h4>September 2015 <br>'Question of the Month'</h4>

         <div class="list-group">
             <a href"#" class="list-group-item">
                 <h4 class="list-group-item-heading">Question</h4>
                 <p class="list-group-item-text">"Why do the eavestroughs on our house clog every eight months even though we have <strong>no</strong> trees on our property."</p>
             <a href"#" class="list-group-item">
                 <h4 class="list-group-item-heading">Answer</h4>
                 <p class="list-group-item-text">Moss builds up on roof tiles where there is shade (usually along the tile edges).  Over time once the buildup reaches a certain size pieces will continuously break off and get washed down into the gutters when its windy or raining.  Once you remove dirt and debris from your roof tiles you eliminate a major contributing source of dirt and debris being fed to your homes gutter system.</p>
             <a href"#" class="list-group-item">
                 <h4 class="list-group-item-heading"></h4>
                 <p class="list-group-item-text"></p>
         </a>        
       </div><!-- end list-group-->
       </div><!-- end well -->
      </div><!-- end col-sm-3 -->


      <div class="col-sm-3">
        <div class="well">
         <h4>October 2015 <br>'Question of the Month'</h4>




         <div class="list-group">
             <a href"#" class="list-group-item">
                 <h4 class="list-group-item-heading">Question</h4>
                 <p class="list-group-item-text">"What do you mean when you say, 'Low Pressure' cleaning?"</p>
             <a href"#" class="list-group-item">
                 <h4 class="list-group-item-heading">Answer</h4>
                 <p class="list-group-item-text">'We use approximately 1600 psi when cleaning tiles.  Other companies use between 3000 and 5000 psi.  Some reputable tile manufacturers reccommend lower pressure when cleaning their tiles. </p>
             <a href"#" class="list-group-item">
                 <h4 class="list-group-item-heading"></h4>
                 <p class="list-group-item-text"></p>
         </a>        
       </div><!-- end list-group-->
       </div><!-- end well --> 
      </div><!-- end col-sm-3 -->



     </div><!-- end moreInfo -->


         <div class="row" id="moreCourses">

         </div><!-- end moreCourses -->


    </div><!-- end container -->






    <footer>
        <div class="container">
             <div class="row">
                 <div class="col-sm-2">
                 <h6>Copyright &copy; 2015 {TerraCottaClean}</h6>
                 </div><!-- end col-sm-2 -->


                 <div class="col-sm-4">
                 <h6>About Us</h6>
                 <p>Located in Vancouver, Canada.  Specializing in concrete tile, terra-cotta tile restoration.</p>
                 </div><!-- end col-sm-4 -->


             <div class="col-sm-2">
                 <h6>Navigation</h6>
                 <ul class="unstyled">
                      <li><a href="#">Home</a></li>
                      <li><a href="..\public/clogin/login.php">Login Page</a></li>
                      <li><a href="form.php">Contact</a></li>
                 </ul>
             </div><!-- end col-sm-2 -->


                 <div class="col-sm-2">

                     <h6>Gotta Clean Your TerraCotta?</h6>
                     <h6>1-855-336-6772</h6>
                      <div>

                    </div>


                </div><!-- end col-sm-2 -->


             </div><!-- end row -->






        </div><!-- end container -->
    </footer>


    <!-- All Javascript at the bottom of the page for faster page loading -->

    <!-- First try for the online version of jQuery-->

    <!-- If no online access, fallback to our hardcoded version of jQuery -->
    <script>window.jQuery || document.write('<script src="includes/js/jquery-1.8.2.min.js"><\/script>')</script>

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

    <!-- Custom JS -->
    <script src="includes/js/script.js"></script>

     <script>
     $('#send_btn').popover({content: 'Thank you'},'click');
     </script>


    </body>
</html>

.转盘指示器{
前景色:#;
}
.转盘指示器{
背景色:#;
}
.绿色按钮,btn{
边框:2个实心#0099cc;
颜色:#0099cc;
背景:无;
}
span.glyph-home{
字号:1.6em;
颜色:橙色;
}
.navbar{高度:80px;}
navbar先生{
页边距底部:0px!重要;}
旋转木马{
利润上限:70像素!重要
}
.页脚{
背景色:#F90;
字体颜色:白色;
字体大小:12px;
填充:15px;
}
.navbar默认值.navbar导航打开.下拉菜单>li>a.navbar默认值.navbar导航打开
.下拉菜单{
背景色:#ffffff;
颜色:#F90;
}
navbar先生{
背景重复:无重复;
边框底部:1px实心#186ACC;
盒影:0px 1px 10px rgba(0.0.0.0.1);
边界半径:0px;
}
.navbar默认值{
背景色:#ffffff
}
  • &时代; 答复 “莫尼尔瓷砖”和“哥伦比亚瓷砖”。如果你拥有一个瓷砖屋顶的机会是你的瓷砖是从这两个制造商之一

    在大多数情况下,我们会找到不再生产但需要更换的瓷砖的匹配项。

    单击“x”关闭 没关系。我们对瓷砖很了解
    哪两种瓷砖品牌最常见于大陆较低地区的家庭?点击回答按钮。

    不能使用手机吗-请在此处提交估算请求

    为了更好地为客户服务,我们在下面做了一些改进。

    很抱歉给您带来不便。请向下滚动

    翻新中

    翻新中

    翻新中

    下面是一个示例(您需要将自定义CSS和JS文件添加到服务器)

    
    一些头衔
    .转盘指示器{
    背景色:#;
    }
    格林巴顿先生,
    btn{
    边框:2个实心#0099cc;
    颜色:#00
    
    "NetworkError: 404 Not Found - /includes/css/bootstrap-glyphicons.css"
    "NetworkError: 404 Not Found - /includes/css/styles.css"
    "NetworkError: 404 Not Found - /includes/js/modernizr-2.6.2.min.js"
    "NetworkError: 404 Not Found - /includes/js/script.js"
    "NetworkError: 404 Not Found - /images/untitled-20.png"