bootstrap笔记

Bootstrap笔记

预定义样式是在服务器端预先定义的样式也可以称之为全局样式，当前工程下的所有模板都可以直接使用。

 

viewport 翻译为中文可以叫做"视区"

 

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中

通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

 

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

它的作用就是创建一个虚拟的窗口(viewport)，而且这个虚拟窗口的分辨率接近于桌面显示器，Apple将其定位为980px

 

官方网站：www.bootstrapcss.com

什么是响应式布局？

让一个网站可兼容不同分辨率的设备

给用户更好的视觉使用体验

响应式的优点和缺点？

优点：解决了设备只见的差异化展示

缺点：兼容性代码多，工作量大，加载速度受影响

对原有的网站布局会产生影响，用户判断未必精确

移动优先：

在设计的初期就要考虑的页面如何在多终端展示

渐进增强：

充分发挥硬件设备的最大功能

Bootstrap是最受欢迎的Html，css和js框架，用于开发响应时布局，移动设备优先的web项目，由Twitter于2011年8月在Github上发布的开源产品。将常见的CSS布局小组件和javascript插件进行了完整并完善的封转，能让没有没有经验的前端的工程师和后端工程师都迅速掌握和使用，大大提高效率。

响应时设计：系统平台，屏幕设计，屏幕定向等进行相应的响应和调整，具体的实践方式由多方面决定包括弹性网络布局，图片使适应不同的设备，能够兼容多个终端。

Bootstrap 允许您以两种方式显示代码：

• 第一种是 <code> 标签。如果您想要内联显示代码，那么您应该使用 <code> 标签。
• 第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 <pre> 标签。

请确保当您使用 <pre> 和<code> 标签时，开始和结束标签使用了 unicode 变体： &lt; 和&gt;。

为什么要使用bootstrap？

移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持：所有的主流浏览器都支持 Bootstrap。

容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计。

它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件，易于定制。
它还提供了基于 Web 的定制。
它是开源的

 

 

Bootstrap包的内容：

bootstrap.css  是完整的bootstrap样式表，未经压缩过的，可供开发的时候进行调试用

bootstrap.min.css  是经过压缩后的bootstrap样式表，内容和bootstrap.css完全一样，但是把中间不必要的空格之类的东西都删掉了，所以文件大小会比bootstrap.css小，可以在部署网站的时候引用，如果引用了这个文件，就没必要引用bootstrap.css了

bootstrap-responsive.css  这个是在对bootstrap框架应用了响应式布局之后所需要的CSS样式表，如果你的网站项目不准备做响应式设计，就不需要引用这个CSS。

bootstrap-responsive.min.css  和bootstrap.min.css的作用是一样的，是bootstrap-responsive.css的压缩版

bootstrap.js  这个是bootstrap的灵魂所在，是bootstrap的所有js指令的集合，你看到bootstrap里面所有的js效果，都是由这个文件控制的，这个文件也是一个未经压缩的版本，供开发的时候进行调试用

bootstrap.min.js 是bootstrap.js的压缩版，内容和bootstrap.js一样的，但是文件大小会小很多，在部署网站的时候就可以不引用bootstrap.js，而换成引用这个文件了~~

 

 

 

 

 

 

 

要想使用bootstrap需要四步：

A<meta name="viewport" content="width=device-width, initial-scale=1">

B：导入bootstrap<link href="../css/bootstrap.min.css" rel="stylesheet">

C：导入jquery<script src="../js/jquery-3.1.1.js"></script>

D：导入<script  src="../js/bootstrap.min.js"></script>

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

• “行（row）”必须包含在 .container （固定宽度）或.container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
• 通过“行（row）”在水平方向创建一组“列（column）”。
• 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
• 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
• 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为.row 元素设置负值 margin 从而抵消掉为 .container 元素设置的padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
• 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
• 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4 来创建。
• 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
• 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何.col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。

媒体查询

在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值

/* 小屏幕（平板，大于等于 768px） */

