bootstrap table中文文档_Bootstrap学习笔记（非教程）

1. bootstrap下载分dist版和未编译版。未编译版包含了dist所有，另有doc，doc/example有示例源码。
2. dist文件夹包含font，css，js 3个文件夹，css文件夹8个文件，4个一组，共2组：bootstrap-core和bootstrap-theme。

下面来看example。

[1] starter-template

body由2部分组成：nav和div

固定顶部的导航栏

其中的ul，最简单就是由一条一条li组成，每条li的内容是一个a

[2] theme

padding 内边距：上右下左

其中的ul包含具体的选项，内容一般是一条一条的li，li里面一般是a，也可以是这里的dropbox……

余下的：

body仍然由nav和div组成，比较简单

[3] cover

页面分上中下

html里面分3个div，外面包了好几层，是为了设定不同层次的css

就这个，分为3个层次，几乎没有交叉，感觉最后的效果像mixin

navbar-inverse 反向黑色

navbar-default 默认透明

[4] sticky-footer-navbar

折叠collapse-适应移动端小屏幕

自适应 & 响应式

响应式和自适应的区别 - 前端 - 掘金

chrome可以模拟手机屏幕：

要使折叠生效，必须非常细心！不要写错

最后改造自己的页面。

bootstrap有2.x， 3.x, 4.x，因为用到了cards主题所以用最新的4.0.0。不过4.0.0不能完全兼容3.x，在这里踩了坑，最后还是决定统一用3.3.7。

页面1：列表页

页面2：详情页

bootstrap样式参考过的页面（复制css然后简单修改）：

Bootstrap 中文文档 · Bootstrap 是世界上最流行的、移动设备优先的、响应式前端开发框架。

Sticky Footer Navbar Template for Bootstrap​v3.bootcss.com

组件 · Bootstrap v3 中文文档