javascript - ruby on rails showing landing page differently from localhost and html file -
i'm implementing landing page website i'm working on , found great template online. loaded , correctly set file links , everything. when go views folder , double click html file, loads , looks great of css , js working perfectly. problem whenever start brick server , run local host actual landing page it's skewed , oddly proportioned.
most of files loaded external sources, aka loaded online vs locally, , 2 files loaded locally referenced directly. below code taken straight file.
here landing page trying implement. http://startbootstrap.com/grayscale.
here code
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <title>grayscale - free 1 page theme bootstrap 3</title> <!-- bootstrap core css --> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css"> <!-- fonts --> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <link href='http://fonts.googleapis.com/css?family=lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=montserrat:400,700' rel='stylesheet' type='text/css'> <!-- custom theme css --> <link href="../../assets/stylesheets/grayscale.css" rel="stylesheet"> </head> <body id="page-top" data-spy="scroll" data-target=".navbar-custom"> <nav class="navbar navbar-custom navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header page-scroll"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse"> <i class="fa fa-bars"></i> </button> <a class="navbar-brand" href="#page-top"> <i class="fa fa-play-circle"></i> <span class="light">start</span> bootstrap </a> </div> <!-- collect nav links, forms, , other content toggling --> <div class="collapse navbar-collapse navbar-right navbar-main-collapse"> <ul class="nav navbar-nav"> <!-- hidden li included remove active class link when scrolled past section --> <li class="hidden"> <a href="#page-top"></a> </li> <li class="page-scroll"> <a href="#about">about</a> </li> <li class="page-scroll"> <a href="#download">download</a> </li> <li class="page-scroll"> <a href="#contact">contact</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container --> </nav> <section class="intro"> <div class="intro-body"> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <h1 class="brand-heading">grayscale</h1> <p class="intro-text">a free, premium quality, responsive 1 page bootstrap theme created start bootstrap.</p> <div class="page-scroll"> <a href="#about" class="btn btn-circle"> <i class="fa fa-angle-double-down animated"></i> </a> </div> </div> </div> </div> </div> </section> <section id="about" class="container content-section text-center"> <div class="row"> <div class="col-lg-8 col-lg-offset-2"> <h2>about grayscale</h2> <p>grayscale premium quality, free bootstrap 3 theme created start bootstrap. can yours right now, need download template on preview page. can utilize template purpose, personal or commercial.</p> <p>this striking, black , white theme features stock photographs <a href="http://gratisography.com/">gratisography</a> along custom google map skin courtesy of <a href="http://snazzymaps.com/">snazzy maps</a>.</p> <p>with template, slightest splash of color can create huge impact on overall presentation , design.</p> </div> </div> </section> <section id="download" class="content-section text-center"> <div class="download-section"> <div class="container"> <div class="col-lg-8 col-lg-offset-2"> <h2>download grayscale</h2> <p>you can download grayscale free on download page @ start bootstrap. can source code straight github if prefer. additionally, grayscale first start bootstrap theme come less file easy color customization!</p> <a href="http://startbootstrap.com/grayscale" class="btn btn-default btn-lg">visit download page</a> </div> </div> </div> </section> <section id="contact" class="container content-section text-center"> <div class="row"> <div class="col-lg-8 col-lg-offset-2"> <h2>contact start bootstrap</h2> <p>feel free email provide feedback on our templates, give suggestions new templates , themes, or hello!</p> <p>feedback@startbootstrap.com</p> <ul class="list-inline banner-social-buttons"> <li><a href="https://twitter.com/sbootstrap" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">twitter</span></a> </li> <li><a href="https://github.com/ironsummitmedia/startbootstrap" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">github</span></a> </li> <li><a href="https://plus.google.com/+startbootstrap/posts" class="btn btn-default btn-lg"><i class="fa fa-google-plus fa-fw"></i> <span class="network-name">google+</span></a> </li> </ul> </div> </div> </section> <div id="map"></div> <!-- core javascript files --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> <!-- google maps api key - need utilize own api key utilize map feature --> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=aizasycrngkslugjtlibkq3fkftxj3xss1ulzda&sensor=false"></script> <!-- custom theme javascript --> <script src="../../assets/javascripts/grayscale.js"></script> so, question doing wrong. problem running bootstrap? there conflicting files? why load differently using server vs file? baffled, believe has simple.
if need files running, in link download bootstrap site.
view
you mention clicking html file in views lets landing page load correctly
this problem, rails uses layouts, unobtrusive css , range of other dependency-driven elements ensure app extensible possible.
the problem have if view loads correctly standalone file, it's sign other aspects of application interfering it; typically layout & external css
--
layout
a test disable layout particular landing action -
#app/controllers/application_controller.rb class applicationcontroller < actioncontroller::base layout false, only: :landing end this set layout false landing page. if this, able see whether problems go away. if case, you'll best splitting code work layout properly
this railscast help considerably:
javascript html css ruby-on-rails twitter-bootstrap
No comments:
Post a Comment