Bootstrap导航条、分页导航

【导航条navbar】

在bootstrap中导航与导航条在外观方面差不多,但在实际应用时,导航条却要复杂的多。

导航条制作方法:

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

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

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

1、“.navbar”样式的主要功能就是设置左右padding和圆角等效果

2、“.navbar-default”样式是用来控制导航条的颜色
3、navbar-nav样式是在导航.nav的基础上重新调整了菜单项的浮动与内外边距

为导航条添加标题、二级菜单及状态

添加标题:“navbar-header”和“navbar-brand”

带表单的导航条

“navbar-form”“navbar-left”“navbar-right”

示例:

导航条中的按钮、文本和链接

按钮:“navbar-btn”|  文本:“navbar-text” |  链接:“navber-link”

这三种样式在框架中使用时受到一定的限制,需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制,一般情况在使用一到两个不会有问题,超过两个就会有问题。

1、按钮        不要在 .navbar-nav 内的 元素上使用 .navbar-btn,因为它不是标准的 button class。

2、文本       “navbar-text”与

标签一起使用,确保适当的前导和颜色

3、链接       带图标的导航链接         使用 class glyphicon glyphicon-* 来设置图标

 

固定导航条

Bootstrap框架提供了两种固定导航条的方式(在导航条最外部容器navbar追加类名),

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

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

如需创建一个静态的顶部,能随着页面一起滚动的导航栏,添加类名.navbar-static-top 

但是固定存在一些问题,固定的导航条会挡住页面主内容的顶部或底部,针对这个bug有两种解决方法

1、主内容body添加样式  (固定导航条默认高度50px)

body {
    padding-top:70px;
    padding-bottom:70px;
}
2、将导航条放在主内容之前,然后添加样式
.navbar-fixed-top ~ .content {
   padding-top: 70px;
}
.navbar-fixed-bottom ~ .content {
  padding-bottom: 70px;
}

示例:



meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。


响应式导航条

使用方法:

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

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

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

反色导航条

与默认的导航条相比,只是将navbar-deafult类名换成navbar-inverse。其变化只是导航条的背景色和文本做了修改。

分页导航

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

“pagination-lg”“pagination-sm”用来控制分页导航的大小

  

带翻页的分页导航:翻页分页导航和带页码的分页导航类似,为ul标签加入pager类

翻页导航默认是居中的,想要左右对齐,可以在li标签上添加对应类名“previous”(让“上一步”按钮居左)、“next”(让“下一步”按钮居右)

标签

标签可用于计数、提示或页面上其他的标记显示。使用 class .label 来显示标签

Message 233

标签颜色样式:

  • abel-deafult:默认标签,深灰色
  • label-primary:主要标签,深蓝色
  • label-success:成功标签,绿色
  • label-info:信息标签,浅蓝色
  • label-warning:警告标签,橙色

  • label-danger:错误标签,红色

徽章

在Bootstrap框架中,把这种效果称作为徽章效果,使用“badge”样式来实现。

Inbox 42

你可能感兴趣的:(Bootstrap)