码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap常用技巧lrs

时间:2018-06-09 00:54:26      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:port   tps   Fix   support   ini   hub   移动app   文本编辑   vs code   

 


 

文本编辑使用  VS code

Vs code 常备插件:

  • View In Browser   :在浏览器查看
  • HTML CSS Support  :支持css智能提示
  • Beautify  :快速格式化代码

 

快速开发使用插件及地址

  • 页面进入效果插件    http://www.dowebok.com/131.html 
  • 预设Css3动画    https://daneden.github.io/animate.css/
  • Jquery翻页插件    http://superforest.cn/123/js/jquery.singlePageNav.min.js

使用方式:

$(function(){
        /*导航跳转效果插件*/
        $(‘.nav‘).singlePageNav({
            offset:70
        });
        /*小屏幕导航点击关闭菜单*/
        $(‘.navbar-collapse a‘).click(function(){
            $(‘.navbar-collapse‘).collapse(‘hide‘);
        });
        new WOW().init();
    })

bootstrap导航栏创建

    <!-- 导航 -->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <!-- 小屏幕导航按钮和logo -->
            <div class="navbar-header">
                <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="indexs.html" class="navbar-brand">云优</a>
            </div>
            <!-- 小屏幕导航按钮和logo -->

            <!-- 导航 -->
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-left">
                    <li class="active">
                        <a href="#">首页</a>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">

                    <li>
                        <a href="#bbs">论坛</a>
                    </li>
                    <li>
                        <a href="">前端开发</a>
                    </li>
                    <li>
                        <a href="">最新课程</a>
                    </li>
                    <li>
                        <a href="">移动APP</a>
                    </li>
                    <li>
                        <a href="">联系我们</a>
                    </li>
                </ul>

            </div>
            <!-- 导航 -->
        </div>
    </nav>
    <!-- 导航 -->

 

Bootstrap常用技巧lrs

标签:port   tps   Fix   support   ini   hub   移动app   文本编辑   vs code   

原文地址:https://www.cnblogs.com/ruisenlLi/p/9158080.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!