@media (min-width:@screen-sm-min){... }

/* 中等屏幕（桌面显示器，大于等于 992px） */

@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */

@media (min-width: @screen-lg-min) { ... }

栅格系统用法：

Container是bootstrap的容器 屏幕是自适应的。最大的时候是剧中的

Container-fluid在屏幕上不管什么分辨率都是沾满全屏的

列组合：

<div id="container">栅格是把div平分了12格，

      <div class="row">

            <div class="col-md-1">col-md-4</div>它占了4格

            <div class="col-md-1">col-md-4</div>它占了4格

      </div>

</div>

列偏移：

Col-md-offset-3左空了3格；

列嵌套：

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

列排序：

<div class="row">    <div class="col-md-3 col-md-push-2">col-md-3</div>向右推移2格    <div class="col-md-4 col-md-pull-2">col-md-4</div>向左推移2格</div>

跨设备的定义组合：

<div id="container">栅格是把div平分了12格，

      <div class="row">

            <div class="col-md-1 col-xs-4 col-xm-4">col-md-4</div>它占了4格

            <div class="col-md-1 col-xs-3 col-xm-4">col-md-4</div>它占了4格

      </div>

</div>

清除浮动：

<div class="clearfix  visible-xs"></div>清除浮动，只在超小分辨率清除浮动

<div class="container">    <div class="row">        <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3   1     <br/>            ghjsdLvgnjdmkv        </div>        <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3   2</div>        <div class="clearfix  visible-xs"></div>清除浮动        <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3   3</div>        <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3   4</div>    </div></div>

禁止响应布局：

<meta name="viewport" content="width=device-width, initial-scale=1">不适用这个移动设备优先

Bootstrap排版基础；

Html5文档类型：

移动设备优先

<meta name="viewport" content="width=device-width, initial-scale=1">

属性：width，是不是用缩放，

响应时图片

<imgsrc=”路径”class=”img-responsive”>

Bootstarp设置了一些全局样式

Body背景为白，margin：0px；

字体、大小、行间距都进行了设置

所有默认样式都在normalize.less和scaffolding.less

Normalize.css

Bootstarp使用第三方案，normalize是一个专门用于将不同的浏览器的默认css效果特征统一的css库

H1:字体大小36px，margin-top：20px；margin-bottom：10px；

H2:字体大小30px，margin-top：20px；margin-bottom：10px；

H3:字体大小24px，margin-top：20px；margin-bottom：10px；

H4:字体大小18px，margin-top：10px；margin-bottom：10px；

H5:字体大小14px，margin-top：10px；margin-bottom：10px；

H6:字体大小12px，margin-top：10px；margin-bottom：10px；

标签:定义了margin；

Class没有定义margin

Body全局样式

P全局样式：设置了margin

<pclass=”lead text-right”></p>字体变大，右对齐；

强调文本：small

<p class=”lead text-right”>

<small>small</small>

<em>em</em>

<cite>cite</cite>

<b>b</b>

<br/>

<abbr title=”跟我一起学习java” class=”initialism”>学习java</abbr>鼠标移上去就会显示title

</p>

Strong

Em斜体

Cite斜体

缩略语：abbr

地址元素：address

引用：blockquote引用一篇文章

Push-right右对齐

 

 

Bootstarp列表与代码样式：

                   无序列表<ul></ul>

                   

                    有序列表<ol></ol>

列表与代码：A列表   

                     去点列表list-unstyled

                     内联列表：list_inline

                     Dl列表<dl><dd></dd><dl>

                     水平列表dl：dl-horizontal

 

 

                         <code>显示单行内联代码

 

                        <kbd>显示用户输入代码

 

           B代码            <pre>多行代码块   自动格式化

 

                        <var>变量

 

                        <samp>程序结果

 

 

 

 

 

 

基础样式

Bootstrap表格样式：

带背条纹.table-striped  表.table

 

 

                                       先加基础样式

响应时表格

 

带边框.table-border

悬停.table-hover

紧凑 .table-condensed

