0x03

Summer Training Day 4.

Bootstrap框架
MVC与MVVM
Native & Hybrid & Web APP
IFE Task 8

1.Bootstrap框架.

栅格系统

主div.

1
2
<!-- .container用于固定宽度并支持响应式布局 -->
<div class="container"></div>

1
2
<!-- .container-fluid适用于100%宽度,占据全部视口(viewport)的容器 -->
<div class="container-fluid"></div>

若干行,每行内最多十二列.
列与列之间间隔用padding;
为row设置负margin抵消内部padding;
前缀col-;
从大到小: -lg,-md,-sm,-xs;
原理为媒体查询;

响应式列重置与偏移

创建class为clearfix的div;
偏移:
addclass “col-offset-md-num”;

嵌套与排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 嵌套 -->
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
1
2
3
4
5
6
<!-- 排序 -->
<!-- 数字代表移动列数,push右移动,pull左移 -->
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

其他

class设置为h1-h6可改变内联元素大小;
<small>标签或.small类可用于副标题;
.lead类可突出段落;
<mark>:tohighlight text;
<del>:加删除线;
<ins>:加下划线;
<u>:同上;
.

2.MVC与MVVM.

MVC: Model View Controller
M是指业务模型,V是指用户界面,C是指控制器
MVVM: Model-View-ViewModel

3.三种APP

Native App,原生语言
Hybrid App,混合
Web App;网页
.
p.s. 其实今天根本没用到bootstrap框架..

4.IFE Task.

Task 8

实现栅格布局
利用Flex布局 + @media媒体查询完成.

1
2
3
4
5
6
7
8
<body>
<div class="row">
<div class="md-4 sm-6"></div>
<div class="md-4 sm-6"></div>
<div class="md-4 sm-12"></div>
</div>
...
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
body {
...
}
.row {
...
}
@media screen and (min-width: 768px){
.md-1 {
width: 8.33% ;
}
...
/*空格很重要,不该丢的不要丢*/
}
@media screen and (max-width: 768px){
.row {
flex-wrap: wrap;
}
.sm-2 {
width: 15.66% ;
}
...
}


以上.