BootStrap中怎样学习响应式导航条

原创 2015年11月19日 20:53:17

BootStrap中怎样学习响应式导航条

响应式导航就是可以在不同的设备下查看不同的效果. 原先的做法是用两套不同的样式来回替换, 现在有了bootstrap之后, 就可以很简单的做到这样的效果. 主要效果图. 分别是电脑, 手机. 如何实现bootstrap的响应式导航条呢? Let’s go!
这里写图片描述

1.
这里bootstrap使用了html5的一个新的标签nav.

2.
bootstrap导航条的可选页面, 有两种(可自己写css定义), 第一种默认的.navbar-default, 效果是:白色的背景黑色的字, 第二种是.navbar-inverse, 效果是:黑色的背景加上白色的字. 只需要选中自己想要的效果即可, 这里需要注意的地方有一点. 就是如果想要这两种默认的其他效果, 就需要自己去实现样式, 可以查看css的源代码, 然后去看.navbar-inverse怎么实现, 然后模仿实现即可, 这是一个笨办法, 还有另外一种方式, 就是使用less, 重新写样式, 因为bootstrap可运行的样式, 也是用less构建的, 也有sass版的, 这里只是简单的介绍一下, 定义好的样式, 这些在以后的经验中还会继续提到.
这里写图片描述

3.
上面定义了一个简单的带有链接的导航条, 然后相信的说明一下, 这个简单的代码.
1.导航条样式的开始. 这里需要注意一点: 为了增强可访问性(和浏览器的兼容性),务必给每个导航条加上 role=”navigation” 属性。方便bootstrap中js处理导航条的显示样式.
2.导航条的页头, 也就是显示在最前面的导航条标题. 这个是bootstrap中的一个带有图标的标签, 然后这里也是在移动端, 就是小于768设备显示的效果.
3.这部分是移动端折叠的部分, 也是为了能够更好的展现页面在移动端.
这里写图片描述

4
有时候, 我们需要把我们的导航条固定在顶端, 和固定在底部. 这个的效果, 在bootstrap中, 很容易就实现了, 首先需要用到固定顶端的样式..navbar-fixed-top 和固定底端的样式.navbar-fixed-bottom
这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

BootStrap响应式导航条

http://getbootstrap.com/components/#navbar <div class="...

反色导航条与响应式导航

反色导航条与响应式导航 反色导航条 1.反色导航条实例 Bootstrap给我们定义了两种导航条的样式,一种是default,一种是i...

Bootstrap学习--响应式导航栏

刚开始学的bootstrap都是网上的理论知识,实践的时候才发觉根本就不是那么回事,只有尝试过才知道什么才是重点,下面详细说一下响应式导航栏。 <button type="button...

Bootstrap3.0学习第十三轮(导航条)

Bootstrap3.0学习第十三轮(导航条) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/340...

bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

为导航条添加标题、二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑...

bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多。我们先来看导航条中最基础的一个——基础导航条。 使用方法: 在制...

bootstrap 响应式 导航栏

  • 2017-07-17 11:58
  • 66KB
  • 下载

bootstrap实现响应式导航栏,折叠隐藏效果

bootstrap实现响应式导航栏 PC机显示正常的长条导航,手机端实现折叠隐藏的按钮效果 向 标签添加 class .navbar、.navbar-default(导航条背景白)nav...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)