Bootstrap 学习总结

朴灿烈づ我的快乐病毒、 2022-05-22 11:56 255阅读 0赞

# 学习总结 #

*  学习总结
    
     *  流程
        
         *  Grid System原理及页面布局方式
            
             *  响应式设计
         *  使用教程
            
             *  网页设计
             *  必须掌握知识
                
                 *  学习原则
                 *  界面设计的原则
                 *  Bootstrap知识
             *  注意事项
             *  开发工具
     *  参考资料
        
         *  资料
            
             *  入门指导
             *  日常参考
         *  说明
     *  快速构建

--------------------

## 流程 ##

### Grid System原理及页面布局方式 ###

#### 响应式设计 ####

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

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

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

比如：

代表什么意思要清楚。

### 使用教程 ###

#### 网页设计 ####

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

#### 必须掌握知识 ####

##### 学习原则 #####

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

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

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

##### 界面设计的原则 #####

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

##### 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)][Bootstrap_1] TODO
2.  [Bootstrap3入门学习(上)][Bootstrap3]
3.  [Bootstrap学习文档（四）][Bootstrap]
4.  TODO

#### 日常参考 ####

1.  [Bootstrap 中文网][Bootstrap 1]
2.  [Bootstrap4 菜鸟教程][Bootstrap4]
3.  [Bootstrap3 菜鸟教程][Bootstrap3 1]
4.  [Bootstrap3 可视化布局][Bootstrap3 2]
    
    ### 说明 ###
    
    1.  暂时只能生成 Bootstrap3 的代码，有些 Bootstrap4 的代码需要调试。*2018年6月23日20:55:36*
    2.  2.

**快速构建应用**

--------------------

## 快速构建 ##

我还没写完。。

--------------------

[Link 1]: http://design.alipay.com/design/web/alignment
[Link 2]: http://design.alipay.com/design/web/repetition
[Link 3]: http://design.alipay.com/design/web/contrast
[Link 4]: http://design.alipay.com/design/web/layout
[Bootstrap_1]: http://www.cnblogs.com/ArsenalfanInECNU/p/5588467.html
[Bootstrap3]: https://www.jianshu.com/p/9f6f8f98b6e5
[Bootstrap]: https://www.jianshu.com/p/3f90fd868b6a
[Bootstrap 1]: http://www.bootcss.com/
[Bootstrap4]: http://www.runoob.com/bootstrap4/bootstrap4-tutorial.html
[Bootstrap3 1]: http://www.runoob.com/bootstrap/bootstrap-tutorial.html
[Bootstrap3 2]: http://www.runoob.com/try/bootstrap/layoutit/