项目：单页面官网制作（Bootstrap）总结

一.Bootstrap 导航栏

（1）默认的导航栏

• 向 <nav> 标签添加 class .navbar、.navbar-default。
• 向上面的元素添加 role="navigation"，有助于增加可访问性。
• 向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。
• 为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。

（2）响应式的导航栏
您要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的 <div> 中。
折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。
第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，
第二个是 data-target，指示要切换到哪一个元素。
三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。
这些会切换为 .nav-collapse <div> 中的元素。
为了实现以上这些功能，您必须包含 <u>Bootstrap 折叠（Collapse）插件</u>。

image.png

---

二.内容板块制作

image.png
注：小图标制作
image.png
image.png
image.png
如果直接元素class选择器改变不了样式（bootstrap css多层覆盖F12浏览器调试可知道）；可以在其前面加个限制：
image.png

---

三.动画加载处理

接触到的js/css框架或插件

• animate.css – 齐全的CSS3动画库
• jquery.min.js
• bootstrap.min.js
• jquery.singlePageNav.min.js
• wow.mim.js//导航点击菜单跳转与点击缩放菜单折叠按钮缓冲效果插件

（1）jquery.singlePageNav.min.js

image.png
//点击菜单跳转与点击缩放菜单折叠按钮缓冲效果插件

    $(document).ready(function(){
        $('.nav').singlePageNav({
            offset:50
        });
        $('.navbar-collapse a').click(function(){
            $('.navbar-collapse').collapse('hide');
        });
    })
</script>

（2）animate.css //齐全的CSS3动画库
连接：http://www.dowebok.com/98.html

• 浏览器兼容：
  当然是只兼容支持 CSS3 animate 属性的浏览器，他们分别是：IE10+、Firefox、Chrome、Opera、Safari
• 使用方法
  1.引入文件<link rel="stylesheet" href="animate.min.css">
  2.HTML及使用<div class="animated bounce" id="dowebok"></div>
  animated 类似于全局变量，定义了动画的持续时间；bounce是动画效果的名称。如果动画是无限播放的，可以添加 class infinite；
  animate.css 的默认设置有些时候并不是我们想要的，所以可以重新设置，比如：

#dowebok {
    animate-duration: 2s;    //动画持续时间
    animate-delay: 1s;    //动画延迟时间
    animate-iteration-count: 2;    //动画执行次数
}

注意添加浏览器前缀（兼容性）
（3）wow.min.js
WOW.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果，能满足各种需求。

• 浏览器兼容
  IE10+ ✔　Chrome✔　Firefox ✔　Opera✔　Safari✔
  IE6、IE7 等老旧浏览器不支持 CSS3 动画，所以没有效果；而 wow.js 也使用了 querySelectorAll 方法，IE 低版本会报错。为了达到更好的兼容，最好加一个浏览器及版本判断。
• 使用方法
  1.引入文件
  <link rel="stylesheet" href="animate.min.css">
<script src="wow/wow.min.js"></script>
<script> new WOW().init(); </script>//引用wow
  也可以自定义配置，可使用如下：包含在<script>里面

    var wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 0,
    mobile: true,
    live: true
    });
    wow.init();

属性 /方法	类型	默认值	说明
boxClass	字符串	‘wow’	需要执行动画的元素的 class
animateClass	字符串	‘animated’	animation.css 动画的 class
offset	整数	0	距离可视区域多少开始执行动画
mobile	布尔值	true	是否在移动设备上执行动画
live	布尔值	true	异步加载的内容是否有效

2.HTML中使用<div class="wow slideInLeft"></div>
可以加入 data-wow-duration（动画持续时间）和 data-wow-delay（动画延迟时间）属性，如：
<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>
class中必须要要包含wow

• data-wow-duration:改变动画过程时间
• data-wow-delay:延迟在动画开始之前
• data-wow-offset:距离开始动画(元素距离浏览器底部bottom多高时开始动画)
• data-wow-iteration:动画重复的次数