如何使设计人员的静态网页在Rails 4中运行

debugcn 发表于 Dev

琼·普约尔

我有一个想要放入Rails应用程序的静态网页。问题是我不知道如何使css和js导入正常工作。

当我将html直接加载到浏览器中时，它可以正常工作，但是当我在服务器上运行它时，它缺少一些组件。

我想知道放在哪里以及如何引用js和CSS资源。我也想知道这段代码中需要哪些辅助方法：

<!DOCTYPE html>
<!--[if IE 8]><html class="ie ie8" lang="en-US"><![endif]-->
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Login |  eatbooking.com</title>
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0, width=device-width;"/>
        <meta name="format-detection" content="telephone=no">
        <meta name="description" content="">
        <link rel="shortcut icon" href="favicon.ico"/>
        <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700' rel='stylesheet' type='text/css'>
        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="css/import.css" rel="stylesheet">
        <!--[if lt IE 9]>
        <script src="js/html5shiv.js"></script>
        <script src="js/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>
        <section class="content">
          <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="popup-outer-container client-form login">
                        <div class="popup-header">
                            <a href="#"><img src="images/logo.png" alt="Logo"></a>
                        </div>
                        <div class="popup-content">
                            <div class="popup-content-top">
                                <div class="alert-message">
                                    <p>Validation error.</p>
                                </div>
                                <div class="input-box">
                                                            <input type="text" placeholder="EMAIL">
                                                     </div> 
                                                     <div class="input-box">
                                                            <input type="text" placeholder="CONTRASEÑA">
                                                     </div> 
                                                      <div class="check-box">
                                                            <input tabindex="1" type="checkbox" id="input-1">
                                                            <label for="input-1">Remember me</label>
                                                        </div>
                                                        <div class="forgot-password">
                                                            <a href="#">¿Recordar contraseña?</a>
                                                        </div>
                                                     <div class="order-row">
                                                        <div class="save-button">
                                                            <input type="submit" value="Entrar">
                                                        </div>
                                                    </div>  
                            </div>
                        </div>
                        <div class="popup-content-bottom">
                            <span>¿Todavía no tiene cuenta?.</span>
                                            <a href="#">Alta gratis.</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </section>

        <!--javascript start -->
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.js"></script>
        <script src="js/icheck.js"></script>
        <script src="js/jquery.bpopup.min.js"></script>
        <script src="js/selectbox.min.js"></script>
        <script src="js/main.js"></script>

    </body>
</html>

索拉卜

如果要快速修复，则必须将文件和目录粘贴到公用文件夹中。否则，您也可以将它们保留在应用程序/资产中。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。