1. Accueil
  2. Question et réponse
  3. Twitter BootStrap - Responsive Design

Twitter BootStrap - Responsive Design

2013-03-06 6 views
0

j'ai suivi les instructions du site Bootstrap Twitter pour poster les deux lignes de code ci-dessous dans mes pages têteTwitter BootStrap - Responsive Design

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

Malheureusement, la fonctionnalité réactive ne fonctionne pas correctement. Y a-t-il d'autres choses dont je devrais être au courant? Toute aide et conseil est appréciée.

Merci

Peut-être que si je posterai le code de la page d'index.

Voir ci-dessous

   <!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:[email protected]?Subject=General Enquiry from Rentraro Home Page">[email protected] </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>

Source

2013-03-06 Mr_Pop

+0

Pouvez-vous s'il vous plaît créer une page de test, il devient plus facile d'aider de cette façon. – Shail

Répondre

1

Si vous voulez responsive design, vous devriez également utiliser les versions fluid des conteneurs: container-fluid et row-fluid.

Source

2013-03-06 22:53:46 alestanis

+0

J'ai un récipient qui est fluide et plusieurs rangées qui sont déjà fluides. –

1

Si vous utilisez le dernier Boostrap, le fichier responsive est inclus dans le projet principal.

le lien que vous utilisez ne fonctionnera que si bootstrap-responsive.css se trouve dans le dossier assets-> css-> de votre serveur ou de votre machine locale.

vous pouvez utiliser les liens porvided par bootstrapcdn pour inclure un fichier distant

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>

ou vous pouvez télécharger Boostrap here et l'utiliser selon le chemin relatif de l'appel de fichier en utilisant le css ou js que vous utilisez.

si le bootstrasp.css Exemple et le fichier bootstrap.js sont dans le même répertoire de yourfile.html, voici le contenu de 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>

Source

2013-03-06 23:13:28 bleuscyther

0

votre widget AddThis est tout casser. J'ai essayé d'ajouter le widget AddThis à un autre thème en utilisant le design bootstrap/responsive et les choses ont cessé de fonctionner (c'est-à-dire les curseurs, les bascules, etc.).

Plus précisément, une ligne contenant les addthis_widget.js est à l'origine des problèmes:

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

La seule solution que je pourrais trouver est de supprimer tous les widgets AddThis de toutes mes pages.

Source

2013-08-06 17:29:22 user2657831

Questions connexes

 Questions connexes