[TOC] ## 布局容器 固定寬度 ``` container { width: 970px; } <div class="container"></div> ``` 100% 寬度 ``` <div class="container-fluid"> </div> ``` ## 柵格系統 - `col-*`本質是左浮動與 with:x%組成,不成屏幕大小使用不同的媒體查詢 - `row`是清楚浮動 ``` <div class="container-fluid"> <div class="row"> <!-- 通過設置padding-left設置列內的相對位置--> <div class="col-md-3" style="background-color: #8b3e3e;padding-left: 10px">1</div> <div class="col-md-3" style="background-color: #4673b8;">1</div> <div class="col-md-3" style="background-color: #88ff00;">1</div> <div class="col-md-3" style="background-color: #5f6276;">1</div> </div> </div> ``` ## 媒體查詢 ``` /* 小屏幕（平板，大于等于 768px） */ @media (min-width: @screen-sm-min) { ... } /* 中等屏幕（桌面顯示器，大于等于 992px） */ @media (min-width: @screen-md-min) { ... } /* 大屏幕（大桌面顯示器，大于等于 1200px） */ @media (min-width: @screen-lg-min) { ... } ```