Bootstrap4入门

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS HTML框架。

优酷频道 技术频道

Card image cap
01. Bootstrap4来了

2018年1月28日,Bootstrap4终于来了,等得头发都白了不少。

Card image cap
02. Bootstrap4初次使用

* Bootstrap4支持技术 * 从模板开始(Starter template)

Card image cap
03. 为要素配置颜色

* Bootstrap4内置颜色 * 前景色text-* * 背景色bg-*

Card image cap
04. 文本样式

* text-* * font-* * transform

Card image cap
05. 元素size变更

* w-* * h-*

Card image cap
06. padding和margin的使用

* [p|m][location]-[size]

Card image cap
07. 学会使用Bootstrap官网

* 官网文档的使用

Card image cap
08. 按钮的技巧

* 按钮的各种设定 * btn-*

Card image cap
09. 独特的网格系统

* col-*

Card image cap
10. 理解响应式布局

* 屏幕大小的划分

Card image cap
11. 制作响应式网页

* col-* * col-sm-* * col-md-* * col-lg-* * col-xl-*

Card image cap
12. 制作自己的网页

* 进度小结,总结一下之前的知识

Card image cap
13. 特殊Section的使用

* section标记 * 填充我的网页

Card image cap
14. 完成特殊Section

* 实现响应式布局 * col-md-* * order-md-*

Card image cap
15. 表格也疯狂

* table * table-*

Card image cap
16. 制作Tab菜单

* 制作Tab内容布局

Card image cap
17. 完善Tab菜单

* nav * nav-tabs * nav-item * nav-link * tab-content * tab-pane * data-toggle="tab"

Card image cap
18. 制作页脚

* footer

Card image cap
19. 制作提示框(Tooltip)

* data-toggle="tooltip" * data-placement

Card image cap
20. 制作导航条

* nav * navbar

Card image cap
21. 制作汉堡菜单

* navbar-toggler

Card image cap
22. 报警提示

* alert * alert-* * close * data-dismiss="alert"