样式表.active .success .info

          Bootstrap表格样式

 

 

 

 

 

 

 

 

 

Bootstrap表单样式：

                                      

Bootstrap表单样式：A：基础表单

                           1、全局样式

                                2、form-control占满全屏

                                 3、 form-group

                     B内联表单     

            1、form-inline

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

C横向表单：

1、在form上应用form-horizontal

2、使用栅格系统

D表单控件

1、Input

2、Select

3、Textarea

4、Checkbox&radio

5、静态控件

E：控作状态

F：辅助文本

G:控件大小

H：添加额外的图标

I：控件状态

1、焦点状态focus

2、禁用状态disabled

3、被禁用的filedset

4、只读状态Readonly

5、校检状态

添加 .has-warning、.has-error 或.has-success

例：<div class="form-group">    <label  class="sr-only"> <input type="password" class="form-control" placeholder="Password"（输入框默认的）/></label>   </div>

包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和color。

必须添加类型声明

只有正确设置了 type 属性的输入控件才能被赋予正确的样式。

输入控件组

如需在文本输入域 <input> 前面或后面添加文本内容或按钮控件，请参考输入控件组。

文本域

支持多行文本的表单控件。可根据需要改变 rows 属性。form-control加上这个属性了col列是不起作用的

只要这个属性的值是true或者false的话，直接使用属性就行了

<div class="form-group">    <select class="form-control" multiple>multiple显示多项列表        <option>1</option>        <option>2</option>        <option>3</option>        <option>4</option>        <option>5</option>    </select></div>

Readonly只读状态

将验证状态传达给辅助设备和盲人用户

使用这些校验样式只是为表单控件提供一个可视的、基于色彩的提示，但是并不能将这种提示信息传达给使用辅助设备的用户 - 例如屏幕阅读器 - 或者色盲用户。

添加图标：添加一个属性has-feedback对小图标的定位

 

 

 

 

关于bootstrap中表单中的所有的属性

Form-control：适应屏幕100%；是添加在input，select上面的，只控制输入框的样式

form-group：包裹在lable和input

For-horizontal：为form添加水平

作用：1、设置表单控件padding和margin值

             2、改变form-group的表现形式，类似于网格系统“row”；

Form-inline：在form添加就行了，内联样式；

Sr-only在lable标签中添加，隐藏的属性

Multiple多行设置

Rows设置高度

Cols设置宽度如果设置了form-control就不需要设置cols

1、如果checkbox需要水平排列，只需要在lable标签上添加类名“checkbox-inline”

2、如果radio需要水平排列，只需要在lable标签上添加类名“radio-inline”

 

 

 

Bootstrap按钮样式

 

Bootstrap按钮样式：

A：按钮样式

1、btn-default默认的

Primary首选项

2、Success成功

3、waring警告

4、Danger危险的

B：按钮大小

1、btn-lg大按钮

2、Btn-sm中按钮

3、Btn-xs小按钮

4、 

C：多标签支持

D：活动状态

1、active 只是一个属性

E：禁用状态

1.Disabled

 

按钮的总结：

Bootstrap按钮组：

Btn-group：该class用于形成基本的按钮，在btn-group中放置一系列带有class.Btn的按钮

Btn-toolbar:该class有助于把几组<div class=”btn-group”>结合到一个<divclass=”btn-toolbar’>中，一般获得更复杂的组件

btn-group-lg  btn-group-sm   btn-group-xs这些class可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整。

Btn-group-vertical该class让一组按钮垂直堆叠显示，而不是水平堆叠显示

 

 

图片与辅助样式：1、响应时图片img-responslve宽度设了100%，高度自动

                2、图片形状

A：img-rounded圆角图片

B：img-circle椭圆

C：img-thumbnall边界有一个细线，中间与边界有一个空白

      3、文本样式：

A：柔和灰：text-muted

B：text-primary主要蓝

C：text-success成功绿

D：信息蓝text-info

F：text-warning警告黄

