本周问题总结

---

一、Bootstrap使用中出现的问题

BootStrap是一个比较好的框架,也是现在比较流行的框架。它对一些样式进行了提前处理，比如按钮，轮播图，导航栏等等。Bootsrap最大的有点在于屏幕的适配问题。它对不同屏幕进行了不同样式的封装，达到了一套代码多屏适配的效果。另外对源码研究我们可以知道，它的栅栏布局的原理是利用了浮动。我在使用Bootstrap框架的时候也出现了一些问题。

1. 问题一

在我使用当中发现在使用栅栏布局的时候在一些边缘的时候无法适配

col-lg-3 col-md-3 col-sm-6 col-xs-12

解决方法：
利用媒体查询对屏幕的范围进行重新划分

@media screen and (max-width: 970px) {
  }
}
@media screen and (min-width: 768px) {
  }
}
@media screen and (min-width: 992px) {

  }
}
@media screen and (min-width: 1200px) {

  }
}

通过媒体查询我们可以对屏幕进行更加西的划分，已达到更好的适配效果。

2.问题二

我们上面也说到了，Bootstrap的栅栏布局的原理是利用了浮动。但是在源码当中并没有直接清除浮动，所以需要我们自己来添加属性清除浮动。
在Bootstrap中内置了一个清除浮动的类clearfix 我们只需要将其加上即可

 <div class="container clearfix">
 
 </div>

3.问题三

在引用Bootstrap的组件导航条时将下拉菜单更换成鼠标移动上显示移动出隐藏

$(document).ready(function(){
/* 关闭点击事件*/
 $(document).off('click.bs.dropdown.data-api');
});
$(document).ready(function(){
 	dropdownOpen();//调用
});
/**
 * 鼠标划过就展开子菜单，免得需要点击才能展开
 */
function dropdownOpen() {
 
 	var $dropdownLi = $('li.dropdown');
 
 	$dropdownLi.mouseover(function() {
	 	$(this).addClass('open');
 	}).mouseout(function() {
 		$(this).removeClass('open');
 	});
}

这样做可以实现效果，但是我发现在我进行导航遍历的时候。所有的效果被清除了

    <nav class="navbar navbar-default navbar-fixed-top hidden-lg  clearfix" >
        <div class="container">
            
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#list" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                
                 <img class="navbar-brand" src="./images/logogo.png" alt="">
            </div>
            <div class="collapse navbar-collapse" id="list">
                <ul class="nav navbar-nav">
                    <li class="dropdown" >
                        <a href="index.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">首页</a>
                       
                    </li>
                        <li class="dropdown" v-for="item in Navlist" :key="item.id" >
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-haspopup="true" aria-expanded="false">{{item.categoryEntity.categoryTitle}}</a>
                            <ul class="dropdown-menu" >
                                <li v-for="item1 in item.twoCategoryList"><a :href="['list.html'+'?oneId='+item1.categoryParentIds+'&twoId='+item1.id]">{{item1.categoryTitle}}</a></li>
                            </ul>
                        </li>
                        
                    
                    
                    
                </ul>
                
            </div>
        </div>

    </nav>

我试了钩子函数但是都不行 这个问题到现在都没有解决。后来我通过媒体查询在不同的屏幕下使用了不同的样式，解决了这个问题。

问题四

在进行列表页的内容填充式有些内容过长，超出文本框的长度，照成样式混乱。
可以通过这个样式将文本在一行显示超出部分用…隐藏

.css{
   white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       display: inline-block;
       overflow: hidden;
}

补充：检测页面是否滑到底部

$(document).ready(function(){
	
	var range = 50;             //距下边界长度/单位px
	var totalheight = 0;
	$(window).scroll(function(){
		var srollPos = $(window).scrollTop();    //滚动条距顶部距离(页面超出窗口的高度)
		totalheight = parseFloat($(window).height()) + parseFloat(srollPos);
		
		if(($(document).height()-range) <= totalheight) {
			$(".Bottom").show()
		}else{
			$(".Bottom").hide()
		}
	});
});