0

我已按照 Twitter Bootstrap 网站上的说明将以下两行代码发布到我的页面头部

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

不幸的是,响应功能无法正常工作。还有其他我应该注意的事情吗?任何帮助和指导表示赞赏。

谢谢

也许如果我发布索引页面的代码。

见下文

                <!DOCTYPE html>
        <html>
        <head>
        <title>Welcome to Rentraro.com - Holiday Home Rental Accommodation & Property Management, Rarotonga, Cook Islands, South Pacific</title>
        <meta name="verify-v1" content="gTdq786N6XdrCTtj7ulUYYLtkvVDNwR5INO860wLw8Y=" /> 
        <meta name="keywords" content="Accommodation, Heritage, Muri, Rentraro, holiday home rental, rarotonga accommodation, 
        holiday rental, vacation home rental, vacation house rental, Rent, Rental, Rarotonga, Cook Islands, South Pacific, Beach, 
        lagoon, luxury, Bungalows, Polynesia, South Seas, studio apartment, self contained, private home, private house, studio, 
        vacation, holiday, diving, honeymoon couples, blue lagoon, mountain, tropical, peaceful, cottages, coral beach units, 
        coral beach, units, family home, sunset, house rental, home rental, familiy, family home rentals, family house rentals, 
        families, secluded, sunset, rarotonga holiday homes, rarotonga holiday house, rarotonga home rental, rarotonga home rentals, 
        property management, cook islands holiday homes, rental home accommodation rarotonga, rarotonga house rental, rarotonga villa rental, 
        rarotonga studio rental, rarotonga information" />
        <meta name="description" content="Property Management and Holiday Home Rental Accomodation Specialists, Rarotonga, Cook Islands, South Pacific" />
        <meta name="content-language" content="en" />
        <meta name="copyright" content="Heritage Holdings, Rarotonga, Cook Islands" />
        <meta name="robots" content="index, follow" />
        <meta name="rating" content="general" />
        <meta name="revist-after" content="30" />
        <meta name="classification" content="Holiday Home Rental, House Rental, Private Accommodation, South Pacific, Cook Islands, Rarotonga" />
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- all css start -->
        <link rel="icon" type="image/png" href="img/favicon.ico" />
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="style.css" rel="stylesheet" type="text/css">
        <link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/font-awesome.min.css">
        <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
        <!-- all css end -->
        </head>
        <body>
        <!-- start of nav -->
        <div class="container-fluid">
        <div class="navbar navbar-fixed-top navbar-inverse">
        <div class="navbar-inner">
        <ul class="nav">
        <a class="brand" href="index.html" ><span class="navaho">RentRaro<span style="color: #69c8da">.com</span></span></a>
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="aboutUs.html">About Us</a></li>
        <li><a href="homesForRent.html">Homes For Rent</a></li>
        <li><a href="mapOfRarotonga.html">Map of Rarotonga</a></li>
        <li><a href="activities.html">Activities</a></li>
        <li class="dropdown">
        <a class="dropdown-toggle"
        data-toggle="dropdown"
        href="#">
        Read Me
        <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
        <!-- links -->
        <li><a href="faqs.html">FAQ's</a></li>
        <li><a href="tipSheet.html">Tip Sheet</a></li>
        <li><a href="rarotongaGuide.html">Rarotonga Guide</a></li>
        </ul>
        </li>
        <li><a href="links.html">Links</a></li>
        <li><a href="photoGallery.html">Photo Gallery</a></li>
        <li><a href="contactUs.html">Contact Us</a></li>
        </ul>
        <!-- clock starts here -->
        <p>
        <div id="tP" style="color : white; text-align: right; margin-right: 20px;">
        </div>
        </p>
        <!-- clock ends here  -->
        </div>
        </div>
        <!-- nav ends here -->
        <br/>
        <br/>
        <br/>
        <br/>

        <!--- container holding and aligning all content -->



        <!-- AddThis Button BEGIN -->
        <div class="addthis_toolbox addthis_default_style ">
        <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
        <a class="addthis_button_tweet"></a>
        <a class="addthis_button_pinterest_pinit"></a>
        <a class="addthis_counter addthis_pill_style"></a>
        </div>
        <!-- AddThis Button END -->


        <!-- big blue unit start -->
        <div class="hero-unit">
        <div class="text-center">
        <h1><span class="head">Welcome to rentraro.com</span></h1>
        <p>Property management and holiday home rental accommodation specialists<br/>
        Rarotonga | Cook Islands | South Pacific </p>
        <p>
        <br/>
        <a href="aboutUs.html" class="btn btn-primary btn-large">
        Learn more
        </a>

        </p>
        </div>
        </div>
        <!-- big blue unit end -->

        <div class="row-fluid">
                <ul class="thumbnails">
                  <li class="span2">
                    <div class="thumbnail">
                      <img src="img/kia_manuia_cottage_10_sm.jpg" class="img-polaroid" alt="">
                      <div class="caption">
                        <p class="text-error"><i class="icon-star-empty"></i>New Listing</p>
                        <h5>Kia Manuia Cottage</h5>
                        <p><a href="kiaManuiaCottage.html" class="btn btn-primary">More...</a></p>
                      </div>
                    </div>
                  </li>
                  <li class="span2">
                    <div class="thumbnail">
                      <img src="img/tehoras_homestead_15_sm.jpg" class="img-polaroid" alt="">
                      <div class="caption">
                      <p class="text-error"><i class="icon-star-empty"></i>New Listing</p>
                        <h5 class="fad">Tehoras Homestead </h5>
                        <p><a href="tehorasHomestead.html" class="btn btn-primary">More...</a></p> 
                      </div>
                    </div>
                  </li>
                  <li class="span2">
                    <div class="thumbnail">
                      <img src="img/papa_mauris_11_sm.jpg" class="img-polaroid" alt="">
                      <div class="caption">
                      <p class="text-error"><i class="icon-star-empty"></i>New Listing</p>
                        <h5 class="fad">Papa Mauri's Place</h5>
                        <p><a href="papaMaurisPlace.html" class="btn btn-primary">More...</a></p> 
                      </div>
                    </div> 
                    </li>
                       <li class="span2">
                    <div class="thumbnail">
                      <img src="img/raro_beach_bach_07_sm.jpg" class="img-polaroid" alt="">
                      <div class="caption">
                      <p class="text-error"><i class="icon-star-empty"></i>New Listing</p>
                        <h5 class="fad">Raro Beach Bach</h5>
                        <p><a href="raroBeachBach.html" class="btn btn-primary">More...</a></p> 
                      </div>
                    </div>
                     </li>
                     <li class="span2">
                    <div class="thumbnail">
                      <img src="img/te_akapuao_07_sm.jpg" class="img-polaroid" alt="">
                      <div class="caption">
                      <p class="text-error"><i class="icon-star-empty"></i>New Listing</p>
                        <h5 class="fad">Te Akapuaou Villa</h5>
                        <p><a href="teAkapuaoVilla.html" class="btn btn-primary">More...</a></p> 
                      </div>
                    </div>
                  </li>
                  <li class="span2">
                    <div class="thumbnail">

                    <a href="#myModal" role="button" style="width: 134px" class="btn btn-danger" data-toggle="modal"><i class="icon-tag icon-white"></i> Latest Specials</a>
                    <a href="#myModal2" role="button" style="width: 134px" class="btn btn-success" data-toggle="modal"><i class="icon-info-sign icon-white"></i> News</a>
                    <a href="docs/events.pdf" role="button" style="width: 134px" class="btn btn-info" data-toggle="modal"><i class="icon-info-sign icon-white"></i> Calender of Events</a>

                    </div>
                  </li>
                </ul>
              </div>

        <div class="row-fluid">
                <ul class="thumbnails">
                  <li class="span2">
                    <div class="thumbnail">
                      <img src="img/muri_central_14_sm.jpg" class="img-polaroid" alt="">
                      <div class="caption">
                        <p class="text-error"><i class="icon-star-empty"></i>New Listing</p>
                        <h5>Muri Central</h5>
                        <p><a href="muriCentral.html" class="btn btn-primary">More...</a></p> 
                      </div>
                    </div>
                  </li>
                  <li class="span2">
                    <div class="thumbnail">
                      <img src="img/Coffee_House_13_sm.jpg" class="img-polaroid" alt="">
                      <div class="caption">
                      <p class="text-error"><i class="icon-star-empty"></i>New Listing</p>
                        <h5 class="fad">Coffee House </h5>
                        <p><a href="coffeeHouse.html" class="btn btn-primary">More...</a></p> 
                      </div>
                    </div>
                  </li>
                  <li class="span2">
                    <div class="thumbnail">
                      <img src="img/temara_sunrise_09_sm.jpg" class="img-polaroid" alt="">
                      <div class="caption">
                      <p class="text-error"><i class="icon-star-empty"></i>New Listing</p>
                        <h5 class="fad">Temara Sunrise</h5>
                        <p><a href="temaraSunrise.html" class="btn btn-primary">More...</a></p> 
                      </div>
                    </div> 
                    </li>
                          <li class="span2">
                    <div class="thumbnail">
                      <img src="img/kakaia_retreat_14_sm.jpg" class="img-polaroid" alt="">
                      <div class="caption">
                      <p class="text-error"><i class="icon-star-empty"></i>New Listing</p>
                        <h5 class="fad">Kakaia Retreat</h5>
                        <p><a href="kakaiaRetreat.html" class="btn btn-primary">More...</a></p> 
                      </div>
                    </div>
                  </li>
                       <li class="span4">

                    <!-- Button to trigger modal 1 and 2 above under te Akapuao -->



                    <!-- Modal1 Specials -->
                    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-header">
                    <h3 id="myModalLabel" class="muted">Latest Specials</h3>
                    </div>
                    <div class="modal-body">
                    <p><a href="muriLodge.html">Muri Lodge</a> <br/>December thru Jan NZ$2300.00 per week for the whole house.</br>
                    Feb thru March NZ$1800.00 per week for the whole house.</p>
                    <p class="text-warning">More specials to come.</p>
                    </div>
                    <div class="modal-footer">
                    <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
                    </div>
                    </div>
                    <!-- Modal2 News & Happenings -->
                    <div id="myModal2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-header">
                    <h3 id="myModalLabel" class="muted">News and Happenings</h3>
                    </div>
                    <div class="modal-body">
                    <ul>
                    <li>03/03/2013 New Website Launched.</li>
                    <li>14/11/2011 We were in the press - <a href="http://www.cinews.co.ck/2011/November/Wed16/local.htm#1111140102" target="_new">Air New Zealand Tourism Awards.</a></li>
                    </ul>
                    </div>
                    <div class="modal-footer">
                    <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
                    </div>
                    </div>


                    <div class="well">
                   <p class="text-success"><i class="icon-globe"></i>Trending content from our site's pages.<p>
                    <!-- AddThis Trending Content BEGIN -->
                    <div id="addthis_trendingcontent"></div>
                    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4fd7a2f13ac8bb1a"></script>
                    <script type="text/javascript">
                    addthis.box("#addthis_trendingcontent", {
                        feed_title : "",
                        feed_type : "trending",
                        feed_period : "day",
                        num_links : 5,
                        height : "auto",
                        width : "auto",
                        domain : "www.rentraro.com"});
                    </script>
                    <!-- AddThis Trending Content END -->

                    </div>

                  </li>
                </ul>
              </div>





        <!--- bottom footer -->
        <div class="navbar navbar-fixed-bottom">
        <div class="navbar-inner">
        <div class="row-fluid">
        <div class="span12">
        <div class="text-center">
        <br/>
        <small>
        <address>
        PO Box 2165
        Rarotonga, Cook Islands 
        <abbr title="Phone">P:</abbr> (00682) 55519
        <abbr title="Fax">F:</abbr> (00682) 28017
        <abbr title="Email">E:</abbr> <a href="mailto:heritage@oyster.net.ck?Subject=General Enquiry from Rentraro Home Page">heritage@oyster.net.ck </a><br>
        &#169; www.rentraro.com 2013
        </address>  </small>
        </div>
        </div>
        </div>
        </div>
        </div>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>


        <!-- scripts -->

        <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
        <script src="http//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/goSquared.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
        <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4fd7a2f13ac8bb1a"></script>
        <script type="text/javascript" src="js/clock.js">
        // Clock Script Generated By Maxx Blade's Clock v2.0d
        // http://www.maxxblade.co.uk/clock
        </script>
        <!-- scripts end -->
        </div>
        </body>
        </html>