G：text-danger危险红

           4、文本背景样式：

                 A：主要蓝：bg-primary

B：成功绿：bg-success

C：信息蓝：bg-info

D：bg-waring警告黄

F：bg-danger威胁黄

辅助图标：A：关闭图标close

          B:向下箭头caret

         内容的浮动：center-block居中

                    Pull-left：居左；

                    Pull-right：居右；

                    Clearfixvisible-sm hidden-sx：只有在小分辨率下清除浮动

         隐藏和显示：A：visible-md在中等分辨率下显示

                      B:hidden-md在中等分辨率下隐藏

                      C：show显示

                      D：hidden：隐藏

 

 

 

 

 

组件

 

 

 

 

小图标：1、小图标的基本用法：在<span class=”glyphicon glyphicon-glass”></span>

        2、实现原理

           :相同的字母在不同的字体显示不同的图标，

        3、应用的场景：

           A：可以在各种元素内容   可以在按钮，<a>标签

            B:工具栏 

            <div class="btn btn-toolbar">//代表这是个工具栏    <div class="btn btn-group">//代表这是个一组按钮        <a href="#"class="btn btn-default"><span class="glyphicon glyphicon-heart"></span></a>        <a href="#"class="btn btn-default"><span class="glyphicon glyphicon-heart"></span></a>        <a href="#"class="btn btn-default"><span class="glyphicon glyphicon-heart"></span></a>        <a href="#"class="btn btn-default"><span class="glyphicon glyphicon-heart"></span></a>    </div></div>

 

            C：输入框

      <div class="col-sm-3 col-sm-offset-2"><!--//占据3格，向左俩格；-->    <div class="input-group"><!--z证明是组件的一组-->          <span class="input-group-addon">             <span class="glyphicon glyphicon-heart"></span>        </span><!--前面的图标-->        <input type="text"class="form-control"

>    </div></div>

下拉菜单：1、基本用法

            dropdown

            dropdown-menu隐藏菜单

           data-toggle="dropdown"显示下拉菜单

 

         2、对齐方式

              默认是左对齐

              Col-sm-3 col-sm-offset-2

         3、标题

                  dropdown-header

         4、分割线

                  Divider大约相距9像素

 

         5、禁用菜单

                               disabled

         6、激活菜单       active

      <div class="container">    <div class="dropdown col-sm-2 col-sm-offset-2">        <button type="button" class="btn btn-danger" data-toggle="dropdown">            <span class="glyphicon glyphicon-ok"></span>            <span class="caret"></span>        </button>        <ul class="dropdown-menu dropdown-menu-right">            <li class="dropdown-header">文件管理</a></li>            <li><a href="#">文件1</a></li>            <li><a href="#">文件1</a></li>            <li><a href="#"><span class="glyphicon glyphicon-alert"></span></a>            </li>            <li class="active"><a href="#">文件1</a></li>            <li class="divider"></li>            <li class="disabled"><a href="#">文件</a></li>        </ul>    </div></div>

按钮组：                                                                  Active激活

 

 

按钮组：btn-group把按钮设置成圆角，margin设置为0；

 

 

按钮组：A：基本用法

         1、可以是<a></a><button></button>标签

         2、自动的吧按钮设置成圆角，margin为0；

         3、btn-group属性加在div类上

        B：按钮工具栏

         1、btn-toolbar按钮的工具栏加在div类上

         2、btn-group分组加在div上

        C：按钮尺寸设置

         1、btn-lg设置大点 btn-sm小点btn-xs最小的

         2.如果在div类上设置尺寸大小，再在按钮设置尺寸大小是不起作用的。

 

        D:嵌套分组

           1、按钮组嵌套一个按钮或者下拉菜单

         E:垂直分组

           1、btn-group-vertical

 

         F自适应分组

              1、btn-group-justified这个容器的按钮会填满容器

              2、每个按钮都放在一个按钮组<div>

 

