Bootstrap

Bootstrap框架

Bootstrap框架：UI组件库：提供了HTML/CSS/JS - 类似于jQueryUI
Bootstrap文档：v3.bootcss.com/
Bootstrap：简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

Bootstrap组成

Bootstrap由5部分组成：

入门 - 下载
全局css样式
组件
js插件
定制

Bootstrap使用

使用bootstrap一定要记得引入：

    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
    <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

Bootstrap全局css样式

全局css样式：分为了2个部分

提供了css reset - 如果你引入了bootstrap.css，不需要自己去重置样式
提供了大概1000+的class - class带有样式

分类：

按钮：

有用的：
- btn btn-default;//白底黑字的按钮
- btn-block;//块级按钮
没用的：
- 五种颜色（btn-danger/warning/success/info/primary）
- 四种大小(lg/md/sm/xs)
图片：

有用的：
- img-rounded; - border-radius: 6px;
- img-circle; - border-radius: 50%;（这两个class不是只有图片能用）
没用的：缩略图：img-thumbnail;
文本：

有用的：文本对齐方式：text-right/center/justify

没用的：
- 五种文字颜色（text-颜色）
- 五种背景颜色（bg-颜色）
表格
- table - 长得像个表格
- table-striped - 隔行变色
- table-hover - 带有悬停效果
- table-border - 带有边框
- table-condensd - 紧缩型表格
- table-responsive - 响应式表格，必须设置在table的父元素身上
表单（复制然后按需修改）
栅格式布局

Bootstrap组件

推荐：

导航条
巨幕 - banner
缩略图 - 图片文字上下，图文并茂 - 产品
媒体对象 - 左边或者右边放图片，另一边放文字 - 公司简介
面包屑导航/路径导航

不推荐：

字体图标
按钮组
分页条
标签
徽章
页头
警告框
进度条
well水井

Bootstrap插件

复制需要的插件，然后按需修改

栅格式布局

使用步骤：10步

必须放上一个容器： <div class="container/container-fluid"></div>
必须在此容器中放入行： <div class="row"></div>
必须在此容器中放入列： <div class="col-*-*"></div>
在不同的屏幕设置不同的列宽 col-lg/md/sm/xs-*
列宽：bootstrap将一行等分为了12份 col-屏幕-列宽（1-12）
更小的屏幕设置列宽可以管住更大屏幕
- lg - 只能管lg屏幕
- md - 只能管lg/md屏幕
- sm - 只能管lg/md/sm屏幕
- xs - 管所有
- 优先级：自己有，优先用自己的，自己没有优先用离自己近的
设置偏移：设置向左顶出几份
- col-屏幕-offset-列宽
- lg - 只能管lg屏幕
- md - 只能管lg/md屏幕
- sm - 只能管lg/md/sm屏幕
- xs - 管所有
- 优先级：自己有，优先用自己的，自己没有优先用离自己近的
设置在某个屏幕隐藏：只管自己屏幕，不管别人 hidden-屏幕
不推荐：列中可以继续嵌套行，一行又会分为12份，如果列太小了，什么都放不下
栅格式布局是一个怪异盒模型：设置间距要用border

Bootstrap定制：

直接写自己的覆盖它的 - 删除掉你覆盖的部分，不然会有一些无用的代码
在源代码6800行css中进行修改 - 找起来麻烦
作者们对推荐你：操作源代码
在线定制下载

动态样式语言（Less和Scss）

静态样式语言：css，他作为一门语言并不称职，没有语言必须拥有基础概念：变量、运算、函数、分支、循环...等等（语言所必备的基础概念都没有），导致大型项目中进行开发和维护都非常的麻烦 动态样式语言：在css的基础之上添加了语言必备的概念目的：简化css开发

市场上常用的动态样式语言：
1. sass/scss - 会css基本就会了，学习其中一个另一个也就会了
2. less - 会css基本就会了，学习其中一个另一个也就会了
3. stylus - 和css语法区别较大

Scss

sass/scss编译：sass/scss=(编译)=>css
- 原因：浏览器只认识css，不认识其他的动态样式语言，但是程序员书写动态样式语言又会减轻我们的负担，程序员写动态样式语言，但是要进行编译，页面上引入时引入的还是css
- 如何编译：
  1. vscode的人员：安装插件easy sass;//自动编译，一旦保存xx.scss就会自动生成一个xx.css
  2. HBuilder的人员：安装插件，//手动编译，对文件点击右键->编译
  3. 网上一大堆动态样式语言编译工具：例如：koloa
scss带来的新特性：
- 特性1：变量：
- 语法：$变量名: 值;
- 特殊：
  1. 使用时：$不能省略
  2. 可以创建局部变量，选择器{$局部变量名: 值;}
  3. 不区分中划线和下划线，都可以
- 特性2：嵌套：
```
举例：
    .d1{
        d1的样式
        .d2{d2的样式
            &:hover{hover样式}
        }
        >.d3{d3的样式}
    }

    编译后：
    .d1{d1的样式}
    .d1 .d2{d2的样式}
    .d1 .d2:hover{hover样式}
    .d1>.d3{d3的样式}
```
- 特殊：
  1. 层级选择器不写的话，默认使用后代选择器（空格）
  2. &：类似于javascript中的this，&包含在那个大括号里面就代表是谁
- 特性3：导入：
- 语法：@import "文件名"
  - @import：css也有，但是绝对不要再css使用，因为引入html后，js无法操作样式，但是scss可用
- 特性4：注释：提示自己或别人
- 不要使用单行注释，要使用多行注释才可以/****/
- 特性5：混合器：类似于javascript中的函数：
- 创建混合器@mixin 混合器名($形参:默认值,...){ width:$形参; }
- 调用混合器@include 混合器名();
- 特殊：
  1. 没有传入实参，使用默认值
  2. 如果传入实参，则使用实参
- 使用场景：先写代码，碰到重复多了时，则封装为一个函数
- 特殊6：运算：尤其是颜色值可以进行运算
```
举例：
                //#000000 - #ffffff
                //黑（暗）      白（亮）
                //0最小 - f最大
                //乘以个1.x，一定会让此数字变大不断的靠近白色
                //乘以个0.x，一定会让此数字变小不断的靠近黑色
```
- 特性7：分支和循环

Less

Less：和Scss有两点不同：

变量：@变量名:值;，需要区分中划线和下划线...
混合器：
- 创建： .混合器名(@形参:默认值,...){ width: @形参; ... }
- 使用： div{ .混合器名(); }

其余全部和Scss一样

从零开始的JavaScript学习之旅——Week 6