Bootstrap为简洁、直观、强悍、移动设备优先的前端开发框架,让web开发更迅速、简单，而我们使用过程中也会有需要注意的地方，那么今天我们就来聊一聊吧
使用前提（移动端优先）
-
Bootstrap要求设置html5
doctype。如果没有这个设置，相信就会看到一些奇怪、不完整的样式，但是只要添加这个设置就不会出现任何错误了 -
bootstrop本着移动设备优先的策略开发的，按照这一个策略。我们优先为移动设备优化代码。为了确保在所有设备上能够正确渲染并支持触控缩放。必须将设置
viewport属性的meta标签添加到<head>标签上<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> -
Bootstrap是基于
border-box为盒模型基准尺寸，即box-sizing属性为border-box，意思是为元素指定的宽和高等于内容+内边距+边框的大小（房屋面积含墙体），所以增加内边距会使内容尺寸变小。 -
若要做成响应式的网页，千万不要让你的块级元素有固定的较大宽度，或者元素的内外边距有固定的较大宽度，否则在移动设备上 会有页边出现，或者有元素溢出。
布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于padding 等属性的原因，这两种 容器类不能互相嵌套。
-
.container类用于固定宽度并支持响应式布局容器 -
.container-fulid类用于100% 宽度，占据全部视口（viewport）的容器
栅格系统
- 一定要把行和列包裹在
.container中，如果不包裹，行会占据整个body，而container是固定宽度1170px； - 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素
- 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
- 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
表单
- 单独的表单控件会被自动赋予一些全局样式。所有设置了 .
form-control类的<input>、<textarea>和<select>元素都将被默认设置宽度属性为width: 100%;。 将label元素和前面提到的控件包裹在.form-group中可以获得最好的排列。
建议：不要将表单组合输入框组混合使用，可以将输入框潜逃到表单中使用。 - 为
<form>元素添加.form-inline类可使其内容左对齐并且表现为inline-block级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）；因此可能需要手动设置宽度，
（输入框和单选/多选框控件默认被设置为width: 100%; 宽度。在内联表单，我们将这些元素的宽度设置为width: auto;，因此，多个控件可以排列在同一行。根据你的布局需求，可能需要一些额外的定制化组件。）
图片
Bootstrap 提供了img-responsive类可以让图片支持响应式布局，其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。
.center-block 类的放置位置。一定要放在<img>标签中，如果放在外层，则不能实现居中。例如，下边的代码则不能实现图片居中。
<div class="center-block"><img class="img-responsive" src="..." /></div>
如果图片没有添加响应式类.img-responsive，那么我们也可以使用.text-center来实现图片居中对齐：
<div class="center-block"><img class="img-responsive" src="..." /></div>
网友评论