您的位置：首页 > Web前端 > BootStrap

bootstrap 注意点

2015-08-07 13:38 681 查看


1、HTML 5 文档类型（Doctype）

<!DOCTYPE html>
<html>
....
</html>


2、移动设备优先

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no">


3、响应式图像

<img src="..." class="img-responsive" alt="响应式图像">


通过添加 img-responsive class 可以让 Bootstrap 3 中的图像对响应式布局的支持更友好。

接下来让我们看下这个 class 包含了哪些 css 属性。

在下面的代码中，可以看到img-responsive class 为图像赋予了 max-width: 100%; 和 height: auto; 属性，可以让图像按比例缩放，不超过其父元素的尺寸。
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
}


设置 height:auto，相关元素的高度取决于浏览器。

设置 max-width 为 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。



4、容器（Container）

<div class="container">
...
</div>


5、Bootstrap 网格系统（Grid System）的工作原理

行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
使用行来创建列的水平组。
内容应该放置在列内，且唯有列可以是行的直接子元素。

a035
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航