.col-md-pull-2 向右相对定位偏移量
.col-md-push-2 向左相对定位偏移量
.pull-left 左浮动
.pull-right 右浮动
改变大小写
通过这几个类可以改变文本的大小写。
<p class="text-lowercase">Lowercased text.</p>//转成小写
<p class="text-uppercase">Uppercased text.</p>//转成大写
<p class="text-capitalize">Capitalized text.</p>//文本中的每个单词以大写字母开头。
IE兼容模式
Bootstrap 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下，建议将此 标签加入到你的页面中：<meta http-equiv="X-UA-Compatible" content="IE=edge">
/* 大屏幕 */
@media (min-width: 1200px) { ... }
/* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* 横向放置的手机和竖向放置的平板之间的分辨率 */
@media (max-width: 767px) { ... }
/* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 480px) { ... }
响应式布局辅助class
为了更快的针对移动设备做开发, 下面列出的辅助class用于针对不同设备显示和隐藏内容。下表是可用的class列表, 以及它们在各个media query布局下的效果。这些class可以在 responsive.less 文件中找到。
IE兼容模式
Bootstrap 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下，建议将此 标签加入到你的页面中：
|
1 |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|
1 2 3 4 5 6 7 8 9 10 11 |
/* 大屏幕 */ @media (min-width: 1200px) { ... } /* 平板电脑和小屏电脑之间的分辨率 */ @media (min-width: 768px) and (max-width: 979px) { ... } /* 横向放置的手机和竖向放置的平板之间的分辨率 */ @media (max-width: 767px) { ... } /* 横向放置的手机及分辨率更小的设备 */ @media (max-width: 480px) { ... } |
响应式布局辅助class
为了更快的针对移动设备做开发, 下面列出的辅助class用于针对不同设备显示和隐藏内容。下表是可用的class列表, 以及它们在各个media query布局下的效果。这些class可以在 responsive.less 文件中找到。
| Class | 手机 767px 及以下 | 平板 979px 到 768px | 电脑 默认 |
|---|---|---|---|
| .visible-phone | 显示 | 隐藏 | 隐藏 |
| .visible-tablet | 隐藏 | 显示 | 隐藏 |
| .visible-desktop | 隐藏 | 隐藏 | 显示 |
| .hidden-phone | 隐藏 | 显示 | 显示 |
| .hidden-tablet | 显示 | 隐藏 | 显示 |
| .hidden-desktop | 显示 | 显示 | 隐藏 |
bootstrap 架构知识点