bootstrap 架构知识点

.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	显示	显示	隐藏