bootstrap框架学习笔记

1. 基本概况
   利用两周的时间把bootstrap官网相关案例都做了一遍，对于bs有了一个初步的了解，bs是由动态语言less写成的，基于JQuery开发的前端框架，有已经写好的css样式、静态页面组件以及js组件，用的时候只需要写对html嵌套关系以及用对样式即可。最新版本3.0，移动开发优先。
   
2. 文件结构
   css文件夹---bootstrap.css 、 bootstrap.min.css 、bootstrap-theme.css、 bootstrap-theme.min.css
   基本样式与主题样式的压缩版与非压缩版
   js文件夹---jquery.js、bootstrap.js 、bootstrap.min.js
   jquery以及bs.js的非压缩版与压缩版，bs是基于jq开发的，所以应该先引入js再引入bs.js
   fonts文件夹---主要包含eot、svg、ttf、woff四中格式的字体文件，与后面的字体图标相对应。
       bs可定制下载，需要什么样的功能和样式可以在官网选择相应的文件进行下载，这是个目录结构是包含所有bs样式和组件的一个结构。
       因为bs3是移动优先的，所以开发移动端网站的时候就需要在head中添加这样一句代码：
   <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scable=no">
   这句话的含义就是网页的可视宽度等于设备的宽度，初始缩放比例为1.0，也就是第一次加载时候的页面比例。
   
   
3. 各部分简单介绍
   
   (1)css部分
   bs为预设了很多样式，在制作静态页面的时候可以直接引用，另外还对一些html标签做了初始化，bs对标签颜色的初始化也有规律可循的，大体分为默认（default）、主要（primary）、信息（info）、警告（waring）、危险（danger）、链接（link）；对于尺寸的初始化：大（lg）、小（sm）、超级小（xs）。使用的时候针对不同元素添加前缀即可。比如表示信息的大按钮class="btn btn-lg btn-info";标签的话就加label-，警告框就加alert-，每一种元素要先添加属于该元素的基类样式才行。
   
   bs还为各个元素的集合创建了组，比如表单集合为form-group，按钮集合btn-group，列表组：list-group等，这样便于同一控制管理。（改变集合内子元素的大小颜色直接可以用在组元素上而不必一一设置，减少了工作量。）
   
   bs应该着重掌握的部分就是栅格布局，bs把内容区域自动分为12列，通过行（row）与列（column）的组合创建页面布局，嵌套格式应为container  > row > column
   栅格系统响应式布局主要分为四种：
   超小屏幕（总是水平排列<=768px）--col-xs-， 最大列宽:自动
   其余三种开始堆叠在一起，超过一定数值就会水平排列
   小屏幕（>=768px）--col-sm-, 最大列宽：60px
    中等屏幕（>=992px）--col-mdm-, 最大列宽：78px
   大屏幕（>=1200px）--col-lg-, 最大列宽：95px
   
   <div class="row">
       <div class="col-md-6"></div>
       <div class="col-md-6"></div>
   </div>
   两列相加不大于12即可。
   
   （2）组件
   css部分主要扩展了很多公共样式以及对于标签进行了初始化，组件部分就是把相关样式与标签进行的整合，制作出很多可以直接服用的常见布局。比如下拉菜单、按钮组、导航条、标签页等静态布局结构。
   
   （3）javascript组件
   实现组件动态效果的插件，比如过渡效果依赖transition.js，下拉菜单效果依赖于dropdown.js.
   主要实现方法有两种：data-属性以及js
   I、方法一：data-
      <ul class="nav nav-tabs">
           <li><a href="#home1" data-toggle="tab">Home1</a></li>
           <li><a href="#home2" data-toggle="tab">Home2</a></li>
            <li><a href="#home3" data-toggle="tab">Home3</a></li>
      </ul>
   
       <div class="tab-content">
          <div class="tab-pane active" id="home1">具体内容1</div>
         <div class="tab-pane" id="home2">具体内容2</div>
        <div class="tab-pane" id="home3">具体内容3</div>
      </div>
   
   以tab标签效果为例，他的实现原理就是在标题a标签上添加data-toggle=“tab”属性，这里与js方法相对应，就是把html结构与js建立一种关系，href=“#home1”指向下面的id=“home1”，第二个就指向home2，这样在点击标题的时候相应的内容区域就会显示出来。
   
   II、方法二：js
   

$('#myTab a').click(function (e) {

  e.preventDefault()

  $(this).tab('show')

这句代码意思就是当点击标题的时候阻止默认跳转，让该链接处于激活状态，进而让该标题链接的内容区域赋予active样式，使其显示。


小结：bs大部分的动态效果都是依靠data-属性完成的，js组件存在的目的就是提供函数支持，并不能全程控制，只能控制某一部分，还是要通过data-来完成。另外js组件还提供了一个监听功能，主要分为不定式和过去式，也就是当效果开始之前执行函数和结束之后执行函数。
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) { e.target // activated tab e.relatedTarget // previous tab})--不定式
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { e.target // activated tab e.relatedTarget // previous tab})--过去式

bs这种结构的缺点就是代码臃肿，到处标记id属性和data属性，不利于程序循环。

4、兼容性

• Chrome (Mac、Windows、iOS和Android)
• Safari (只支持Mac和iOS版，Windows版已经基本死掉了)
• Firefox (Mac、Windows)
• Internet Explorer
• Opera (Mac、Windows)

其中ie最低只支持到ie8，还需要额外插件支持。（Respond.js），针对学校网站必须支持ie67的情况可以采用CSS3PIE（具体效果不清楚，还未测试）

5、学习过程中遇到的问题以及解决方法

1、affix-附加导航

关键类：affix、 affix-top、 affix-bottom

页面滚动过程中，affix会根据我们的配置参数切换到目录部分的类，整个过程会产生上面的三个类。

整个过程如下：

1. 页面加载完毕后，应用 affix 效果的内容会生成一个 .affix-top 类
2. 当页面向下滚动了 top 的值时，.affix-top 类切换成 affix 类
3. 页面滚动到离底部距离为 bottom 值时，affix 类切换成 affix-bottom

.affix{position:fixed;top:30px;}

.affix-bottom{position:absolute;}

加上这两个类就可以

2、需要手动初始化的插件 工具提示和弹出框

$("a[data-toggle='tooltip']").tooltip('toggle')//提示效果初始化，和工具提示一样都得手动添加

$(".tishi").tooltip('toggle')//这句代码的意思就是防止文档初始加载完成就显示提示框

3、折叠效果

要把html嵌套关系写准确，具体是panel-group > panel > panel-heading和panel-body，这样才是一个折叠组。