我的BootStrap学习笔记

1.全局样式里面：

1.container:版心

2.col-xx-xx：栅格布局

3.btn btn-default： 按钮，默认按钮样式

4..pull-left  pull-right  clearfix: 左浮动 右浮动 清除浮动

    5.响应式工具：visiable-xx:  在xx下隐藏

6.text-center;text-left;text-right：居中/靠左/靠右

2.CSS组件里面：

1.Glyphicons 字体图标(自定义字体图标)

2.nav-tabs:导航

3.nav-bar nav-default：  导航条

4.pagination： 分页

5.media： 媒体对象（默认样式是：在一个内容块的左边或者右边展示一个多媒体的内容[图像，视频，音频]）

6.panel： 面板(将某些DOM内容放到一个盒子里面)

3.javascript插件

1.tabs data-toggle="tab" : 标签页

2.carousel : 轮播图

3.collapse: 手风琴菜单

4.滚动监听:window.resize();

5.工具提示 tooltip

6.affix： 固定在顶部

以后下载的框架里面，我们要找的一般在dist文件夹里面（编译好的）。源码在less里面。

 

另外：

1.div:first-child: 是指div元素的父元素的第一个孩子，并不是指第一个div;(有误)，如果第一个不是div那么就选不中

2.div:nth-of-type(1): 只从div里面去找第一个元素;

3.div:first-of-type ： 是div这种类型的第一个元素;

4.手机端产品滑动：

   1.监听屏幕变化 window.resize().

 

   2.利用js，让轮播图里面的图片滑动的时候大小图的切换。先判断屏幕宽度的大小，当屏幕宽度>768px的时候，给轮播图里面的img设置大图片的路径，设置背景图片，就不需要图片标签了（赋值一个: ''）,代码： $item.css('background-image', 'url('+ imgSrc +')');；当屏幕宽度<=768px的时候，给li里面插入图片标签，此时，就不需要背景图片了（赋值一个: ''）; 代码：$item.html('<img src="'+ imgSrc +'" alt="" );

 

   3.利用js，给轮播图添加在手机端的滑动效果（touchstart）。给#slide添加滑动事件（用addeventListener）,判断滑动的方向，从左往右滑动，调用.carousel('prev');从右往左，调用.carousel('next');

 

   4.利用自定义属性  data-large-image存储大图片的路径， data-small-image 存储小图片的路径。然后在js中，再利用jQuery获取到这个自定义属性，设置到item上。那么如何获取？？？

用：data函数来获取。var imgSrc = $item.data('large-image').

 

   5.在产品推荐的nav-tabs里面，想让ul在手机端或者屏幕变小的时候出现横向滚动条，那么我们给ul外层设置一个div（ul-wraper）设置overflow-x:scroll，通过监听屏幕宽度的大小的变化和利用媒查询来判断屏幕宽度，这样，当里面的宽度超出父亲的宽度，就出现横向滚动条了。但是在此时，我们一般要利用js来计算一下产品推荐里面的总宽度（里面所有li的宽度之和），首先获取到里面所有的li的宽度，然后把这些li的宽度都加起来。

代码：// 计算产品推荐里面的盒子的总宽度

        var tabs = $('#products .nav-tabs');

        // ul 下面的 li们

        var lis = $('#products .nav-tabs > li');