<div class="container">    <div class="btn-group-vertical"><!--s水平按钮基本语法-->        <button type="button" class="btn btn-default">按钮</button>        <button type="button" class="btn btn-default">按钮</button>        <a href="#" class="btn btn-default">按钮1</a>        <a href="#" class="btn btn-default">按钮1</a>    </div>    <div class="btn btn-toolbar"><!--工具栏-->        <div class="btn-group">            <button type="button" class="btn btn-default">按钮</button>            <button type="button" class="btn btn-default">按钮</button>        </div>    </div>    <hr/>    <div class="btn-group"><!--嵌套按钮-->        <button type="button" class="btn btn-default">按钮</button>        <button type="button" class="btn btn-default">按钮</button>        <a href="#" class="btn btn-default">按钮1</a>        <a href="#" class="btn btn-default">按钮1</a>        <div class="btn-group">            <button type="button " class="btn btn-default dropdown-toggle " data-toggle="dropdown">             下拉   <span class="caret"></span>            </button>            <ul class="dropdown-menu">                <li><a  href="#">项目</a></li>                <li><a  href="#">项目</a></li>                <li><a  href="#">项目</a></li>                <li><a  href="#">项目</a></li>            </ul>        </div>    </div>    <div class="row"><!--自适应大小-->        <div class="col-sm-6">            <div class="btn-group btn-group-justified">                <div class="btn-group">                    <button type="button" class="btn btn-default">按钮</button>                </div>                <div class="btn-group">                    <button type="button" class="btn btn-default">按钮</button>                </div>            </div>        </div>    </div></div>

 

 

 

 

按钮式下拉菜单：

 

 

 

按钮式下拉菜单：

         A：组合式下拉菜单

         B：分离式下拉菜单

         C：按钮大小

         D：向上弹起菜单

      Dropup：<div class="btn-group dropup"><!--向上弹起菜单-->

 

 

 

输入框：

 

 

 

输入框：

         A：基本用法

              1、文本框和小图标的组合input-group

              2、前面的图标叫做input-group-addon加在《span》标签中

         B：尺寸设置

              1、input-group-lg大的

              2、input-group-sm中等

              3、input-group-xs最小的

         C：复选框addon

         D：按钮加addon

                  input-group-btn吧这个加在span标签上，可以

         E：下拉菜单按钮作为addon

             

         F：分段按钮作为addon

              input-group-btn吧这个加在span标签上，可以多个按钮存在

 

<div class="container">    <div class="input-group"><!--基本语法-->        <span class="input-group-addon">@</span>        <input type="text"class="form-control">        <span class="input-group-addon">..00</span>    </div>    <hr/>    <div class="input-group"><!--图标作为前头-->    <span class="input-group-addon glyphicon glyphicon-ok"></span>    <input type="text"class="form-control">    <span class="input-group-addon">..00</span></div>    <hr/>    <div class="input-group"><!--复选框作为addon-->        <span class="input-group-addon">             <input type="checkbox">        </span>        <input type="text"class="form-control">        <span class="input-group-addon">..00</span>    </div>    <hr/>    <div class="input-group"><!--按钮作为addon-->        <span class="input-group-btn">            <button type="button"class=" btn btn-default">ok</button>        </span>        <input type="text"class="form-control">        <span class="input-group-addon">..00</span>    </div>    <hr/>    <div class="input-group">        <span class="input-group-btn"><!--下拉列表作为addon-->            <button type="button" class="btn btn-default">kaishi</button>            <button type="button"class=" btn btn-default dropdown-toggle" data-toggle="dropdown">                <span class="caret"></span>            </button>            <ul class="dropdown-menu">                <li><a href="#">瞎忙活</a></li>                <li><a href="#">瞎忙活</a></li>                <li><a href="#">瞎忙活</a></li>                <li><a href="#">瞎忙活</a></li>            </ul>        </span>    <input type="text"class="form-control"></div></div>

 

 

导航：

 

 

