BootStrap中Affix控件的使用方法及如何保持布局的美观

编程之家收集整理的这篇文章主要介绍了BootStrap中Affix控件的使用方法及如何保持布局的美观编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

概述

在视窗足够大的时候是没有任何问题的,但是当拖动改变视窗的大小后会发现布局又变乱了,这个问题困扰了我许久,最后通过分析bootcss的源码我发现该网站在所有使用affix的元素的class中都添加了'h

Affix是bootstrap中的一个很有用的控件,他能够监视浏览器滚动条的位置并让你的导航始终都在页面的可视区域。一开始的时候,导航页面中是普通的流式布局,占有文档中固定的位置,当页面滚动的时候,导航自动变成了固定布局(fixed),始终处于用户的视区,下面来说说他的用法。首先来看看他的实现原理。它是通过实时修改页面元素的class属性来实现的

以上过程完全有控件自己实现,无须我们干预,我们只需要写好这些状态的CSS就可以了

我们可以设置

 

.affix-top
{
    top:150px;
}
.affix
{
    top:20px;//通常用bootstrap构建的网站头部都有个导航条
}
.affix-bottom
{
    ……
}

 

下面我们看看它的使用方法

1、通过data属性

你只需为需要监听的页面元素添加data-spy="affix"即可然后使用偏移量来确定一个元素的开和关. 

关键代码

 

<ul class="nav nav-tabs nav-stacked affix" data-spy="affix"
            data-offset-top="190">
            <li class="active"><a href="#one">Tutorial One</a></li>
            <li><a href="#two">Tutorial Two</a></li>
            <li><a href="#three">Tutorial Three</a></li>
</ul>

 

其中data-offset-top为处于affix-top状态元素距离页面顶端的位置。当滚动到页面顶端的使用我们可以设置".affix"的样式来重新设置其"top"值。

 

 

2、通过JavaScript调用

示例代码如下:

 

$('#myNav').affix({
   offset: {
      top: 100,//滚动中距离页面顶端的位置
      bottom: function () {//滚动完成时距离页面底部的位置
         return (this.bottom = 
            $('.bs-footer').outerHeight(true))
         }
      }
})

 

HTML代码如下(只展示核心代码):

<ul class="nav nav-tabs nav-stacked affix" ID="myNav">
            <li class="active"><a href="#one">Tutorial One</a></li>
            <li><a href="#two">Tutorial Two</a></li>
            <li><a href="#three">Tutorial Three</a></li>
</ul>
……
<div class="bs-footer">
</div>

以上似乎已经介绍完了bootstrap中affix的使用,但是在实际使用过程我们会发现,当拖动滚动条的时候使用affix页面元素的宽度会发生变化,从而导致页面布局的杂乱,所以我们在定义affix的CSS最好写死它的宽度如:

 

.affix{
    wIDth:250px;
}

 

这样在视窗足够大的时候是没有任何问题的,但是当拖动改变视窗的大小后会发现布局又变乱了,这个问题困扰了我许久,最后通过分析bootCSS的源码我发现该网站在所有使用affix的元素的class中都添加了"hIDden-print" "hIDden-xs" "hIDden-sm"这些属性,用于当屏幕不是符合要求的情况下可以隐藏affix,虽然影响了易用性,但是保证了布局无论在哪种情况下都是整齐的。 

以上是个人使用的一些心得,如果您有什么困惑或者经验想分享可以通过评论的方式反馈给我

总结

以上是编程之家为你收集整理的BootStrap中Affix控件的使用方法及如何保持布局的美观全部内容,希望文章能够帮你解决BootStrap中Affix控件的使用方法及如何保持布局的美观所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

Bootstrap文章

BootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的输入验证,由于本插件完全基于BootStrap因此可以和UI完美的融合在一起。下面直接上图,看看完成后的结果:
顶求网首页是一个web2.0博客类的网站首页,在该网站中用户可以发表博客,也可以推荐图书给其他用户。所以,在首页中主要分三个板块——文章、图书、用户。另外,网站的头部和尾部还要有导航(navigato
在视窗足够大的时候是没有任何问题的,但是当拖动改变视窗的大小后会发现布局又变乱了,这个问题困扰了我许久,最后通过分析bootcss的源码我发现该网站在所有使用affix的元素的class中都添加了'h
BootStrap中的tabs控件以其简单易用而很受广大开发者的欢迎。但是,它的样式比较单一,如何才能在其原有的基础上做出更加美观的效果呢,我一直在考虑这个问题。另外,Bootstrap中的tabs必
先看看劳动成果 布局 左右各一半(col-md-6) 左侧登录框占左侧一半的10/12 右侧是登录系统的注意事项 使用到的BootStrap元素 well 输入框组(input-group) 按钮(b
先吐槽一下ThinkPHP3.1版的分页样式,虽然看起来也很简单大方,但是所有的页码全是使用简单的数字,之间的空隙比较小,不大容易点,还有那个“前5页”和“后5页”显得有点多余,因为点击当前显示第一页
在做WEB开发的时候我们经常会遇到分页的处理,如果在PC上显示网页的话,使用传统的分页是可以接受的。那么,当我们为手机或其他移动端设计界面的话,使用分页未免有些笨拙和难以使用,这时候我们可以使用在单页
为了和文章分类部分的样式进行区分,我决定自己动手写一个具有其他样式的分类标签集。刚好看到豆瓣读书板块的首页中的图书分类标签还不错,于是决定自己写一个类似的样式。首先是HTML代码部分: 可以看到图书分
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注