一、介绍
单页面构造简略、布局清晰,经常用来做手机 App 或者某个产品的下载介绍页面。当初,展现型网页整体趋向于单页网站设计,这样一次性把外围信息展示进去,对于用户来说更加直观和简略,可能疾速理解一个产品。
二、知识点
2.1 滚动监听
滚动监听应用了 Bootstrap 的 JavaScript 插件,依据滚动条所处的地位自动更新选中导航栏。
滚动监听个别与导航栏配合应用,这里先援用了带有二级导航的导航栏。并且给导航栏增加款式 navbar-fixed-top
使其固定在顶部不随滚动条挪动而挪动,但这样的话会遮住 body
下面的一部分内容,所以同时给 body
增加款式 padding-top: 60px
。
<!-- 代码局部 -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="nav-menu">
<div class="container">
<div class="navbar-header">
<!-- 以下为固定写法,用到的时候复制粘贴即可 -->
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navigation-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">LOGO</a>
</div>
<div class="collapse navbar-collapse" id="navigation-collapse">
<ul class="nav navbar-nav">
<li><a href="#first">Navigation First</a></li>
<li><a href="#second">Navigation Second</a></li>
<li><a href="#third">Navigation Third</a></li>
<li><a href="#fourth">Navigation Fourth</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Navigation Fifth <span class="caret"></span>
<ul class="dropdown-menu">
<li><a href="#sub-first">Sub-Navigation First</a></li>
<li><a href="#sub-second">Sub-Navigation Second</a></li>
<li><a href="#sub-third">Sub-Navigation Third</a></li>
</ul>
</a>
</li>
</ul>
</div>
</div>
</nav>
因为有五个导航,所以上面也要相应的给出五个内容载体。这里惟一须要留神的是每个载体的 id
属性,都要在下面导航的 href="#?"
绝对应,不然会看不到成果。
<!-- 代码局部 -->
<div class="container-fluid scrollspy">
<div id="first" class="bg-primary">
<p>first</p>
</div>
<div id="second" class="bg-success">
<p>second</p>
</div>
<div id="third" class="bg-info">
<p>third</p>
</div>
<div id="fourth" class="bg-warning">
<p>fourth</p>
</div>
<div id="fifth" class="bg-danger">
<p id="sub-first" class="bg-success">Sub-Navigation First</p>
<p id="sub-second" class="bg-info">Sub-Navigation Second</p>
<p id="sub-third" class="bg-warning">Sub-Navigation Third</p>
</div>
</div>
触发监听依赖 <nav>
元素的属性 id="nav-menu"
,滚动监听的成果是由款式为 scrollspy
(这里能够是任意值,只是做个示例)载体在其容器的滚动条变动时,随着载体的内容在视觉中的变动,其 id
对应的导航栏做出相应的反馈。这里的滚动条对应的是 body
元素,所以给 body
元素加上属性 data-spy="scroll"
和 data-target="#nav-menu"
(这里的值对应导航的 id
值),同时加上绝对定位款式 position: relative
。这时移到最顶部时不能正当定位到第一个导航局部,因为下面给了 body
元素一个 60px
的内边距,这里给 body
元素减少一个属性 data-offset="60"
,使滚动监听在计算滚动地位是绝对于顶部有一个偏移量。示例:<body data-spy="scroll" data-target="#nav-menu" data-offset="60">
。
一级导航效果图:
二级导航效果图:
2.2 定制
下载的 Bootstrap 源码尽管通过了压缩,然而仍然有几百 k 的大小。是否能够去除不须要的 CSS 款式和 JavaScript 性能呢?Bootstrap 中文网曾经提供了这样的性能。
能够在官网定制页面设置本人须要的:
- 通用 CSS
- 组件
- JavaScript 组件
- jQuery 插件
例如:滚动监听只须要导航栏组件,根底 CSS 款式和 Scrollspy JavaScript 插件,这里能够只抉择须要的,其余留空即可。
之前若想扭转 Bootstrap CSS 默认属性的话,要么在源码中找进去批改,要么在本人的 CSS 中写款式笼罩它,例如:.navbar-default {background-color: #EDF4ED;}
。在定制页面中,CSS 款式不仅能够筛选,还能够扭转默认属性,例如:扭转导航栏的背景色彩,间接在属性 @navbar-default-bg
上面批改即可。
依照本人的想法批改实现之后点击页面最下方的【编译并下载】即功败垂成。此时 CSS + JS 大小曾经变成了 50k 左右,之后依照惯例办法援用就能够了。
三、实战
应用 Bootstrap 滚动监听和定制性能制作一个介绍 豆瓣 App 的单页面。
演示地址:https://mazey.cn/bootstrap-blueprints/lesson-fifth-singlepage/index.html,源码地址:https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-fifth-singlepage。
版权申明
本博客所有的原创文章,作者皆保留版权。转载必须蕴含本申明,放弃本文残缺,并以超链接模式注明作者后除和本文原始地址:https://blog.mazey.net/2671.html
(完)