html - How do I link CSS files to my view in Rails? -
how link css stylesheet html file. using rails generate application, file structure still quite confusing. have directory stylesheets in assets, don't know how link them. here index.html file looks like:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>stylish portfolio - start bootstrap theme</title> <!-- bootstrap core css --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- custom css --> <link href="css/stylish-portfolio.css" rel="stylesheet"> <!-- custom fonts --> <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <link href="http://fonts.googleapis.com/css?family=source+sans+pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css"> <!-- html5 shim , respond.js ie8 support of html5 elements , media queries --> <!-- warning: respond.js doesn't work if view page via file:// --> <!--[if lt ie 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <!-- navigation --> <a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a> <nav id="sidebar-wrapper"> <ul class="sidebar-nav"> <a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle"><i class="fa fa-times"></i></a> <li class="sidebar-brand"> <a href="#top" onclick = $("#menu-close").click(); >start bootstrap</a> </li> <li> <a href="#top" onclick = $("#menu-close").click(); >home</a> </li> <li> <a href="#about" onclick = $("#menu-close").click(); >about</a> </li> <li> <a href="#services" onclick = $("#menu-close").click(); >services</a> </li> <li> <a href="#portfolio" onclick = $("#menu-close").click(); >portfolio</a> </li> <li> <a href="#contact" onclick = $("#menu-close").click(); >contact</a> </li> </ul> </nav> <!-- header --> <header id="top" class="header"> <div class="text-vertical-center"> <h1>start bootstrap</h1> <h3>free bootstrap themes & templates</h3> <br> <a href="#about" class="btn btn-dark btn-lg">find out more</a> </div> </header> <!-- --> <section id="about" class="about"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2>stylish portfolio perfect theme next project!</h2> <p class="lead">this theme features wonderful photography courtesy of <a target="_blank" href="http://join.deathtothestockphoto.com/">death stock photo</a>.</p> </div> </div> <!-- /.row --> </div> <!-- /.container --> </section> <!-- services --> <!-- circle icons use font awesome's stacked icon classes. more information, visit http://fontawesome.io/examples/ --> <section id="services" class="services bg-primary"> <div class="container"> <div class="row text-center"> <div class="col-lg-10 col-lg-offset-1"> <h2>our services</h2> <hr class="small"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="service-item"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-cloud fa-stack-1x text-primary"></i> </span> <h4> <strong>service name</strong> </h4> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <a href="#" class="btn btn-light">learn more</a> </div> </div> <div class="col-md-3 col-sm-6"> <div class="service-item"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-compass fa-stack-1x text-primary"></i> </span> <h4> <strong>service name</strong> </h4> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <a href="#" class="btn btn-light">learn more</a> </div> </div> <div class="col-md-3 col-sm-6"> <div class="service-item"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-flask fa-stack-1x text-primary"></i> </span> <h4> <strong>service name</strong> </h4> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <a href="#" class="btn btn-light">learn more</a> </div> </div> <div class="col-md-3 col-sm-6"> <div class="service-item"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-shield fa-stack-1x text-primary"></i> </span> <h4> <strong>service name</strong> </h4> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <a href="#" class="btn btn-light">learn more</a> </div> </div> </div> <!-- /.row (nested) --> </div> <!-- /.col-lg-10 --> </div> <!-- /.row --> </div> <!-- /.container --> </section> <!-- callout --> <aside class="callout"> <div class="text-vertical-center"> <h1>vertically centered text</h1> </div> </aside> <!-- portfolio --> <section id="portfolio" class="portfolio"> <div class="container"> <div class="row"> <div class="col-lg-10 col-lg-offset-1 text-center"> <h2>our work</h2> <hr class="small"> <div class="row"> <div class="col-md-6"> <div class="portfolio-item"> <a href="#"> <img class="img-portfolio img-responsive" src="img/portfolio-1.jpg"> </a> </div> </div> <div class="col-md-6"> <div class="portfolio-item"> <a href="#"> <img class="img-portfolio img-responsive" src="img/portfolio-2.jpg"> </a> </div> </div> <div class="col-md-6"> <div class="portfolio-item"> <a href="#"> <img class="img-portfolio img-responsive" src="img/portfolio-3.jpg"> </a> </div> </div> <div class="col-md-6"> <div class="portfolio-item"> <a href="#"> <img class="img-portfolio img-responsive" src="img/portfolio-4.jpg"> </a> </div> </div> </div> <!-- /.row (nested) --> <a href="#" class="btn btn-dark">view more items</a> </div> <!-- /.col-lg-10 --> </div> <!-- /.row --> </div> <!-- /.container --> </section> <!-- call action --> <aside class="call-to-action bg-primary"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h3>the buttons below impossible resist.</h3> <a href="#" class="btn btn-lg btn-light">click me!</a> <a href="#" class="btn btn-lg btn-dark">look @ me!</a> </div> </div> </div> </aside> <!-- map --> <section id="contact" class="map"> <iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=twitter,+inc.,+market+street,+san+francisco,+ca&aq=0&oq=twitter&sll=28.659344,-81.187888&sspn=0.128789,0.264187&ie=utf8&hq=twitter,+inc.,+market+street,+san+francisco,+ca&t=m&z=15&iwloc=a&output=embed"></iframe> <br /> <small> <a href="https://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=twitter,+inc.,+market+street,+san+francisco,+ca&aq=0&oq=twitter&sll=28.659344,-81.187888&sspn=0.128789,0.264187&ie=utf8&hq=twitter,+inc.,+market+street,+san+francisco,+ca&t=m&z=15&iwloc=a"></a> </small> </iframe> </section> <!-- footer --> <footer> <div class="container"> <div class="row"> <div class="col-lg-10 col-lg-offset-1 text-center"> <h4><strong>start bootstrap</strong> </h4> <p>3481 melrose place<br>beverly hills, ca 90210</p> <ul class="list-unstyled"> <li><i class="fa fa-phone fa-fw"></i> (123) 456-7890</li> <li><i class="fa fa-envelope-o fa-fw"></i> <a href="mailto:name@example.com">name@example.com</a> </li> </ul> <br> <ul class="list-inline"> <li> <a href="#"><i class="fa fa-facebook fa-fw fa-3x"></i></a> </li> <li> <a href="#"><i class="fa fa-twitter fa-fw fa-3x"></i></a> </li> <li> <a href="#"><i class="fa fa-dribbble fa-fw fa-3x"></i></a> </li> </ul> <hr class="small"> <p class="text-muted">copyright © 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> // closes sidebar menu $("#menu-close").click(function(e) { e.preventdefault(); $("#sidebar-wrapper").toggleclass("active"); }); // opens sidebar menu $("#menu-toggle").click(function(e) { e.preventdefault(); $("#sidebar-wrapper").toggleclass("active"); }); // scrolls selected menu item on page $(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); if (target.length) { $('html,body').animate({ scrolltop: target.offset().top }, 1000); return false; } } }); }); </script> </body> </html> i commented link need such bootstrap core css, , custom css.
from section 3.1.3: http://guides.rubyonrails.org/layouts_and_rendering.html:
the stylesheet_link_tag helper returns html tag each source provided.
if using rails "asset pipeline" enabled, helper generate link /assets/stylesheets/. link processed sprockets gem. stylesheet file can stored in 1 of 3 locations: app/assets, lib/assets or vendor/assets.
Comments
Post a Comment