Bootstrap学习总汇

本篇文章为大家展示了Bootstrap学习总汇，代码简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

创新互联建站专注于企业全网营销推广、网站重做改版、文圣网站定制设计、自适应品牌网站建设、html5、商城系统网站开发、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为文圣等各大城市提供网站开发制作服务。

Bootstrap4特点：1.兼容IE10+ 2.使用flexbox 布局 3.抛弃Nomalize.css 4.提供布局和 reboot 版本

Bootstrap组成：1.基础样式 2.常用组件 3.JS插件

常见问题：

1.Bootstrap 的优缺点

优点：CSS 代码结构合理 ，现成的样式可以直接用

缺点：定制较为繁琐，体积大

2.Bootstrap 如何实现响应式布局

原理：通过 media query 设置不同分辨率的class

使用：为不同分辨率选择不同的网格class

3.如何基于 Bootstrap 定制自己的样式

1.使用 css 同名类覆盖（简单场景使用）

2.修改源码重新构建

3.引用 scss 源文件，修改变量

知识点：

1.基本用法

制作简单登录页面

    
    
    
    
    
    


    
注册
    

        

            姓名
            

                
            
        
        

            密码
            

                
            
        
        

            电话
            

                
            
        
        

            地址
            

                
            
        
        

             
        
        

            提交
        
    
    

效果图：

2.Bootstrap JS 组件

基于 jQuery 写的，可以完成很多交互效果，所以需要引入 jQuery ,还需要引入 Popper.js (库）和 bootstrap.js

使用方式：1.基于 HTML 的 data-** 属性  2.基于 JS API

效果图：

3.Bootstrap 响应式布局

代码示例：

    
    
    
    
    
    


    

        

            
内容
            
内容
            
内容
            
内容
            
内容
            
内容
            
内容
            
内容
        
    

总共12个，屏幕尺寸 < 576px时，每行12个；768px>=屏幕尺寸>=576px时，每行6个；992px>=屏幕尺寸>=768px时，每行4个；屏幕尺寸>=992px时，为每行3个；

效果图：

4.Bootstrap 定制方法

方法：1.使用 css 同名类覆盖（简单场景使用） 2.修改源码重新构建  3.引用 scss 源文件，修改变量

上述内容就是Bootstrap学习总汇，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。