溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了bootstrap中的布局方式有哪些的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇bootstrap中的布局方式有哪些文章都會有所收獲，下面我們一起來看看吧。
bootstrap有2種布局方式：1、固定寬度的布局，將默認柵格放到“class="container"”的容器中，即可創建該布局；2、流式布局，將流式柵格放到“class="container-fluid"”的流式容器中，即可創建該布局。
本教程操作環境：Windows7系統、bootsrap3.3.7版、DELL G3電腦
Bootstrap布局
Bootstrap提供了兩種類型的布局容器，一種是固定寬度的布局容器，一種是流式布局容器。將柵格放在某種容器中，即可實現相應的布局。
固定布局
將Bootstrap的默認柵格放到 class="container" 的容器中，即可創建固定寬度的布局。固定布局在整個頁面上居中顯示。如：
<body> <div class="container"> ... </div> </body>
效果如下圖所示（Bootstrap固定布局容器）：
簡單的講，就是將內容統統放到 class="container" 的容器中，即可創建居中、固定寬度的布局。具體實例如下：
<body> <div class="container"> <div class="row"> <div class="span4">span4</div> <div class="span8">span8</div> </div> <div class="row"> <div class="span3">span3</div> <div class="span6">span6</div> <div class="span3">span3</div> </div> </div> </body>
布局效果如下圖所示（Bootstrap固定布局實例）：
流式布局
同理，將Bootstrap的流式柵格放到 class="container-?uid" 的流式容器中，即可創建流式布局。流式布局將填滿整個視口寬度。如：
<div class="container-fluid"> <div class="row-fluid"> <div class="span2"> <!--Sidebar content--> </div> <div class="span10"> <!--Body content--> </div> </div> </div>
布局效果如下圖所示（Bootstrap流式布局）：
關于“bootstrap中的布局方式有哪些”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“bootstrap中的布局方式有哪些”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
