Bootstrap常用技巧lrs

Posted 2020-11-14 ruisenlli

 

---

 

文本编辑使用  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>
    <!-- 导航 -->