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% ;
    }
    ...
}


以上.