发表于: 2018-10-24 22:24:04
1 827
今天完成的事情:
学习bootstrap:
(1)布局容器:.container 类用于固定宽度并支持响应式布局的容器。.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
(2)栅格系统:栅格系统用于通过一系列的行(row)与列(column)的组合B自动将屏幕分为最多12列。
通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。
超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
---|---|---|---|---|
栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C | ||
.container 最大宽度 | None (自动) | 750px | 970px | 1170px |
类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
列(column)数 | 12 | |||
最大列(column)宽 | 自动 | ~62px | ~81px | ~97px |
槽(gutter)宽 | 30px (每列左右均有 15px) | |||
可嵌套 | 是 | |||
偏移(Offsets) | 是 | |||
列排序 | 是 |
列偏移:使用 .col-md-offset-* 类可以将列向右侧偏移。
嵌套列:使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。
列排序:通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序。
(3)排版
标题:提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式。在标题内还可以包含 <small> 标签或赋予 .small 类的元素,可以用来标记副标题。
内联文本元素:
标记文本:<mark>;被删除的文本:<del>;无用文本:<s>;插入文本:<ins>;带下划线的文本<u>;小号文本<small>;着重<storng>;斜体<em>
文本对齐:.text-left;.text-center;.text-right;.text-justify;.text-nowrap
(4)无样式列表:对<ul>元素添加类.list-unstyled;
明天计划的事情:
继续学习bootstrap
遇到的问题:
收获:
了解了bootstrap的栅格和部分样式
评论