4

3 回答 3

1

我使用的是最新的 Boostrap,响应文件包含在主项目中。

您使用的链接只有在您的服务器或本地计算机的文件夹 assets->css-> 中有 bootstrap-responsive.css 时才有效。

您可以使用bootstrapcdn提供的链接来包含远程文件

css

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">

js

<script src="http//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

或者你可以在这里下载Boostrap ,并根据你正在使用的调用css或js的文件的相对路径来使用它。

例如,如果 bootstrasp.css 和 bootstrap.js 文件在 yourfile.html 的同一目录下,这里是 yourfile.html 的内容:

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Javascript · Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

 <link href="bootstrapn.css" rel="stylesheet">

  </head>

<body>
<button type="button" class="btn btn-primary" data-loading-text="Loading...">Hello World!</button>

<script src="bootstrap.js"></script>

</body>
于 2013-03-06T23:13:28.887 回答
1

如果您想要响应式设计,您还应该使用fluid容器版本:container-fluidrow-fluid.

于 2013-03-06T22:53:46.210 回答
0

您的 AddThis 小部件正在破坏一切。我尝试使用引导/响应式设计将 AddThis 小部件添加到另一个主题,但事情停止了工作(即滑块、切换等)。

具体来说,任何包含 addthis_widget.js 的行都会导致问题:

<script type="text/javascript" 
src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4fd7a2f13ac8bb1a">
</script>

我能找到的唯一解决方案是从我的所有页面中删除所有 AddThis 小部件。

于 2013-08-06T17:29:22.870 回答