BootStrap中怎样学习响应式导航条
2015-11-19 20:53
741 查看
BootStrap中怎样学习响应式导航条
响应式导航就是可以在不同的设备下查看不同的效果. 原先的做法是用两套不同的样式来回替换, 现在有了bootstrap之后, 就可以很简单的做到这样的效果. 主要效果图. 分别是电脑, 手机. 如何实现bootstrap的响应式导航条呢? Let’s go!1.
这里bootstrap使用了html5的一个新的标签nav.
标签定义导航链接的部分.
使用了样式. .navbar样式标识的是一个导航条.
其中.navbar又包含了:.navbar-header, .navbar-toggle, .navbar-brand
下面先给出一个带有链接的, 而且还支持移动端的例子代码.
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初试进度条
- Bootstrap 3.3.4 发布,Web 前端 UI 框架
- HTML5中在客户端验证文件上传的大小
- Canvas 在高清屏下绘制图片变模糊的解决方法
- angular 指令简述
- 原生js结合html5制作小飞龙的简易跳球
- Bootstrap每天必学之前端开发框架
- 基于Bootstrap的网页设计实例
- 三个不常见的 HTML5 实用新特性简介
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- js+HTML5实现canvas多种颜色渐变效果的方法
- 精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
- javascript+HTML5的Canvas实现Lab单车动画效果
- javascript+html5实现绘制圆环的方法
- 全系IE支持Bootstrap的解决方法
- avalonjs制作响应式瀑布流特效
- HTML5实现微信拍摄上传照片功能
- BootStrap实现带有增删改查功能的表格(DEMO详解)
- jQuery Deferred和Promise创建响应式应用程序详细介绍