本篇文章為大家展示了Bootstrap學(xué)習(xí)總匯，代碼簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)建站專注于企業(yè)全網(wǎng)營銷推廣、網(wǎng)站重做改版、文圣網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、html5、商城系統(tǒng)網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為文圣等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

Bootstrap4特點(diǎn)：1.兼容IE10+ 2.使用flexbox 布局 3.拋棄Nomalize.css 4.提供布局和 reboot 版本

Bootstrap組成：1.基礎(chǔ)樣式 2.常用組件 3.JS插件

常見問題：

1.Bootstrap 的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：CSS 代碼結(jié)構(gòu)合理 ，現(xiàn)成的樣式可以直接用

缺點(diǎn)：定制較為繁瑣，體積大

2.Bootstrap 如何實(shí)現(xiàn)響應(yīng)式布局

原理：通過 media query 設(shè)置不同分辨率的class

使用：為不同分辨率選擇不同的網(wǎng)格class

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

1.使用 css 同名類覆蓋（簡單場景使用）

2.修改源碼重新構(gòu)建

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

知識點(diǎn)：

1.基本用法

制作簡單登錄頁面

    
    
    
    
    
    


    
注冊
    

        

            姓名
            

                
            
        
        

            密碼
            

                
            
        
        

            電話
            

                
            
        
        

            地址
            

                
            
        
        

             
        
        

            提交
        
    
    

效果圖：

2.Bootstrap JS 組件

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

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

效果圖：

3.Bootstrap 響應(yīng)式布局

代碼示例：

    
    
    
    
    
    


    

        

            
內(nèi)容
            
內(nèi)容
            
內(nèi)容
            
內(nèi)容
            
內(nèi)容
            
內(nèi)容
            
內(nèi)容
            
內(nèi)容
        
    

總共12個(gè)，屏幕尺寸 < 576px時(shí)，每行12個(gè)；768px>=屏幕尺寸>=576px時(shí)，每行6個(gè)；992px>=屏幕尺寸>=768px時(shí)，每行4個(gè)；屏幕尺寸>=992px時(shí)，為每行3個(gè)；

效果圖：

4.Bootstrap 定制方法

方法：1.使用 css 同名類覆蓋（簡單場景使用） 2.修改源碼重新構(gòu)建  3.引用 scss 源文件，修改變量

上述內(nèi)容就是Bootstrap學(xué)習(xí)總匯，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。