Bootstrap 是一个非常好的前端框架，我发现即使对于初学者来说它也很容易使用，因为小型前端项目需要使用Bootstrap 作为前端。
1.什么是引导？
Twitter的Bootstrap是目前最流行的前端框架。 Bootstrap 基于HTML、CSS 和JAVASCRIPT，简单、灵活，可加快Web 开发速度。同时，Bootstrap 也是用于开发响应式、布局和移动优先Web 项目的最流行的HTML、CSS 和JS 框架。作为一个框架，它支持jQuery EasyUI、WeUI等前端开发。总之，Bootstrap让前端开发变得简单高效。
笔记：
1. jQuery EasyUI：jQuery EasyUI 是一个基于jQuery 的框架，集成了各种用户界面插件。
2、WeUI：WeUI是一个匹配微信原生视觉体验的基础样式库，是微信官方设计团队针对微信网页开发而设计的，让用户的使用感知更加统一。包含各种元素，例如按钮、单元格、对话框、toast、文章、图标等。
2. 开始引导
使用Bootstrap 框架需要HTML、CSS 和JavaScript 的基本知识。如果你还没有掌握，可以在新手教程中学习。
2.1 环境配置
Bootstrap有两种使用方式：本地调用和网络调用。
对于本地调用，需要从网上下载Bootstrap for Production（下载地址：http://v3.bootcss.com/getting-started）。
下载完成后，解压文件并得到下图所示的三个文件夹。这三个文件夹分别包含样式文件、字体文件和js脚本文件。
网络调用只能使用BootCDN提供的免费CDN加速服务。只需在您的网页文件中包含以下链接：
!-- Bootstrap 核心CSS 文件的最新版本--
链接Rel='样式表' Href='3359cdn.bootCss.com/Bootstrap/3.3.7/CSS/Bootstrap.min.css' 完整性=BVYIISISISISIFEK1DGMJR Akycuhahrg32omucww7on3rydg4va+pmstsz/K68vdejh4u'crossorigin='anonymous'
!-- 可选的Bootstrap 主题文件（通常不需要）--
链接rel='stylesheet'href='https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css'integrity='sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp'crossorigin=我们的
!-- 最新的Bootstrap 核心JavaScript 文件--
脚本src='https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js'integrity='sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa'crossorigin='anonymous'/script
2.2 理解引导
2.2.1 Bootstrap是一个HTML5文档
Bootstrap 使用的某些HTML 元素和CSS 属性要求将页面设置为HTML5 文档类型。项目中的所有页面必须按照以下格式设置格式：
!DOCTYPE html lang='zh-CN' . /html
2.2.2 移动设备优先
Bootstrap 3 适合移动设备。它直接集成到框架的核心中，而不是仅仅为移动设备添加可选样式。也就是说，Bootstrap 是移动优先的。移动设备特定的样式被集成到框架的每个角落，而不是添加额外的文件。
为了确保正确的绘图和触摸缩放，必须将视口元数据标签添加到.
元名称='视口'内容='宽度=设备宽度，初始比例=1'
在移动浏览器上，可以通过将viewport 元属性设置为user-scalable=no 来禁用缩放。禁用缩放功能将只允许用户滚动屏幕，使您的网站看起来更像本机应用程序。不建议所有网站使用此方法，具体取决于您的具体情况。
元名称='视口'内容='宽度=设备宽度，初始比例=1，最大比例=1，用户可缩放=否'
2.2.3 网格系统
Bootstrap 提供了一个响应式、移动优先的流体网格系统，随着屏幕或视口尺寸的增加，该系统会自动分为最多12 列。它包括易于使用的预定义类和强大的mixin，以生成更多语义布局。
网格系统用于通过一系列行和列创建页面布局，您可以将内容排列到这些布局中。在这里我们将向您展示Bootstrap 网格系统是如何工作的。
“row”必须包含在.container （固定宽度）或.container-fluid (100%) 内
宽度）以进行正确的对齐和填充。
通过“行”水平创建“列”的集合。
内容必须放置在“列”内，并且只有“列”可以是“行”的直接子元素。
您可以使用预定义的类（例如.row 和.col-xs-4）快速创建网格布局。您还可以使用Bootstrap 源代码中定义的mixins 创建语义布局。
通过设置列填充属性在列之间创建空白。通过为.row 元素设置负值
因此，边距会偏移.container 元素上设置的边距。
填充。间接偏移“行”中包含的“列”的填充。
下面的示例看起来是在外面，因为边距为负。网格列的内容已排列。
网格系统中的列通过指定1 到12 之间的值来表示范围。例如，您可以使用三个.col-xs-4 创建三个等宽列。
如果行包含超过12 个列，则多余的列元素将一起放置在单独的行中。
网格类在屏幕宽度等于或大于断点大小的设备上可用，并且在屏幕较小的设备上被覆盖。 因此，应用
.col-md-* 网格类适用于屏幕宽度大于或等于断点大小的设备，并覆盖小屏幕设备的网格类。 因此，应用
.col-lg-* 不存在并且也会影响大屏幕设备。
您可以通过研究下面的示例将这些原则应用到您的代码中。
下图将帮助您了解Bootstrap 的网格系统。
3. 在线学习推荐网站
Bootstrap V3版本官网：http://v3.bootcss.com
菜鸟教程Bootstrap专栏：http://www.runoob.com/bootstrap/bootstrap-tutorial.html
腾讯课堂：http://ke.qq.com
慕课：http://www.imooc.com
版权声明：本文转载于网络，版权归作者所有。如有侵权，请联系本站编辑删除。