导航：

   A：选项卡导航nav.Nav-tabs

   B:胶囊式选项卡 nav.nav-pills

   C:堆叠式导航：nav.nav-pills .nav-stacked

   D:自适应导航nav-justified

   F:分隔符

   E：禁用：

   G：二级导航

 

        

 

导航条：与导航的区别是：导航条有一条背景颜色

 A：基础导航条

      1、navbar-nav菜单从竖排变成横排

      2、navbar导航条的背景条

     3、navbar-default导航条的样式

      4、navbar-header导航条的标题

      5、navbar-text导航条加入文本

      6、navbar-link

      7、navbar-btn按钮可以居中

 

 B：导航条中的表单：

 C：导航条中的文本、连接、按钮

 D：顶部固定和底部固定

      1、navbar-fixed-top:跑到最上面吧第一个导航条覆盖

 

 E：Navbar-static-top：变成方角

 F:反色导航条 ：navbar-inverse变成黑色

      默认导航条是50px

G：响应式的导航条：

      navbar-toggle根据屏幕的分辨率考虑出不出现

      Data-toggle：collapse决定容器出不出现

      Collapse：根据768px隐藏掉

面包屑导航和分页导航：

面包屑.breadcrumb

      1、

分页pagination

翻页pager

分页大小：pagination-lg..

标签，徽章，大屏展播，页面标题

      1、标签lable

           A：强调文本用《span》在加lable样式 lable-default默认色

           B:lable-danger危险色

           C：lable-info信息蓝

           D：lable-warning警告色

      2、lable   

      3、徽章badge

           按钮，超链接，下拉列表（list-group

：list-group-item）

      4、大屏展播：jumbotron

           A：h1和p标签有默认的样式

      5、页面标题：page-header

      与h1很相似，加上页面标题设置的间距大一点

缩略图与警告框：

      1、缩略图

           A：加在超链接上的样式：thumbnail

           B:可以自定义的缩略图：

      2、默认的警告框

           Alter-info

      3、可关闭的警告框

           加在按钮上close，data-dismiss=“alter”；

           在div上加上alter-dismissable

      4、多彩样式的警告框

      5警告框中的链接

           Alter-link：显示的更明显

进度条和媒体对象：

      1、精度条的基本样式

           A：progress：进度条

           B：progress-bar：背景

      2、进度条的多彩样式

           A：还是四种样式

      3、条纹进度条

           A：progress progress-striped

           A：progress-bar progress-striped

      4、进度条的动画样式

           A:progress-bar progress-striped active

      5、堆叠样式进度条

           A：

      6、媒体对象默认样式

            A：media表示这个容器内，我要图文红牌,media-left,media-right左右漂移

           B:media-body内容

           C;media-heading标题

           D:media-object代表图片，视频

           F：对齐方式：media-middle垂直方向居中

      7、媒体列表

           放在ul标签中。

选项卡：

1、选项卡组成和布局

      Tab-content面板

      Tab-pane面板

2、声明式用法

      Data-toggle=“tab”系统才会把对应的面板显示或隐藏掉

      fade in起到了渐变效果，相当于动画，加在div上

3、Javascript用法

      这个不是直接调用div而是从调用tap属性

4、事件

      Show.bs.tab刚刚显示

      Show.bs.tab完整显示

      Hide.bs.tab刚刚隐藏

      Hide.bs.tab完整隐藏

      a[data-toggle="tab"]a标签中的含有data-toggle="tab"这个属性的a标签

e.target.innerHtml当前激活了哪个值就返回那个值

<div class="container"><!--选项卡-->  <ul class="nav nav-tabs ">      <li><a href="#pane1" data-toggle="tab">常规</a></li>      <li><a href="#pane2" data-toggle="tab">查看</a></li>      <li><a href="#pane3" data-toggle="tab">搜索</a></li>  </ul>    <!--面板-->    <div class="tab-content">        <div class="tab-pane active" id="pane1">            常规  常规  常规  常规  常规  常规        </div>        <div class="tab-pane"id="pane2">            查看查看        </div>        <div class="tab-pane"id="pane3">            搜索        </div>    </div></div>

