代码改变世界

bootstrap 架构知识点

2014-08-19 19:04  @疯狂的迈步  阅读(463)  评论(0编辑  收藏  举报

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