HTML5-bootstrap-js plugin

bootstrap简洁、直观、强悍的前端开发框架，让Web开发更迅速，简单(背的东西较多)

例1 缩放倍率，为1表示不缩放。

例2 表示在手机上能用手撑开放大用，值可以为yes,no,0，1。

例3

让字体在不同的设备上显示的正常一些。

例4

例5：媒体查询(两种用法)

法一

法二也可以在css文件中操作，如下所示

渲染模式


Ie=edge表示采用最新的渲染模式

怪异盒子模型

此时显示div的宽高是200，200，不加边框
Boot模版—–index4 在网站上可以下载这些.css和.js文件

Bootstrap的模版—index5
因为bootstrap是依赖于jq的，所以要引入jquery-1.11.3.js和bootstrap.min.js，而且要放在后面。

Container容器，文本内容会根据浏览器宽度随之移动—–index5
Container-fluid容器，文本内容宽度占满全屏 不会随之移动

按钮index6.html

按钮以默认的形式显示


Btn按钮的属性可以运用在a标签和input控件上

按钮也分大小


按钮也能占满一行


注：一般抒写时都会用container容器包着
关于列表—–index7.html
去掉默认的样式

List-inline是水平


dl-horizontal让dt,dd水平的意思

关于图片—-index8.html

图片会跟着父容器的大小随之改变，填充整个屏幕

可以把图片调成圆形，倒圆角，加白边等

关于表格—-index9.html


三者的差别在于第二个在table中添加class=”table”,
第三个在table中添加class=”table table-hover”,鼠标移入就变色

给表格加边框

隔行变色


table-responsive 随着父容器大小的变化而变化

关于文本颜色—-index10.html
有五种颜色属性text-success,text-info,text-danger,text-warning,text-primary

可加背景颜色

第一个大写，第二个小写，第三个首字母大写


text-justify让文本看起来更好看，换行时适当的调整间隔


对齐方式Text-left,text-right,text-center

栅格系统—-index11.html（重点）


栅格系统将一行分成12列


数字代表文字占几份 如上图李照占5份，也可以如下设置


下面的设置，当小于md时，李照1和李照就不再同一行了，因为李照已失效，但是div是块级元素。

文本内容往右移3份，自己占两份

当达到一定条件时，文本“张海涛”消失。


注意：如果不加row,则相当于是浮动，p标签则不是独占一行


如果给p标签加颜色红色，则整行都是红色
Bootstrapdemo小例子—-index12.html(不太理解)

上午bootstrap

例一—-index.html

两个字重叠

表单—-index2.html（常用）

1、普通表单

2、行内表单

3、水平表单

内容比如用户名，后面的框在同一行

下拉(上拉)菜单—–index3.html（常用）



把总体的class改成dropup
Dropdown。Dropup有相对定位的效果，ul有绝对定位的效果。

导航—–index4.html
页签式导航



胶囊式导航

两端对齐的胶囊式导航

竖着的胶囊式导航

字体图标—–index5.html去中文网找组件。象形文字图标（记得引入fonts文件夹）


可以修改图标的颜色

可以设置字体，要引入字体包，即让div的字体设置为汉仪行楷简字体。可以百度搜索下载

图标可以写在button内，但必须写在一个空标签里。

按钮组—–index6.html



让按钮竖起来

两端对齐

警告框—–index7.html

代表X号。
面包屑导航—–index7.html

分页条—-index7.html

此条不居中

分页器

此条居中

标签—index7.html



巨幕—index7.html


页头—index7.html


下面会有一条横线
水井—index7.html


进度条—index7.html

动态的进度条

进度条、斑马紋、动态、颜色、进度条的宽度、显示宽度

缩略图—index7.html

1. 列表内容

媒体对象—index7.html

media-middle垂直居中

三种样式，左图右字，左字右图，左右图中间字。

列表组—index7.html


面版—index7.html（较常用）

在最外面div加panel-danger，则只会改变面版头部的颜色。

导航条—index8.html

导航条、默认颜色、定位在上面、容器水平居中、导航、胶囊式导航、导航条里的导航使文字垂直对齐与之前颜色相反的颜色、默认选中、成为一个选项、导航条颜色改成与之前相反的颜色

可以修改颜色

导航条里的表单，如下所示

Right则表单靠最右边

可以让文本对齐

可以让按钮对齐

注意—–
在导航条后面写文字时，要注意以下情况。

下午

JS Plugin插件—index2.html

1、下拉菜单的显示

2、加载loading

3、重置reset

点击第二个按钮，将第一个按钮的值重置

4、工具提示—–index3.html

默认方向是上 这个设置的是右

5、弹出框—-index4.html

也可以加方向

6、标签页用法—-index5.html–（常用）

点击不同的导航显示不同的内容

7、模态框—-index6.html–

8、折叠—-index7.html–

加in默认是打开的，不自动收回 ，不加in，则打开后自动收回。

只改变第一行的颜色

手风琴效果

9、轮播—-index8.html–

data-interval用来设置轮播时间