发表于： 2018-09-16 09:02:55
1 754
今天完成的事情：
1. 学习 Bootstrap 的表单组件、导航组件及网格布局。
2. 利用 Bootstrap 的 navbar 完成任务六的 header 部分。
明天计划的事情：
1. 尽量完成任务六的页面，并检查在各分辨率下的适应情况。
2. 学习 Bootstrap 其他的组件、元素。
遇到的问题：
今天的代码量较少，暂时没有遇到。
收获：
1. 栅格系统使用一系列的 containers, rows, columns 对内容进行布局及对齐。它是基于 flexbox 构建的，对响应式设计有非常好的支持。
2. 栅格系统的设置选项：Bootstrap 使用 rem 和 em 来定义大多数的尺寸大小，px 则是用来定义栅格的 breakpoints 和 container 的宽度。这是由于 viewport 的宽度是使用 px 的，且不随 font-size 进行改变。
| Extra small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | Extra large ≥1200px | |
|---|---|---|---|---|---|
| Max container width | None (auto) | 540px | 720px | 960px | 1140px |
| Class prefix | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| # of columns | 12 | ||||
| Gutter width | 30px (15px on each side of a column) | ||||
| Nestable | Yes | ||||
| Column ordering | Yes | ||||
3. Bootstrap 的栅格包含五个层级的预定义类，用来构建复杂的响应式布局。可以自定义列的尺寸以适应 extra small, small, medium, large,或者是 extra large 等不同大小的设备。
返回列表
评论