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>
零、基础BOX模型
任何一个html元素都可以看作一个盒子模型，盒子模型包括一下几个属性样式: margin - 外边框 (没有颜色,没有宽度) border - 内边框 padding - 内边框 content - 内容（通常height/weight是指这个）
border-style: dashed/solid/double/groove 上｜右｜底｜左
border-width: 2px 宽度
border-color: #98bf21
一、栅格系统
- 提供了一个带有网格系统、链接样式、背景的基本结构
- 根据屏幕或视口(viewport)，系统会自动分为最多12列
- 使用行(row)与列(col-xs-4)的组合来创建页面布局
div.container ~> 固定宽度 div.container-fluid ~> 全部宽度
div.row style="margin-bottom:5px" ...定义一行(间距)...
div.col-xs-4 ...定义一列...
.col-md-offset-3 ==> 列按原位置标准, 左外边距增加
.col-md-push-3 ==> 列按原位置标准, 向右推数量后开始渲染
.col-md-pull-3 ==> 列按原位置标准, 向左拉数量后开始渲染
style="padding:30px" ==> 列高定义,不推荐
style="margin-left:5px;margin-right:5px: ==> 列间距定义
二、页面顶端提示语
div.jumbotron ...页头(设置了背景色和边框)
div.page-header ... 页头(无背景色,无边框)
all:style="height: 180px" ==> 高度可定义,不推荐
有点类似以上功能
三、排版相关的设置
- h1 ... h6 提供了6中标题样式
提供标题类效果 class="h1..h6", 可以用于span/div/label
<small> 可以设置副标题 </small>
- 内嵌文字样式
<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>
- 文字相关
可以用于{span/div/label}.lead ==> 让段落突出显示, 相对字体略大
p."lead text-left"> Left aligned text.靠左对齐 </p> <hr>
p."lead text-right"> Right aligned text. 靠右对齐 </p> <hr>
p."lead text-center"> Center aligned text. 位于中间 </p> <hr>
p."lead text-justify">J ustified text.自动换行 </p> <hr>
p."lead text-nowrap"> No wrap text.不换行 </p> <hr>
span."lead text-lowercase">LOWERcased text.改小写</span> <hr>
span."lead text-uppercase">UPPERcased text.改大写</span> <hr>
span."lead text-capitalize">CapitaliZED TEXT.改首字母</span> <hr>
div."lead text-muted"> 主要为浅灰色主题 muted class</div>
div."lead text-primary"> 主要为浅蓝色 primary class</div>
div."lead text-success"> 主要为浅绿色 success class</div>
div."lead text-info"> 主要为深蓝色 info class</div>
div."lead text-warning"> 主要为浅棕色 warning class</div>
div."lead text-danger"> 主要为深红色 danger class</div>
- 列表相关
列表分为有序列表、无序列表和自定义列表；也是菜单导航的实现机制
<ol><li>...有序列表元素...</li></ol>
<ul><li>...无序列表元素...</li></ul>
.list-unstyled ==> 删除列表默认自带的样式
.list-inline ==> 列表位于一行
.dl-horizontal ==> 专业用语自定义列表, 行内显示
<dl class="dl-horizontal">
<dt>..列表描述..</dt><dd> ..列表内容..</dd>
</dl>
5). 表格相关
标签: <table> => <thead> + <tbody> | <tr> => <th> / <td>
应该被包裹在：<div class="table-responsive"> ... </div> 内 table样式类：style="width: 500px" 可以设置表格宽度 ++<caption> 表格提示语 </caption>++
> table.table 必带的基本样式: 少量的内补（padding）和水平方向的分隔线
> table.table-striped ==> 行内增加斑马线
> table.table-bordered ==> 显示表格边框
> table-hover ==> 启用鼠标悬停
> table.table-condensend ==> 表格紧凑型
> tr.active/td.active ==> 设置'行‘背景深灰色
> tr.success/td.success ==> 设置'行'为背景为成功绿色
> tr.info/td.info ==> 设置'行'为背景为通知蓝色
> tr.warning/td.warning ==> 设置'行'为背景为警告黄色
> tr.danger/td.danger ==> 设置'行'为背景为危险红色
letter-spacing/line-height/text-shadow/text-transform
6). 设置链接
链接在单击访问前后，可有不同的样式
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
