当前位置: 首页 > Web前端 > JavaScript

BootstrapinAction-单页网站

时间:2023-03-27 14:22:34 JavaScript

1.简介单页结构简单,布局清晰,常用作手机应用或产品的下载介绍页。现在展示网页整体趋向于单页网站设计,这样一次展示核心信息,对用户来说更加直观简单,能够快速了解??一款产品。2.知识点2.1滚动监控滚动监控使用Bootstrap的JavaScript插件,根据滚动条的位置自动更新选中的导航栏。滚动监听一般与导航栏配合使用。这里首先引用了带有二级导航的导航栏。并且给导航栏添加样式navbar-fixed-top,使其固定在顶部,不随滚动条的移动而移动,但是这样会覆盖body上方的部分内容,所以添加样式padding-top:60px同时到正文。切换导航徽标

  • 导航第一
  • 导航第二
  • 第三导航
  • 第四导航
  • 导航第五
  • 子导航优先二级导航
  • 二级导航
  • 因为有五个导航,所以要相应给出以下五个内容载体唯一需要注意的这里就是每个运营商的id属性必须对应href="#?"以上导航,否则看不到效果。

    first

    second

    third

    第四

    Sub-NavigationFirst

    Sub-NavigationSecond

    子导航三

    触发监听依赖