bootstrap入门教程(零基础)【精品教程系列】.pdfVIP

Bootstrap 是目前很火的一款 UI 框架，是基于 HTML 、CSS、JavaScript 的，代码简洁灵活，能够使 Web 开发更加的快捷。但若没有找到门道，是很 难快速的应用于项目开发中的。 1. bootstrap 如何使用 2. 下载依赖包 /bootstrap/3.3.7/css/bootstrap.min.css /libs/jquery/2.1.1/jquery.min.js /bootstrap/3.3.7/js/bootstrap.min.js /getting-started/ 进入下载用于生产环境的 Bootstrap 包 引入 css 和 js 文件。 2. Bootstrap 栅格化 让我们最头疼的就是页面全部写完了， 却发现换个浏览器就不支持， 这就体 现了栅格系统的重要性，它能够让你的布局在各个浏览器中都能适应。接下来， 我们介绍一下栅格的用法。 栅格布局通常有四个样式： col-lg-* ：大型设备 col-md-* ：中型设备 col-sm-* ：小型设备 col-xs-* ：极小型设备 如果想要使用栅格系统，必须按照以下方式定义： 所有的栅格一定要建立在容器之中 （“container ”或者 “container-fluid ”） 1、每一行都具备 12 栅格划分，所以在使用栅格的组件里面使用“ .row ” 样式 2 、每一列都是行的子元素，所有内容应该放到列的内部 3 、每一列都可以使用 col-lg-* ，col-md-* ，col-sm-* ，col-xs-* 样式 为 了更好的理解，下面实现一个简单的栅格操作： 在此基础上，我们再来介绍一下使用列偏移 嵌套列 列排序： 列偏移： .col-lg/md/sm/xs-offset-* （通过使用 * 选择器为当前元素增加 了左侧的边距） eg: 将 .col-md-4 元素向右侧偏移 4 个列（ column ）的宽度： 嵌套列：使用内置的栅格系统将内容再次嵌套 列排序：使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变 列的顺序。 3.Bootstrap 各个组件的介绍与使用 面板（ Panels ） 面板：需要向 div 元素添加 class .panel 和 class .panel-default 即 可，也可设置带有色彩的面板， 只需将 panel-default 替换 （panel-primary 、 panel-success 、panel-info 、panel-warning 、panel-danger ）即可。 面板标题容器： （向面板添加标题容器 .panel-heading ）。 面板标题：用带有 .panel-title class 的 h1-h6 来添加预定义样式 的标题。 面板脚注： 添加 class.panel-footer 如下面的实例所示： 以上就是为大家介绍的 Bootstrap 入门教程，如果还有什么不清楚的可以 来 Enhancer 平台咨询或交流有专人为您解答的哦！ Enhancer 是杭州无远信息技术有限公司倾力打造的系统开发平台（ PaaS）。 该平台积累了复旦大学软件工程实验室十余年软件开发理论研究和实战探索之 经验， 将软件产品线、大规模组件复用等相关理论付诸实践，已在业界取得丰 硕的成果。经过线下多