Bootstrap 10.12

下拉菜单

在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件。当然,如果你使用的是未编译版本,在js文件夹下你能找到一个名为“dropdown.js”的文件。你也可以调用这个js文件。不过在我们的教程中,我们统一调用压缩好的“bootstrap.min.js”文件:


特别声明:因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件,所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果。

1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素,示例中为:


2、使用了一个


在Bootstrap框架中的下拉菜单还提供了下拉分隔线,假设下拉菜单有两个组,那么组与组之间可以通过添加一个空的

  • ,并且给这个
  • 添加类名“divider”来实现添加下拉分隔线的功能。


    上一小节讲解通过添加“divider”可以将下拉菜单分组,为了让这个分组更明显,还可以给每个组添加一个头部(标题)。如下:

    
    
  • 下拉菜单项

  • 下拉菜单项除了上面两种状态,还有当前状态(.active)和禁用状态(.disabled)。这两种状态使用方法只需要在对应的菜单项上添加对应的类名:

    
    
  • 下拉菜单项
  • 下拉菜单项
  • 按钮

    按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运行。不过我们同样可以直接只调用bootstrap.js文件。因为这个文件已集成了button.js插件功能。

    对于结构方面,非常的简单。使用一个名为“btn-group”的容器,把多个按钮放到这个容器中。如下所示:


    很多时候,我们常把下拉菜单和普通的按钮组排列在一起,实现类似于导航菜单的效果。

    使用的时候,只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”,并且和普通的按钮放在同一级。如下所示:

    导航

    标签型tab导航

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

    胶囊型导航

    导航(垂直堆叠的导航)

    Bootstrap 10.12_第1张图片
    Paste_Image.png

    自适应导航

    在制作自适应导航时更换了一个类名“nav-justified”。当然他需要和“nav-tabs”或者“nav-pills”配合在一起使用。如:

    
    

    面包屑导航

    
    
    Paste_Image.png

    导航条

    基础导航条

    使用方法:

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

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

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

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

      
      

      原理分析:
      而导航条的颜色都是通过“.navbar-default”来进行控制。

      带标题的导航栏

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

      此功能主要起一个提醒功能,当然改良一下可以当作是logo(此处不做过多阐述)。其样式主要是加大了字体设置,并且设置了最大宽度。

  • 带搜索表单的导航条

    
    

    固定导航条

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

    ☑ .navbar-fixed-top:导航条固定在浏览器窗口顶部

    ☑ .navbar-fixed-bottom:导航条固定在浏览器窗口底部

    使用方法很简单,只需要在制作导航条最外部容器navbar上追加对应的类名即可:

    
    

    实现原理很简单,就是在navbar-fixed-top和navbar-fixed-bottom使用了position:fixed属性,并且设置navbar-fixed-top的top值为0,而navbar-fixed-bottom的bottom值为0。

    存在bug及解决方法:

    从运行效果中大家不难发现,页面主内容顶部和底部都被固定导航条给遮住了。为了避免固定导航条遮盖内容,我们需要在body上做一些处理:

    body {
      padding-top: 70px;/*有顶部固定导航条时设置*/
      padding-bottom: 70px;/*有底部固定导航条时设置*/
    }
    

    因为固定导航条默认高度是50px,我们一般设置padding-top和padding-bottom的值为70px,当然有的时候还是需要具体情况具体分析。

    响应式导航条

    使用方法:

    1、保证在窄屏时需要折叠的内容必须包裹在带一个div内,并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。

    2、保证在窄屏时要显示的图标样式(固定写法):

    
    

    3、并为button添加data-target=".类名/#id名",究竞是类名还是id名呢?由需要折叠的div来决定。

    http://www.imooc.com/code/3124

    分页导航

    在Bootstrap框架中使用的是ul>li>a这样的结构,在ul标签上加入pagination方法:

    
    
    Bootstrap 10.12_第2张图片
    Paste_Image.png

    翻页导航

    在实际使用中,翻页分页导航和带页码的分页导航类似,为ul标签加入pager类:

    
    

    对齐样式设置:

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

    ☑ previous:让“上一步”按钮居左

    ☑ next:让“下一步”按钮居右

    具体使用的时候,只需要在li标签上添加对应类名即可:

    
    

    徽章

    Paste_Image.png

    使用方法:

    使用方法,其实也没什么太多可说的,你可以像标签一样,使用span标签来制作,然后为他加入badge类:

        
  • 网站首页
  • 系列教程
  • 名师介绍
  • 成功案例23
  • 关于我们
  • 你可能感兴趣的:(Bootstrap 10.12)