bootstrap响应式布局注意

  1. 核心-栅格化布局
    1.1.“行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
/* 超小屏幕(手机,小于 768px) */
/* 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的(还记得 Bootstrap 是移动设备优先的吗?) */

/* 小屏幕(平板,大于等于 768px) */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕(桌面显示器,大于等于 992px) */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕(大桌面显示器,大于等于 1200px) */
@media (min-width: @screen-lg-min) { ... }

1.3.栅格参数
bootstrap响应式布局注意_第1张图片
都是以12列为最大列数,如果row下的两个标签最终的数字加和大于12,就会将第二个标签排列到下一行

  1. bootstrap组件
    bootstrap高度组件化,使用时尽量不要重新开发

你可能感兴趣的:(响应式布局)