最近在接触对移动浏览器很友好的bootstrap,遂整理了一点笔记:
简单的html页面:
<!DOCTYPE html><html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn‘t work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap‘s JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
</body></html>
Bootstrap依赖于jquery,所有的javascript插件都依赖已jquery。
解压后的目录结构:
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff
1.为了确保适当的绘制和触屏缩放,需要在<head>之中添加viewport元数据标签。
<meta name=’viewport’ content=’width=device-width, initial-scale=1.0’>
2.在移动设备浏览器上通过为viewport meta 标签添加 user-scalable=no禁用其缩放功能。
3.响应式图片:通过添加 .img-responsive class可以让图片对响应式布局的支持更友好,其实质是为图片赋予了max-width:100%;和height:auto;属性,可以让图片按比例缩放,不超过其父元素的尺寸。
4.Containers
用.containers包裹页面上的内容即可实现居中对齐。注意,由于设置了padding和固定宽度,.containers不能嵌套。
栅格系统:
Bootstrap内置了一套响应式,移动设备优先的流式栅格系统,随着屏幕设备或视口viewport尺寸的增加,系统会自动分为最多12列,它包含了易于使用的预定义classe,还有强大的mixin用于生成更具语义的布局。
- “行(row)”必须包含在.container中,以便为其赋予合适的排列(aligment)和内补(padding)。
- 使用“行(row)”在水平方向创建一组“列(column)”。
- 你的内容应当放置于“列(column)”内,而且,只有“列(column)”可以作为行(row)”的直接子元素。
- 类似Predefined grid classes like .row and .col-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
- 通过设置padding从而创建“列(column)”之间的间隔(gutter)。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。
- 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个.col-xs-4来创建
!!!注意:栅格与全宽布局Grids and full-width layouts
对于需要占据整个浏览器视口的页面,需要将内容区域包裹在一个容器的元素内,并且赋予padding: 0 15px ;为的是抵消为.row 所设置的 margin:0 -15px;(如果不这样的话,页面会左右超出视口15px,压面底部出项横向滚动条。)
:未完待续