首页 > 代码库 > 浅析响应式网站布局Bootstrap
浅析响应式网站布局Bootstrap
bootstrap是一款依赖于jquery开发的一款响应式网页布局的插件，可以针对不同的屏幕尺寸调整你的页面，使其在个尺寸屏幕上表现良好。
从bootstrap官方网站来看，bootstrap主要有下面几部分组成：
CSS——Bootstrap为我们预实现了很多CSS样式。包括一些图片以及网站的响应式布局。
组件——Bootstrap为我们预实现了很多CSS组件。如下拉框、按钮组、导航等。也就是说Bootstrap内容帮我们定义好了很多CSS样式，你可以将这些样式直接应用到之前的下拉框等元素里。
JavaScript插件——Bootstrap也为我们实现了一些JS插件，我们可以用其提供的插件要完成一些常用功能，而不需要我们再重新写JS代码来实现像提示框，模态窗口这样的效果了。
想要实现网站的响应式，最重要的原理就是css中的栅格系统。
栅格系统用于通过一系列的行（row）与列（column）的组合创建页面布局，你的内容就可以放入创建好的布局中。下面就介绍以下Bootstrap栅格系统的工作原理：
- “行（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来创建。
浅析响应式网站布局Bootstrap
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。