2019-06-11 Java学习日记之Bootstrap

什么是响应式页面?

适应不同的分辨率显示不同的样式，提高用户的体验

BootStrap结构：

　　全局CSS

　　　　boosStrap中已经定义好了一套CSS的样式表

　　组件

　　　　bootStrap定义的一套按钮，导航条等组件

　　JS插件

　　　　bootStrap定义了一套JS的插件，这些插件已经默认实现了很多种效果

BootStrap的布局容器：

.container　类用于固定官渡并支持响应式布局的容器

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

校验表单扩展：

trigger　　：　　触发浏览器默认行为

triggerHandler　　：　　不会触发

is　　：　　判断

find　　：　　查找

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

BootStrap的栅格系统：

响应式设计：这种设计依赖于CSS3中的媒体查询

栅格样式：

设备分辨率大于1200使用lg样式

设备分辨率大于992 < 1200 使用md样式

设备分辨率大于768< 992使用sm样式

设备分辨率小于768使用xs样式