Bootstrap实战 - 单页面网站
一、介绍
单页面结构简单、布局清晰,常常用来做手机 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
(完)
Bootstrap实战 - 单页面网站相关推荐
- 推荐7款超棒的单页面网站设计模板。关键是!免费!!
之前我们推荐过Bootstrap的实用开发教程和8款HTML5实现的特效和应用,反映非常强烈,很多前端爱好者纷纷要求多分享些类似的教程和模板.今天我们推荐的这7套单页面网站设计模板不仅带有独立的在线演 ...
- 分享27个最新国外超酷单页面网站设计
为什么80%的码农都做不了架构师?>>> 日期:2012-5-6 来源:GBin1.com 越来越多的网站开始使用单页面的网站设计,因为单页面网站设计简单直观,可以使用夸张的 ...
- 专业网络推广浅析单页面网站如何高效做SEO优化?
专业网络推广表示在网站SEO优化的工作中,优化人员们需要掌握的优化技巧也有很多,来应对更多样化的优化类型.现在有很多网站追求极简主义,所以会设计一些单页面来展示一些信息,那么对于单页面该如何更好地做好 ...
- 如何快速制作一个H5单页面网站
在没有自助建站之前,做单页面网站也需要耗费大量的时间,编写代码,调试,上传发布一个都不能少.而有了域名版的建站宝盒后,做单页面网站的时间可以缩短至20分钟左右,还不用花钱.下面给大家介绍操作方法,有需 ...
- 单页面网站seo优化的基本要点
一个专业的网站建设者从来都不是与生俱来的,在苦练怎样建成一个好网站的过程中必定走过弯路,吃过苦头,对网站的架构.页面展示以及优化等各方面都需要精雕细琢,今天,我们就从seo的角度谈谈单页面网站建设的好 ...
- 分享21个超棒的单页面网站设计
日期:2012-7-7 来源:GBin1.com 单页面的网站设计对于结构简单的网站来说无疑是一个最合理的选择,使用单页面网站,不需要维护过多的页面,复杂的CSS文件结构,它们能够很直观的表单网站需 ...
- 还在一筹莫展?单页面网站优化技巧分享给你!
有些企业网站由于业务的特殊性会将网站设计成单页面的形式,以更直观的方式向用户传达更多的信息,给网站带来更多精准的目标用户,为网站带来更多的流量与成交量.不过对于网站单页面的优化,该如何进行呢?下面就带 ...
- 从零开始搭建自己的VueJS2.0+ElementUI单页面网站(一、环境搭建)
From: https://blog.csdn.net/u012907049/article/details/72764151 版权声明:本文为博主原创文章,未经博主允许不得转载. https://b ...
- 浅谈单页面网站需要注意哪些事项
最早的单页面出现在互联网伊始,只是过于单调而不受网民们关注.近几年互联网上各类形形色色网站的风行,对此人们渐渐的表现出审美疲劳.随着一些热门网站成功的单页面案例的出现,有些企业也纷纷加入了潮流,那么在 ...
最新文章
- 一个用于录制用户输入操作并实时回放的小工具
- Linux下C语言的fgets与fputs
- 【Qt】通过QtCreator源码学习Qt(六):命令行参数解析实现
- 轻量级DAO层实践初体验
- php 面向对象 示例,php中面向对象示例
- 脱胎换骨 XIV Gen3摆脱最后的“羸弱点”
- 【Go】Panic函数
- 他毕业于北师大,编写了我国首套数学教材,陈景润华罗庚都崇拜他
- C# via CLR之IL中间语言初步探索
- fjnuoj 1004 游戏 (博弈论)
- 【MySQL】2、MySQL 创建数据库和表
- python apkg,Python 自动加固APK
- 计算机网络有什么部分组成,计算机网络有哪些组成部分和详细对比
- 三维匹配_倾斜影像和近景影像空地融合精细化实景三维建模
- Hive-创建表的几种方式
- 电脑键盘部分按键失灵_电脑键盘失灵怎么办 三步教你解决问题【图文】
- 计算机网络(重点简单概括)
- 宇视NVR录像机下载录像没有声音如何解决
- 2022-2027年中国农村小额贷款行业市场调研及未来发展趋势预测报告
- python保存数据框_将pandas数据框的“Out[]表保存为figu