bootStrap.docx

bootStrap.docx

《bootStrap.docx》由会员分享，可在线阅读，更多相关《bootStrap.docx（25页珍藏版）》请在冰点文库上搜索。

bootStrap

前沿，为了让IE支持HTML5元素，我们需要在HTML头部添加以下Javascript。

–[ifIE]>

[endif]–>

--[ifltIE9]>

[endif]-->

说明：

利用条件注释针对IE来调用这个js文件。

上面这段代码仅会在IE浏览器下运行，还有一点需要注意，在页面中调用html5.js文件必须添加在页面的head元素内，因为IE浏览器必须在元素解析前知道这个元素，所以这个js文件不能在页面底部调用。

当然，为了提高速度，可以将该js文件下载到自己的服务器中调用。

添加bootStrap插件：

一、布局容器

Bootstrap需要为页面内容和栅格系统包裹一个 .container 容器。

我们提供了两个作此用处的类。

注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。

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

2、.container-fluid类用于100%，占据全部视口的容器。

会随着屏幕大小尺寸变化，会被挤压到下一行。

二、媒体查询：

一般用于响应式

语法格式：

@media（min-width:

640px） and （max-width:

720px）{...}

注意：

and前后都要有空格

含义：

当窗口宽度在640px~720px之间时，添加该样式。

/*超小屏幕（手机，小于768px）*/

/*没有任何媒体查询相关的代码，因为这在Bootstrap中是默认的（还记得Bootstrap是移动设备优先的吗？

）*/

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

@media（min-width:

@screen-sm-min）{...}

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

@media（min-width:

@screen-md-min）{...}

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

@media（min-width:

@screen-lg-min）{...}

我们偶尔也会在媒体查询代码中包含 max-width 从而将CSS的影响限制在更小范围的屏幕大小之内。

@media（max-width:

@screen-xs-max）{...}

@media（min-width:

@screen-sm-min）and（max-width:

@screen-sm-max）{...}

@media（min-width:

@screen-md-min）and（max-width:

@screen-md-max）{...}

@media（min-width:

@screen-lg-min）{...}

三、栅格参数

超小屏幕 手机（<768px）

小屏幕 平板（≥768px）

中等屏幕 桌面显示器（≥992px）

大屏幕 大桌面显示器（≥1200px）

栅格系统行为

总是水平排列

开始是堆叠在一起的，当大于这些阈值时将变为水平排列C

.container 最大宽度

None（自动）

750px

970px

1170px

类前缀

.col-xs-

.col-sm-

.col-md-

.col-lg-

列（column）数

12

最大列（column）宽

自动

~62px

~81px

~97px

槽（gutter）宽

30px（每列左右均有15px）

可嵌套

是

偏移（Offsets）

是

列排序

是

四、几个实用类

1、.visible-phone/hidden-phone:

在手机上显示或隐藏

2、.visible-tablet/hidden-tablet:

在平板上显示或隐藏

3、.visible-desktop/hidden-desktop:

在桌面上显示或隐藏

五、文字排版相关的几个标签和类

1、There are ：

斜体标签

2、Love：

加粗标签

3、 AbC ：

指示简称或者缩写

4、来自李袁网：

表明一段小字，补充说明上面的文字

六、列表

1、无序列表：

            

• apple

            

• pear

            

• banana

            

• watchmalen

            

• chear

        

2、有序列表：

            

1. apple

            

2. pear

            

3. banana

            

4. watchmalen

            

5. chear

        

3、描述类列表：

            

simple

            

简单朴素

            

            

complex

            

复杂繁琐

        

补充说明：

1、bootStrap中的描述类列表，列标头是加粗的。

               2、bootStrap为描述标签定义了一个类，使得