Html、Css、JavaScript是前端程序员必懂的基础知识；
但是只使用这些基础知识，80%的工程师不能做出任何项目，如果能，那你一定是大神
作为后端有必要记录一下依赖这三种语言的流行UI框架 ———— bootstrap！
后面，我也会适当更新一些，当前更流行的JavaScript UI框架 ———— iView！
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的WEB项目.
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库.
这么看上Bootstrap是包含多种代码于一体的框架，而jQuery完全封装了js的原生API；
Bootstrap依赖jQuery库（多说句:Prototype是早期的Rails支持Ajax所采用的js库)
安装Bootstrap非常简单，可以支持 bower npm yarn 甚至是源码下载
使用yarn/npm安装包括: disk发布目录，less实现目录，以及字体文件和js下的插件
require('bootstrap')代码的作用是加载所有jQuery插件到jQuery对象上
bootstrap 模块自身并不导出任何内容
可以通过加载安装包顶级目录下的js/*.js 文件的方式手动加载单个插件
一个普通的html文件如何使用bootstrap呢？
1、文档使用英文:
<html lang="en"> ... </html>
2、head标签应该包含一下元素：
<meta name="viewport" content="width=device-width, initial-scale=1">
3、基础布局栅格.container类用于固定宽度并支持响应式布局的容器
<div class="container"> ... </div>
任何一个html元素都可以看作一个盒子模型，盒子模型包括一下几个属性样式:
margin - 外边框 (没有颜色,没有宽度)
border - 内边框
padding - 内边框
content - 内容（通常height/weight是指这个）
提供了一个带有网格系统、链接样式、背景的基本结构
根据屏幕或视口(viewport)，系统会自动分为最多12列
使用行(row)与列(col-xs-4)的组合来创建页面布局
1) h1 ... h6 提供了6中标题样式
提供标题类效果 class="h1..h6", 可以用于span/div/label
<small> 可以设置副标题 </small>
2) 内嵌文字样式
<u> 下划线 </u> <strong> 加粗</strong>
<s> 中划线 </s> 和 <del> 相同效果 </del>
<em> 文字斜体 </em>
滚动条: <pre class="pre-scrollable">
<code> 代码着色
Dir.entries('/data').each {|d| puts d}
os.listdir('/data')
</code>
3) 文字相关
可以用于{span/div/label}.lead ==> 让段落突出显示, 相对字体略大
4) 列表相关
列表分为有序列表、无序列表和自定义列表；也是菜单导航的实现机制
5). 表格相关
标签: <table> => <thead> + <tbody> | <tr> => <th> / <td>
应该被包裹在：<div class="table-responsive"> ... </div> 内
table样式类：style="width: 500px" 可以设置表格宽度
++<caption> 表格提示语 </caption>++
6). 设置链接
链接在单击访问前后，可有不同的样式
![自定义时间选择器-前端组件预览效果[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)