<div class="container"><!--选项卡胶囊式-->  <ul class="nav nav-pills">      <li><a href="#pane1" data-toggle="pill">常规</a></li>      <li><a href="#pane2" data-toggle="pill">查看</a></li>      <li><a href="#pane3" data-toggle="pill">搜索</a></li>  </ul>    <!--面板-->    <div class="tab-content">        <div class="tab-pane active" id="pane1">            常规  常规  常规  常规  常规  常规        </div>        <div class="tab-pane"id="pane2">            查看查看        </div>        <div class="tab-pane"id="pane3">            搜索        </div>    </div></div>

<script>    $(function(){        $('.nav.a').click(function(e){            e.preventDefault();        });        $('#show2').click(function(){            $('#cheak').tab("show")        });

$('a[data-toggle="tab"]').on('show.bs.tab',function(e){    var newss = e.target.innerHTML;   $('#test').html(newss);});

    });</script><div class="container"><!--选项卡javascript用法-->    <ul class="nav nav-pills ">        <li><a href="#pane1" data-toggle="pill">常规</a></li>        <li><a href="#pane2" data-toggle="pill" id="cheak">查看</a></li>        <li><a href="#pane3" data-toggle="pill">搜索</a></li>    </ul>    <!--面板-->    <div class="tab-content">        <div class="tab-pane " id="pane1">            常规  常规  常规  常规  常规  常规        </div>        <div class="tab-pane "id="pane2">            查看查看        </div>        <div class="tab-pane "id="pane3">            搜索        </div>    </div>    <button type="button" id="show2">按钮</button></div>

工具提示框：

      1、基本用法

           Data-toggle=“tooltip”

           Data-placement=“五个方向值”                      

            $(‘select’).tooltip()

           不能单独使用，必须和js一起是使用

      2、js用法

           $(‘select’).tooltip()

           $(‘select’).tooltip(‘show’)显示 

           $(‘select’).tooltip(‘hide’)隐藏

           $(‘select’).tooltip(‘toggle’)单击显示，单击隐藏

           $(‘select’).tooltip(‘option’)

      3、参数

           Data-animation应用一个fade动画

           Data-html true/false是否支持html代码提示语

           Data-placement方向

           Data-selector触发提示的事件是什么

           Data-original-title提示语（不需要用，版本删掉了）

           Data-trigger ：如何触发事件

           Click：

            Hover默认的

            focus 

           manual

           Data-delay（show：500，hid：100）延迟时间json格式，鼠标单击时500秒显示，离开时100秒隐藏

           Data-container String|false将tooltip附加到元素上

           Data-template字符串，提示语模板

      4、事件：

           Show.bs.tooltip

           Shown.bs.tooltip

           Hid.bs.tooltip

           Hidden.bs.tooltip

考虑到性能问题，不能单独的使用基本语法要和js语法配合使用

      $(function(){   /* $('#showbtn').click(function(){        $('[data-toggle="tooltip"]').tooltip('show');    });*/   /* $('[data-toggle="tooltip"]').tooltip({        trigger:'click'    });*/    $('[data-toggle="tooltip"]').tooltip()    $('[data-toggle="tooltip"]').on('show.bs.tooltip',function(){        $('#test').css("background","red");    })});

<div style="margin: 200px ">    <button   type="button" class="btn btn-danger"data-trigger="click" title="你好吗" data-toggle="tooltip" data-placement="right">按钮</button>    <button   type="button" class="btn btn-danger" title="你好吗" data-toggle="tooltip" data-placement="left">按钮</button>    <br/>    <button type="button" id="showbtn"class="btn btn-danger">显示</button>    <div style="width: 100px;height: 200px ;background: gray" id="test"></div></div>

      弹出框和警告框：

      data-toggle="popover"；弹出框

      $(‘select’).popover();

      data-toggle="popover";

      data-content=""

      Data-original-title=””;

工具栏是鼠标移上去就显示，而提示框点击才会显示

