? ###容器
????????????1.流體容器
????????????2.固定容器
????閾值 width
????????大于等于1200(lg 大屏pc)? ? ? 1170（1140+槽寬）
????????大于等于992(md 中屏pc) 970（940+槽寬）
????????小于1200
????????大于等于768(sm 平板) 750（720+槽寬）
????????小于992
????????小于768(xs 移動手機) auto
3.柵格系統(tǒng)
###柵格源碼分析
????????1.流體容器&固定容器 公共樣式
? ????????????????????margin-right: auto;
????????????????????? margin-left: auto;
? ? ? ? ? ? ? ? ? ? ? padding-left:? 15px;
????????????????????? padding-right: 15px;
????????2.固定容器 特定樣式
????????????順序不可變
????????????????????? @media (min-width: @screen-sm-min) {
? ? ????????????????????width: @container-sm;
? ? ? ? ? ? ? ? ? ? ? ? }
? ????????????????????@media (min-width: @screen-md-min) {
? ? ? ? ? ? ? ? ? ? ? ? width: @container-md;
? ? ? ? ? ? ? ? ? ? ? ? }
? ????????????????????@media (min-width: @screen-lg-min) {
? ? ????????????????????width: @container-lg;
? ? ? ? ? ? ? ? ? ? ? ? }
????????3.行
????????????????????????margin-left:? -15px;
? ? ? ? ? ? ? ? ? ? ? ? margin-right: -15px;
????????4.列
????????????????????.make-grid-columns()--->
????????????????????.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
? ? ? ? ????????????.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
? ? ? ? ????????????????...
? ? ? ? ????????????.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{
? ? ? ? ? ????????????position: relative;
? ? ? ? ? ????????????min-height: 1px;
? ? ? ? ? ????????????padding-left: 15px;
? ? ? ? ? ? ? ? ? ? ? padding-right: 15px;
? ? ? ? ????????????}
????????????????????.make-grid(xs)--->
? ? ? ? ? ? ? ? ? ? float-grid-columns(@class);
????????????????????* .col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,...col-xs-12{
????????????????????*? ? float: left;
????????????????????* }
? ????????????????????.loop-grid-columns(@grid-columns, @class, width);
? ???????????????? * .col-xs-12{
????????????????????*? ? width:12/12;
????????????????????* }
????????????????????* .col-xs-11{
????????????????????*? ? width:11/12;
????????????????????* }
????????????????????* ...
????????????????????* .col-xs-1{
????????????????????*? ? width:1/12;
????????????????????* }
? ????????????????????.loop-grid-columns(@grid-columns, @class, pull);
? ????????????????????.loop-grid-columns(@grid-columns, @class, push);
? ? ? ? ? ? ? ? ? ? ? *push? ? ? ? ? ? ? ? ? pull:
????????????????????????* .col-xs-push-12{? ? ? ? .col-xs-pull-12{? ? ?
????????????????????????*? ? left:12/12;? ? ? ? ? ? ? right:12/12;
????????????????????????* }? ? ? ? ? ? ? ? ? ? ? ? }
????????????????????????* .col-xs-push-11{
????????????????????????*? ? left:11/12;
????????????????????????* }
????????????????????????* ...? ? ? ? ? ? ? ? ? ? ? ...
????????????????????????* .col-xs-push-1{
????????????????????????*? ? left:1/12;
????????????????????????* }
????????????????????????* .col-xs-push-0{? ? ? ? ? .col-xs-pull-0{
????????????????????????*? ? left:auto;? ? ? ? ? ? ? right:auto;
????????????????????????* }? ? ? ? ? ? ? ? ? ? ? ? }
? ????????????????????????.loop-grid-columns(@grid-columns, @class, offset);
????????###響應式工具
? ? ? ?????###柵格盒模型設計的精妙之處
????????????????????????容器兩邊具有15px的padding 胸梆、
????????????????????????行? ? 兩邊具有-15px的margin
????????????????????????列? ? 兩邊具有15px的padding
????????????????????為了維護槽寬的規(guī)則俩由，
????????????????????????列兩邊必須得要15px的padding
????????????????????????????為了能使列嵌套行
????????????????????????????????行兩邊必須要有-15px的margin
????????????????????????????????????為了讓容器可以包裹住行
????????????????????????????????????????容器兩邊必須要有15px的padding
