学习总结
流程
Grid System原理及页面布局方式
响应式设计
- 只设计一套页面,却可以在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>
代表什么意思要清楚。
使用教程
网页设计
- 分析目标网站的构成。主要是分析由哪些组件组成。
- 分析目标网站的栅格情况。
- 对于四种尺寸屏幕应该如何设计栅格,不过初学者可以直接使用 .col-md-进行练习
- 统一字体,颜色。
- 最后
必须掌握知识
学习原则
有一个清晰的学习目标和路线。
只是快速构建一个简易界面
不顾及各种细节,只关心界面效果
深入学习
先用上面的方法学习,然后在针对细节,然后是
大型网站对于前端界面的要求高,用Bootstrap解决不了,放弃吧~~
界面设计的原则
无论是否前台开发人员,都可以知道的几个原则。蚂蚁金服 设计平台
对齐,重复,对比, 布局
Bootstrap知识
1. 大部分组件是简单地应用CSS样式类,但有些需要使用Bootstrap.js。(弹框)
2. 如何配置 Bootstrap以及 *.min.css 与 *.css的差别
2. container和container-fluid两个样式类
2. 当屏幕大小改变时,图片将自动随之伸缩
2. 自定义弹框
4. 最后
注意事项
- 应该在导入Bootstrap.js之前导入jQuery.js
- 当多个div并列在一行,Bootstrap会依据每个div的内容确定不同的高度,因此,所有div是顶部齐平,底部由内容长度决定。
- 不要**直接修改**Bootstrap.css(除非定制特定风格Bootstrap),而要用自己的CSS去覆盖它,否则,日后它将给你的网站维护带来很大的麻烦。
- 必须掌握JavaScript和jQuery的基础知识,才能真正地用好部分比较复杂的网页组件,但不影响快速构建一个**简单的网页
- Bootstrap 中文网 为 Bootstrap 专门构建了自己的免费 CDN 加速服务。基于国内云厂商的 CDN 服务,访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。
开发工具
- Chrome(熟悉审查元素等功能)
- 推荐 Visual Studio
参考资料
资料
入门指导
日常参考
- Bootstrap 中文网
- Bootstrap4 菜鸟教程
- Bootstrap3 菜鸟教程
-
说明
- 暂时只能生成 Bootstrap3 的代码,有些 Bootstrap4 的代码需要调试。2018年6月23日20:55:36 2.
快速构建应用
快速构建
我还没写完。。