赵龙 全栈之路

【魔改经验分享05】使用功能片段代码中的高频小套路

| Comments

大家从各个网站中找到自己需要的功能片段代码,接下来就是如何快速在自己的作品上使用,出现了 bug 迅速 debug ,以下就以使用的 注册/登录 页面的功能片段代码为例。


https://bootsnipp.com/snippets/nrbn7


功能片段 HTML 代码实际使用,“+” 的代码都是网站专案原始的 登录/注册 页面使用的 HTML 代码,这是为了在最快实作速度下保证 注册/登录 功能能正常使用。除非自己对这部分代码十分熟悉,知道具体每一小段代码的作用与组合效果,能自己随意拆解代码并组合使用。做不到这些推荐还是使用专案的原始功能代码实作速度最快,否则大量的时间浪费在优化代码上了。

app/views/devise/sessions/new.html.erb
<script src="https://use.typekit.net/ayg4pcz.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

<div class="container">
<h1 class="welcome text-center">Welcome to <br> Ice Code</h1>
    <div class="card card-container">
    <h2 class='login_title text-center'>Log in</h2>
    <hr>

+    <%= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
-        <form class="form-signin">
+        <div class="form-signin">
-                <span id="reauth-email" class="reauth-email"></span>
-                <p class="input_title">Email</p>
-                <input type="text" id="inputEmail" class="login_box" placeholder="user01@IceCode.com" required autofocus>
-                <p class="input_title">Password</p>
-                <input type="password" id="inputPassword" class="login_box" placeholder="******" required>
-                <div id="remember" class="checkbox">
-                    <label>
                        
-                    </label>
-                </div>
-                <button class="btn btn-lg btn-primary" type="submit">Login</button>
                
                
+          <%= f.input :email, required: false, autofocus: true, label:"邮箱" %>
+          <%= f.input :password, required: false, label:"密码" %>
+          <%= f.input :remember_me, label:"记住我", as: :boolean if devise_mapping.rememberable? %>

+          <%= f.button :submit, "登录" %>
+        </div><!-- /form -->
+     <% end %>

    </div><!-- /card-container -->
</div><!-- /container -->

在网站专案的 CSS 代码的文档,完全复制黏贴全部的功能片段的 CSS 代码

app/assets/stylesheets/application.scss
# ...略

body, html {
    height: 100%;
    background-repeat: no-repeat;
    ...........
}

# ...略 //功能片段中的 css 代码全部复制黏贴

.forgot-password:hover,
.forgot-password:active,
.forgot-password:focus{
    color: rgb(12, 97, 33);
}

debug

因为功能片段代码的命名与自己的专案不同,会出现许多 bug ,全部 debug 就 ok ,这些 bug 大多数集中在 CSS ,小部分在 HTML 中。

debug-01



debug-02




debug-03 大家不觉得提示 flash 正下方出现一条白边很影响美观吗,我们解决掉它。



解决这个 bug 无意中引起一个隐藏小 bug

好啦,本篇《魔改经验分享》结束了,感谢各位助教与小伙伴的无私分享与帮助,希望能帮助各位小伙伴。

本文赵龙,如果您觉得这篇《魔改经验分享》很赞,欢迎您浏览我的作品:

点击》知识猎人公会.猎人学院《点击

如果您认为这个作品不错,冒昧地恳请您投上一票。

Comments

comments powered by Disqus