视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
一系列Bootstrap导航条使用方法分享_javascript技巧
2020-11-27 21:49:45 责编:小采
文档

本文包含了Bootstrap导航条基础使用方法,供大家参考,具体内容如下

1、Bootstrap基础导航样式
Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式,必须附加另外一个样式才会有效,比如“nav-tabs”、“nav-pills”之类。比如右侧代码编辑器中就有一个tab导航条的例子,他的实现方法就是为ul标签加入.nav和nav-tabs两个类样式

HomeCSS3SassjQueryResponsive

2、Bootstrap基础导航条
在制作一个基础导航条时,主要分以下几步:

第一步:首先在制作导航的列表(

  • )基础上添加类名“navbar-nav”

  • 第二步:在列表外部添加一个容器(p),并且使用类名“navbar”和“navbar-default”

    “.navbar”样式的主要功能就是设置左右padding和圆角等效果,但他和颜色相关的样式没有进行任何的设置

    网站首页系列教程名师介绍成功案例关于我们

    3、Bootstrap导航条添加标题
    在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过“navbar-header”和“navbar-brand”来实现。

       导航条
      网站首页系列教程名师介绍成功案例关于我们

    4、Bootstrap导航条二级菜单
    在导航条中添加二级菜单也非常简单

       导航条
      网站首页系列教程
     CSS3JavaScriptPHP名师介绍成功案例关于我们

    5、Bootstrap带表单的导航条
    有的导航条中会带有搜索表单,在Bootstrap框架中提供了一个“navbar-form”,使用方法很简单,在navbar容器中放置一个带有navbar-form类名的表单。navbar-left”让表单左浮动,更好实现对齐。在Bootstrap框架中,还提供了“navbar-right”样式,让元素在导航条靠右对齐。

       Bootstrap
      网站首页系列教程
     CSS3JavaScriptPHP名师介绍成功案例关于我们搜索

    6、Bootstrap导航条中的按钮、文本和链接
    Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外,还可以使用其他元素。框架提供了三种其他样式:
    1).导航条中的按钮navbar-btn

    2).导航条中的文本navbar-text

    3).导航条中的普通链接navbar-link
    但这三种样式在框架中使用时受到一定的,需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的,一般情况在使用一到两个不会有问题,超过两个就会有问题。

       Bootstrap
      Navbar TextNavbar TextNavbar Text   Bootstrap
      Navbar Text
     Navbar Text
     Navbar Text

    7、Bootstrap固定导航条
    很多情况之一,设计师希望导航条固定在浏览器顶部或底部,这种固定式导航条的应用在移动端开发中更为常见。Bootstrap框架提供了两种固定导航条的方式:
    .navbar-fixed-top:导航条固定在浏览器窗口顶部
    .navbar-fixed-bottom:导航条固定在浏览器窗口底部

     …我是内容 …

    8、Bootstrap分页导航
    带页码的分页导航,可能是最常见的一种分页导航,特别是在列表页内容超多的时候,会给用户提供分页的导航方式。平时很多同学喜欢用p>a和p>span结构来制作带页码的分页导航。不过,在Bootstrap框架中使用的是ul>li>a这样的结构,在ul标签上加入pagination方法。

    «12345»

    在Bootstrap框架中,也可以通过几个不同的情况来设置分页按钮大小。
    1).通过“pagination-lg”让分页导航变大;
    2).通过“pagination-sm”让分页导航变小

    ………

    Bootstrap框架除了提供带页码的分页导航之外还提供了翻页导航。这种分页导航常常在一些简单的网站上看到,比如说个人博客,杂志网站等。这种分页导航是看不到具体的页码,只会提供一个“上一页”和“下一页”的按钮。
    在实际使用中,翻页分页导航和带页码的分页导航类似,为ul标签加入pager类。

    «上一页下一页»

    默认情况之下,翻页分页导航是居中显示,但有的时候我们需要一个居左,一个居右。Bootstrap框架提供了两个样式
    previous:让“上一步”按钮居左
    next:让“下一步”按钮居右

    «上一页下一页»

    下载本文
    显示全文
    专题