警告框：

      1、布局样式

      2、data-dismiss=“alert”

      3、data-target=“#target”

      4、$().alert

      5、$().alert(‘close’)

焦点轮播图：

焦点广告：

      1、基本用法 

           布局与样式

           Data-ride=”carousel”加载完了，开始轮播，在div容器上，再加一个id方便与小圈圈关联，在加个class=“carousel slide

”

           Carousel-inner水平排列，默认的是隐藏的

在一个div上加上Carousel-inner

<div class="carousel-inner"><!--图片-->    <div class="item active"><img src="ni.jpeg"width="600px" height="400px" ></div>    <div class="item"><img src="hao.jpg" width="600px" height="400px" ></div>    <div class="item"><img src="ma.jpg" width="600px " height="400px" ></div></div>

           图片容量

           圈圈：carousel-indicators

           小圈圈使用的是有序列表<ol class="carousel-indicators">    <li data-slide-to="0" data-target="#carousel_container"></li>    <li  data-slide-to="1"data-target="#carousel_container"></li>    <li  data-slide-to="2"data-target="#carousel_container"></li></ol>

左右按钮：

<a href="#carousel_container" data-slide="prev" class="left carousel-control">    <span class="glyphicon glyphicon-chevron-left"></span></a>

      2、自定义属性：

           Data-ride=‘carousel’在图片容器上加的属性，加上以后开始轮播

           Data-slide=‘prev|next’在超链接上加的，是左右轮播

           Data-slide-to=‘3’在小圈圈上的<li>标签加的

           Data-interval=‘5000’自动循环事件

           Data-pause=“hover”当鼠标移到图片时，就不轮播了

           Data-wrap=’true’是否持续循环

      3、javascript用法：

           $(‘.carousel’).carousel()

           .carousel(‘cycle’)默认是从左往右的

           .carousel（‘pause’）暂停

           .carousel(number)循环到number

           .carousel（‘prev’）返回到前一条

           .carousel（‘next’）转到下一条

      4、事件：

           Slide.bs.carousel

           Slide方法后，还未开始下一张图

           Slid.bs.carousel在一张图结束后

           图片的默认大小是600px*400px

Html结构需要四步：           

1.1、容器：最外层div，需要一个data-ride=”carousel”来指定为轮播放插件，并且提供一个Id，方便圆圈指示符的关联  1.2、图片列表部分，用一个外层div包裹所有，然后每个img会被一个div，则class为item的包裹住  1.3、圆圈指示符：用一个ol列表来显示其各图形列表项，每个列表项需要指定data-slide-to=”index”属性，用于标记当前圆圈的索引号  1.4、左右控制按钮：实现向左、向右移动的功能

2、Css样式  2.1、Carousel：只有一个相对定位标记  2.2、Carousel-inner：旋转图片列表区域，其中每项有item来修饰   2.2.1、其中的active、next、prev都认为是可见的   2.2.2、Carousel-caption：表示每个item项应该有标题信息，默认显示下、中位置  2.3、Carousel-control：设置向左、向右按钮的样式，其中会设置渐变、透明度等信息，提供了icon-prev、icon-next两种额外样式  2.4、Carousel-indicators：圆圈部分样式，都是绝对定位，每个li设置为行内块元素，用text-indent：-999来隐藏字体

轮播（焦点广告）

如果用html需要四步：

1、在div最外层加一个class=”carousel slide”data-ride=”carousel”id=”show”

2、在第二个div中添加一个class=”carousel-inner”水平排列

<div class=”iteam”><img></div>

<div class=”iteam”><img></div>

<div class=”iteam”><img></div>

3、圈圈

<ol>

      <li data-slide-to=”0”data-target=”show”>

      <li data-slide-to=”1”data-target=”show”>

      <li data-slide-to=”2”data-target=”show”>

</ol>

4、左右按钮

<a href=”#show”data-slide=”prev”class=”left carousel-control

”>

<span class=”glyphicon glyphicon-chevron-left

”></span>

</a>