zoukankan      html  css  js  c++  java
  • 本博客完美的支持移动端

    前几天搞了个Bootstrap的皮肤,由于时间的问题,随意写了下,瞬间被封杀。

    博客主页太复杂园友也不会去看,还不如简单一点。

    这几天就改进了移动端显示的问题,除了在4G加载的时候有点忙,(不知道怎么改进)显示方面已经很好的。

    首先我主页上只留下了文章列表,别的元素基本remove,或者hide了。导航栏是完全自定义的,静态的。

    Bootstrap的导航栏对移动端支持的非常好,用Bootstrap的原因是方便,不用去写一大堆来支持各种客户端。

    我这里用的百度的cdn。这里应用jquery是因为博客园的jquery太老了,对Bootstrap支持不好。

    1.导航栏

    引用了 Bootstrap 就可用他的各种Css和字体图标了。

    就是纯Bootstrap的导航栏,它的类是navbar,之前改的时候用的博客园默认的导航栏然后加上类,主要在移动端显示的不好。所以隐藏了,手写个静态的。

    手机上显示如图:

    Bootstrap的导航栏就是这么方便。

    2. 博客标题

    博客标题和签名用的是Bootstrap的巨幕

    <div class="jumbotron">
      <h1>Hello, world!</h1>
      <p>...</p>
      <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
    </div>

     3.文章列表

    文章列表隐藏了,访问量和评论量,然后给没个.day加了col-md-4(栅格),并且把标题的a标签隐藏,弄成了<h3>元素。

    $(".postTitle").html(function () {
            return "<h3>" + $(this).find("a").hide().text() + "</h3>"
        });

    还有阅读全文的a标签改成了按钮只需要给它添加一个类btn btn-default就可以。

    4.标签页

    比如标签JavaScript,首先window.location.pathname里面确定是否在我的标签页。

    给标签添加了列表的类list-group,通过正则表达式获得阅读量,变成了列表的徽章。都是Bootstrap的类。

    5.文章具体内容

    主要溜改了代码块,Bootstrap对代码块支持的我觉得已经可以了,我就把原来的类删了。

    评论列表是用的早期就做好的。

    这里主要是吧头像显示出来,如果没上传头像的园友,显示一个默认的。

         $(".feedbackCon").prepend('<img class="userImg" src="" />');
         $(".feedbackItem .feedbackCon span").each(function () {
             var userimgUrl = $(this).text();
             userimgUrl = userimgUrl ? userimgUrl : "http://images.cnblogs.com/cnblogs_com/cyclone77/682571/o_sample_face.gif";
             $(this).parent().find("img").attr("src", userimgUrl);
         })

    还有就是评论框,和提交按钮添加的Bootstrap的表单的类form-control, btn btn-default。

    这里有很多细节和Css样式就不具体说了,有喜欢朋友我可以分享出来。

    手机测试(扫码):

  • 相关阅读:
    Java-DatabaseConnectionPool工具类
    Java-收邮件
    Java-发邮件
    Java-ZipUtil工具类
    Java-WebServiceUtil工具类
    Java-FtpUtil工具类
    Java-Base64Fiend工具类
    Java-ConnectDB工具类
    Java-UploadHelper工具类
    Java-生成缩略图工具类
  • 原文地址:https://www.cnblogs.com/cyclone77/p/5254692.html
Copyright © 2011-2022 走看看