ComTechnology - 前端 - Bootstrap
Bootstrap
前端万变，不离原生H4/H5/CSS/JS
Bootstrap 教程
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
Bootstrap 基本结构
Bootstrap CSS
Bootstrap 布局组件
Bootstrap 插件几个部分
1.What is Bootstrap？
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的
Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品
移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持：所有的主流浏览器都支持 Bootstrap。
Internet Explorer/Firefox/Opera/Google Chrome/Safari
容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
响应式设计
它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件，易于定制。
它还提供了基于 Web 的定制。
它是开源的。
Bootstrap 包的内容
基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。
定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本
2.Bootstrap CSS 概览
HTML 5 文档类型（Doctype）
Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，您需要使用 HTML5 文档类型（Doctype）
3.Bootstrap 网格系统
本章节我们将讲解 Bootstrap 的网格系统（Grid System）
什么是网格（Grid）？
摘自维基百科：
在平面设计中，网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。
它广泛应用于打印设计中的设计布局和内容结构。
在网页设计中，它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法。
网格直线（垂直的、水平的）组成的二维结构；
网格用于布局数据列；
什么是 Bootstrap 网格系统（Grid System）？
Bootstrap 官方文档中有关网格系统的描述：
Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。
4.Bootstrap 排版
Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。 -字体类型
使用 Bootstrap 的排版特性，您可以创建标题、段落、列表及其他内联元素
缩写
HTML元素提供了用于缩写的标记，比如 WWW 或 HTTP。Bootstrap 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 <abbr> title 属性添加了文本）。为了得到一个更小字体的文本，请添加 .initialism 到 <abbr>
5.Bootstrap 表格
6.表单
向父 <form> 元素添加 role="form"。
把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control
<div class="form-group">
<label for>
</div>
7.按钮
按钮标签
您可以在 <a>、<button> 或 <input> 元素上使用按钮 class。但是建议您在 <button> 元素上使用按钮 class，避免跨浏览器的不一致性问题
8.图片-.class
.img-rounded 为图片添加圆角 IE9以上
.img-circle 将图片变为圆形 IE9以上
.img-thumbnail 缩略图功能 尝试一下
.img-responsive 图片响应式 (将很好地扩展到父元素)
9.字体图标
什么是字体图标？
字体图标是在 Web 项目中使用的图标字体。虽然，Glyphicons Halflings 需要商业许可，但是您可以通过基于项目的 Bootstrap 来免费使用这些图标。
为了表示对图标作者的感谢，希望您在使用时加上 GLYPHICONS 网站的链接
10.下拉菜单
11.按钮组
12.按钮下拉菜单
13.导航元素
胶囊式的导航菜单
垂直的胶囊式导航菜单
两端对齐的导航
禁用链接
13.导航栏
组合式
14.分页
页脚排序
翻页动作
15.警告
16.进度条
17.Bootstrap 多媒体对象（Media Object）
Bootstrap 中的多媒体对象（Media Object）。这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排
18.插件
--参考文档
https://www.w3cschool.cn/