我的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');

        // 开始的宽度设置为0

        var width = 0;

        // 遍历lis，

        lis.each(function(index, el) {

          width += $(el).width();

        });

        tabs.css('width', width);

 

5.特殊类名：

.pull-left:左浮动

.pull-right:右浮动

.col-md-4:在中屏幕下占4份;   .col-sm-6:在小屏幕下占6份;  

.col-md-offset-4:是指将 .col-md-4的元素向右侧偏移4个列（column）的宽度。

 

.visible-xs-*:在超小屏幕下可见    <768px      手机

.visible-sm-*:在小屏幕下可见      >=768px    平板

.visible-md-*:在中屏幕下可见     >=992px     桌面

.visible-lg-*:在大屏幕下可见       >=1200px   桌面

 

.hidden-xs-*:在超小屏幕下隐藏    <768px      手机

.hidden-sm-*:在小屏幕下隐藏      >=768px    平板

.hidden-md-*:在中屏幕下隐藏      >=992px     桌面

.hidden-lg-*:在大屏幕下隐藏        >=1200px   桌面

 

6.使用工具提示（tooltip.js），一定要用js触发一下。

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on top</button>

$(function () {

           $('[data-toggle="tooltip"]').tooltip();

});

 

7.事件定义完就触发一下 用trigger('resize');

 

其他：

一、栅格系统

1.栅格布局

<div class="col-md-8 col-xs-6 col-lg-4"></div>

     表示：该DIV在中等屏幕中占有‘8/12’，在手机中占有‘6/12’，在大屏幕中占有屏幕比例的‘4/12’。

1. 布局容器：页面的内容滑入栅格系统都包含在这里面。可以添加一下两种类。二者不能嵌套。

    .container 类用于固定宽度并支持响应式布局的容器。

    .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

 

二、表格：

1.  表格基本实例：给任意table标签添加 .table 类可以生成表格的最基本的样式。（含有少量的padding和水平方向的分割线）

2.  条纹状表格： .table-striped 类可以给tbody内的每一行增加斑马条纹样式。（类似于隔行高亮）, 但是这个有兼容性，条纹表格是以来css3选择器:nth-child来实现的，IE8 不支持.

3. 让表格增加边框： .table-bordered 类 为表格和其中的每个单元格增加边框。

 例如：<table class="table table-bordered">里面是表格的内容</table>

4. 鼠标悬停： .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。(鼠标移入当前行，当前行高亮)

5. 紧缩表格：  .table-condensed  : （表格的padding减半）

6.状态类：（给行或者单元格设置颜色）

 

7.响应式表格：  将.table 元素包裹在 .table-responsive 元素内，可以创建响应式表格。在小屏幕设备上（<768px）水平滚动，大于768px时候，水平滚动条消失。

 

Firefox 浏览器对 fieldset 元素设置了一些影响 width 属性的样式，导致响应式表格出现问题。除非使用我们下面提供的针对 Firefox 的 hack 代码，否则无解：

火狐的兼容处理办法：

@-moz-document url-prefix() {

  fieldset { display: table-cell;

}}

三．表单

1.基本实例

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

例如：

<form role="form">

  <div class="form-group">

    <label for="exampleInputEmail1">Email address</label>

    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">

  </div>

  <div class="form-group">

    <label for="exampleInputPassword1">Password</label>

    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">

  </div>

</form>

2.内联表单：为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。需要手动设置宽度

注意：在 Bootstrap 中，输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单，我们将这些元素的宽度设置为 width: auto;，因此，多个控件可以排列在同一行。根据你的布局需求，可能需要一些额外的定制化组件。

一定要添加 label 标签

如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为label 设置 .sr-only 类将其隐藏。

3.水平排列表单： .form-horizontal并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。

效果：

4.内联单选和多选框： 通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。

5.下拉列表（select）

使用默认选项或添加 multiple 属性可以同时显示多个选项。

6.静态控件： 如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可。

实例：

 

代码：

<form class="form-horizontal" role="form">

  <div class="form-group">

    <label class="col-sm-2 control-label">Email</label>

    <div class="col-sm-10">

      <p class="form-control-static">email@example.com</p>

    </div>

  </div>

  <div class="form-group">

    <label for="inputPassword" class="col-sm-2 control-label">Password</label>

    <div class="col-sm-10">

      <input type="password" class="form-control" id="inputPassword" placeholder="Password">

    </div>

  </div>

</form>

7.禁用输入框：  disabled：

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

8.被禁用的 fieldset

为<fieldset> 设置 disabled 属性,可以禁用 <fieldset> 中包含的所有控件。

例如：

<form role="form">

  <fieldset disabled>

    <div class="form-group">

      <label for="disabledTextInput">Disabled input</label>

      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">

    </div>

    <div class="form-group">

      <label for="disabledSelect">Disabled select menu</label>

      <select id="disabledSelect" class="form-control">

        <option>Disabled select</option>

      </select>

    </div>

    <div class="checkbox">

      <label>

        <input type="checkbox"> Can't check this

      </label>

    </div>

    <button type="submit" class="btn btn-primary">Submit</button>

  </fieldset></form>

 

9.只读输入框  ：为输入框设置readyonly属性，禁止用户输入

10.控件尺寸： .input-lg  设置控件的高度，通过.col-lg-*为控件设置宽度、

11.水平排列的表单组的尺寸：通过添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。

四、按钮

1.预定义样式

 

代码：

<button type="button" class="btn btn-default">Default</button>

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-info">Info</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-link">Link</button>

  .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。

 

2.尺寸  使用 .btn-lg、.btn-sm 或 .btn-xs 可以获得不同尺寸的按钮。

让按钮处于激活状态（底色更深、边框颜色更深，向内投射阴影），对于 <button> 元素，是通过 :active 状态实现的。对于 <a> 元素，是通过 .active 类实现的。然而，你还可以将 .active 应用到 <button>上，并通过编程的方式使其处于激活状态。

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>

<button type="button" class="btn btn-default btn-lg active">Button</button>

3.禁用状态  

  A 给按钮背景设置opacity属性，呈现无法点击的效果。

  B 为button元素添加disabled属性，表示禁用

五、图片

1.响应式图片  给图片设置 .img-responsive 类名。

2.图片形状  给img标签添加相应的类，让图片呈现不同的形状。（.img-rounded; .img-circle; .img-thumbnail）

六、关闭按钮：让模态框和警告框消失

七．响应式工具

1.可用的类