Bootstrap常用技巧lrs

发布时间：2020-12-17 20:52:36 所属栏目：安全来源：网络整理

导读：? ? 文本编辑使用? VS code Vs code 常备插件： View In Browser? ?：在浏览器查看 HTML CSS Support? ：支持css智能提示 Beautify ：快速格式化代码 ? 快速开发使用插件及地址页面进入效果插件? ? http://www.dowebok.com/131.html? 预设Css3动画 ??https:

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!