Bootstrap 学习总结

学习总结

---

流程

Grid System原理及页面布局方式

响应式设计

1. 只设计一套页面，却可以在PC、平板和各种手机上得到一致的体验

栅格系统将屏幕分成类似表格， 每一行要求小于等于12列

.col-sm- 表示小屏幕 平板 (≥768px) ，col-md-*表示中等屏幕 桌面显示器 (≥992px)

比如：

    <div class="row">
      <div class="col-md-8 col-xs-12">.col-md-8</div>
      <div class="col-md-4 col-xs-6">.col-md-4</div>
    </div>

代表什么意思要清楚。

使用教程

网页设计

1. 分析目标网站的构成。主要是分析由哪些组件组成。
2. 分析目标网站的栅格情况。
   
   1. 对于四种尺寸屏幕应该如何设计栅格，不过初学者可以直接使用 .col-md-进行练习
3. 统一字体，颜色。
4. 最后

必须掌握知识

学习原则

有一个清晰的学习目标和路线。

只是快速构建一个简易界面
不顾及各种细节，只关心界面效果

深入学习
先用上面的方法学习，然后在针对细节，然后是
大型网站对于前端界面的要求高，用Bootstrap解决不了，放弃吧~~

界面设计的原则

无论是否前台开发人员，都可以知道的几个原则。蚂蚁金服 设计平台
对齐，重复，对比, 布局

Bootstrap知识

1. 大部分组件是简单地应用CSS样式类，但有些需要使用Bootstrap.js。（弹框）
2. 如何配置 Bootstrap以及 *.min.css 与 *.css的差别
2. container和container-fluid两个样式类
2. 当屏幕大小改变时，图片将自动随之伸缩
2. 自定义弹框
4. 最后

注意事项

1. 应该在导入Bootstrap.js之前导入jQuery.js
2. 当多个div并列在一行，Bootstrap会依据每个div的内容确定不同的高度，因此，所有div是顶部齐平，底部由内容长度决定。
3. 不要**直接修改**Bootstrap.css（除非定制特定风格Bootstrap），而要用自己的CSS去覆盖它，否则，日后它将给你的网站维护带来很大的麻烦。
4. 必须掌握JavaScript和jQuery的基础知识，才能真正地用好部分比较复杂的网页组件，但不影响快速构建一个**简单的网页
5. Bootstrap 中文网 为 Bootstrap 专门构建了自己的免费 CDN 加速服务。基于国内云厂商的 CDN 服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。

开发工具

1. Chrome（熟悉审查元素等功能）
2. 推荐 Visual Studio

---

参考资料

资料

入门指导

1. 从零开始学Bootstrap(1) TODO
2. Bootstrap3入门学习(上)
3. Bootstrap学习文档（四）
4. TODO

日常参考

1. Bootstrap 中文网
2. Bootstrap4 菜鸟教程
3. Bootstrap3 菜鸟教程

4. Bootstrap3 可视化布局

   说明

   1. 暂时只能生成 Bootstrap3 的代码，有些 Bootstrap4 的代码需要调试。2018年6月23日20:55:36
   2.

快速构建应用

---

快速构建

我还没写完。。

---