Bootstrap Container 進行響應式設計

一、Bootstrap Container的概述

Bootstrap是目前最受歡迎的開源前端框架之一，它為web開發者帶來了豐富的UI和交互控件。Bootstrap Container是Bootstrap框架中的核心組件之一，它可以幫助開發者輕鬆管理網站的布局。Bootstrap Container主要提供了兩種布局形式，即定寬和全屏兩種布局形式，開發者通過設置不同的CSS屬性即可實現不同的布局。Bootstrap Container內部默認的行為是基於柵格的系統，這意味着開發者可以在Container組件中創建基於柵格系統的網格布局。

二、Bootstrap Container的定寬式布局

Bootstrap Container默認的布局形式是定寬式布局，這意味着Container的寬度是基於屏幕寬度的一定百分比。針對不同的屏幕尺寸設置不同的定寬寬度，從而實現響應式設計。比如Bootstrap默認的Container寬度是1170px，如果屏幕寬度小於1170px，Container的寬度會隨之縮小，以適應不同的屏幕尺寸。下面是Bootstrap Container定寬布局示例代碼：

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <!-- 左側布局 -->
        </div>
        <div class="col-md-4">
            <!-- 中間布局 -->
        </div>
        <div class="col-md-4">
            <!-- 右側布局 -->
        </div>
    </div>
</div>

三、Bootstrap Container的全屏式布局

Bootstrap Container還提供了一種全屏式布局，這種布局和定寬式布局相反，它的寬度是與屏幕寬度保持相同的百分比。全屏式布局可以使你的網站在大屏幕上呈現更為優美的視覺效果。下面是Bootstrap Container全屏布局示例代碼：

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <!-- 左側布局 -->
        </div>
        <div class="col-md-4">
            <!-- 中間布局 -->
        </div>
        <div class="col-md-4">
            <!-- 右側布局 -->
        </div>
    </div>
</div>

四、Bootstrap Container使網站響應式

Bootstrap Container是一個非常重要的組件，它為網站布局提供了極大的靈活性。通過合理的應用Bootstrap Container可以使網站具有豐富多彩的布局效果和響應式體驗。下面介紹幾種應用Bootstrap Container實現響應式設計的方式：

1、使用響應式圖片

隨着移動設備的普及，對於網站中的圖片進行響應式設計變得越來越重要。通過使用Bootstrap Container組件，可以輕鬆實現響應式圖片的設計。下面是使用Bootstrap Container實現響應式圖片的代碼示例：

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <img src="img1.jpg" class="img-responsive">
        </div>
        <div class="col-md-6">
            <img src="img2.jpg" class="img-responsive">
        </div>
    </div>
</div>

2、使用柵格系統進行響應式布局

Bootstrap Container內置了靈活的柵格系統，可以幫助開發者輕鬆實現響應式布局。通過使用柵格系統，開發者可以快速創建布局要求不同的網頁。下面是使用柵格系統進行響應式布局的代碼示例：

<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-6">
            <p>模塊1</p>
        </div>
        <div class="col-md-3 col-sm-6">
            <p>模塊2</p>
        </div>
        <div class="col-md-3 col-sm-6">
            <p>模塊3</p>
        </div>
        <div class="col-md-3 col-sm-6">
            <p>模塊4</p>
        </div>
    </div>
</div>

3、使用Bootstrap 插件進行響應式設計

Bootstrap框架內置了豐富的插件，這些插件可以幫助開發者實現豐富的UI和交互效果。使用這些插件可以輕鬆實現網站的響應式設計。下面是使用Bootstrap插件實現響應式設計的代碼示例：

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <p>這裡是容器內容</p>
        </div>
        <div class="col-md-4">
            <p>這裡是側邊欄內容</p>
        </div>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function(){
    $('.container').affix({
        offset: {
            top: 100,
            bottom: function () {
                return (this.bottom = $('footer').outerHeight(true))
            }
        }
    }); 
});
</script>